BasePicker: added high contrast styling to SASS file when picker is d…

…isabled (#17226) * updated BasePicker styles to adapt to High Contrast Settings color when disabled * updated sass file again since original fix stopped working * Change files * removed added disabled property
microsoft · Mar 2, 2021 · 183f82f · 183f82f
1 parent c11994e
commit 183f82f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/change/@fluentui-react-631f7459-92bd-478f-a405-0e2ec3aa2f86.json b/change/@fluentui-react-631f7459-92bd-478f-a405-0e2ec3aa2f86.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "BasePicker: added high contrast styling to sass file when picker is disabled",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/pickers/BasePicker.scss b/packages/react/src/components/pickers/BasePicker.scss
@@ -26,6 +26,23 @@
       border: 2px solid $inputFocusBorderAltColor;
     }
   }
+
+  &.inputDisabled {
+    @include high-contrast {
+      position: relative;
+      border-color: GrayText;
+      &:after {
+        pointer-events: none;
+        content: '';
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        bottom: 0px;
+        right: 0px;
+        background-color: Window;
+      }
+    }
+  }
 }
 
 .pickerInput {

diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx
@@ -274,6 +274,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends React.Componen
           input: css('ms-BasePicker-input', legacyStyles.pickerInput, inputProps && inputProps.className),
           screenReaderText: legacyStyles.screenReaderOnly,
         };
+
     return (
       <div ref={this.root} className={classNames.root} onKeyDown={this.onKeyDown} onBlur={this.onBlur}>
         <FocusZone
@@ -1021,11 +1022,16 @@ export class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BaseP
         })
       : {
           root: css('ms-BasePicker', className ? className : ''),
-          text: css('ms-BasePicker-text', legacyStyles.pickerText, this.state.isFocused && legacyStyles.inputFocused),
+          text: css(
+            'ms-BasePicker-text',
+            legacyStyles.pickerText,
+            this.state.isFocused && legacyStyles.inputFocused,
+            disabled && legacyStyles.inputDisabled,
+          ),
+          itemsWrapper: legacyStyles.pickerItems,
           input: css('ms-BasePicker-input', legacyStyles.pickerInput, inputProps && inputProps.className),
           screenReaderText: legacyStyles.screenReaderOnly,
         };
-
     return (
       <div ref={this.root} onBlur={this.onBlur}>
         <div className={classNames.root} onKeyDown={this.onKeyDown}>