Spin button/alternate appearances (#22519)

* react-spinbutton: a11y updates Minor styling and story updates based on accessibility testing. * react-spinbutton: remove commented out TODOs * react-spinbutton: update styles for underline appearance * react-spinbutton: update styles for filledDarker appearance * react-spinbutton: update styles for filledLigther appearance * react-spinbutton: update high contrast button styles for underline appearance * react-spinbutton: remove windows high contrast media queries An update to the icons library version eliminates the need for these media queries as they are now handled by the icons themselves.
microsoft · Apr 19, 2022 · b277c0c · b277c0c
1 parent 728a1d7
commit b277c0c
Showing 1 changed file with 47 additions and 59 deletions.
diff --git a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
@@ -127,12 +127,27 @@ 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
- '@media (forced-colors: active)': {
- ...shorthands.borderColor('GrayText'),
- },
+ },
+ },
+
+ underlineDisabled: {
+ '::before': {
+ ...shorthands.borderBottom('1px', 'solid', tokens.colorTransparentStrokeDisabled),
+ },
+ },
+
+ filledDisabled: {
+ '::before': {
+ ...shorthands.border('1px', 'solid', tokens.colorTransparentStrokeDisabled),
  },
  },
 });
@@ -159,7 +174,7 @@ const useButtonStyles = makeStyles({
  outlineStyle: 'none',
  height: '100%',
 
- ':hover': {
+ ':enabled:hover': {
  cursor: 'pointer',
  },
 
@@ -231,34 +246,21 @@ const useButtonStyles = makeStyles({
  ':disabled': {
  color: tokens.colorNeutralForegroundDisabled,
  },
- '@media (forced-colors: active)': {
- color: 'ButtonText',
- ':enabled': {
- ':hover': {
- color: 'ButtonText',
- },
- ':active': {
- color: 'ButtonText',
- },
- [`&.${spinButtonExtraClassNames.buttonActive}`]: {
- color: 'ButtonText',
- },
- },
- },
  },
 
- // These designs are not yet finalized so this is copy-paste for the "outline"
- // appearance.
  underline: {
  backgroundColor: 'transparent',
  color: tokens.colorNeutralForeground3,
- ...shorthands.borderRadius(0),
  ':enabled': {
  ':hover': {
  color: tokens.colorNeutralForeground3Hover,
  backgroundColor: tokens.colorSubtleBackgroundHover,
  },
- [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {
+ ':active': {
+ color: tokens.colorNeutralForeground3Pressed,
+ backgroundColor: tokens.colorSubtleBackgroundPressed,
+ },
+ [`&.${spinButtonExtraClassNames.buttonActive}`]: {
  color: tokens.colorNeutralForeground3Pressed,
  backgroundColor: tokens.colorSubtleBackgroundPressed,
  },
@@ -273,42 +275,40 @@ const useButtonStyles = makeStyles({
 
  ':enabled': {
  ':hover': {
- color: tokens.colorNeutralForeground3BrandHover,
- backgroundColor: tokens.colorSubtleBackgroundHover,
+ color: tokens.colorNeutralForeground3Hover,
+ backgroundColor: tokens.colorNeutralBackground3Hover,
  },
- [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {
- color: tokens.colorNeutralForeground3BrandPressed,
- backgroundColor: tokens.colorSubtleBackgroundPressed,
+ ':active': {
+ color: tokens.colorNeutralForeground3Pressed,
+ backgroundColor: tokens.colorNeutralBackground3Pressed,
+ },
+ [`&.${spinButtonExtraClassNames.buttonActive}`]: {
+ color: tokens.colorNeutralForeground3Pressed,
+ backgroundColor: tokens.colorNeutralBackground3Pressed,
  },
  },
  ':disabled': {
  color: tokens.colorNeutralForegroundDisabled,
  },
  },
  filledLighter: {
- color: tokens.colorNeutralForeground3,
  backgroundColor: 'transparent',
+ color: tokens.colorNeutralForeground3,
 
- ':hover': {
- color: tokens.colorNeutralForeground3BrandHover,
- backgroundColor: tokens.colorSubtleBackgroundHover,
- },
- [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {
- color: tokens.colorNeutralForeground3BrandPressed,
- backgroundColor: tokens.colorSubtleBackgroundPressed,
+ ':enabled': {
+ ':hover': {
+ color: tokens.colorNeutralForeground3Hover,
+ backgroundColor: tokens.colorNeutralBackground1Hover,
+ },
+ [`:active,&.${spinButtonExtraClassNames.buttonActive}`]: {
+ color: tokens.colorNeutralForeground3Pressed,
+ backgroundColor: tokens.colorNeutralBackground1Pressed,
+ },
  },
  ':disabled': {
  color: tokens.colorNeutralForegroundDisabled,
  },
  },
-
- filledIncrement: {
- clipPath: `inset(1px 1px 0 0 round 0 ${tokens.borderRadiusMedium} 0 0)`,
- },
-
- filledDecrement: {
- clipPath: `inset(0 1px 1px 0 round 0 0 ${tokens.borderRadiusMedium} 0)`,
- },
 });
 
 // Cannot just disable button as they need to remain
@@ -338,20 +338,6 @@ const useButtonDisabledStyles = makeStyles({
  backgroundColor: 'transparent',
  },
  },
- '@media (forced-colors: active)': {
- color: 'GrayText',
- ':enabled': {
- ':hover': {
- color: 'GrayText',
- },
- ':active': {
- color: 'GrayText',
- },
- [`&.${spinButtonExtraClassNames.buttonActive}`]: {
- color: 'GrayText',
- },
- },
- },
  },
 
  underline: {
@@ -445,10 +431,14 @@ export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButton
  rootStyles.base,
  appearance === 'outline' && rootStyles.outline,
  appearance === 'underline' && rootStyles.underline,
+ filled && rootStyles.filled,
  !disabled && appearance === 'outline' && rootStyles.outlineInteractive,
  !disabled && appearance === 'underline' && rootStyles.underlineInteractive,
  !disabled && filled && rootStyles.filledInteractive,
  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
  );
 
@@ -458,7 +448,6 @@ export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButton
  buttonStyles.base,
  buttonStyles.incrementButton,
  buttonStyles[appearance],
- filled && buttonStyles.filledIncrement,
  size === 'small' ? buttonStyles.incrementButtonSmall : buttonStyles.incrementButtonMedium,
  (atBound === 'max' || atBound === 'both') && buttonDisabledStyles.base,
  (atBound === 'max' || atBound === 'both') && buttonDisabledStyles[appearance],
@@ -470,7 +459,6 @@ export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButton
  buttonStyles.base,
  buttonStyles.decrementButton,
  buttonStyles[appearance],
- filled && buttonStyles.filledDecrement,
  size === 'small' ? buttonStyles.decrementButtonSmall : buttonStyles.decrementButtonMedium,
  (atBound === 'min' || atBound === 'both') && buttonDisabledStyles.base,
  (atBound === 'min' || atBound === 'both') && buttonDisabledStyles[appearance],