diff --git a/change/@fluentui-react-combobox-e478d812-6a6a-4b46-88a4-6a97b5dbcfbd.json b/change/@fluentui-react-combobox-e478d812-6a6a-4b46-88a4-6a97b5dbcfbd.json new file mode 100644 index 00000000000000..978c672dddfe41 --- /dev/null +++ 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": "sarah.higley@microsoft.com", + "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 new file mode 100644 index 00000000000000..c2f4189ac71024 --- /dev/null +++ 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": "sarah.higley@microsoft.com", + "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 new file mode 100644 index 00000000000000..853981b4448405 --- /dev/null +++ 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": "sarah.higley@microsoft.com", + "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 new file mode 100644 index 00000000000000..d6626d1e126f51 --- /dev/null +++ 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": "sarah.higley@microsoft.com", + "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 index 9edb4c15afecc5..d6bc1d50c4ba32 100644 --- 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,8 +244,10 @@ 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, ); @@ -229,6 +255,7 @@ export const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState 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 index 50ea467ac7c93f..689720fcd65bc6 100644 --- 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 = { */ 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 index cf332a7cb3087a..bde56ba1d92e2b 100644 --- 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 index d3ca00f1405f45..2111e1b26ed4bc 100644 --- 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 index 24c48d243c87ff..4fa4ac75003ed5 100644 --- 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 );