fix: v9 form controls with underline should have underline-specific d…

…isabled styling (microsoft#25543) Updates disabled form styling for Input, Select, Spinbutton, Combobox, and Dropdown
NotWoods · Nov 18, 2022 · 1d77ded · 1d77ded
1 parent fef01f4
commit 1d77ded
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 28 deletions.
diff --git a/change/@fluentui-react-combobox-e478d812-6a6a-4b46-88a4-6a97b5dbcfbd.json b/change/@fluentui-react-combobox-e478d812-6a6a-4b46-88a4-6a97b5dbcfbd.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: update disabled + underline styles, have all text-like form control disabled states match",
+  "packageName": "@fluentui/react-combobox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-input-2a9cb459-0806-4724-975c-73942f819d43.json b/change/@fluentui-react-input-2a9cb459-0806-4724-975c-73942f819d43.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update disabled + underline styles, have all text-like form control disabled states match",
+  "packageName": "@fluentui/react-input",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-select-ca9fbff7-be4b-431a-9be6-0f53bbc1ace7.json b/change/@fluentui-react-select-ca9fbff7-be4b-431a-9be6-0f53bbc1ace7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: update disabled + underline styles, have all text-like form control disabled states match",
+  "packageName": "@fluentui/react-select",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-spinbutton-38b70b81-ebfc-45b7-862d-df3ae34b6ce6.json b/change/@fluentui-react-spinbutton-38b70b81-ebfc-45b7-862d-df3ae34b6ce6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: update disabled + underline and filled styles to match other text-like form control styles",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts b/packages/react-components/react-combobox/src/components/Combobox/useComboboxStyles.ts
@@ -25,7 +25,6 @@ const fieldHeights = {
 const useStyles = makeStyles({
   root: {
     alignItems: 'center',
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     boxSizing: 'border-box',
     columnGap: tokens.spacingHorizontalXXS,
@@ -104,7 +103,9 @@ const useStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
+  },
 
+  outlineInteractive: {
     '&:hover': {
       ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
       borderBottomColor: tokens.colorNeutralStrokeAccessible,
@@ -122,9 +123,11 @@ const useStyles = makeStyles({
   },
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
+    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
   },
   'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
+    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
   },
   invalid: {
     ':not(:focus-within),:hover:not(:focus-within)': {
@@ -136,6 +139,15 @@ const useStyles = makeStyles({
       borderBottomColor: tokens.colorPaletteRedBorder2,
     },
   },
+
+  disabled: {
+    cursor: 'not-allowed',
+    backgroundColor: tokens.colorTransparentBackground,
+    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+    '@media (forced-colors: active)': {
+      ...shorthands.borderColor('GrayText'),
+    },
+  },
 });
 
 const useInputStyles = makeStyles({
@@ -174,6 +186,14 @@ const useInputStyles = makeStyles({
     lineHeight: tokens.lineHeightBase400,
     ...shorthands.padding(0, 0, 0, `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),
   },
+  disabled: {
+    color: tokens.colorNeutralForegroundDisabled,
+    backgroundColor: tokens.colorTransparentBackground,
+    cursor: 'not-allowed',
+    '::placeholder': {
+      color: tokens.colorNeutralForegroundDisabled,
+    },
+  },
 });
 
 const useIconStyles = makeStyles({
@@ -203,6 +223,9 @@ const useIconStyles = makeStyles({
     fontSize: iconSizes.large,
     marginLeft: tokens.spacingHorizontalSNudge,
   },
+  disabled: {
+    color: tokens.colorNeutralForegroundDisabled,
+  },
 });
 
 /**
@@ -211,6 +234,7 @@ const useIconStyles = makeStyles({
 export const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {
   const { appearance, open, size } = state;
   const invalid = `${state.input['aria-invalid']}` === 'true';
+  const disabled = state.input.disabled;
   const styles = useStyles();
   const iconStyles = useIconStyles();
   const inputStyles = useInputStyles();
@@ -220,15 +244,18 @@ export const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState
     styles.root,
     styles[appearance],
     styles[size],
+    !disabled && appearance === 'outline' && styles.outlineInteractive,
     invalid && appearance !== 'underline' && styles.invalid,
     invalid && appearance === 'underline' && styles.invalidUnderline,
+    disabled && styles.disabled,
     state.root.className,
   );
 
   state.input.className = mergeClasses(
     comboboxClassNames.input,
     inputStyles.input,
     inputStyles[size],
+    disabled && inputStyles.disabled,
     state.input.className,
   );
 
@@ -246,6 +273,7 @@ export const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState
       comboboxClassNames.expandIcon,
       iconStyles.icon,
       iconStyles[size],
+      disabled && iconStyles.disabled,
       state.expandIcon.className,
     );
   }

diff --git a/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts b/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts
@@ -16,7 +16,6 @@ export const dropdownClassNames: SlotClassNames<DropdownSlots> = {
  */
 const useStyles = makeStyles({
   root: {
-    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
     boxSizing: 'border-box',
     display: 'inline-block',
@@ -137,7 +136,8 @@ const useStyles = makeStyles({
     backgroundColor: tokens.colorNeutralBackground1,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
     borderBottomColor: tokens.colorNeutralStrokeAccessible,
-
+  },
+  outlineInteractive: {
     '&:hover': {
       ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
       borderBottomColor: tokens.colorNeutralStrokeAccessible,
@@ -155,9 +155,11 @@ const useStyles = makeStyles({
   },
   'filled-lighter': {
     backgroundColor: tokens.colorNeutralBackground1,
+    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),
   },
   'filled-darker': {
     backgroundColor: tokens.colorNeutralBackground3,
+    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),
   },
   invalid: {
     ':not(:focus-within),:hover:not(:focus-within)': {
@@ -169,6 +171,14 @@ const useStyles = makeStyles({
       borderBottomColor: tokens.colorPaletteRedBorder2,
     },
   },
+  disabled: {
+    cursor: 'not-allowed',
+    backgroundColor: tokens.colorTransparentBackground,
+    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
+    '@media (forced-colors: active)': {
+      ...shorthands.borderColor('GrayText'),
+    },
+  },
 });
 
 const useIconStyles = makeStyles({
@@ -200,6 +210,10 @@ const useIconStyles = makeStyles({
     fontSize: iconSizes.large,
     marginLeft: tokens.spacingHorizontalSNudge,
   },
+
+  disabled: {
+    color: tokens.colorNeutralForegroundDisabled,
+  },
 });
 
 /**
@@ -208,6 +222,7 @@ const useIconStyles = makeStyles({
 export const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {
   const { appearance, open, placeholderVisible, size } = state;
   const invalid = `${state.button['aria-invalid']}` === 'true';
+  const disabled = state.button.disabled;
   const styles = useStyles();
   const iconStyles = useIconStyles();
 
@@ -217,6 +232,7 @@ export const useDropdownStyles_unstable = (state: DropdownState): DropdownState
     styles[appearance],
     invalid && appearance !== 'underline' && styles.invalid,
     invalid && appearance === 'underline' && styles.invalidUnderline,
+    disabled && styles.disabled,
     state.root.className,
   );
 
@@ -242,6 +258,7 @@ export const useDropdownStyles_unstable = (state: DropdownState): DropdownState
       dropdownClassNames.expandIcon,
       iconStyles.icon,
       iconStyles[size],
+      disabled && iconStyles.disabled,
       state.expandIcon.className,
     );
   }

diff --git a/packages/react-components/react-input/src/components/Input/useInputStyles.ts b/packages/react-components/react-input/src/components/Input/useInputStyles.ts
@@ -175,8 +175,7 @@ const useRootStyles = makeStyles({
   disabled: {
     cursor: 'not-allowed',
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius
+    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
     '@media (forced-colors: active)': {
       ...shorthands.borderColor('GrayText'),
     },

diff --git a/packages/react-components/react-select/src/components/Select/useSelectStyles.ts b/packages/react-components/react-select/src/components/Select/useSelectStyles.ts
@@ -135,13 +135,20 @@ const useSelectStyles = makeStyles({
   },
   disabled: {
     backgroundColor: tokens.colorTransparentBackground,
-    ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),
+    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
     color: tokens.colorNeutralForegroundDisabled,
     cursor: 'not-allowed',
     '@media (forced-colors: active)': {
       ...shorthands.borderColor('GrayText'),
     },
   },
+  disabledUnderline: {
+    ...shorthands.borderColor(
+      tokens.colorTransparentStrokeDisabled,
+      tokens.colorTransparentStrokeDisabled,
+      tokens.colorNeutralStrokeDisabled,
+    ),
+  },
 
   small: {
     height: fieldHeights.small,
@@ -261,6 +268,7 @@ export const useSelectStyles_unstable = (state: SelectState): SelectState => {
     !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,
     !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,
     disabled && selectStyles.disabled,
+    disabled && appearance === 'underline' && selectStyles.disabledUnderline,
     state.select.className,
   );
 

diff --git a/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-components/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
@@ -136,27 +136,12 @@ const useRootStyles = makeStyles({
   },
 
   disabled: {
-    '@media (forced-colors: active)': {
-      ...shorthands.borderColor('GrayText'),
-    },
-  },
-
-  outlineDisabled: {
     '::before': {
-      ...shorthands.border('1px', 'solid', tokens.colorNeutralStrokeDisabled),
-      ...shorthands.borderRadius(tokens.borderRadiusMedium), // because underline doesn't usually have a radius
-    },
-  },
+      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
 
-  underlineDisabled: {
-    '::before': {
-      ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),
-    },
-  },
-
-  filledDisabled: {
-    '::before': {
-      ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),
+      '@media (forced-colors: active)': {
+        ...shorthands.borderColor('GrayText'),
+      },
     },
   },
 });
@@ -448,9 +433,6 @@ export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButton
     !disabled && filled && rootStyles.filledInteractive,
     !disabled && invalid && rootStyles.invalid,
     disabled && rootStyles.disabled,
-    disabled && appearance === 'outline' && rootStyles.outlineDisabled,
-    disabled && appearance === 'underline' && rootStyles.underlineDisabled,
-    disabled && filled && rootStyles.filledDisabled,
     rootClassName, // Make sure any original class name is applied last
   );