Skip to content
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

Fixing high contrast bugs from issue #3102 #3301

Merged
merged 15 commits into from
Nov 17, 2017
Merged

Fixing high contrast bugs from issue #3102 #3301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
baa55a5
High contrast fixes: choiceGroup, persona, suggestions, commandbar ex…
Oct 19, 2017
c80ff52
Increasing visibilty of focus border on choice group elements.
Oct 19, 2017
69e635e
Merge branch 'master' into v-krbrow/oct-contrast-bugs
Nov 1, 2017
130ce7e
picker selected item high contrast improvements
Nov 1, 2017
f0f532a
Removing swatchColorPicker high contrast borders
Nov 1, 2017
645f7f9
Primary button, dropdown, and colorPicker contrast adjustments
Nov 2, 2017
94491ee
Details check, message bar x button, progress, spinner, and toggle HC…
Nov 2, 2017
fedb23d
rush change
Nov 2, 2017
32371a2
Build fixes
Nov 2, 2017
29b112c
Fixing persona/activityItem border issues
Nov 6, 2017
b8e81ef
Changing achor button example to a non-primary button
Nov 6, 2017
2178c3f
Using non-deprecated defaultButton
Nov 9, 2017
58f7897
changing compact border to palette color
Nov 16, 2017
2f2aca3
Merge branch 'master' into v-krbrow/oct-contrast-bugs
Nov 16, 2017
76a6408
Removing high-contrast const definitions from all style ts files
Nov 16, 2017
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/v-krbrow-oct-contrast-bugs_2017-11-02-21-34.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": "Fixing high contrast bugs",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
18 changes: 16 additions & 2 deletions packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {
concatStyleSets,
ITheme,
getTheme
getTheme,
HighContrastSelector
} from '../../Styling';
import {
memoizeFunction
Expand Down Expand Up @@ -65,7 +66,20 @@ export const getStyles = memoizeFunction((
fontSize: COMPACT_ICON_SIZE,
lineHeight: COMPACT_ICON_SIZE,
color: theme.palette.themePrimary,
marginTop: '1px'
marginTop: '1px',
selectors: {
'.ms-Persona-imageArea': {
marginTop: '-2px',
border: '2px solid' + theme.palette.white,
borderRadius: '50%',
selectors: {
[HighContrastSelector]: {
border: 'none',
marginTop: '0'
}
}
}
}
},

activityPersona: {
Expand Down
4 changes: 2 additions & 2 deletions packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
if (props.isCompact) {
style = {
display: 'inline-block',
width: '8px',
minWidth: '8px',
width: '10px',
minWidth: '10px',
overflow: 'visible'
};
}
Expand Down
42 changes: 36 additions & 6 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
@@ -1,5 +1,5 @@
import { IButtonStyles } from './Button.types';
import { ITheme } from '../../Styling';
import { ITheme, HighContrastSelector } from '../../Styling';

export function standardStyles(theme: ITheme): IButtonStyles {
let s = theme.semanticColors;
Expand Down Expand Up @@ -93,17 +93,38 @@ export function primaryStyles(theme: ITheme): IButtonStyles {
return {
root: {
backgroundColor: theme.palette.themePrimary,
color: theme.palette.white
color: theme.palette.white,
selectors: {
[HighContrastSelector]: {
color: 'Window',
backgroundColor: 'WindowText',
MsHighContrastAdjust: 'none'
}
}
},

rootHovered: {
backgroundColor: theme.palette.themeDark,
color: theme.palette.white
color: theme.palette.white,
selectors: {
[HighContrastSelector]: {
color: 'Window',
backgroundColor: 'WindowText',
MsHighContrastAdjust: 'none'
}
}
},

rootPressed: {
backgroundColor: theme.palette.themePrimary,
color: theme.palette.white
color: theme.palette.white,
selectors: {
[HighContrastSelector]: {
color: 'Window',
backgroundColor: 'WindowText',
MsHighContrastAdjust: 'none'
}
}
},

rootExpanded: {
Expand All @@ -121,6 +142,16 @@ export function primaryStyles(theme: ITheme): IButtonStyles {
color: theme.palette.white
},

rootDisabled: {
selectors: {
[HighContrastSelector]: {
color: 'GrayText',
borderColor: 'GrayText',
backgroundColor: 'Window'
}
},
},

// Split button styles
splitButtonContainer: {},

Expand Down Expand Up @@ -161,7 +192,6 @@ export function primaryStyles(theme: ITheme): IButtonStyles {

splitButtonMenuIconDisabled: {
color: theme.palette.neutralTertiary
},

}
};
}
20 changes: 18 additions & 2 deletions ...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 @@ -2,7 +2,8 @@ import { IButtonStyles } from '../Button.types';
import {
ITheme,
concatStyleSets,
FontWeights
FontWeights,
HighContrastSelector
} from '../../../Styling';
import { memoizeFunction } from '../../../Utilities';
import {
Expand Down Expand Up @@ -92,10 +93,25 @@ export const getStyles = memoizeFunction((

description: {
color: theme.palette.white,
selectors: {
[HighContrastSelector]: {
color: 'Window',
backgroundColor: 'WindowText',
MsHighContrastAdjust: 'none'
}
}

},

descriptionHovered: {
color: theme.palette.white
color: theme.palette.white,
selectors: {
[HighContrastSelector]: {
color: 'Window',
backgroundColor: 'WindowText',
MsHighContrastAdjust: 'none'
}
}
},

descriptionPressed: {
Expand Down
7 changes: 3 additions & 4 deletions packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import {
IButtonProps,
PrimaryButton
DefaultButton
} from 'office-ui-fabric-react/lib/Button';
import {
Label
Expand All @@ -17,17 +17,16 @@ export class ButtonAnchorExample extends React.Component<IButtonProps, {}> {

return (
<div className='ms-BasicButtonsExample'>
<PrimaryButton
<DefaultButton
data-automation-id='test'
disabled={ disabled }
checked={ checked }
href='http://bing.com'
target='_blank'
title='Let us bing!'
style={ { color: '#ffffff' } }
Copy link
Collaborator

Choose a reason for hiding this comment

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

I know this looks totally out of place, but I added this in because UHF in the website overrides our link styles. Maybe there is just a better way to go about it? Is it causing a HC issue?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I removed it because we're changing the HC primary button style to black on white and this override made it white on white. I'm not seeing any issue with it in non-HC mode after removing this line, so I think it should be OK to remove now.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Unfortunately the non-HC mode issue only shows up when we deploy the website. The local build doesn't have the UHF. Maybe you can test the live site in the browser to double check it's ok to remove it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah ok, that makes sense. Seems like it's still in issue. I'll come up with another way to fix this HC issue without regressing on the issue you fixed and then let you know.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Awesome, thank you! I'll stay tuned.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@lynamemi, I think we can sidestep this whole issue by just making this example button not primary. Let me know if you see any issue with that approach.

Also, the Persona/ActivityItem issue we saw this morning should be fixed in this PR now.

Copy link
Collaborator

@lynamemi lynamemi Nov 7, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

Very good point! That change to standard and the updates for activity item look good to me!

>
Bing
</PrimaryButton>
</DefaultButton>
</div >
);
}
Expand Down
11 changes: 8 additions & 3 deletions packages/office-ui-fabric-react/src/components/Check/Check.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ $checkBoxHeight: 18px;
&.rootIsChecked:before {
background: $ms-color-themePrimary;
opacity: 1;
@include high-contrast {
background: Window;
}
}

.check {
Expand Down Expand Up @@ -66,7 +69,7 @@ $checkBoxHeight: 18px;
color: $ms-color-neutralTertiaryAlt;

@include high-contrast {
display: none;
color: WindowText;
}
}

Expand All @@ -78,16 +81,18 @@ $checkBoxHeight: 18px;
color: $ms-color-neutralTertiaryAlt;
font-size: 16px;
left: .5px;

@include high-contrast {
-ms-high-contrast-adjust: none;
}
}

.rootIsChecked .check {
color: $ms-color-white;
font-weight: 900;

@include high-contrast {
border-radius: 10px;
border: none;
background: Window;
color: WindowText;
}
}
7 changes: 6 additions & 1 deletion packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,11 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);

.innerField {
opacity: 0.25;

@include high-contrast {
color: GrayText;
opacity: 1;
}
}
}

Expand Down Expand Up @@ -333,7 +338,7 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
:global(.ms-Fabric.is-focusVisible) .choiceFieldIsInFocus {
&.choiceFieldIsImage .choiceFieldWrapper,
&.choiceFieldIsIcon .choiceFieldWrapper {
@include focus-border(1px, $ms-color-neutralPrimary, 1px, false);
@include focus-border(1px, $ms-color-neutralPrimary, 2px, false);

@include high-contrast {
@include focus-border(1px, WindowText, 2px, false);
Expand Down
4 changes: 4 additions & 0 deletions packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
.colorRect {
position: relative;
margin-bottom: 10px;

@include high-contrast {
-ms-high-contrast-adjust: none;
}
}

.rectContainer {
Expand Down
17 changes: 8 additions & 9 deletions packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import {
IRawStyle,
ITheme,
concatStyleSets,
getFocusStyle
getFocusStyle,
HighContrastSelector
} from '../../Styling';
import {
IComboBoxOptionStyles,
Expand All @@ -14,8 +15,6 @@ import {
import { IButtonStyles } from '../../Button';
import { memoizeFunction } from '../../Utilities';

const MS_HIGHCONTRAST_ACTIVE = '@media screen and (-ms-high-contrast: active)';

const ComboBoxHeight = '32px';
const ComboBoxLineHeight = '30px';
const ComboxBoxCaretDownWidth = '32px';
Expand All @@ -30,7 +29,7 @@ const getDisabledStyles = memoizeFunction((theme: ITheme): IRawStyle => {
color: semanticColors.disabledText,
cursor: 'default',
selectors: {
[MS_HIGHCONTRAST_ACTIVE]: {
[HighContrastSelector]: {
borderColor: 'GrayText',
color: 'GrayText'
}
Expand All @@ -41,7 +40,7 @@ const getDisabledStyles = memoizeFunction((theme: ITheme): IRawStyle => {
const getListOptionHighContrastStyles = memoizeFunction((theme: ITheme): IRawStyle => {
return {
selectors: {
[MS_HIGHCONTRAST_ACTIVE]: {
[HighContrastSelector]: {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
Expand Down Expand Up @@ -86,7 +85,7 @@ export const getOptionStyles = memoizeFunction((
overflowWrap: 'break-word',
textAlign: 'left',
selectors: {
[MS_HIGHCONTRAST_ACTIVE]: {
[HighContrastSelector]: {
borderColor: 'Background'
}
}
Expand Down Expand Up @@ -157,7 +156,7 @@ export const getCaretDownButtonStyles = memoizeFunction((
textAlign: 'center',
cursor: 'default',
selectors: {
[MS_HIGHCONTRAST_ACTIVE]: {
[HighContrastSelector]: {
backgroundColor: 'ButtonFace',
borderColor: 'ButtonText',
color: 'ButtonText',
Expand Down Expand Up @@ -235,7 +234,7 @@ export const getStyles = memoizeFunction((
rootHovered: {
borderColor: ComboBoxRootBorderColorHovered,
selectors: {
[MS_HIGHCONTRAST_ACTIVE]: {
[HighContrastSelector]: {
color: 'HighlightText',
borderColor: 'Highlight',
MsHighContrastAdjust: 'none'
Expand All @@ -246,7 +245,7 @@ export const getStyles = memoizeFunction((
rootFocused: {
borderColor: ComboBoxRootBorderColorHovered,
selectors: {
[MS_HIGHCONTRAST_ACTIVE]: {
[HighContrastSelector]: {
color: 'HighlightText',
borderColor: 'Highlight',
MsHighContrastAdjust: 'none'
Expand Down
3 changes: 3 additions & 0 deletions packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Example.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@
position: relative;
top: -2px;
height: 40px;
@include high-contrast {
display: none;
}
}

/* Require update when office-ui-fabric-react changes to CSS modules */
Expand Down
11 changes: 5 additions & 6 deletions packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,19 @@ import {
IRawStyle,
ITheme,
concatStyleSets,
getFocusStyle
getFocusStyle,
HighContrastSelector
} from '../../Styling';
import { IContextualMenuStyles, IMenuItemStyles } from './ContextualMenu.types';

import { memoizeFunction } from '../../Utilities';

const MS_HIGHCONTRAST_ACTIVE = '@media screen and (-ms-high-contrast: active)';

const ContextualMenuItemHeight = '32px';

const getItemHighContrastStyles = memoizeFunction((): IRawStyle => {
return {
selectors: {
[MS_HIGHCONTRAST_ACTIVE]: {
[HighContrastSelector]: {
backgroundColor: 'Highlight',
borderColor: 'Highlight',
color: 'HighlightText',
Expand Down Expand Up @@ -130,15 +129,15 @@ export const getMenuItemStyles = memoizeFunction((
iconColor: {
color: semanticColors.menuIcon,
selectors: {
[MS_HIGHCONTRAST_ACTIVE]: {
[HighContrastSelector]: {
color: 'HighlightText',
}
}
},
checkmarkIcon: {
color: semanticColors.bodySubtext,
selectors: {
[MS_HIGHCONTRAST_ACTIVE]: {
[HighContrastSelector]: {
color: 'HighlightText',
}
}
Expand Down
Loading