From 94d986f548c5da80ca01a05747e8711ebfdfdf5f Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 9 Apr 2018 14:09:02 -0700 Subject: [PATCH 1/6] Fix IconButton styles for hover, focus, and pressed. --- .../src/components/Button/IconButton/IconButton.styles.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 index 7792c4b2551b0..0ddeccf3cd4d0 100644 --- 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 @@ -26,11 +26,15 @@ export const getStyles = memoizeFunction(( }, rootHovered: { - color: theme.palette.themeDarker + backgroundColor: theme.palette.neutralLighter, + }, + + rootFocused: { + border: `1px solid ${theme.palette.neutralSecondary}`, }, rootPressed: { - color: theme.palette.themePrimary + backgroundColor: theme.palette.neutralLight, }, rootExpanded: { From b4ef0c4a05d01fd577215a47d637dc9881c3c32a Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 9 Apr 2018 14:12:40 -0700 Subject: [PATCH 2/6] Add color back. --- .../src/components/Button/IconButton/IconButton.styles.ts | 2 ++ 1 file changed, 2 insertions(+) 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 index 0ddeccf3cd4d0..b7703d197f055 100644 --- 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 @@ -26,6 +26,7 @@ export const getStyles = memoizeFunction(( }, rootHovered: { + color: theme.palette.themeDarker, backgroundColor: theme.palette.neutralLighter, }, @@ -34,6 +35,7 @@ export const getStyles = memoizeFunction(( }, rootPressed: { + color: theme.palette.themePrimary, backgroundColor: theme.palette.neutralLight, }, From 72d0b4f22297ff21bb78e30d387719d19a21ee4b Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 9 Apr 2018 14:15:03 -0700 Subject: [PATCH 3/6] Update snapshots, add change file. --- ...IconButton-states-background_2018-04-09-21-14.json | 11 +++++++++++ .../Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap | 5 +++++ .../Button/__snapshots__/Button.test.tsx.snap | 5 +++++ .../ComboBox/__snapshots__/ComboBox.test.tsx.snap | 3 +++ .../SpinButton/__snapshots__/SpinButton.test.tsx.snap | 6 ++++++ 5 files changed, 30 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/hotfix-IconButton-states-background_2018-04-09-21-14.json diff --git a/common/changes/office-ui-fabric-react/hotfix-IconButton-states-background_2018-04-09-21-14.json b/common/changes/office-ui-fabric-react/hotfix-IconButton-states-background_2018-04-09-21-14.json new file mode 100644 index 0000000000000..b3bd31c366806 --- /dev/null +++ b/common/changes/office-ui-fabric-react/hotfix-IconButton-states-background_2018-04-09-21-14.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fix IconButton state styles", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "jordanjanzen@jordanjanzen.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index 288b828f23dcf..ee24aace17280 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -242,9 +242,14 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = ` top: -2px; } &:hover { + background-color: #f4f4f4; color: #004578; } + &:focus { + border: 1px solid #666666; + } &:active { + background-color: #eaeaea; color: #0078d4; } data-is-focusable={true} 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 index 3ab6ab56d0c6f..394db05830959 100644 --- 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 @@ -571,9 +571,14 @@ exports[`Button renders IconButton correctly 1`] = ` top: -2px; } &:hover { + background-color: #f4f4f4; color: #004578; } + &:focus { + border: 1px solid #666666; + } &:active { + background-color: #eaeaea; color: #0078d4; } data-is-focusable={true} diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap index 4021026e6c9e7..a7ec31e6fdcea 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap @@ -224,6 +224,9 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` color: #212121; cursor: pointer; } + &:focus { + border: 1px solid #666666; + } &:active { background-color: #eaeaea; color: #212121; diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap index 2e4db82ba4d66..f4d7974e3b067 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap @@ -205,6 +205,9 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` background-color: #eaeaea; color: #000000; } + &:focus { + border: 1px solid #666666; + } &:active { background-color: #c8c8c8; color: #212121; @@ -318,6 +321,9 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` background-color: #eaeaea; color: #000000; } + &:focus { + border: 1px solid #666666; + } &:active { background-color: #c8c8c8; color: #212121; From 5769cc38d0af10fb33fbf9431c4b283d6babfd29 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 9 Apr 2018 14:48:26 -0700 Subject: [PATCH 4/6] Remove focus styles --- .../src/components/Button/IconButton/IconButton.styles.ts | 4 ---- 1 file changed, 4 deletions(-) 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 index b7703d197f055..99301a92f1e32 100644 --- 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 @@ -30,10 +30,6 @@ export const getStyles = memoizeFunction(( backgroundColor: theme.palette.neutralLighter, }, - rootFocused: { - border: `1px solid ${theme.palette.neutralSecondary}`, - }, - rootPressed: { color: theme.palette.themePrimary, backgroundColor: theme.palette.neutralLight, From e7422c3a3477b9d6fdcaab200f149ecf65ed8b98 Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 9 Apr 2018 14:50:06 -0700 Subject: [PATCH 5/6] update snapshots --- .../Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap | 3 --- .../components/Button/__snapshots__/Button.test.tsx.snap | 3 --- .../ComboBox/__snapshots__/ComboBox.test.tsx.snap | 3 --- .../SpinButton/__snapshots__/SpinButton.test.tsx.snap | 6 ------ 4 files changed, 15 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap index ee24aace17280..52d3ff04150f1 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap @@ -245,9 +245,6 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = ` background-color: #f4f4f4; color: #004578; } - &:focus { - border: 1px solid #666666; - } &:active { background-color: #eaeaea; color: #0078d4; 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 index 394db05830959..d19ca6d1df818 100644 --- 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 @@ -574,9 +574,6 @@ exports[`Button renders IconButton correctly 1`] = ` background-color: #f4f4f4; color: #004578; } - &:focus { - border: 1px solid #666666; - } &:active { background-color: #eaeaea; color: #0078d4; diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap index a7ec31e6fdcea..4021026e6c9e7 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap @@ -224,9 +224,6 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` color: #212121; cursor: pointer; } - &:focus { - border: 1px solid #666666; - } &:active { background-color: #eaeaea; color: #212121; diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap index f4d7974e3b067..2e4db82ba4d66 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap @@ -205,9 +205,6 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` background-color: #eaeaea; color: #000000; } - &:focus { - border: 1px solid #666666; - } &:active { background-color: #c8c8c8; color: #212121; @@ -321,9 +318,6 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` background-color: #eaeaea; color: #000000; } - &:focus { - border: 1px solid #666666; - } &:active { background-color: #c8c8c8; color: #212121; From adeb0b948f391aa71338c1234097d40defef72fb Mon Sep 17 00:00:00 2001 From: Jordan Janzen Date: Mon, 9 Apr 2018 15:08:55 -0700 Subject: [PATCH 6/6] Switch to semanticColors --- .../Button/IconButton/IconButton.styles.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) 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 index 99301a92f1e32..b40dc2cfa89ef 100644 --- 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 @@ -17,6 +17,7 @@ export const getStyles = memoizeFunction(( ): IButtonStyles => { const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); + const { palette, semanticColors } = theme; const iconButtonStyles: IButtonStyles = { root: { padding: '0 4px', @@ -26,29 +27,29 @@ export const getStyles = memoizeFunction(( }, rootHovered: { - color: theme.palette.themeDarker, - backgroundColor: theme.palette.neutralLighter, + color: palette.themeDarker, + backgroundColor: semanticColors.buttonBackground, }, rootPressed: { - color: theme.palette.themePrimary, - backgroundColor: theme.palette.neutralLight, + color: palette.themePrimary, + backgroundColor: semanticColors.buttonBackgroundHovered, }, rootExpanded: { - color: theme.palette.themePrimary + color: palette.themePrimary }, rootChecked: { - backgroundColor: theme.palette.neutralTertiaryAlt, + backgroundColor: semanticColors.buttonBackgroundChecked, }, rootCheckedHovered: { - backgroundColor: theme.palette.neutralLight + backgroundColor: semanticColors.buttonBackgroundHovered, }, rootDisabled: { - color: theme.palette.neutralTertiary + color: semanticColors.disabledText, } };