Fixing high contrast bugs from issue microsoft#3102 (microsoft#3301)

* High contrast fixes: choiceGroup, persona, suggestions, commandbar example * Increasing visibilty of focus border on choice group elements. * picker selected item high contrast improvements * Removing swatchColorPicker high contrast borders * Primary button, dropdown, and colorPicker contrast adjustments * Details check, message bar x button, progress, spinner, and toggle HC updates * rush change * Build fixes * Fixing persona/activityItem border issues * Changing achor button example to a non-primary button * Using non-deprecated defaultButton * changing compact border to palette color * Removing high-contrast const definitions from all style ts files
chrismohr · Apr 17, 2018 · ad0767e · ad0767e
1 parent 0bf3e24
commit ad0767e
Show file tree

Hide file tree

Showing 24 changed files with 198 additions and 79 deletions.
diff --git a/common/changes/office-ui-fabric-react/v-krbrow-oct-contrast-bugs_2017-11-02-21-34.json b/common/changes/office-ui-fabric-react/v-krbrow-oct-contrast-bugs_2017-11-02-21-34.json
@@ -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]"
+}
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts
@@ -1,7 +1,8 @@
 import {
   concatStyleSets,
   ITheme,
-  getTheme
+  getTheme,
+  HighContrastSelector
 } from '../../Styling';
 import {
   memoizeFunction
@@ -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: {

diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
@@ -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'
         };
       }

diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts b/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts
@@ -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;
@@ -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: {
@@ -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: {},
 
@@ -161,7 +192,6 @@ export function primaryStyles(theme: ITheme): IButtonStyles {
 
     splitButtonMenuIconDisabled: {
       color: theme.palette.neutralTertiary
-    },
-
+    }
   };
 }
diff --git a/...ages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts b/...ages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts
@@ -2,7 +2,8 @@ import { IButtonStyles } from '../Button.types';
 import {
   ITheme,
   concatStyleSets,
-  FontWeights
+  FontWeights,
+  HighContrastSelector
 } from '../../../Styling';
 import { memoizeFunction } from '../../../Utilities';
 import {
@@ -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: {

diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   IButtonProps,
-  PrimaryButton
+  DefaultButton
 } from 'office-ui-fabric-react/lib/Button';
 import {
   Label
@@ -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' } }
         >
           Bing
-        </PrimaryButton>
+        </DefaultButton>
       </div >
     );
   }

diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.scss b/packages/office-ui-fabric-react/src/components/Check/Check.scss
@@ -33,6 +33,9 @@ $checkBoxHeight: 18px;
   &.rootIsChecked:before {
     background: $ms-color-themePrimary;
     opacity: 1;
+    @include high-contrast {
+      background: Window;
+    }
   }
 
   .check {
@@ -66,7 +69,7 @@ $checkBoxHeight: 18px;
   color: $ms-color-neutralTertiaryAlt;
 
   @include high-contrast {
-    display: none;
+    color: WindowText;
   }
 }
 
@@ -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;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
@@ -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;
+        }
       }
     }
 
@@ -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);

diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.scss
@@ -12,6 +12,10 @@
 .colorRect {
   position: relative;
   margin-bottom: 10px;
+
+  @include high-contrast {
+    -ms-high-contrast-adjust: none;
+  }
 }
 
 .rectContainer {

diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts
@@ -4,7 +4,8 @@ import {
   IRawStyle,
   ITheme,
   concatStyleSets,
-  getFocusStyle
+  getFocusStyle,
+  HighContrastSelector
 } from '../../Styling';
 import {
   IComboBoxOptionStyles,
@@ -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';
@@ -30,7 +29,7 @@ const getDisabledStyles = memoizeFunction((theme: ITheme): IRawStyle => {
     color: semanticColors.disabledText,
     cursor: 'default',
     selectors: {
-      [MS_HIGHCONTRAST_ACTIVE]: {
+      [HighContrastSelector]: {
         borderColor: 'GrayText',
         color: 'GrayText'
       }
@@ -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',
@@ -86,7 +85,7 @@ export const getOptionStyles = memoizeFunction((
         overflowWrap: 'break-word',
         textAlign: 'left',
         selectors: {
-          [MS_HIGHCONTRAST_ACTIVE]: {
+          [HighContrastSelector]: {
             borderColor: 'Background'
           }
         }
@@ -157,7 +156,7 @@ export const getCaretDownButtonStyles = memoizeFunction((
       textAlign: 'center',
       cursor: 'default',
       selectors: {
-        [MS_HIGHCONTRAST_ACTIVE]: {
+        [HighContrastSelector]: {
           backgroundColor: 'ButtonFace',
           borderColor: 'ButtonText',
           color: 'ButtonText',
@@ -235,7 +234,7 @@ export const getStyles = memoizeFunction((
     rootHovered: {
       borderColor: ComboBoxRootBorderColorHovered,
       selectors: {
-        [MS_HIGHCONTRAST_ACTIVE]: {
+        [HighContrastSelector]: {
           color: 'HighlightText',
           borderColor: 'Highlight',
           MsHighContrastAdjust: 'none'
@@ -246,7 +245,7 @@ export const getStyles = memoizeFunction((
     rootFocused: {
       borderColor: ComboBoxRootBorderColorHovered,
       selectors: {
-        [MS_HIGHCONTRAST_ACTIVE]: {
+        [HighContrastSelector]: {
           color: 'HighlightText',
           borderColor: 'Highlight',
           MsHighContrastAdjust: 'none'

diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Example.scss b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Example.scss
@@ -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 */

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
@@ -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',
@@ -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',
         }
       }