From 4035bf3526dbd1dad80111a6614503946ed622cc Mon Sep 17 00:00:00 2001
From: Elizabeth Craig <elcraig@microsoft.com>
Date: Thu, 30 Dec 2021 14:16:52 -0800
Subject: [PATCH] Fix disabled Input styles (#21139)

---
 .../src/components/Input/useInputStyles.ts          | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/react-input/src/components/Input/useInputStyles.ts b/packages/react-input/src/components/Input/useInputStyles.ts
index 7a41401f10f143..054e85a5d83ce4 100644
--- a/packages/react-input/src/components/Input/useInputStyles.ts
+++ b/packages/react-input/src/components/Input/useInputStyles.ts
@@ -54,7 +54,8 @@ const useRootStyles = makeStyles({
     ...shorthands.borderRadius(theme.borderRadiusMedium), // used for all but underline
     position: 'relative',
     boxSizing: 'border-box',
-
+  }),
+  interactive: theme => ({
     // This is all for the bottom focus border.
     // It's supposed to be 2px flat all the way across and match the radius of the field's corners.
     ':after': {
@@ -121,6 +122,8 @@ const useRootStyles = makeStyles({
     backgroundColor: theme.colorNeutralBackground1,
     ...shorthands.border('1px', 'solid', theme.colorNeutralStroke1),
     borderBottomColor: theme.colorNeutralStrokeAccessible,
+  }),
+  outlineInteractive: theme => ({
     ':hover': {
       ...shorthands.borderColor(theme.colorNeutralStroke1Hover),
       borderBottomColor: theme.colorNeutralStrokeAccessibleHover,
@@ -135,6 +138,8 @@ const useRootStyles = makeStyles({
     backgroundColor: theme.colorTransparentBackground,
     ...shorthands.borderRadius(0), // corners look strange if rounded
     ...shorthands.borderBottom('1px', 'solid', theme.colorNeutralStrokeAccessible),
+  }),
+  underlineInteractive: theme => ({
     ':hover': {
       borderBottomColor: theme.colorNeutralStrokeAccessibleHover,
     },
@@ -147,6 +152,8 @@ const useRootStyles = makeStyles({
   filled: theme => ({
     boxShadow: theme.shadow2, // optional shadow for filled appearances
     ...shorthands.border('1px', 'solid', theme.colorTransparentStroke),
+  }),
+  filledInteractive: theme => ({
     // DO NOT add a space between the selectors! It changes the behavior of make-styles.
     ':hover,:focus-within': {
       // also handles pressed border color (:active)
@@ -234,6 +241,10 @@ export const useInputStyles = (state: InputState): InputState => {
     rootStyles.base,
     rootStyles[size],
     rootStyles[appearance],
+    !disabled && rootStyles.interactive,
+    !disabled && appearance === 'outline' && rootStyles.outlineInteractive,
+    !disabled && appearance === 'underline' && rootStyles.underlineInteractive,
+    !disabled && filled && rootStyles.filledInteractive,
     state.inline && rootStyles.inline,
     filled && rootStyles.filled,
     disabled && rootStyles.disabled,