Skip to content

High contrast: Multiple component support for mouse over states #4728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lynamemi merged 26 commits into from
May 4, 2018
Merged

High contrast: Multiple component support for mouse over states #4728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
d9c5efb
Toggle hc hover
lynamemi Apr 20, 2018
b65fdb6
SpinButton hc hover, remove outline
lynamemi Apr 20, 2018
07b73c8
Link hc hover
lynamemi Apr 20, 2018
bb636c9
Use border bottom for pivot hover in hc - test
lynamemi Apr 23, 2018
671d1e1
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
lynamemi Apr 23, 2018
cbda86d
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
lynamemi Apr 25, 2018
b0bef20
Button hc hover
lynamemi Apr 25, 2018
6f0dd35
SearchBox high constrast hover
lynamemi Apr 27, 2018
3242876
Breadcrumb hc hover state
lynamemi Apr 27, 2018
6f521ac
resolved merge conflicts
lynamemi May 1, 2018
6e36d7b
Breadcrumb hover hc in js styling
lynamemi May 1, 2018
b380026
Pivot border bottom color
lynamemi May 1, 2018
a3513a9
Snapshots and change files
lynamemi May 1, 2018
a0d334a
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
lynamemi May 2, 2018
9eeae48
Updated more snapshots after merge
lynamemi May 2, 2018
e30bbb5
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
lynamemi May 2, 2018
da1effe
One more snapshot to update
lynamemi May 2, 2018
8db9e1a
Change file for experiments
lynamemi May 2, 2018
1fee2fe
Removed command bar updates
lynamemi May 2, 2018
8b4d023
Updated commandbar snapshot with removed command bar button styling
lynamemi May 2, 2018
a72e655
Updated pivot border color to work in Firefox
lynamemi May 3, 2018
b78f21a
removed unnecessary commas
lynamemi May 3, 2018
1361ed5
Removed moot change file
lynamemi May 3, 2018
b7c0c73
bump bundle size
lynamemi May 3, 2018
aad2ade
Merge branch 'master' into hc-focus
lynamemi May 3, 2018
366ae4d
Merge branch 'master' into hc-focus
lynamemi May 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/hc-focus_2018-05-01-23-26.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
7 changes: 6 additions & 1 deletion packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 8 additions & 0 deletions ...s/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,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]}
Expand Down Expand Up @@ -1215,6 +1219,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]}
Expand Down
9 changes: 8 additions & 1 deletion packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { IButtonStyles } from '../Button.types';
import {
ITheme,
concatStyleSets
concatStyleSets,
HighContrastSelector
} from '../../../Styling';
import { memoizeFunction } from '../../../Utilities';
import {
Expand All @@ -26,6 +27,12 @@ export const getStyles = memoizeFunction((

rootHovered: {
color: theme.palette.themePrimary,
selectors: {
[HighContrastSelector]: {
borderColor: 'Highlight',
color: 'Highlight'
}
}
},

iconHovered: {
Expand Down
25 changes: 20 additions & 5 deletions packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,13 @@ export function standardStyles(theme: ITheme): IButtonStyles {

rootHovered: {
backgroundColor: buttonBackgroundHovered,
color: buttonTextHovered
color: buttonTextHovered,
selectors: {
[HighContrastSelector]: {
borderColor: 'Highlight',
color: 'Highlight'
}
}
},

rootPressed: {
Expand Down Expand Up @@ -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'
}
}
}
},
},
Expand Down Expand Up @@ -114,8 +125,7 @@ export function primaryStyles(theme: ITheme): IButtonStyles {
selectors: {
[HighContrastSelector]: {
color: 'Window',
backgroundColor: 'WindowText',
MsHighContrastAdjust: 'none'
backgroundColor: 'Highlight'
}
}
},
Expand Down Expand Up @@ -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'
}
}
}
},
},
Expand Down
2 changes: 1 addition & 1 deletion ...ages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export const getStyles = memoizeFunction((
selectors: {
[HighContrastSelector]: {
color: 'Window',
backgroundColor: 'WindowText',
backgroundColor: 'Highlight',
MsHighContrastAdjust: 'none'
}
}
Expand Down
9 changes: 8 additions & 1 deletion packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { IButtonStyles } from '../Button.types';
import {
ITheme,
concatStyleSets
concatStyleSets,
HighContrastSelector
} from '../../../Styling';
import { memoizeFunction } from '../../../Utilities';
import {
Expand Down Expand Up @@ -29,6 +30,12 @@ export const getStyles = memoizeFunction((
rootHovered: {
color: palette.themeDarker,
backgroundColor: semanticColors.buttonBackground,
selectors: {
[HighContrastSelector]: {
borderColor: 'Highlight',
color: 'Highlight'
}
}
},

rootPressed: {
Expand Down
20 changes: 20 additions & 0 deletions packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -344,6 +348,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;
}
Expand Down Expand Up @@ -480,6 +488,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;
Expand Down Expand Up @@ -586,6 +598,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;
Expand Down Expand Up @@ -699,6 +715,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;
Expand Down
8 changes: 8 additions & 0 deletions packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,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;
Expand Down Expand Up @@ -510,6 +514,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;
Expand Down
8 changes: 7 additions & 1 deletion packages/office-ui-fabric-react/src/components/Link/Link.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
getFocusStyle,
getGlobalClassNames,
HighContrastSelector
} from '../../Styling';
import {
ILinkStyleProps,
Expand Down Expand Up @@ -58,7 +59,12 @@ export const getStyles = (props: ILinkStyleProps): ILinkStyles => {
!isDisabled && {
selectors: {
'&:active, &:hover, &:active:hover': {
color: semanticColors.linkHovered
color: semanticColors.linkHovered,
selectors: {
[HighContrastSelector]: {
textDecoration: 'underline'
Copy link
Copy Markdown
Contributor

@phkuo phkuo May 2, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you change this to border-bottom instead?

The reason is, I think for places where we're adding borders, we should just change it to be transparent borders and remove the high contrast selector. That way, it doesn't interfere with the default UX, while at the same time it'll actually be visible in high contrast mode in FireFox.

@betrue-final-final thoughts?

}
}
},
'&:focus': {
color: semanticColors.link
Expand Down
9 changes: 9 additions & 0 deletions packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
4 changes: 4 additions & 0 deletions packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
13 changes: 11 additions & 2 deletions packages/office-ui-fabric-react/src/components/Pivot/Pivot.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@

&:hover {
cursor: pointer;

// For high contrast mode. Works in Firefox:
&::before {
box-sizing: border-box;
border-bottom: 2px solid transparent;
}
}

&:focus {
Expand Down Expand Up @@ -72,7 +78,6 @@
.text,
.count {
display: inline-block;

vertical-align: top;
}

Expand All @@ -90,13 +95,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;
}
}
}
Expand Down
8 changes: 8 additions & 0 deletions packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down
9 changes: 7 additions & 2 deletions packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
},
':hover': {
borderColor: palette.neutralDark,
selectors: {
[HighContrastSelector]: {
borderColor: 'Highlight'
}
}
},
':hover $iconContainer': {
color: palette.themeDark
Expand All @@ -56,7 +61,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
borderColor: palette.neutralLighter,
backgroundColor: palette.neutralLighter,
pointerEvents: 'none',
cursor: 'default',
cursor: 'default'
}
],
underlined && [
Expand Down Expand Up @@ -116,7 +121,7 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
flexBasis: '32px',
flexShrink: 0,
padding: 1,
color: palette.themePrimary,
color: palette.themePrimary
}
],
field: [
Expand Down
3 changes: 3 additions & 0 deletions ...ges/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Loading