Fix bug: azure-theme CommandBar styles (#13959)

* Azure-theme command bar and command bar button style updates * Change files Co-authored-by: Jackie <jagaheri@microsoft.com>
microsoft · Jul 10, 2020 · 8df4df3 · 8df4df3
1 parent d43db14
commit 8df4df3
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 11 deletions.
diff --git a/change/@uifabric-azure-themes-2020-07-08-21-33-56-jackieg-azuretheme-commandbar.json b/change/@uifabric-azure-themes-2020-07-08-21-33-56-jackieg-azuretheme-commandbar.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "packageName": "@uifabric/azure-themes",
+  "email": "jagaheri@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-07-09T04:33:56.096Z"
+}
diff --git a/packages/azure-themes/src/azure/AzureColors.ts b/packages/azure-themes/src/azure/AzureColors.ts
@@ -33,6 +33,7 @@ export namespace BaseColors {
   export const PURPLE_C87FDC = '#c87fdc';
   export const PURPLE_8A2DA5 = '#8a2da5';
   export const PURPLE_471754 = '#471754';
+  export const GRAY_CCCCCC = '#CCCCCC';
   export const GRAY_111111 = '#111111';
   export const GRAY_161616 = '#161616';
   export const GRAY_1B1A19 = '#1b1a19';
@@ -202,6 +203,9 @@ export const DarkSemanticColors: IAzureSemanticColors = {
       backrgound: BaseColors.GRAY_484644,
     },
   },
+  commandBar: {
+    border: BaseColors.GRAY_605E5C,
+  },
 };
 
 export const LightSemanticColors: IAzureSemanticColors = {
@@ -298,4 +302,7 @@ export const LightSemanticColors: IAzureSemanticColors = {
       backrgound: BaseColors.WHITE,
     },
   },
+  commandBar: {
+    border: BaseColors.GRAY_CCCCCC,
+  },
 };
diff --git a/packages/azure-themes/src/azure/AzureThemeDark.ts b/packages/azure-themes/src/azure/AzureThemeDark.ts
@@ -5,6 +5,7 @@ import { FontSizes } from './AzureType';
 import * as StyleConstants from './Constants';
 
 const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
+  commandBarBorder: DarkSemanticColors.commandBar.border,
   bodyBackground: DarkSemanticColors.background,
   bodyText: DarkSemanticColors.text.body,
   bodyTextHovered: DarkSemanticColors.text.bodyHovered,

diff --git a/packages/azure-themes/src/azure/AzureThemeLight.ts b/packages/azure-themes/src/azure/AzureThemeLight.ts
@@ -5,6 +5,7 @@ import { FontSizes } from './AzureType';
 import * as StyleConstants from './Constants';
 
 const lightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
+  commandBarBorder: LightSemanticColors.commandBar.border,
   bodyBackground: LightSemanticColors.background,
   bodyText: LightSemanticColors.text.body,
   bodyTextHovered: LightSemanticColors.text.bodyHovered,

diff --git a/packages/azure-themes/src/azure/IAzureSemanticColors.ts b/packages/azure-themes/src/azure/IAzureSemanticColors.ts
@@ -92,4 +92,7 @@ export interface IAzureSemanticColors {
       backrgound: string;
     };
   };
+  commandBar: {
+    border: string;
+  };
 }
diff --git a/packages/azure-themes/src/azure/IExtendedSemanticColors.ts b/packages/azure-themes/src/azure/IExtendedSemanticColors.ts
@@ -1,6 +1,15 @@
 import { ISemanticColors } from 'office-ui-fabric-react';
 
 export interface IExtendedSemanticColors extends ISemanticColors {
+  bodyTextHovered: string;
+  checkBoxBorder: string;
+  checkBoxBorderChecked: string;
+  checkBoxCheckHover: string;
+  checkBoxDisabled: string;
+  checkBoxCheckedFocus: string;
+  checkBoxIndeterminateDefaultChecked: string;
+  checkBoxIndeterminateBackground: string;
+  commandBarBorder: string;
   inputBorderPressed: string;
   labelText: string;
   controlOutline: string;
@@ -20,13 +29,4 @@ export interface IExtendedSemanticColors extends ISemanticColors {
   statusWarningText: string;
   statusWarningIcon: string;
   toggleDisabledBackground: string;
-
-  checkBoxBorder: string;
-  checkBoxBorderChecked: string;
-  checkBoxDisabled: string;
-  checkBoxCheckedFocus: string;
-  checkBoxIndeterminateDefaultChecked: string;
-  checkBoxIndeterminateBackground: string;
-  checkBoxCheckHover: string;
-  bodyTextHovered: string;
 }
diff --git a/packages/azure-themes/src/azure/styles/CommandBar.styles.ts b/packages/azure-themes/src/azure/styles/CommandBar.styles.ts
@@ -1,17 +1,21 @@
 import { ICommandBarStyleProps, ICommandBarStyles } from 'office-ui-fabric-react/lib/CommandBar';
 import * as StyleConstants from '../Constants';
+import { IExtendedSemanticColors } from '../IExtendedSemanticColors';
 
 export const CommandBarStyles = (props: ICommandBarStyleProps): Partial<ICommandBarStyles> => {
   const { theme } = props;
   const { semanticColors } = theme;
+  const extendedSemanticColors = semanticColors as IExtendedSemanticColors;
 
   return {
     root: [
       {
         backgroundColor: semanticColors.bodyBackground,
+        height: '36px',
         borderBottomWidth: StyleConstants.borderWidth,
         borderBottomStyle: StyleConstants.borderSolid,
-        borderBottomColor: semanticColors.inputBorder,
+        borderBottomColor: extendedSemanticColors.commandBarBorder,
+        padding: 0,
       },
     ],
   };

diff --git a/packages/azure-themes/src/azure/styles/CommandBarButton.styles.ts b/packages/azure-themes/src/azure/styles/CommandBarButton.styles.ts
@@ -18,6 +18,8 @@ export const CommandBarButtonStyles = (theme: ITheme): Partial<IButtonStyles> =>
       fontSize: FontSizes.size13,
       backgroundColor: semanticColors.bodyBackground,
       color: semanticColors.bodyText,
+      paddingLeft: 4,
+      paddingRight: 4,
     },
     rootExpanded: {
       backgroundColor: semanticColors.menuItemBackgroundHovered,

diff --git a/packages/azure-themes/src/stories/Themes/Themes.tsx b/packages/azure-themes/src/stories/Themes/Themes.tsx
@@ -28,10 +28,12 @@ import { ColorPickerBasicExample } from '../components/colorpicker';
 import { ComboBoxBasicExample } from '../components/comboBox';
 import { ContextualMenuDefaultExample } from '../components/ContextMenu';
 import { DropdownBasicExample } from '../components/dropdown';
+import { CommandBarBasicExample } from '../components/commandBar';
 
 const Example = () => (
   // tslint:disable-next-line:jsx-ban-props
-  <Stack gap={8} horizontalAlign="center" style={{ maxWidth: 400 }}>
+  <Stack gap={8} horizontalAlign="center" style={{ maxWidth: 1000 }}>
+    <CommandBarBasicExample />
     <DefaultButton text="DefaultButton" />
     <PrimaryButton text="PrimaryButton" />
     <CompoundButton primary text="CompoundButton" />

diff --git a/packages/azure-themes/src/stories/components/commandBar.tsx b/packages/azure-themes/src/stories/components/commandBar.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { CommandBar, ICommandBarItemProps } from 'office-ui-fabric-react/lib/CommandBar';
+import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
+
+const overflowProps: IButtonProps = { ariaLabel: 'More commands' };
+
+export const CommandBarBasicExample: React.FunctionComponent = () => {
+  return (
+    <div>
+      <CommandBar
+        items={_items}
+        overflowItems={_overflowItems}
+        overflowButtonProps={overflowProps}
+        farItems={_farItems}
+        ariaLabel="Use left and right arrow keys to navigate between commands"
+      />
+    </div>
+  );
+};
+
+const _items: ICommandBarItemProps[] = [
+  {
+    key: 'newItem',
+    text: 'Add',
+    cacheKey: 'myCacheKey', // changing this key will invalidate this item's cache
+    iconProps: { iconName: 'Add' },
+    // subMenuProps: {
+    //   items: [
+    //     {
+    //       key: 'emailMessage',
+    //       text: 'Email message',
+    //       iconProps: { iconName: 'Mail' },
+    //       ['data-automation-id']: 'newEmailButton', // optional
+    //     },
+    //     {
+    //       key: 'calendarEvent',
+    //       text: 'Calendar event',
+    //       iconProps: { iconName: 'Calendar' },
+    //     },
+    //   ],
+    // },
+  },
+  {
+    key: 'upload',
+    text: 'Upload',
+    iconProps: { iconName: 'Upload' },
+    href: 'https://developer.microsoft.com/en-us/fluentui',
+  },
+  {
+    key: 'share',
+    text: 'Share',
+    iconProps: { iconName: 'Share' },
+    onClick: () => console.log('Share'),
+  },
+  {
+    key: 'download',
+    text: 'Download',
+    iconProps: { iconName: 'Download' },
+    onClick: () => console.log('Download'),
+  },
+];
+
+const _overflowItems: ICommandBarItemProps[] = [
+  { key: 'move', text: 'Move to...', onClick: () => console.log('Move to'), iconProps: { iconName: 'MoveToFolder' } },
+  { key: 'copy', text: 'Copy to...', onClick: () => console.log('Copy to'), iconProps: { iconName: 'Copy' } },
+  { key: 'rename', text: 'Rename...', onClick: () => console.log('Rename'), iconProps: { iconName: 'Edit' } },
+];
+
+const _farItems: ICommandBarItemProps[] = [
+  {
+    key: 'tile',
+    text: 'Grid view',
+    // This needs an ariaLabel since it's icon-only
+    ariaLabel: 'Grid view',
+    iconOnly: true,
+    iconProps: { iconName: 'Tiles' },
+    onClick: () => console.log('Tiles'),
+  },
+  {
+    key: 'info',
+    text: 'Info',
+    // This needs an ariaLabel since it's icon-only
+    ariaLabel: 'Info',
+    iconOnly: true,
+    iconProps: { iconName: 'Info' },
+    onClick: () => console.log('Info'),
+  },
+];