CommandBar / CommandBarButton style updates (#8804)

* work in progress * Add menu_button_classname, fix button_icon_classname * Import classnames from BaseButto.classNames * Add change file * Style updates * Update snapshot * Fix selector * update snapshots * Remove unnecessary color * Fix style selector order so rootCheckedHovered is after rootChecked
microsoft · Apr 23, 2019 · e63e2f8 · e63e2f8
1 parent a2ab3ac
commit e63e2f8
Show file tree

Hide file tree

Showing 17 changed files with 1,380 additions and 267 deletions.
diff --git a/...s/office-ui-fabric-react/edwl-2019-04-commandBarButtonStylesFabric7_2019-04-22-21-26.json b/...s/office-ui-fabric-react/edwl-2019-04-commandBarButtonStylesFabric7_2019-04-22-21-26.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Update CommandBar/CommandBarButton styles",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "edwl@microsoft.com"
+}
diff --git a/.../office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts b/.../office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts
@@ -3,13 +3,14 @@ import { ITheme, concatStyleSets, getFocusStyle, HighContrastSelector } from '..
 import { memoizeFunction } from '../../../Utilities';
 import { getStyles as getBaseButtonStyles } from '../BaseButton.styles';
 import { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';
+import { ButtonGlobalClassNames } from '../BaseButton.classNames';
 
 export const getStyles = memoizeFunction(
   (theme: ITheme, customStyles?: IButtonStyles, focusInset?: string, focusColor?: string): IButtonStyles => {
     const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
     const baseSplitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);
 
-    const { palette: p } = theme;
+    const { palette: p, semanticColors } = theme;
 
     const commandButtonHighContrastFocus = {
       left: 4,
@@ -25,7 +26,7 @@ export const getStyles = memoizeFunction(
         theme.fonts.small,
         {
           minWidth: '40px',
-          backgroundColor: 'transparent',
+          backgroundColor: p.white,
           color: p.neutralPrimary,
           padding: '0 4px',
           border: 'none',
@@ -44,28 +45,78 @@ export const getStyles = memoizeFunction(
         selectors: {
           [HighContrastSelector]: {
             color: 'Highlight'
+          },
+          [`.${ButtonGlobalClassNames.msButtonIcon}`]: {
+            color: p.themeDarkAlt
+          },
+          [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: {
+            color: p.neutralPrimary
           }
         }
       },
 
       rootPressed: {
         backgroundColor: p.neutralLight,
-        color: p.black
+        color: p.neutralDark,
+        selectors: {
+          [`.${ButtonGlobalClassNames.msButtonIcon}`]: {
+            color: p.themeDark
+          },
+          [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: {
+            color: p.neutralPrimary
+          }
+        }
       },
 
       rootChecked: {
         backgroundColor: p.neutralLight,
-        color: p.black
+        color: p.neutralDark,
+        selectors: {
+          [`.${ButtonGlobalClassNames.msButtonIcon}`]: {
+            color: p.themeDark
+          },
+          [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: {
+            color: p.neutralPrimary
+          }
+        }
+      },
+
+      rootCheckedHovered: {
+        backgroundColor: p.neutralQuaternaryAlt,
+        selectors: {
+          [`.${ButtonGlobalClassNames.msButtonIcon}`]: {
+            color: p.themeDark
+          },
+          [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: {
+            color: p.neutralPrimary
+          }
+        }
       },
 
       rootExpanded: {
         backgroundColor: p.neutralLight,
-        color: p.black
+        color: p.neutralDark,
+        selectors: {
+          [`.${ButtonGlobalClassNames.msButtonIcon}`]: {
+            color: p.themeDark
+          },
+          [`.${ButtonGlobalClassNames.msButtonMenuIcon}`]: {
+            color: p.neutralPrimary
+          }
+        }
       },
 
-      rootCheckedHovered: {
-        backgroundColor: p.neutralQuaternaryAlt,
-        color: p.black
+      rootExpandedHovered: {
+        backgroundColor: p.neutralQuaternaryAlt
+      },
+
+      rootDisabled: {
+        backgroundColor: p.white,
+        selectors: {
+          [`.${ButtonGlobalClassNames.msButtonIcon}`]: {
+            color: semanticColors.disabledBodySubtext
+          }
+        }
       },
 
       // Split button styles
@@ -84,36 +135,42 @@ export const getStyles = memoizeFunction(
       },
 
       splitButtonMenuButton: {
-        backgroundColor: 'transparent',
+        backgroundColor: p.white,
         border: 'none',
         borderTopRightRadius: '0',
         borderBottomRightRadius: '0',
-        color: p.neutralPrimary,
+        color: p.neutralSecondary,
         selectors: {
           ':hover': {
             backgroundColor: p.neutralLighter,
             color: p.neutralDark,
             selectors: {
               [HighContrastSelector]: {
                 color: 'Highlight'
+              },
+              [`.${ButtonGlobalClassNames.msButtonIcon}`]: {
+                color: p.neutralPrimary
+              }
+            }
+          },
+          ':active': {
+            backgroundColor: p.neutralLight,
+            selectors: {
+              [`.${ButtonGlobalClassNames.msButtonIcon}`]: {
+                color: p.neutralPrimary
               }
             }
           }
         }
       },
 
       splitButtonMenuButtonDisabled: {
-        backgroundColor: p.neutralLighter,
-        selectors: {
-          ':hover': {
-            backgroundColor: p.neutralLighter
-          }
-        }
+        backgroundColor: p.white
       },
 
       splitButtonMenuButtonChecked: {
         backgroundColor: p.neutralLight,
-        color: p.black,
+        color: p.neutralDark,
         selectors: {
           ':hover': {
             backgroundColor: p.neutralQuaternaryAlt
@@ -144,7 +201,7 @@ export const getStyles = memoizeFunction(
       },
 
       icon: {
-        color: p.themeDarkAlt
+        color: p.themePrimary
       },
 
       menuIcon: {

diff --git a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -131,7 +131,7 @@ exports[`Button renders CommandBarButton correctly 1`] = `
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
-        background-color: transparent;
+        background-color: #ffffff;
         border-radius: 0px;
         border: none;
         box-sizing: border-box;
@@ -190,9 +190,21 @@ exports[`Button renders CommandBarButton correctly 1`] = `
       @media screen and (-ms-high-contrast: active){&:hover {
         color: Highlight;
       }
+      &:hover .ms-Button-icon {
+        color: #106ebe;
+      }
+      &:hover .ms-Button-menuIcon {
+        color: #323130;
+      }
       &:active {
         background-color: #edebe9;
-        color: #000000;
+        color: #201f1e;
+      }
+      &:active .ms-Button-icon {
+        color: #005a9e;
+      }
+      &:active .ms-Button-menuIcon {
+        color: #323130;
       }
   data-is-focusable={true}
   onClick={[Function]}
@@ -220,7 +232,7 @@ exports[`Button renders CommandBarButton correctly 1`] = `
           {
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
-            color: #106ebe;
+            color: #0078d4;
             display: inline-block;
             flex-shrink: 0;
             font-family: "FabricMDL2Icons";

diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.styles.ts b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.styles.ts
@@ -4,14 +4,15 @@ const COMMAND_BAR_HEIGHT = 44;
 
 export const getStyles = (props: ICommandBarStyleProps): ICommandBarStyles => {
   const { className, theme } = props;
+  const { palette } = theme;
 
   return {
     root: [
       theme.fonts.small,
       'ms-CommandBar',
       {
         display: 'flex',
-        backgroundColor: 'transparent',
+        backgroundColor: palette.white,
         padding: '0 14px 0 24px',
         height: COMMAND_BAR_HEIGHT
       },

diff --git a/...-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap b/...-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.deprecated.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`CommandBar renders commands correctly 1`] = `
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
-              background-color: transparent;
+              background-color: #ffffff;
               display: flex;
               font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
@@ -73,7 +73,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
-                    background-color: transparent;
+                    background-color: #ffffff;
                     border-radius: 0px;
                     border: none;
                     box-sizing: border-box;
@@ -133,9 +133,21 @@ exports[`CommandBar renders commands correctly 1`] = `
                   @media screen and (-ms-high-contrast: active){&:hover {
                     color: Highlight;
                   }
+                  &:hover .ms-Button-icon {
+                    color: #106ebe;
+                  }
+                  &:hover .ms-Button-menuIcon {
+                    color: #323130;
+                  }
                   &:active {
                     background-color: #edebe9;
-                    color: #000000;
+                    color: #201f1e;
+                  }
+                  &:active .ms-Button-icon {
+                    color: #005a9e;
+                  }
+                  &:active .ms-Button-menuIcon {
+                    color: #323130;
                   }
               data-is-focusable={true}
               name="asdf"
@@ -202,7 +214,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
-                    background-color: transparent;
+                    background-color: #ffffff;
                     border-radius: 0px;
                     border: none;
                     box-sizing: border-box;
@@ -262,9 +274,21 @@ exports[`CommandBar renders commands correctly 1`] = `
                   @media screen and (-ms-high-contrast: active){&:hover {
                     color: Highlight;
                   }
+                  &:hover .ms-Button-icon {
+                    color: #106ebe;
+                  }
+                  &:hover .ms-Button-menuIcon {
+                    color: #323130;
+                  }
                   &:active {
                     background-color: #edebe9;
-                    color: #000000;
+                    color: #201f1e;
+                  }
+                  &:active .ms-Button-icon {
+                    color: #005a9e;
+                  }
+                  &:active .ms-Button-menuIcon {
+                    color: #323130;
                   }
               data-is-focusable={true}
               name="asdf"

diff --git a/...s/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/...s/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`CommandBar renders commands correctly 1`] = `
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
-              background-color: transparent;
+              background-color: #ffffff;
               display: flex;
               font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
@@ -73,7 +73,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
-                    background-color: transparent;
+                    background-color: #ffffff;
                     border-radius: 0px;
                     border: none;
                     box-sizing: border-box;
@@ -133,9 +133,21 @@ exports[`CommandBar renders commands correctly 1`] = `
                   @media screen and (-ms-high-contrast: active){&:hover {
                     color: Highlight;
                   }
+                  &:hover .ms-Button-icon {
+                    color: #106ebe;
+                  }
+                  &:hover .ms-Button-menuIcon {
+                    color: #323130;
+                  }
                   &:active {
                     background-color: #edebe9;
-                    color: #000000;
+                    color: #201f1e;
+                  }
+                  &:active .ms-Button-icon {
+                    color: #005a9e;
+                  }
+                  &:active .ms-Button-menuIcon {
+                    color: #323130;
                   }
               data-is-focusable={true}
               onClick={[Function]}
@@ -201,7 +213,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
-                    background-color: transparent;
+                    background-color: #ffffff;
                     border-radius: 0px;
                     border: none;
                     box-sizing: border-box;
@@ -261,9 +273,21 @@ exports[`CommandBar renders commands correctly 1`] = `
                   @media screen and (-ms-high-contrast: active){&:hover {
                     color: Highlight;
                   }
+                  &:hover .ms-Button-icon {
+                    color: #106ebe;
+                  }
+                  &:hover .ms-Button-menuIcon {
+                    color: #323130;
+                  }
                   &:active {
                     background-color: #edebe9;
-                    color: #000000;
+                    color: #201f1e;
+                  }
+                  &:active .ms-Button-icon {
+                    color: #005a9e;
+                  }
+                  &:active .ms-Button-menuIcon {
+                    color: #323130;
                   }
               data-is-focusable={true}
               onClick={[Function]}