Azure Theme: toggle & commandbar style updates

change/@fluentui-azure-themes-fde6e654-0910-4897-912e-842bf2024601.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "azure theme calendar selection, contextmenu border, pivot focus border, dropdown item size updates",
+  "packageName": "@fluentui/azure-themes",
+  "email": "30805892+Jacqueline-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/azure-themes/src/azure/Constants.ts

@@ -12,6 +12,7 @@ export const borderWidth = '1px';
 export const buttonPadding = '0px 16px';
 export const calendarHeightInner = '22px';
 export const choiceFieldHeight = '18px';
+export const choiceFieldCircle = '10px';
 export const commandBarHeight = '36px';
 export const dropDownItemHeight = '32px';
 export const fontFamily =
@@ -24,6 +25,5 @@ export const inputControlPadding = '12px';
 export const MinimumScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);
 export const MediumScreenSelector = getScreenSelector(ScreenWidthMinMedium, ScreenWidthMaxMedium);
 export const spinButtonArrowHeight = '14px';
-export const spinButtonHeight = '25px';
 export const textAlignCenter = 'center';
 export const transparent = 'transparent';

packages/azure-themes/src/azure/styles/ActionButton.styles.ts

@@ -22,7 +22,6 @@ export const ActionButtonStyles = (theme: ITheme): Partial<IButtonStyles> => {
       ...iconColor(extendedSemanticColors.iconButtonFill),
     },
     rootDisabled: {
-      border: `${StyleConstants.borderWidth} solid ${extendedSemanticColors.primaryButtonBorderDisabled} !important`,
       backgroundColor: semanticColors.primaryButtonBackgroundDisabled,
       color: semanticColors.primaryButtonTextDisabled,
       ...iconColor(semanticColors.primaryButtonTextDisabled),

packages/azure-themes/src/azure/styles/SpinButton.styles.ts

@@ -11,11 +11,11 @@ export const SpinButtonStyles: IStyleFunction<ISpinButtonStyleProps, ISpinButton
     root: {
       selectors: {
         'div[class^="spinButtonWrapper-"]': {
-          height: StyleConstants.spinButtonHeight,
+          height: StyleConstants.inputControlHeight,
         },
         'div[class^="labelWrapper-"]': {
           height: StyleConstants.inputControlHeight,
-          padding: '1px 0px 5px 0',
+          padding: '4px 0px 2px 0px',
         },
         button: {
           i: {

packages/azure-themes/src/azure/styles/Toggle.styles.ts

@@ -1,5 +1,6 @@
 import { IExtendedSemanticColors } from '../IExtendedSemanticColors';
 import { IToggleStyleProps, IToggleStyles } from '@fluentui/react/lib/Toggle';
+import * as StyleConstants from '../Constants';
 
 export const ToggleStyles = (props: IToggleStyleProps): Partial<IToggleStyles> => {
   const { theme, disabled, checked } = props;
@@ -10,6 +11,7 @@ export const ToggleStyles = (props: IToggleStyleProps): Partial<IToggleStyles> =
     container: {},
     pill: [
       {
+        height: StyleConstants.choiceFieldHeight,
         backgroundColor: semanticColors.bodyBackground,
         selectors: {
           '&:hover': {
@@ -63,6 +65,11 @@ export const ToggleStyles = (props: IToggleStyleProps): Partial<IToggleStyles> =
     ],
     // toggle circle
     thumb: [
+      {
+        borderWidth: 5.5,
+        height: StyleConstants.choiceFieldCircle,
+        width: StyleConstants.choiceFieldCircle,
+      },
       checked && [
         {
           backgroundColor: extendedSemanticColors.buttonBackground,

packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx

@@ -7,7 +7,7 @@ import {
   AzureThemeHighContrastDark,
 } from '@fluentui/azure-themes';
 import { DefaultButton, CompoundButton, PrimaryButton } from '@fluentui/react/lib/Button';
-import { ButtonCommandBarExample } from '../components/commandBarButton.stories';
+import { CommandBarSplitDisabledExample } from '../components/commandBarButton.stories';
 import { ButtonSplitExample } from '../components/splitButton.stories';
 import { ButtonIconExample } from '../components/iconButton.stories';
 import { ButtonIconWithTooltipExample } from '../components/iconTooltip.stories';
@@ -64,7 +64,8 @@ const Example = () => (
       <Label disabled>I am a disabled label</Label>
       <Label>Icon Buttons</Label>
       <ButtonIconExample checked={false} />
-      <ButtonCommandBarExample />
+      <Label>CommandBarSplitDisabledExample</Label>
+      <CommandBarSplitDisabledExample />
       <ButtonIconWithTooltipExample />
       <ButtonContextualMenuExample />
       <ButtonActionExample />

packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx

@@ -18,7 +18,9 @@ export const ButtonActionExample: React.FunctionComponent<IButtonExampleProps> =
       <ActionButton iconProps={addFriendIcon} allowDisabledFocus disabled={disabled} checked={false}>
         Create account
       </ActionButton>
-
+      <ActionButton iconProps={addFriendIcon} allowDisabledFocus disabled={true} checked={false}>
+        Disabled
+      </ActionButton>
       <ActionButton iconProps={addFriendIcon} allowDisabledFocus disabled={disabled} checked={true}>
         Button checked
       </ActionButton>

packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx

@@ -24,6 +24,7 @@ const _items: ICommandBarItemProps[] = [
     text: 'Add',
     cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache
     iconProps: { iconName: 'Add' },
+    diabled: true,
     subMenuProps: {
       items: [
         {

packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx

@@ -1,48 +1,60 @@
 import * as React from 'react';
-import { IContextualMenuProps, IIconProps, Stack, IStackStyles } from '@fluentui/react';
-import { CommandBarButton } from '@fluentui/react/lib/Button';
+import { CommandBar, ICommandBarItemProps } from '@fluentui/react/lib/CommandBar';
+import { IButtonProps } from '@fluentui/react/lib/Button';
 
-export interface IButtonExampleProps {
-  // These are set based on the toggles shown above the examples (not needed in real code)
-  disabled?: boolean;
-  checked?: boolean;
-}
+const overflowButtonProps: IButtonProps = { ariaLabel: 'More commands' };
 
-const menuProps: IContextualMenuProps = {
-  items: [
-    {
-      key: 'emailMessage',
-      text: 'Email message',
-      iconProps: { iconName: 'Mail' },
-    },
-    {
-      key: 'calendarEvent',
-      text: 'Calendar event',
-      iconProps: { iconName: 'Calendar' },
-    },
-  ],
-};
-const addIcon: IIconProps = { iconName: 'Add' };
-const mailIcon: IIconProps = { iconName: 'Mail' };
-const stackStyles: Partial<IStackStyles> = { root: { height: 44 } };
-
-export const ButtonCommandBarExample: React.FunctionComponent<IButtonExampleProps> = props => {
-  const { disabled, checked } = props;
-
-  // Here we use a Stack to simulate a command bar.
-  // The real CommandBar control also uses CommandBarButtons internally.
+export const CommandBarSplitDisabledExample: React.FunctionComponent = () => {
   return (
-    <Stack horizontal styles={stackStyles}>
-      <CommandBarButton
-        iconProps={addIcon}
-        text="New item"
-        // Set split=true to render a SplitButton instead of a regular button with a menu
-        split={true}
-        menuProps={menuProps}
-        disabled={disabled}
-        checked={checked}
-      />
-      <CommandBarButton iconProps={mailIcon} text="Send mail" disabled={disabled} checked={checked} />
-    </Stack>
+    <div>
+      <CommandBar items={_items} overflowButtonProps={overflowButtonProps} />
+    </div>
   );
 };
+
+const _items: ICommandBarItemProps[] = [
+  {
+    key: 'newItem',
+    text: 'New',
+    iconProps: { iconName: 'Add' },
+    split: true,
+    ariaLabel: 'New',
+    splitButtonAriaLabel: 'More New options',
+    subMenuProps: {
+      items: [
+        { key: 'emailMessage', text: 'Email message', iconProps: { iconName: 'Mail' } },
+        { key: 'calendarEvent', text: 'Calendar event', iconProps: { iconName: 'Calendar' } },
+      ],
+    },
+  },
+  {
+    key: 'upload',
+    text: 'Upload',
+    iconProps: { iconName: 'Upload' },
+    split: true,
+    ariaLabel: 'Upload',
+    splitButtonAriaLabel: 'More Upload options',
+    disabled: true,
+    href: 'https://developer.microsoft.com/en-us/fluentui',
+    subMenuProps: {
+      items: [
+        { key: 'item1', text: 'Item One' },
+        { key: 'item2', text: 'Item Two' },
+      ],
+    },
+  },
+  {
+    key: 'share',
+    text: 'Share',
+    iconProps: { iconName: 'Share' },
+    disabled: true,
+  },
+  {
+    key: 'download',
+    text: 'Download',
+    ariaLabel: 'Download',
+    iconProps: { iconName: 'Download' },
+    iconOnly: true,
+    disabled: true,
+  },
+];