From d9c5efb945aee44365fc8506d01b812e474490c2 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Fri, 20 Apr 2018 14:47:45 -0700 Subject: [PATCH 01/19] Toggle hc hover --- .../components/Toggle/Toggle.classNames.ts | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts index 411f0d2ba80d02..4596039e4fa72f 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts +++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts @@ -104,7 +104,16 @@ export const getClassNames = memoizeFunction(( }, styles.pillHovered ], - ':hover .ms-Toggle-thumb': styles.thumbHovered + ':hover .ms-Toggle-thumb': [ + styles.thumbHovered, + { + selectors: { + [HighContrastSelector]: { + borderColor: 'Highlight' + } + } + } + ] } }, checked && [ @@ -119,7 +128,12 @@ export const getClassNames = memoizeFunction(( ':hover': [ { backgroundColor: pillCheckedHoveredBackground, - borderColor: 'transparent' + borderColor: 'transparent', + selectors: { + [HighContrastSelector]: { + backgroundColor: 'Highlight' + } + } }, styles.pillCheckedHovered ], @@ -151,7 +165,18 @@ export const getClassNames = memoizeFunction(( }, styles.pillCheckedDisabled ], - ] + ], + !disabled && { + selectors: { + '&:hover': { + selectors: { + [HighContrastSelector]: { + borderColor: 'Highlight' + } + } + } + } + } ], thumb: [ From b65fdb610e8cb37a5d07c6bdbb6d268c05b9db56 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Fri, 20 Apr 2018 14:52:14 -0700 Subject: [PATCH 02/19] SpinButton hc hover, remove outline --- .../src/components/SpinButton/SpinButton.styles.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts index b1540d651c2abd..ba29063a9f9dfc 100644 --- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts @@ -195,7 +195,8 @@ export const getStyles = memoizeFunction(( outline: '2px dashed transparent', selectors: { [HighContrastSelector]: { - borderColor: 'Highlight' + borderColor: 'Highlight', + outline: 'none' } } }, @@ -204,7 +205,8 @@ export const getStyles = memoizeFunction(( outline: '2px dashed transparent', selectors: { [HighContrastSelector]: { - borderColor: 'Highlight' + borderColor: 'Highlight', + outline: 'none' } } }, From 07b73c8abd859a5891070c27122aca944fc78aff Mon Sep 17 00:00:00 2001 From: lynamemi Date: Fri, 20 Apr 2018 14:52:59 -0700 Subject: [PATCH 03/19] Link hc hover --- .../src/components/Link/Link.styles.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts b/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts index 1568800197ddf7..5dcbcb350d47fa 100644 --- a/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts @@ -1,5 +1,6 @@ import { - getFocusStyle + getFocusStyle, + HighContrastSelector } from '../../Styling'; import { ILinkStyleProps, @@ -51,7 +52,12 @@ export const getStyles = (props: ILinkStyleProps): ILinkStyles => { !isDisabled && { selectors: { '&:active, &:hover, &:active:hover': { - color: semanticColors.linkHovered + color: semanticColors.linkHovered, + selectors: { + [HighContrastSelector]: { + textDecoration: 'underline' + } + } }, '&:focus': { color: semanticColors.link From bb636c94836814f7e05dc3362c026626be5866af Mon Sep 17 00:00:00 2001 From: lynamemi Date: Mon, 23 Apr 2018 16:05:02 -0700 Subject: [PATCH 04/19] Use border bottom for pivot hover in hc - test --- .../src/components/Pivot/Pivot.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss index a71d1f50eb1d80..37224f78ca2589 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss @@ -40,6 +40,13 @@ &:hover { cursor: pointer; + + @include high-contrast { + &::before { + box-sizing: border-box; + border-bottom: 2px solid WindowText; + } + } } &:focus { @@ -72,7 +79,6 @@ .text, .count { display: inline-block; - vertical-align: top; } @@ -90,13 +96,17 @@ &.linkIsSelected { font-weight: $ms-font-weight-semibold; + @include high-contrast { + color: Highlight; + } + // Show the underline &::before { box-sizing: border-box; border-bottom: 2px solid $ms-color-themePrimary; @include high-contrast { - border-bottom-color: WindowText; + border-bottom-color: Highlight; } } } From b0bef20c96d46ed426e597cf5e715e948a891f23 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Wed, 25 Apr 2018 12:39:26 -0700 Subject: [PATCH 05/19] Button hc hover --- .../ActionButton/ActionButton.styles.ts | 9 ++++++- .../src/components/Button/ButtonThemes.ts | 25 +++++++++++++++---- .../CommandBarButton.styles.ts | 7 +++++- .../CompoundButton/CompoundButton.styles.ts | 2 +- .../Button/IconButton/IconButton.styles.ts | 9 ++++++- 5 files changed, 43 insertions(+), 9 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts index 3ea21f35580ffe..828d440898aeea 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts @@ -1,7 +1,8 @@ import { IButtonStyles } from '../Button.types'; import { ITheme, - concatStyleSets + concatStyleSets, + HighContrastSelector } from '../../../Styling'; import { memoizeFunction } from '../../../Utilities'; import { @@ -26,6 +27,12 @@ export const getStyles = memoizeFunction(( rootHovered: { color: theme.palette.themePrimary, + selectors: { + [HighContrastSelector]: { + borderColor: 'Highlight', + color: 'Highlight' + } + } }, iconHovered: { diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts b/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts index f1a79c4b0a2af0..3d1e9ac23e1a7c 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts +++ b/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts @@ -21,7 +21,13 @@ export function standardStyles(theme: ITheme): IButtonStyles { rootHovered: { backgroundColor: buttonBackgroundHovered, - color: buttonTextHovered + color: buttonTextHovered, + selectors: { + [HighContrastSelector]: { + borderColor: 'Highlight', + color: 'Highlight' + } + } }, rootPressed: { @@ -58,7 +64,12 @@ export function standardStyles(theme: ITheme): IButtonStyles { backgroundColor: theme.palette.neutralLighter, selectors: { ':hover': { - backgroundColor: theme.palette.neutralLight + backgroundColor: theme.palette.neutralLight, + selectors: { + [HighContrastSelector]: { + color: 'Highlight' + } + } } }, }, @@ -114,8 +125,7 @@ export function primaryStyles(theme: ITheme): IButtonStyles { selectors: { [HighContrastSelector]: { color: 'Window', - backgroundColor: 'WindowText', - MsHighContrastAdjust: 'none' + backgroundColor: 'Highlight' } } }, @@ -175,7 +185,12 @@ export function primaryStyles(theme: ITheme): IButtonStyles { color: theme.palette.white, selectors: { ':hover': { - backgroundColor: theme.palette.themeDark + backgroundColor: theme.palette.themeDark, + selectors: { + [HighContrastSelector]: { + color: 'Highlight' + } + } } }, }, diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts index 214efba884882d..5f45f4682822cf 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts @@ -47,7 +47,12 @@ export const getStyles = memoizeFunction(( rootHovered: { backgroundColor: theme.palette.neutralLight, - color: theme.palette.neutralDark + color: theme.palette.neutralDark, + selectors: { + [HighContrastSelector]: { + color: 'Highlight' + } + } }, rootPressed: { diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts index 2722551167fe53..e278eb0b3c9be6 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts @@ -108,7 +108,7 @@ export const getStyles = memoizeFunction(( selectors: { [HighContrastSelector]: { color: 'Window', - backgroundColor: 'WindowText', + backgroundColor: 'Highlight', MsHighContrastAdjust: 'none' } } 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 b40dc2cfa89eff..634b33bb1748ba 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 @@ -1,7 +1,8 @@ import { IButtonStyles } from '../Button.types'; import { ITheme, - concatStyleSets + concatStyleSets, + HighContrastSelector } from '../../../Styling'; import { memoizeFunction } from '../../../Utilities'; import { @@ -29,6 +30,12 @@ export const getStyles = memoizeFunction(( rootHovered: { color: palette.themeDarker, backgroundColor: semanticColors.buttonBackground, + selectors: { + [HighContrastSelector]: { + borderColor: 'Highlight', + color: 'Highlight' + } + } }, rootPressed: { From 6f0dd356f9301bdb1e7a59999e17d150646c5a1a Mon Sep 17 00:00:00 2001 From: lynamemi Date: Fri, 27 Apr 2018 10:31:32 -0700 Subject: [PATCH 06/19] SearchBox high constrast hover --- .../src/components/SearchBox/SearchBox.styles.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx index 280b9d65b7eb2f..842d2a668b40a7 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx @@ -30,6 +30,11 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { }, ':hover': { borderColor: palette.neutralDark, + selectors: { + [HighContrastSelector]: { + borderColor: 'Highlight' + }, + } }, ':hover $iconContainer': { color: palette.themeDark From 3242876a3cc9886bb366f00a6ed3c97874629b31 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Fri, 27 Apr 2018 10:37:42 -0700 Subject: [PATCH 07/19] Breadcrumb hc hover state --- .../src/components/Breadcrumb/Breadcrumb.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.scss b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.scss index 9f059344b03390..5d195be766eb23 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.scss +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.scss @@ -118,6 +118,10 @@ $Breadcrumb-chevron-sm: 8px; background-color: $menuItemBackgroundHoveredColor; color: initial; cursor: pointer; + + @include high-contrast { + color: Highlight; + } } &:focus { From 6e36d7b3defbb4ade0c6cb4f7e2957c0adc8304f Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 1 May 2018 15:17:42 -0700 Subject: [PATCH 08/19] Breadcrumb hover hc in js styling --- .../src/components/Breadcrumb/Breadcrumb.styles.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.styles.ts b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.styles.ts index 74592b0e034249..5f0beee2fb8f91 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.styles.ts @@ -148,7 +148,12 @@ export const getStyles = (props: IBreadcrumbStyleProps): IBreadcrumbStyles => { ':hover': { backgroundColor: theme.semanticColors.menuItemBackgroundHovered, color: 'initial', - cursor: 'pointer' + cursor: 'pointer', + selectors: { + [HighContrastSelector]: { + color: 'Highlight' + } + } }, ':focus': { color: theme.palette.neutralDark From b3800263a8b21f8c054b25295a5fc14be49fdbdb Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 1 May 2018 15:54:49 -0700 Subject: [PATCH 09/19] Pivot border bottom color --- packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss index 69cb20ad3bb103..988e20c2167321 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss @@ -44,7 +44,7 @@ @include high-contrast { &::before { box-sizing: border-box; - border-bottom: 2px solid WindowText; + border-bottom: 2px solid Highlight; } } } From a3513a9e945994ddf1b1ab73befff6f79c2b3e36 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 1 May 2018 16:26:59 -0700 Subject: [PATCH 10/19] Snapshots and change files --- .../hc-focus_2018-05-01-23-26.json | 11 ++ .../__snapshots__/Breadcrumb.test.tsx.snap | 8 ++ .../Button/__snapshots__/Button.test.tsx.snap | 19 +++ .../__snapshots__/ComboBox.test.tsx.snap | 4 + .../Link/__snapshots__/Link.test.tsx.snap | 9 ++ .../Nav/__snapshots__/Nav.test.tsx.snap | 4 + .../Pivot/__snapshots__/Pivot.test.tsx.snap | 8 ++ .../__snapshots__/SearchBox.test.tsx.snap | 3 + .../__snapshots__/SpinButton.test.tsx.snap | 9 ++ .../SwatchColorPicker.test.tsx.snap | 48 +++++++ .../Toggle/__snapshots__/Toggle.test.tsx.snap | 6 + .../__snapshots__/Suggestions.test.tsx.snap | 120 ++++++++++++++++++ 12 files changed, 249 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/hc-focus_2018-05-01-23-26.json diff --git a/common/changes/office-ui-fabric-react/hc-focus_2018-05-01-23-26.json b/common/changes/office-ui-fabric-react/hc-focus_2018-05-01-23-26.json new file mode 100644 index 00000000000000..7fe315bca3323c --- /dev/null +++ b/common/changes/office-ui-fabric-react/hc-focus_2018-05-01-23-26.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "High contrast hover states: Breadcrumb, Button, ComboBox, Link, Nav, Pivot, SearchBox, SpinButton, Toggle.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.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 23f6515742d78c..95e19094acf86a 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 @@ -482,6 +482,10 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 2 1`] = ` @media only screen and (min-width: 480px) and (max-width: 639px){& { font-size: 15px; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } data-is-focusable={true} disabled={undefined} onClick={[Function]} @@ -1173,6 +1177,10 @@ exports[`Breadcrumb basic rendering renders breadcumb correctly 4 1`] = ` @media only screen and (min-width: 480px) and (max-width: 639px){& { font-size: 15px; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } data-is-focusable={true} disabled={undefined} onClick={[Function]} 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 8675986e8d5cce..a0b03871a9d0ea 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 @@ -60,6 +60,10 @@ exports[`Button renders ActionButton correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -176,6 +180,9 @@ exports[`Button renders CommandBarButton correctly 1`] = ` background-color: #eaeaea; color: #212121; } + @media screen and (-ms-high-contrast: active){&:hover { + color: Highlight; + } &:active { background-color: #dadada; color: #000000; @@ -332,6 +339,10 @@ exports[`Button renders CompoundButton correctly 1`] = ` background-color: #eaeaea; color: #000000; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-description { color: #212121; } @@ -468,6 +479,10 @@ exports[`Button renders DefaultButton correctly 1`] = ` background-color: #eaeaea; color: #000000; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { background-color: #c8c8c8; color: #212121; @@ -574,6 +589,10 @@ exports[`Button renders IconButton correctly 1`] = ` background-color: #f4f4f4; color: #004578; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &: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 434183163a36f9..4e6d5090cda94c 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,10 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` color: #212121; cursor: pointer; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { background-color: #eaeaea; color: #212121; diff --git a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap index 5feebc98bc8a07..0fad5d1a477005 100644 --- a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap @@ -28,6 +28,9 @@ exports[`Link renders Link correctly 1`] = ` &:active, &:hover, &:active:hover { color: #004578; } + @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover { + text-decoration: underline; + } &:focus { color: #0078d4; } @@ -68,6 +71,9 @@ exports[`Link renders Link with a custom class name 1`] = ` &:active, &:hover, &:active:hover { color: #004578; } + @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover { + text-decoration: underline; + } &:focus { color: #0078d4; } @@ -124,6 +130,9 @@ exports[`Link renders Link with no href as a button 1`] = ` &:active, &:hover, &:active:hover { color: #004578; } + @media screen and (-ms-high-contrast: active){&:active, &:hover, &:active:hover { + text-decoration: underline; + } &:focus { color: #0078d4; } diff --git a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap index 3122c60f6a9aac..07918b5f2503f0 100644 --- a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap @@ -143,6 +143,10 @@ exports[`Nav renders Nav correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } diff --git a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap index 9f0cef951246a8..b0217b47b18177 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap @@ -79,6 +79,10 @@ exports[`Pivot renders Pivot correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -181,6 +185,10 @@ exports[`Pivot renders Pivot correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap index dc8155cc4fdead..f51d1f5ce117be 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap @@ -34,6 +34,9 @@ exports[`SearchBox renders SearchBox correctly 1`] = ` &:hover { border-color: #212121; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + } &:hover $iconContainer { color: #005a9e; } 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 682a21f619e607..b6ac3cb75c0223 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 @@ -67,6 +67,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` } @media screen and (-ms-high-contrast: active){&:hover { border-color: Highlight; + outline: none; } title={undefined} > @@ -206,6 +207,10 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` background-color: #eaeaea; color: #000000; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { background-color: #c8c8c8; color: #212121; @@ -319,6 +324,10 @@ exports[`SpinButton renders SpinButton correctly 1`] = ` background-color: #eaeaea; color: #000000; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { background-color: #c8c8c8; color: #212121; diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap index 1cd9eaba18ec41..6d0d031f772a0e 100644 --- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap @@ -181,6 +181,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -374,6 +378,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -567,6 +575,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -760,6 +772,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -957,6 +973,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -1150,6 +1170,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -1343,6 +1367,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -1536,6 +1564,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -1733,6 +1765,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -1926,6 +1962,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -2119,6 +2159,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } @@ -2312,6 +2356,10 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { color: #000000; } diff --git a/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap index 4845d69bb36da2..9a7cb7441f99e4 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap @@ -90,6 +90,12 @@ exports[`Toggle renders toggle correctly 1`] = ` &:hover { border-color: #212121; } + @media screen and (-ms-high-contrast: active){&:hover .ms-Toggle-thumb { + border-color: Highlight; + } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + } data-is-focusable={true} disabled={undefined} id="Toggle1" diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap index 5babab728c38e7..8693ae63381035 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap @@ -78,6 +78,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -180,6 +184,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -282,6 +290,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -384,6 +396,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -486,6 +502,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -588,6 +608,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -690,6 +714,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -792,6 +820,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -894,6 +926,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -996,6 +1032,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -1098,6 +1138,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -1200,6 +1244,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -1302,6 +1350,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -1404,6 +1456,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -1506,6 +1562,10 @@ exports[`Suggestions renders a list properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -1622,6 +1682,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -1724,6 +1788,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -1826,6 +1894,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -1928,6 +2000,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -2030,6 +2106,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -2132,6 +2212,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -2234,6 +2318,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -2336,6 +2424,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -2438,6 +2530,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -2540,6 +2636,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -2642,6 +2742,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -2744,6 +2848,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -2846,6 +2954,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -2948,6 +3060,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } @@ -3050,6 +3166,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` &:hover { color: #0078d4; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:hover .ms-Button-icon { color: #0078d4; } From 9eeae48cf2af4ec2d9c98bb60bce882d5fe796e0 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 1 May 2018 17:53:26 -0700 Subject: [PATCH 11/19] Updated more snapshots after merge --- .../src/components/Button/__snapshots__/Button.test.tsx.snap | 4 ++++ .../components/ComboBox/__snapshots__/ComboBox.test.tsx.snap | 4 ++++ 2 files changed, 8 insertions(+) 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 37db7eda3a97cc..c5583da24b222e 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 @@ -700,6 +700,10 @@ exports[`Button renders a DefaultButton with a keytip correctly 1`] = ` background-color: #eaeaea; color: #000000; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { background-color: #c8c8c8; color: #212121; 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 b8e82ad8082866..5723adc85443f5 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 @@ -506,6 +506,10 @@ exports[`ComboBox renders a ComboBox with a Keytip correctly 1`] = ` color: #212121; cursor: pointer; } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } &:active { background-color: #eaeaea; color: #212121; From da1effebc9a777df76cb27ff36224bfb22472d0d Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 1 May 2018 18:50:53 -0700 Subject: [PATCH 12/19] One more snapshot to update --- .../CommandBar/__snapshots__/CommandBar.test.tsx.snap | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap index a719afd259c46d..e349e17af18e6d 100644 --- a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap +++ b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap @@ -117,6 +117,9 @@ exports[`CommandBar renders commands correctly 1`] = ` background-color: #eaeaea; color: #212121; } + @media screen and (-ms-high-contrast: active){&:hover { + color: Highlight; + } &:active { background-color: #dadada; color: #000000; @@ -229,6 +232,9 @@ exports[`CommandBar renders commands correctly 1`] = ` background-color: #eaeaea; color: #212121; } + @media screen and (-ms-high-contrast: active){&:hover { + color: Highlight; + } &:active { background-color: #dadada; color: #000000; From 8db9e1a5b367ab76fc21fba7b4e5c2f07b1f272d Mon Sep 17 00:00:00 2001 From: lynamemi Date: Tue, 1 May 2018 19:09:29 -0700 Subject: [PATCH 13/19] Change file for experiments --- .../experiments/hc-focus_2018-05-02-02-08.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/@uifabric/experiments/hc-focus_2018-05-02-02-08.json diff --git a/common/changes/@uifabric/experiments/hc-focus_2018-05-02-02-08.json b/common/changes/@uifabric/experiments/hc-focus_2018-05-02-02-08.json new file mode 100644 index 00000000000000..bba7eff712231a --- /dev/null +++ b/common/changes/@uifabric/experiments/hc-focus_2018-05-02-02-08.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/experiments", + "comment": "Updated snapshot to include new button high contrast hover states.", + "type": "patch" + } + ], + "packageName": "@uifabric/experiments", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file From 1fee2febee43f6c1239b29f46af5ff1c7a1947c7 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Wed, 2 May 2018 11:30:17 -0700 Subject: [PATCH 14/19] Removed command bar updates --- .../Button/CommandBarButton/CommandBarButton.styles.ts | 7 +------ .../components/Button/__snapshots__/Button.test.tsx.snap | 3 --- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts index 5f45f4682822cf..214efba884882d 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts @@ -47,12 +47,7 @@ export const getStyles = memoizeFunction(( rootHovered: { backgroundColor: theme.palette.neutralLight, - color: theme.palette.neutralDark, - selectors: { - [HighContrastSelector]: { - color: 'Highlight' - } - } + color: theme.palette.neutralDark }, rootPressed: { 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 c5583da24b222e..df649748b10caa 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 @@ -180,9 +180,6 @@ exports[`Button renders CommandBarButton correctly 1`] = ` background-color: #eaeaea; color: #212121; } - @media screen and (-ms-high-contrast: active){&:hover { - color: Highlight; - } &:active { background-color: #dadada; color: #000000; From 8b4d023a55d6e8f11d40b3a422ee75f783cb4fd4 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Wed, 2 May 2018 12:05:19 -0700 Subject: [PATCH 15/19] Updated commandbar snapshot with removed command bar button styling --- .../CommandBar/__snapshots__/CommandBar.test.tsx.snap | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap index e349e17af18e6d..a719afd259c46d 100644 --- a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap +++ b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap @@ -117,9 +117,6 @@ exports[`CommandBar renders commands correctly 1`] = ` background-color: #eaeaea; color: #212121; } - @media screen and (-ms-high-contrast: active){&:hover { - color: Highlight; - } &:active { background-color: #dadada; color: #000000; @@ -232,9 +229,6 @@ exports[`CommandBar renders commands correctly 1`] = ` background-color: #eaeaea; color: #212121; } - @media screen and (-ms-high-contrast: active){&:hover { - color: Highlight; - } &:active { background-color: #dadada; color: #000000; From a72e655e5ad53dcb752028a117f9e11019e83d77 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Thu, 3 May 2018 14:25:30 -0700 Subject: [PATCH 16/19] Updated pivot border color to work in Firefox --- .../src/components/Pivot/Pivot.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss index 988e20c2167321..3f8349ec43f076 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss +++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss @@ -41,11 +41,10 @@ &:hover { cursor: pointer; - @include high-contrast { - &::before { - box-sizing: border-box; - border-bottom: 2px solid Highlight; - } + // For high contrast mode. Works in Firefox: + &::before { + box-sizing: border-box; + border-bottom: 2px solid transparent; } } From b78f21ac3151556e92387680b6bca2e70d05941d Mon Sep 17 00:00:00 2001 From: lynamemi Date: Thu, 3 May 2018 14:43:37 -0700 Subject: [PATCH 17/19] removed unnecessary commas --- .../src/components/SearchBox/SearchBox.styles.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx index 842d2a668b40a7..11564d48c9c87c 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx @@ -33,7 +33,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { selectors: { [HighContrastSelector]: { borderColor: 'Highlight' - }, + } } }, ':hover $iconContainer': { @@ -61,7 +61,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { borderColor: palette.neutralLighter, backgroundColor: palette.neutralLighter, pointerEvents: 'none', - cursor: 'default', + cursor: 'default' } ], underlined && [ @@ -121,7 +121,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { flexBasis: '32px', flexShrink: 0, padding: 1, - color: palette.themePrimary, + color: palette.themePrimary } ], field: [ From 1361ed5bc14e29142fad732f08b9f4daa8526cc9 Mon Sep 17 00:00:00 2001 From: lynamemi Date: Thu, 3 May 2018 14:54:24 -0700 Subject: [PATCH 18/19] Removed moot change file --- .../experiments/hc-focus_2018-05-02-02-08.json | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 common/changes/@uifabric/experiments/hc-focus_2018-05-02-02-08.json diff --git a/common/changes/@uifabric/experiments/hc-focus_2018-05-02-02-08.json b/common/changes/@uifabric/experiments/hc-focus_2018-05-02-02-08.json deleted file mode 100644 index bba7eff712231a..00000000000000 --- a/common/changes/@uifabric/experiments/hc-focus_2018-05-02-02-08.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/experiments", - "comment": "Updated snapshot to include new button high contrast hover states.", - "type": "patch" - } - ], - "packageName": "@uifabric/experiments", - "email": "lynam.emily@gmail.com" -} \ No newline at end of file From b7c0c733834835d636560e6ba4f6e38e28631ecf Mon Sep 17 00:00:00 2001 From: lynamemi Date: Thu, 3 May 2018 15:35:45 -0700 Subject: [PATCH 19/19] bump bundle size --- scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/package.json b/scripts/package.json index 602e98bd80708d..e7fd968d408879 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -50,7 +50,7 @@ "bundlesize": [ { "path": "../apps/test-bundle-button/dist/test-bundle-button.min.js", - "maxSize": "49.4 kB" + "maxSize": "51 kB" } ] } \ No newline at end of file