[Select] Apply disabled color to the icon (#20287)

* [NativeSelect] fix icon color on disabled state * [Autocomplete] unify disabled icon color handling with NativeSelect * [Autocomplete] Handle clear icon for consistency * color instead of opacity? Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
mui · Mar 26, 2020 · fb002af · fb002af
1 parent ac25d40
commit fb002af
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -134,7 +134,6 @@ export const styles = (theme) => ({
   clearIndicator: {
     marginRight: -2,
     padding: 4,
-    color: theme.palette.action.active,
     visibility: 'hidden',
   },
   /* Styles applied to the clear indicator if the input is dirty. */
@@ -143,7 +142,6 @@ export const styles = (theme) => ({
   popupIndicator: {
     padding: 2,
     marginRight: -2,
-    color: theme.palette.action.active,
   },
   /* Styles applied to the popup indicator if the popup is open. */
   popupIndicatorOpen: {

diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js
@@ -72,8 +72,11 @@ export const styles = (theme) => ({
     position: 'absolute',
     right: 0,
     top: 'calc(50% - 12px)', // Center vertically
-    color: theme.palette.action.active,
     pointerEvents: 'none', // Don't block pointer events on the select under the icon.
+    color: theme.palette.action.active,
+    '&$disabled': {
+      color: theme.palette.action.disabled,
+    },
   },
   /* Styles applied to the icon component if the popup is open. */
   iconOpen: {

diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -35,7 +35,11 @@ const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref
         {...other}
       />
       {props.multiple ? null : (
-        <IconComponent className={clsx(classes.icon, classes[`icon${capitalize(variant)}`])} />
+        <IconComponent
+          className={clsx(classes.icon, classes[`icon${capitalize(variant)}`], {
+            [classes.disabled]: disabled,
+          })}
+        />
       )}
     </React.Fragment>
   );

diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
@@ -349,6 +349,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
       <IconComponent
         className={clsx(classes.icon, classes[`icon${capitalize(variant)}`], {
           [classes.iconOpen]: open,
+          [classes.disabled]: disabled,
         })}
       />
       <Menu