From b277c0c2919aff304aa62b7efb302393be8e89f1 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 19 Apr 2022 14:44:22 -0700
Subject: [PATCH] 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.
---
 .../SpinButton/useSpinButtonStyles.ts         | 106 ++++++++----------
 1 file changed, 47 insertions(+), 59 deletions(-)

diff --git a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
index a5fbb8e3307ef..276fb574681d8 100644
--- 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,12 +275,16 @@ 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': {
@@ -286,29 +292,23 @@ const useButtonStyles = makeStyles({
     },
   },
   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],