IconButton: add color to IconButton so it can be themed. (#6511)

* Add amd change colors on IconButton styles Update snapshots * Rush change log
microsoft · Oct 11, 2018 · a0f35e5 · a0f35e5
1 parent 3225f2f
commit a0f35e5
Show file tree

Hide file tree

Showing 14 changed files with 66 additions and 29 deletions.
diff --git a/common/changes/office-ui-fabric-react/v-vibr-IconButton_Color_2018-09-28-19-52.json b/common/changes/office-ui-fabric-react/v-vibr-IconButton_Color_2018-09-28-19-52.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "IconButton: Specifiy the color of the icon in IconButton so that it can be themed and change the hover color for the same reasons.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-vibr@microsoft.com"
+}
diff --git a/...s/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/...s/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -425,6 +425,7 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 2 1`] = `
                     border-radius: 0px;
                     border: none;
                     box-sizing: border-box;
+                    color: #333333;
                     cursor: pointer;
                     display: inline-block;
                     font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -475,7 +476,7 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 2 1`] = `
                   }
                   &:hover {
                     background-color: #f4f4f4;
-                    color: #004578;
+                    color: #212121;
                   }
                   @media screen and (-ms-high-contrast: active){&:hover {
                     border-color: Highlight;
@@ -1137,6 +1138,7 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 4 1`] = `
                     border-radius: 0px;
                     border: none;
                     box-sizing: border-box;
+                    color: #333333;
                     cursor: pointer;
                     display: inline-block;
                     font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -1187,7 +1189,7 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 4 1`] = `
                   }
                   &:hover {
                     background-color: #f4f4f4;
-                    color: #004578;
+                    color: #212121;
                   }
                   @media screen and (-ms-high-contrast: active){&:hover {
                     border-color: Highlight;
@@ -1504,6 +1506,7 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 5 1`] = `
                     border-radius: 0px;
                     border: none;
                     box-sizing: border-box;
+                    color: #333333;
                     cursor: pointer;
                     display: inline-block;
                     font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -1554,7 +1557,7 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 5 1`] = `
                   }
                   &:hover {
                     background-color: #f4f4f4;
-                    color: #004578;
+                    color: #212121;
                   }
                   @media screen and (-ms-high-contrast: active){&:hover {
                     border-color: Highlight;
@@ -1713,6 +1716,7 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 6 1`] = `
                     border-radius: 0px;
                     border: none;
                     box-sizing: border-box;
+                    color: #333333;
                     cursor: pointer;
                     display: inline-block;
                     font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -1763,7 +1767,7 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 6 1`] = `
                   }
                   &:hover {
                     background-color: #f4f4f4;
-                    color: #004578;
+                    color: #212121;
                   }
                   @media screen and (-ms-high-contrast: active){&:hover {
                     border-color: Highlight;

diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts
@@ -15,11 +15,12 @@ export const getStyles = memoizeFunction(
         width: '32px',
         height: '32px',
         backgroundColor: 'transparent',
-        border: 'none'
+        border: 'none',
+        color: semanticColors.actionLink
       },
 
       rootHovered: {
-        color: palette.themeDarker,
+        color: semanticColors.actionLinkHovered,
         selectors: {
           [HighContrastSelector]: {
             borderColor: 'Highlight',

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
@@ -578,6 +578,7 @@ exports[`Button renders IconButton correctly 1`] = `
         border-radius: 0px;
         border: none;
         box-sizing: border-box;
+        color: #333333;
         cursor: pointer;
         display: inline-block;
         font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -624,7 +625,7 @@ exports[`Button renders IconButton correctly 1`] = `
         top: 0px;
       }
       &:hover {
-        color: #004578;
+        color: #212121;
       }
       @media screen and (-ms-high-contrast: active){&:hover {
         border-color: Highlight;

diff --git a/...-ui-fabric-react/src/components/TeachingBubble/__snapshots__/TeachingBubble.test.tsx.snap b/...-ui-fabric-react/src/components/TeachingBubble/__snapshots__/TeachingBubble.test.tsx.snap
@@ -637,7 +637,7 @@ exports[`TeachingBubble renders TeachingBubbleContent with buttons correctly 1`]
         }
         &:hover {
           background: transparent;
-          color: #004578;
+          color: #212121;
         }
         @media screen and (-ms-high-contrast: active){&:hover {
           border-color: Highlight;

diff --git a/...ges/office-ui-fabric-react/src/components/__snapshots__/Breadcrumb.Basic.Example.tsx.shot b/...ges/office-ui-fabric-react/src/components/__snapshots__/Breadcrumb.Basic.Example.tsx.shot
@@ -2047,6 +2047,7 @@ exports[`Component Examples renders Breadcrumb.Basic.Example.tsx correctly 1`] =
                       border-radius: 0px;
                       border: none;
                       box-sizing: border-box;
+                      color: #333333;
                       cursor: pointer;
                       display: inline-block;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -2097,7 +2098,7 @@ exports[`Component Examples renders Breadcrumb.Basic.Example.tsx correctly 1`] =
                     }
                     &:hover {
                       background-color: #f4f4f4;
-                      color: #004578;
+                      color: #212121;
                     }
                     @media screen and (-ms-high-contrast: active){&:hover {
                       border-color: Highlight;
@@ -2774,6 +2775,7 @@ exports[`Component Examples renders Breadcrumb.Basic.Example.tsx correctly 1`] =
                       border-radius: 0px;
                       border: none;
                       box-sizing: border-box;
+                      color: #333333;
                       cursor: pointer;
                       display: inline-block;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -2824,7 +2826,7 @@ exports[`Component Examples renders Breadcrumb.Basic.Example.tsx correctly 1`] =
                     }
                     &:hover {
                       background-color: #f4f4f4;
-                      color: #004578;
+                      color: #212121;
                     }
                     @media screen and (-ms-high-contrast: active){&:hover {
                       border-color: Highlight;

diff --git a/...es/office-ui-fabric-react/src/components/__snapshots__/Breadcrumb.Static.Example.tsx.shot b/...es/office-ui-fabric-react/src/components/__snapshots__/Breadcrumb.Static.Example.tsx.shot
@@ -86,6 +86,7 @@ exports[`Component Examples renders Breadcrumb.Static.Example.tsx correctly 1`]
                       border-radius: 0px;
                       border: none;
                       box-sizing: border-box;
+                      color: #333333;
                       cursor: pointer;
                       display: inline-block;
                       font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -136,7 +137,7 @@ exports[`Component Examples renders Breadcrumb.Static.Example.tsx correctly 1`]
                     }
                     &:hover {
                       background-color: #f4f4f4;
-                      color: #004578;
+                      color: #212121;
                     }
                     @media screen and (-ms-high-contrast: active){&:hover {
                       border-color: Highlight;

diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Button.Icon.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Button.Icon.Example.tsx.shot
@@ -23,6 +23,7 @@ exports[`Component Examples renders Button.Icon.Example.tsx correctly 1`] = `
           border-radius: 0px;
           border: none;
           box-sizing: border-box;
+          color: #333333;
           cursor: pointer;
           display: inline-block;
           font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -69,7 +70,7 @@ exports[`Component Examples renders Button.Icon.Example.tsx correctly 1`] = `
           top: 0px;
         }
         &:hover {
-          color: #004578;
+          color: #212121;
         }
         @media screen and (-ms-high-contrast: active){&:hover {
           border-color: Highlight;

diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Button.Split.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Button.Split.Example.tsx.shot
@@ -1322,6 +1322,7 @@ exports[`Component Examples renders Button.Split.Example.tsx correctly 2`] = `
               border-radius: 0px;
               border: none;
               box-sizing: border-box;
+              color: #333333;
               cursor: pointer;
               display: inline-block;
               font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -1368,7 +1369,7 @@ exports[`Component Examples renders Button.Split.Example.tsx correctly 2`] = `
               top: 0px;
             }
             &:hover {
-              color: #004578;
+              color: #212121;
             }
             @media screen and (-ms-high-contrast: active){&:hover {
               border-color: Highlight;

diff --git a/...-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot b/...-fabric-react/src/components/__snapshots__/CommandBar.CommandBarButtonAs.Example.tsx.shot
@@ -2259,7 +2259,7 @@ exports[`Component Examples renders CommandBar.CommandBarButtonAs.Example.tsx co
                                           }
                                           &:hover {
                                             background: transparent;
-                                            color: #004578;
+                                            color: #212121;
                                           }
                                           @media screen and (-ms-high-contrast: active){&:hover {
                                             border-color: Highlight;

diff --git a/...ffice-ui-fabric-react/src/components/__snapshots__/DocumentCard.Complete.Example.tsx.shot b/...ffice-ui-fabric-react/src/components/__snapshots__/DocumentCard.Complete.Example.tsx.shot
@@ -390,6 +390,7 @@ exports[`Component Examples renders DocumentCard.Complete.Example.tsx correctly
                 border-radius: 0px;
                 border: none;
                 box-sizing: border-box;
+                color: #333333;
                 cursor: pointer;
                 display: inline-block;
                 font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -436,7 +437,7 @@ exports[`Component Examples renders DocumentCard.Complete.Example.tsx correctly
                 top: 0px;
               }
               &:hover {
-                color: #004578;
+                color: #212121;
               }
               @media screen and (-ms-high-contrast: active){&:hover {
                 border-color: Highlight;
@@ -511,6 +512,7 @@ exports[`Component Examples renders DocumentCard.Complete.Example.tsx correctly
                 border-radius: 0px;
                 border: none;
                 box-sizing: border-box;
+                color: #333333;
                 cursor: pointer;
                 display: inline-block;
                 font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -557,7 +559,7 @@ exports[`Component Examples renders DocumentCard.Complete.Example.tsx correctly
                 top: 0px;
               }
               &:hover {
-                color: #004578;
+                color: #212121;
               }
               @media screen and (-ms-high-contrast: active){&:hover {
                 border-color: Highlight;
@@ -632,6 +634,7 @@ exports[`Component Examples renders DocumentCard.Complete.Example.tsx correctly
                 border-radius: 0px;
                 border: none;
                 box-sizing: border-box;
+                color: #333333;
                 cursor: pointer;
                 display: inline-block;
                 font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
@@ -678,7 +681,7 @@ exports[`Component Examples renders DocumentCard.Complete.Example.tsx correctly
                 top: 0px;
               }
               &:hover {
-                color: #004578;
+                color: #212121;
               }
               @media screen and (-ms-high-contrast: active){&:hover {
                 border-color: Highlight;