From d10aea92f694d65e36fe7b65bc51f757ace4b73e Mon Sep 17 00:00:00 2001 From: Henry Roes Lie Date: Thu, 26 Mar 2020 18:30:50 +0900 Subject: [PATCH 1/4] [NativeSelect] fix icon color on disabled state --- packages/material-ui/src/NativeSelect/NativeSelect.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index e3049ebab5f069..707536de0c3334 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -72,7 +72,8 @@ export const styles = (theme) => ({ position: 'absolute', right: 0, top: 'calc(50% - 12px)', // Center vertically - color: theme.palette.action.active, + color: 'currentColor', // Ensure color stays consistent when disabled. + opacity: 0.8, // Reduced opacity to account for the icon's large surface area. pointerEvents: 'none', // Don't block pointer events on the select under the icon. }, /* Styles applied to the icon component if the popup is open. */ From e2f85f61ba70538d72d9cbab91e4c40e6f51859b Mon Sep 17 00:00:00 2001 From: Henry Roes Lie Date: Thu, 26 Mar 2020 18:31:22 +0900 Subject: [PATCH 2/4] [Autocomplete] unify disabled icon color handling with NativeSelect --- packages/material-ui-lab/src/Autocomplete/Autocomplete.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 3bb69ebe684323..06ffc95d3749c4 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -143,7 +143,11 @@ export const styles = (theme) => ({ popupIndicator: { padding: 2, marginRight: -2, - color: theme.palette.action.active, + color: 'currentColor', // Unify behavior with Select component. + opacity: .8, + '&:disabled': { + color: 'currentColor', // Overrides IconButton's disabled color. + }, }, /* Styles applied to the popup indicator if the popup is open. */ popupIndicatorOpen: { From da46bcf1070f615f255240d3df77a7dbddf7a8a0 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 26 Mar 2020 13:04:58 +0100 Subject: [PATCH 3/4] [Autocomplete] Handle clear icon for consistency --- .../material-ui-lab/src/Autocomplete/Autocomplete.js | 9 +++++---- packages/material-ui/src/NativeSelect/NativeSelect.js | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 06ffc95d3749c4..c7a4742a199cbf 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -134,8 +134,9 @@ export const styles = (theme) => ({ clearIndicator: { marginRight: -2, padding: 4, - color: theme.palette.action.active, visibility: 'hidden', + color: 'currentColor', + opacity: 0.6, }, /* Styles applied to the clear indicator if the input is dirty. */ clearIndicatorDirty: {}, @@ -143,10 +144,10 @@ export const styles = (theme) => ({ popupIndicator: { padding: 2, marginRight: -2, - color: 'currentColor', // Unify behavior with Select component. - opacity: .8, + color: 'currentColor', + opacity: 0.6, '&:disabled': { - color: 'currentColor', // Overrides IconButton's disabled color. + color: 'currentColor', }, }, /* Styles applied to the popup indicator if the popup is open. */ diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index 707536de0c3334..bf0bc15660afa5 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -72,8 +72,8 @@ export const styles = (theme) => ({ position: 'absolute', right: 0, top: 'calc(50% - 12px)', // Center vertically - color: 'currentColor', // Ensure color stays consistent when disabled. - opacity: 0.8, // Reduced opacity to account for the icon's large surface area. + color: 'currentColor', + opacity: 0.6, // Reduced opacity to account for the icon's large surface area. pointerEvents: 'none', // Don't block pointer events on the select under the icon. }, /* Styles applied to the icon component if the popup is open. */ From 0e2a8c8d4936034c471cf7dcdcefe08b27d004d7 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 26 Mar 2020 13:11:01 +0100 Subject: [PATCH 4/4] color instead of opacity? --- packages/material-ui-lab/src/Autocomplete/Autocomplete.js | 7 ------- packages/material-ui/src/NativeSelect/NativeSelect.js | 6 ++++-- packages/material-ui/src/NativeSelect/NativeSelectInput.js | 6 +++++- packages/material-ui/src/Select/SelectInput.js | 1 + 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index c7a4742a199cbf..1ec67d9ac1a2d4 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -135,8 +135,6 @@ export const styles = (theme) => ({ marginRight: -2, padding: 4, visibility: 'hidden', - color: 'currentColor', - opacity: 0.6, }, /* Styles applied to the clear indicator if the input is dirty. */ clearIndicatorDirty: {}, @@ -144,11 +142,6 @@ export const styles = (theme) => ({ popupIndicator: { padding: 2, marginRight: -2, - color: 'currentColor', - opacity: 0.6, - '&:disabled': { - color: 'currentColor', - }, }, /* 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 index bf0bc15660afa5..375636742a7581 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -72,9 +72,11 @@ export const styles = (theme) => ({ position: 'absolute', right: 0, top: 'calc(50% - 12px)', // Center vertically - color: 'currentColor', - opacity: 0.6, // Reduced opacity to account for the icon's large surface area. 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 index 2c925f0a3b59b1..f9b3f669440c2c 100644 --- 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 : ( - + )} ); diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js index 595b3001b50413..6ace9e2bac9aa8 100644 --- 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) {