From 93c006a7aa4db4687a0d9e15a5bc9c86af4eb896 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Mon, 2 Sep 2024 18:28:51 -0400 Subject: [PATCH 1/7] Implement checkSimplePaletteColorValues util and use it --- packages/mui-material/src/AppBar/AppBar.js | 5 ++- packages/mui-material/src/Badge/Badge.js | 5 ++- packages/mui-material/src/Button/Button.js | 6 +++- .../mui-material/src/Checkbox/Checkbox.js | 5 +-- .../src/CircularProgress/CircularProgress.js | 3 +- packages/mui-material/src/Icon/Icon.js | 3 +- packages/mui-material/src/Radio/Radio.js | 5 +-- packages/mui-material/src/Slider/Slider.js | 7 +++-- .../src/ToggleButton/ToggleButton.js | 3 +- .../utils/checkSimplePaletteColorValues.ts | 31 +++++++++++++++++++ 10 files changed, 60 insertions(+), 13 deletions(-) create mode 100644 packages/mui-material/src/utils/checkSimplePaletteColorValues.ts diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index d46fe696c2c6ce..a319cbbcd0abff 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -7,6 +7,7 @@ import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import Paper from '../Paper'; import { getAppBarUtilityClass } from './appBarClasses'; @@ -116,7 +117,9 @@ const AppBarRoot = styled(Paper, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main && palette.contrastText) + .filter( + ([, palette]) => palette && checkSimplePaletteColorValues(palette, ['contrastText']), + ) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index fdd83890b78167..6b607df7ed1385 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -8,6 +8,7 @@ import useSlotProps from '@mui/utils/useSlotProps'; import useBadge from './useBadge'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; @@ -91,7 +92,9 @@ const BadgeBadge = styled('span', { }), variants: [ ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main && palette.contrastText) + .filter( + ([, palette]) => palette && checkSimplePaletteColorValues(palette, ['contrastText']), + ) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 5829312c6e194f..8ec329820254b3 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -11,6 +11,7 @@ import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext'; import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext'; @@ -161,7 +162,10 @@ const ButtonRoot = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText) + .filter( + ([, palette]) => + palette && checkSimplePaletteColorValues(palette, ['dark', 'contrastText']), + ) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js index 741d83b483339e..73e62fd00ae226 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.js +++ b/packages/mui-material/src/Checkbox/Checkbox.js @@ -14,6 +14,7 @@ import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -66,7 +67,7 @@ const CheckboxRoot = styled(SwitchBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) .map(([color]) => ({ props: { color, disableRipple: false }, style: { @@ -78,7 +79,7 @@ const CheckboxRoot = styled(SwitchBase, { }, })), ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js index 88746f36205e9e..11b4265fd6cae0 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.js @@ -8,6 +8,7 @@ import { keyframes, css, styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { getCircularProgressUtilityClass } from './circularProgressClasses'; const SIZE = 44; @@ -101,7 +102,7 @@ const CircularProgressRoot = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js index 1908f8b4f7decd..c0b228739472e8 100644 --- a/packages/mui-material/src/Icon/Icon.js +++ b/packages/mui-material/src/Icon/Icon.js @@ -6,6 +6,7 @@ import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import { getIconUtilityClass } from './iconClasses'; @@ -104,7 +105,7 @@ const IconRoot = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js index 40e47b90100cc1..f16d4c80c20f02 100644 --- a/packages/mui-material/src/Radio/Radio.js +++ b/packages/mui-material/src/Radio/Radio.js @@ -14,6 +14,7 @@ import radioClasses, { getRadioUtilityClass } from './radioClasses'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -61,7 +62,7 @@ const RadioRoot = styled(SwitchBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) .map(([color]) => ({ props: { color, disableRipple: false }, style: { @@ -73,7 +74,7 @@ const RadioRoot = styled(SwitchBase, { }, })), ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index b2642863490a71..10d63cfd1819e5 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -15,6 +15,7 @@ import { useDefaultProps } from '../DefaultPropsProvider'; import slotShouldForwardProp from '../styles/slotShouldForwardProp'; import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; import capitalize from '../utils/capitalize'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import BaseSliderValueLabel from './SliderValueLabel'; import sliderClasses, { getSliderUtilityClass } from './sliderClasses'; @@ -62,7 +63,7 @@ export const SliderRoot = styled('span', { }, variants: [ ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) .map(([color]) => ({ props: { color }, style: { @@ -206,7 +207,7 @@ export const SliderTrack = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) .map(([color]) => ({ props: { color, track: 'inverted' }, style: { @@ -308,7 +309,7 @@ export const SliderThumb = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js index 92df06fcd7f0ae..a3e853e8b56079 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.js +++ b/packages/mui-material/src/ToggleButton/ToggleButton.js @@ -10,6 +10,7 @@ import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses'; import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext'; @@ -89,7 +90,7 @@ const ToggleButtonRoot = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && palette.main) + .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts b/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts new file mode 100644 index 00000000000000..cb36c030d1f86d --- /dev/null +++ b/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts @@ -0,0 +1,31 @@ +import { PaletteColorOptions, SimplePaletteColorOptions } from '../styles/createPalette'; + +function isSimplePaletteColor(obj: PaletteColorOptions): obj is SimplePaletteColorOptions { + return typeof (obj as SimplePaletteColorOptions).main === 'string'; +} + +/** + * Checks if the object conforms to the SimplePaletteColorOptions type. + * The minimum requirement is that the object has a "main" property of type string, this is always checked. + * Optionally, you can pass additional properties to check. + * + * @param obj - The object to check + * @param optionalValuesToCheck - Array with "light", "dark", and/or "contrastText" + * @returns boolean + */ +export default function checkSimplePaletteColorValues( + obj: PaletteColorOptions, + optionalValuesToCheck: (keyof SimplePaletteColorOptions)[], +): boolean { + if (!isSimplePaletteColor(obj)) { + return false; + } + + for (const value of optionalValuesToCheck) { + if (!obj.hasOwnProperty(value) || typeof obj[value] !== 'string') { + return false; + } + } + + return true; +} From 897c07c11a1e6b5c9f0869551ef60205502541b9 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Tue, 3 Sep 2024 11:25:08 -0400 Subject: [PATCH 2/7] Add missing default optionalValuesToCheck empty array --- .../mui-material/src/utils/checkSimplePaletteColorValues.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts b/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts index cb36c030d1f86d..5438d6dc167d59 100644 --- a/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts +++ b/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts @@ -15,7 +15,7 @@ function isSimplePaletteColor(obj: PaletteColorOptions): obj is SimplePaletteCol */ export default function checkSimplePaletteColorValues( obj: PaletteColorOptions, - optionalValuesToCheck: (keyof SimplePaletteColorOptions)[], + optionalValuesToCheck: (keyof SimplePaletteColorOptions)[] = [], ): boolean { if (!isSimplePaletteColor(obj)) { return false; From a1a51ca432600d999ad01092d59a5f9bc8f3b37d Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Tue, 3 Sep 2024 11:43:19 -0400 Subject: [PATCH 3/7] Use util in all palette mappings --- packages/mui-material/src/Alert/Alert.js | 7 ++++--- packages/mui-material/src/ButtonGroup/ButtonGroup.js | 5 +++-- packages/mui-material/src/Chip/Chip.js | 9 +++++---- packages/mui-material/src/Fab/Fab.js | 5 ++++- packages/mui-material/src/FilledInput/FilledInput.js | 3 ++- packages/mui-material/src/FormLabel/FormLabel.js | 3 ++- packages/mui-material/src/IconButton/IconButton.js | 5 +++-- packages/mui-material/src/Input/Input.js | 3 ++- .../mui-material/src/LinearProgress/LinearProgress.js | 11 ++++++----- packages/mui-material/src/Link/Link.js | 3 ++- .../mui-material/src/OutlinedInput/OutlinedInput.js | 3 ++- .../mui-material/src/PaginationItem/PaginationItem.js | 7 +++++-- packages/mui-material/src/Switch/Switch.js | 3 ++- packages/mui-material/src/Typography/Typography.js | 3 ++- 14 files changed, 44 insertions(+), 26 deletions(-) diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js index 62b0778a7010e6..bae41202f7dd08 100644 --- a/packages/mui-material/src/Alert/Alert.js +++ b/packages/mui-material/src/Alert/Alert.js @@ -9,6 +9,7 @@ import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import useSlot from '../utils/useSlot'; import capitalize from '../utils/capitalize'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import Paper from '../Paper'; import alertClasses, { getAlertUtilityClass } from './alertClasses'; import IconButton from '../IconButton'; @@ -59,7 +60,7 @@ const AlertRoot = styled(Paper, { padding: '6px 16px', variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.light) + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['light'])) .map(([color]) => ({ props: { colorSeverity: color, variant: 'standard' }, style: { @@ -77,7 +78,7 @@ const AlertRoot = styled(Paper, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.light) + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['light'])) .map(([color]) => ({ props: { colorSeverity: color, variant: 'outlined' }, style: { @@ -93,7 +94,7 @@ const AlertRoot = styled(Paper, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.dark) + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['dark'])) .map(([color]) => ({ props: { colorSeverity: color, variant: 'filled' }, style: { diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 981f8a2b7609b8..9b6e0b7f3c2a97 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -8,6 +8,7 @@ import getValidReactChildren from '@mui/utils/getValidReactChildren'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses'; import ButtonGroupContext from './ButtonGroupContext'; @@ -165,7 +166,7 @@ const ButtonGroupRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .flatMap(([color]) => [ { props: { variant: 'text', color }, @@ -229,7 +230,7 @@ const ButtonGroupRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.dark) + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['dark'])) .map(([color]) => ({ props: { variant: 'contained', color }, style: { diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index bea43f06e19903..72cfe6d514bc0b 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -11,6 +11,7 @@ import capitalize from '../utils/capitalize'; import ButtonBase from '../ButtonBase'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import chipClasses, { getChipUtilityClass } from './chipClasses'; @@ -165,7 +166,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.contrastText) + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['contrastText'])) .map(([color]) => { return { props: { color }, @@ -213,7 +214,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.dark) + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['dark'])) .map(([color]) => { return { props: { color, onDelete: true }, @@ -252,7 +253,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.dark) + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['dark'])) .map(([color]) => ({ props: { color, clickable: true }, style: { @@ -297,7 +298,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) // no need to check for mainChannel as it's calculated from main + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) // no need to check for mainChannel as it's calculated from main .map(([color]) => ({ props: { variant: 'outlined', color }, style: { diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js index 2a7db6fcf197e5..62bb4ff111fd7f 100644 --- a/packages/mui-material/src/Fab/Fab.js +++ b/packages/mui-material/src/Fab/Fab.js @@ -9,6 +9,7 @@ import fabClasses, { getFabUtilityClass } from './fabClasses'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -137,7 +138,9 @@ const FabRoot = styled(ButtonBase, { memoTheme(({ theme }) => ({ variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.dark && value.contrastText) // check all the used fields in the style below + .filter( + ([, value]) => value && checkSimplePaletteColorValues(value, ['dark', 'contrastText']), + ) // check all the used fields in the style below .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index ee9c6e3cfc63b1..c4da69c3e7207f 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -8,6 +8,7 @@ import InputBase from '../InputBase'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses'; import { @@ -137,7 +138,7 @@ const FilledInputRoot = styled(InputBaseRoot, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) // check all the used fields in the style below + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) // check all the used fields in the style below .map(([color]) => ({ props: { disableUnderline: false, diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js index 446f6494b4b1b5..a3e136d9c337cb 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.js +++ b/packages/mui-material/src/FormLabel/FormLabel.js @@ -8,6 +8,7 @@ import useFormControl from '../FormControl/useFormControl'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses'; @@ -48,7 +49,7 @@ export const FormLabelRoot = styled('label', { position: 'relative', variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index af22d5c655a9ff..d2f94b286206d7 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -7,6 +7,7 @@ import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; @@ -102,7 +103,7 @@ const IconButtonRoot = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) // check all the used fields in the style below + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) // check all the used fields in the style below .map(([color]) => ({ props: { color }, style: { @@ -110,7 +111,7 @@ const IconButtonRoot = styled(ButtonBase, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) // check all the used fields in the style below + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) // check all the used fields in the style below .map(([color]) => ({ props: { color, disableRipple: false }, style: { diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js index 9ff6587bdd42b5..a11f91fdbcf1ac 100644 --- a/packages/mui-material/src/Input/Input.js +++ b/packages/mui-material/src/Input/Input.js @@ -8,6 +8,7 @@ import InputBase from '../InputBase'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import inputClasses, { getInputUtilityClass } from './inputClasses'; import { @@ -114,7 +115,7 @@ const InputRoot = styled(InputBaseRoot, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color, disableUnderline: false }, style: { diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js index d3224fd41a2ef8..1dfc7ac1e3d0c9 100644 --- a/packages/mui-material/src/LinearProgress/LinearProgress.js +++ b/packages/mui-material/src/LinearProgress/LinearProgress.js @@ -7,6 +7,7 @@ import { darken, lighten } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; import { keyframes, css, styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import { getLinearProgressUtilityClass } from './linearProgressClasses'; @@ -144,7 +145,7 @@ const LinearProgressRoot = styled('span', { }, variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { @@ -204,7 +205,7 @@ const LinearProgressDashed = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => { const backgroundColor = getColorShade(theme, color); return { @@ -256,7 +257,7 @@ const LinearProgressBar1 = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { @@ -323,7 +324,7 @@ const LinearProgressBar2 = styled('span', { transformOrigin: 'left', variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { @@ -346,7 +347,7 @@ const LinearProgressBar2 = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color, variant: 'buffer' }, style: { diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js index a3b9a1829ac86e..819b88b3672b1b 100644 --- a/packages/mui-material/src/Link/Link.js +++ b/packages/mui-material/src/Link/Link.js @@ -9,6 +9,7 @@ import isFocusVisible from '@mui/utils/isFocusVisible'; import capitalize from '../utils/capitalize'; import { styled, useTheme } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import Typography from '../Typography'; import linkClasses, { getLinkUtilityClass } from './linkClasses'; @@ -95,7 +96,7 @@ const LinkRoot = styled(Typography, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { underline: 'always', color }, style: { diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js index 01cc3a7fd47e68..0db7aa606cd22b 100644 --- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js +++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js @@ -9,6 +9,7 @@ import formControlState from '../FormControl/formControlState'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { useDefaultProps } from '../DefaultPropsProvider'; import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses'; import InputBase, { @@ -55,7 +56,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, { }, variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index 76f49942981c6b..a4125c1a5ab462 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -8,6 +8,7 @@ import { useRtl } from '@mui/system/RtlProvider'; import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import FirstPageIcon from '../internal/svg-icons/FirstPage'; import LastPageIcon from '../internal/svg-icons/LastPage'; import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; @@ -218,7 +219,9 @@ const PaginationItemPage = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.dark && value.contrastText) + .filter( + ([, value]) => value && checkSimplePaletteColorValues(value, ['dark', 'contrastText']), + ) .map(([color]) => ({ props: { variant: 'text', color }, style: { @@ -242,7 +245,7 @@ const PaginationItemPage = styled(ButtonBase, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.light) + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['light'])) .map(([color]) => ({ props: { variant: 'outlined', color }, style: { diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js index 1a0fe4a1ecea9e..8fca60580753d2 100644 --- a/packages/mui-material/src/Switch/Switch.js +++ b/packages/mui-material/src/Switch/Switch.js @@ -7,6 +7,7 @@ import refType from '@mui/utils/refType'; import composeClasses from '@mui/utils/composeClasses'; import { alpha, darken, lighten } from '@mui/system/colorManipulator'; import capitalize from '../utils/capitalize'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import SwitchBase from '../internal/SwitchBase'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; @@ -150,7 +151,7 @@ const SwitchSwitchBase = styled(SwitchBase, { }, variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main && value.light) // check all the used fields in the style below + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['light'])) // check all the used fields in the style below .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index c52f7307ac5afd..a9f88628fcbb22 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -7,6 +7,7 @@ import { styled, internal_createExtendSxProp } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; +import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; import { getTypographyUtilityClass } from './typographyClasses'; const v6Colors = { @@ -77,7 +78,7 @@ export const TypographyRoot = styled('span', { style: value, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && value.main) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { From a68c79b92d4e84c60c2c122e89f5dce8aab8571d Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Tue, 3 Sep 2024 11:43:43 -0400 Subject: [PATCH 4/7] Refactor checksimplePaletteColorValues util --- .../src/utils/checkSimplePaletteColorValues.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts b/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts index 5438d6dc167d59..d45d76a41e2e86 100644 --- a/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts +++ b/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts @@ -1,6 +1,6 @@ import { PaletteColorOptions, SimplePaletteColorOptions } from '../styles/createPalette'; -function isSimplePaletteColor(obj: PaletteColorOptions): obj is SimplePaletteColorOptions { +function hasCorrectMainProperty(obj: PaletteColorOptions): obj is SimplePaletteColorOptions { return typeof (obj as SimplePaletteColorOptions).main === 'string'; } @@ -10,18 +10,18 @@ function isSimplePaletteColor(obj: PaletteColorOptions): obj is SimplePaletteCol * Optionally, you can pass additional properties to check. * * @param obj - The object to check - * @param optionalValuesToCheck - Array with "light", "dark", and/or "contrastText" + * @param additionalPropertiesToCheck - Array containing "light", "dark", and/or "contrastText" * @returns boolean */ export default function checkSimplePaletteColorValues( obj: PaletteColorOptions, - optionalValuesToCheck: (keyof SimplePaletteColorOptions)[] = [], + additionalPropertiesToCheck: (keyof Omit)[] = [], ): boolean { - if (!isSimplePaletteColor(obj)) { + if (!hasCorrectMainProperty(obj)) { return false; } - for (const value of optionalValuesToCheck) { + for (const value of additionalPropertiesToCheck) { if (!obj.hasOwnProperty(value) || typeof obj[value] !== 'string') { return false; } From c501913685ed69f1f6d1f6cfec962b9e57962612 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Tue, 3 Sep 2024 11:51:17 -0400 Subject: [PATCH 5/7] Standardize palette mapping calls --- packages/mui-material/src/AppBar/AppBar.js | 4 +--- packages/mui-material/src/Badge/Badge.js | 4 +--- packages/mui-material/src/Button/Button.js | 3 +-- packages/mui-material/src/Checkbox/Checkbox.js | 4 ++-- .../mui-material/src/CircularProgress/CircularProgress.js | 2 +- packages/mui-material/src/Icon/Icon.js | 2 +- packages/mui-material/src/Radio/Radio.js | 4 ++-- packages/mui-material/src/Slider/Slider.js | 6 +++--- packages/mui-material/src/ToggleButton/ToggleButton.js | 2 +- 9 files changed, 13 insertions(+), 18 deletions(-) diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index a319cbbcd0abff..c91369a05e5e71 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -117,9 +117,7 @@ const AppBarRoot = styled(Paper, { }, }, ...Object.entries(theme.palette) - .filter( - ([, palette]) => palette && checkSimplePaletteColorValues(palette, ['contrastText']), - ) + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['contrastText'])) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 6b607df7ed1385..c3fc5a198df0c5 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -92,9 +92,7 @@ const BadgeBadge = styled('span', { }), variants: [ ...Object.entries(theme.palette) - .filter( - ([, palette]) => palette && checkSimplePaletteColorValues(palette, ['contrastText']), - ) + .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['contrastText'])) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 8ec329820254b3..2d4b2d0ddfddaa 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -163,8 +163,7 @@ const ButtonRoot = styled(ButtonBase, { }, ...Object.entries(theme.palette) .filter( - ([, palette]) => - palette && checkSimplePaletteColorValues(palette, ['dark', 'contrastText']), + ([, value]) => value && checkSimplePaletteColorValues(value, ['dark', 'contrastText']), ) .map(([color]) => ({ props: { color }, diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js index 73e62fd00ae226..dc583a51c39b73 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.js +++ b/packages/mui-material/src/Checkbox/Checkbox.js @@ -67,7 +67,7 @@ const CheckboxRoot = styled(SwitchBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color, disableRipple: false }, style: { @@ -79,7 +79,7 @@ const CheckboxRoot = styled(SwitchBase, { }, })), ...Object.entries(theme.palette) - .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js index 11b4265fd6cae0..b599d389504230 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.js @@ -102,7 +102,7 @@ const CircularProgressRoot = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js index c0b228739472e8..8bb2afe3bf39b2 100644 --- a/packages/mui-material/src/Icon/Icon.js +++ b/packages/mui-material/src/Icon/Icon.js @@ -105,7 +105,7 @@ const IconRoot = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js index f16d4c80c20f02..6430529e9b5364 100644 --- a/packages/mui-material/src/Radio/Radio.js +++ b/packages/mui-material/src/Radio/Radio.js @@ -62,7 +62,7 @@ const RadioRoot = styled(SwitchBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color, disableRipple: false }, style: { @@ -74,7 +74,7 @@ const RadioRoot = styled(SwitchBase, { }, })), ...Object.entries(theme.palette) - .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index 10d63cfd1819e5..cf81b2283aea41 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -63,7 +63,7 @@ export const SliderRoot = styled('span', { }, variants: [ ...Object.entries(theme.palette) - .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { @@ -207,7 +207,7 @@ export const SliderTrack = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color, track: 'inverted' }, style: { @@ -309,7 +309,7 @@ export const SliderThumb = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js index a3e853e8b56079..bd161f131f9916 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.js +++ b/packages/mui-material/src/ToggleButton/ToggleButton.js @@ -90,7 +90,7 @@ const ToggleButtonRoot = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, palette]) => palette && checkSimplePaletteColorValues(palette)) + .filter(([, value]) => value && checkSimplePaletteColorValues(value)) .map(([color]) => ({ props: { color }, style: { From e8c98a20fd22c99cc853d9026b72f1562f56f8d3 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Fri, 6 Sep 2024 14:41:15 -0400 Subject: [PATCH 6/7] Refactor to simplify filter calls --- packages/mui-material/src/Alert/Alert.js | 8 +-- packages/mui-material/src/AppBar/AppBar.js | 4 +- packages/mui-material/src/Badge/Badge.js | 4 +- packages/mui-material/src/Button/Button.js | 6 +-- .../src/ButtonGroup/ButtonGroup.js | 6 +-- .../mui-material/src/Checkbox/Checkbox.js | 6 +-- packages/mui-material/src/Chip/Chip.js | 10 ++-- .../src/CircularProgress/CircularProgress.js | 4 +- packages/mui-material/src/Fab/Fab.js | 6 +-- .../src/FilledInput/FilledInput.js | 4 +- .../mui-material/src/FormLabel/FormLabel.js | 4 +- packages/mui-material/src/Icon/Icon.js | 4 +- .../mui-material/src/IconButton/IconButton.js | 6 +-- packages/mui-material/src/Input/Input.js | 4 +- .../src/LinearProgress/LinearProgress.js | 12 ++--- packages/mui-material/src/Link/Link.js | 4 +- .../src/OutlinedInput/OutlinedInput.js | 4 +- .../src/PaginationItem/PaginationItem.js | 8 ++- packages/mui-material/src/Radio/Radio.js | 6 +-- packages/mui-material/src/Slider/Slider.js | 8 +-- packages/mui-material/src/Switch/Switch.js | 4 +- .../src/ToggleButton/ToggleButton.js | 4 +- .../mui-material/src/Typography/Typography.js | 4 +- .../utils/checkSimplePaletteColorValues.ts | 31 ----------- .../utils/createSimplePaletteValueFilter.ts | 54 +++++++++++++++++++ 25 files changed, 116 insertions(+), 99 deletions(-) delete mode 100644 packages/mui-material/src/utils/checkSimplePaletteColorValues.ts create mode 100644 packages/mui-material/src/utils/createSimplePaletteValueFilter.ts diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js index bae41202f7dd08..33c3f68e7b8f4c 100644 --- a/packages/mui-material/src/Alert/Alert.js +++ b/packages/mui-material/src/Alert/Alert.js @@ -9,7 +9,7 @@ import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import useSlot from '../utils/useSlot'; import capitalize from '../utils/capitalize'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import Paper from '../Paper'; import alertClasses, { getAlertUtilityClass } from './alertClasses'; import IconButton from '../IconButton'; @@ -60,7 +60,7 @@ const AlertRoot = styled(Paper, { padding: '6px 16px', variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['light'])) + .filter(createSimplePaletteValueFilter(['light'])) .map(([color]) => ({ props: { colorSeverity: color, variant: 'standard' }, style: { @@ -78,7 +78,7 @@ const AlertRoot = styled(Paper, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['light'])) + .filter(createSimplePaletteValueFilter(['light'])) .map(([color]) => ({ props: { colorSeverity: color, variant: 'outlined' }, style: { @@ -94,7 +94,7 @@ const AlertRoot = styled(Paper, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['dark'])) + .filter(createSimplePaletteValueFilter(['dark'])) .map(([color]) => ({ props: { colorSeverity: color, variant: 'filled' }, style: { diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js index c91369a05e5e71..5be4078f364c41 100644 --- a/packages/mui-material/src/AppBar/AppBar.js +++ b/packages/mui-material/src/AppBar/AppBar.js @@ -7,7 +7,7 @@ import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import Paper from '../Paper'; import { getAppBarUtilityClass } from './appBarClasses'; @@ -117,7 +117,7 @@ const AppBarRoot = styled(Paper, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['contrastText'])) + .filter(createSimplePaletteValueFilter(['contrastText'])) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index c3fc5a198df0c5..a4d086e63b9fa1 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -8,7 +8,7 @@ import useSlotProps from '@mui/utils/useSlotProps'; import useBadge from './useBadge'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import badgeClasses, { getBadgeUtilityClass } from './badgeClasses'; @@ -92,7 +92,7 @@ const BadgeBadge = styled('span', { }), variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['contrastText'])) + .filter(createSimplePaletteValueFilter(['contrastText'])) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 2d4b2d0ddfddaa..6ddfe62dd10d71 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -11,7 +11,7 @@ import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext'; import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext'; @@ -162,9 +162,7 @@ const ButtonRoot = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter( - ([, value]) => value && checkSimplePaletteColorValues(value, ['dark', 'contrastText']), - ) + .filter(createSimplePaletteValueFilter(['dark', 'contrastText'])) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 9b6e0b7f3c2a97..4b18a7a53dcacd 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -8,7 +8,7 @@ import getValidReactChildren from '@mui/utils/getValidReactChildren'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses'; import ButtonGroupContext from './ButtonGroupContext'; @@ -166,7 +166,7 @@ const ButtonGroupRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .flatMap(([color]) => [ { props: { variant: 'text', color }, @@ -230,7 +230,7 @@ const ButtonGroupRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['dark'])) + .filter(createSimplePaletteValueFilter(['dark'])) .map(([color]) => ({ props: { variant: 'contained', color }, style: { diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js index dc583a51c39b73..dcbb59de9aa90b 100644 --- a/packages/mui-material/src/Checkbox/Checkbox.js +++ b/packages/mui-material/src/Checkbox/Checkbox.js @@ -14,7 +14,7 @@ import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -67,7 +67,7 @@ const CheckboxRoot = styled(SwitchBase, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, disableRipple: false }, style: { @@ -79,7 +79,7 @@ const CheckboxRoot = styled(SwitchBase, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js index 72cfe6d514bc0b..2e4e05b5d09f44 100644 --- a/packages/mui-material/src/Chip/Chip.js +++ b/packages/mui-material/src/Chip/Chip.js @@ -11,7 +11,7 @@ import capitalize from '../utils/capitalize'; import ButtonBase from '../ButtonBase'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import chipClasses, { getChipUtilityClass } from './chipClasses'; @@ -166,7 +166,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['contrastText'])) + .filter(createSimplePaletteValueFilter(['contrastText'])) .map(([color]) => { return { props: { color }, @@ -214,7 +214,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['dark'])) + .filter(createSimplePaletteValueFilter(['dark'])) .map(([color]) => { return { props: { color, onDelete: true }, @@ -253,7 +253,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['dark'])) + .filter(createSimplePaletteValueFilter(['dark'])) .map(([color]) => ({ props: { color, clickable: true }, style: { @@ -298,7 +298,7 @@ const ChipRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) // no need to check for mainChannel as it's calculated from main + .filter(createSimplePaletteValueFilter()) // no need to check for mainChannel as it's calculated from main .map(([color]) => ({ props: { variant: 'outlined', color }, style: { diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js index b599d389504230..e0aaae8ba05f0d 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.js @@ -8,7 +8,7 @@ import { keyframes, css, styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { getCircularProgressUtilityClass } from './circularProgressClasses'; const SIZE = 44; @@ -102,7 +102,7 @@ const CircularProgressRoot = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Fab/Fab.js b/packages/mui-material/src/Fab/Fab.js index 62bb4ff111fd7f..b4a0de38c3f8cd 100644 --- a/packages/mui-material/src/Fab/Fab.js +++ b/packages/mui-material/src/Fab/Fab.js @@ -9,7 +9,7 @@ import fabClasses, { getFabUtilityClass } from './fabClasses'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -138,9 +138,7 @@ const FabRoot = styled(ButtonBase, { memoTheme(({ theme }) => ({ variants: [ ...Object.entries(theme.palette) - .filter( - ([, value]) => value && checkSimplePaletteColorValues(value, ['dark', 'contrastText']), - ) // check all the used fields in the style below + .filter(createSimplePaletteValueFilter(['dark', 'contrastText'])) // check all the used fields in the style below .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index c4da69c3e7207f..7e0d90740b1309 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -8,7 +8,7 @@ import InputBase from '../InputBase'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses'; import { @@ -138,7 +138,7 @@ const FilledInputRoot = styled(InputBaseRoot, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) // check all the used fields in the style below + .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below .map(([color]) => ({ props: { disableUnderline: false, diff --git a/packages/mui-material/src/FormLabel/FormLabel.js b/packages/mui-material/src/FormLabel/FormLabel.js index a3e136d9c337cb..a773ea4e7d25b9 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.js +++ b/packages/mui-material/src/FormLabel/FormLabel.js @@ -8,7 +8,7 @@ import useFormControl from '../FormControl/useFormControl'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses'; @@ -49,7 +49,7 @@ export const FormLabelRoot = styled('label', { position: 'relative', variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Icon/Icon.js b/packages/mui-material/src/Icon/Icon.js index 8bb2afe3bf39b2..7e7d824f4ff171 100644 --- a/packages/mui-material/src/Icon/Icon.js +++ b/packages/mui-material/src/Icon/Icon.js @@ -6,7 +6,7 @@ import composeClasses from '@mui/utils/composeClasses'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import { getIconUtilityClass } from './iconClasses'; @@ -105,7 +105,7 @@ const IconRoot = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index d2f94b286206d7..05747642096d82 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -7,7 +7,7 @@ import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; @@ -103,7 +103,7 @@ const IconButtonRoot = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) // check all the used fields in the style below + .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below .map(([color]) => ({ props: { color }, style: { @@ -111,7 +111,7 @@ const IconButtonRoot = styled(ButtonBase, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) // check all the used fields in the style below + .filter(createSimplePaletteValueFilter()) // check all the used fields in the style below .map(([color]) => ({ props: { color, disableRipple: false }, style: { diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js index a11f91fdbcf1ac..6f1c58b7436643 100644 --- a/packages/mui-material/src/Input/Input.js +++ b/packages/mui-material/src/Input/Input.js @@ -8,7 +8,7 @@ import InputBase from '../InputBase'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import inputClasses, { getInputUtilityClass } from './inputClasses'; import { @@ -115,7 +115,7 @@ const InputRoot = styled(InputBaseRoot, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, disableUnderline: false }, style: { diff --git a/packages/mui-material/src/LinearProgress/LinearProgress.js b/packages/mui-material/src/LinearProgress/LinearProgress.js index 1dfc7ac1e3d0c9..f5e77d32b6b850 100644 --- a/packages/mui-material/src/LinearProgress/LinearProgress.js +++ b/packages/mui-material/src/LinearProgress/LinearProgress.js @@ -7,7 +7,7 @@ import { darken, lighten } from '@mui/system/colorManipulator'; import { useRtl } from '@mui/system/RtlProvider'; import { keyframes, css, styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import { getLinearProgressUtilityClass } from './linearProgressClasses'; @@ -145,7 +145,7 @@ const LinearProgressRoot = styled('span', { }, variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { @@ -205,7 +205,7 @@ const LinearProgressDashed = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => { const backgroundColor = getColorShade(theme, color); return { @@ -257,7 +257,7 @@ const LinearProgressBar1 = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { @@ -324,7 +324,7 @@ const LinearProgressBar2 = styled('span', { transformOrigin: 'left', variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { @@ -347,7 +347,7 @@ const LinearProgressBar2 = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, variant: 'buffer' }, style: { diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js index 819b88b3672b1b..77d1401d6f3d71 100644 --- a/packages/mui-material/src/Link/Link.js +++ b/packages/mui-material/src/Link/Link.js @@ -9,7 +9,7 @@ import isFocusVisible from '@mui/utils/isFocusVisible'; import capitalize from '../utils/capitalize'; import { styled, useTheme } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import Typography from '../Typography'; import linkClasses, { getLinkUtilityClass } from './linkClasses'; @@ -96,7 +96,7 @@ const LinkRoot = styled(Typography, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { underline: 'always', color }, style: { diff --git a/packages/mui-material/src/OutlinedInput/OutlinedInput.js b/packages/mui-material/src/OutlinedInput/OutlinedInput.js index 0db7aa606cd22b..e96b4ec567c638 100644 --- a/packages/mui-material/src/OutlinedInput/OutlinedInput.js +++ b/packages/mui-material/src/OutlinedInput/OutlinedInput.js @@ -9,7 +9,7 @@ import formControlState from '../FormControl/formControlState'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses'; import InputBase, { @@ -56,7 +56,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, { }, variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index a4125c1a5ab462..d85a37ae33b254 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -8,7 +8,7 @@ import { useRtl } from '@mui/system/RtlProvider'; import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import FirstPageIcon from '../internal/svg-icons/FirstPage'; import LastPageIcon from '../internal/svg-icons/LastPage'; import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore'; @@ -219,9 +219,7 @@ const PaginationItemPage = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter( - ([, value]) => value && checkSimplePaletteColorValues(value, ['dark', 'contrastText']), - ) + .filter(createSimplePaletteValueFilter(['dark', 'contrastText'])) .map(([color]) => ({ props: { variant: 'text', color }, style: { @@ -245,7 +243,7 @@ const PaginationItemPage = styled(ButtonBase, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['light'])) + .filter(createSimplePaletteValueFilter(['light'])) .map(([color]) => ({ props: { variant: 'outlined', color }, style: { diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js index 6430529e9b5364..f358ed416ac006 100644 --- a/packages/mui-material/src/Radio/Radio.js +++ b/packages/mui-material/src/Radio/Radio.js @@ -14,7 +14,7 @@ import radioClasses, { getRadioUtilityClass } from './radioClasses'; import rootShouldForwardProp from '../styles/rootShouldForwardProp'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; @@ -62,7 +62,7 @@ const RadioRoot = styled(SwitchBase, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, disableRipple: false }, style: { @@ -74,7 +74,7 @@ const RadioRoot = styled(SwitchBase, { }, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index cf81b2283aea41..2a6291380a84ab 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -15,7 +15,7 @@ import { useDefaultProps } from '../DefaultPropsProvider'; import slotShouldForwardProp from '../styles/slotShouldForwardProp'; import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps'; import capitalize from '../utils/capitalize'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import BaseSliderValueLabel from './SliderValueLabel'; import sliderClasses, { getSliderUtilityClass } from './sliderClasses'; @@ -63,7 +63,7 @@ export const SliderRoot = styled('span', { }, variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { @@ -207,7 +207,7 @@ export const SliderTrack = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color, track: 'inverted' }, style: { @@ -309,7 +309,7 @@ export const SliderThumb = styled('span', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Switch/Switch.js b/packages/mui-material/src/Switch/Switch.js index 8fca60580753d2..bd5a766e8b9263 100644 --- a/packages/mui-material/src/Switch/Switch.js +++ b/packages/mui-material/src/Switch/Switch.js @@ -7,7 +7,7 @@ import refType from '@mui/utils/refType'; import composeClasses from '@mui/utils/composeClasses'; import { alpha, darken, lighten } from '@mui/system/colorManipulator'; import capitalize from '../utils/capitalize'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import SwitchBase from '../internal/SwitchBase'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; @@ -151,7 +151,7 @@ const SwitchSwitchBase = styled(SwitchBase, { }, variants: [ ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value, ['light'])) // check all the used fields in the style below + .filter(createSimplePaletteValueFilter(['light'])) // check all the used fields in the style below .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js index bd161f131f9916..007d2311709e7b 100644 --- a/packages/mui-material/src/ToggleButton/ToggleButton.js +++ b/packages/mui-material/src/ToggleButton/ToggleButton.js @@ -10,7 +10,7 @@ import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { useDefaultProps } from '../DefaultPropsProvider'; import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses'; import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext'; @@ -90,7 +90,7 @@ const ToggleButtonRoot = styled(ButtonBase, { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index a9f88628fcbb22..dcda0315e3bdb3 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -7,7 +7,7 @@ import { styled, internal_createExtendSxProp } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; -import checkSimplePaletteColorValues from '../utils/checkSimplePaletteColorValues'; +import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { getTypographyUtilityClass } from './typographyClasses'; const v6Colors = { @@ -78,7 +78,7 @@ export const TypographyRoot = styled('span', { style: value, })), ...Object.entries(theme.palette) - .filter(([, value]) => value && checkSimplePaletteColorValues(value)) + .filter(createSimplePaletteValueFilter()) .map(([color]) => ({ props: { color }, style: { diff --git a/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts b/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts deleted file mode 100644 index d45d76a41e2e86..00000000000000 --- a/packages/mui-material/src/utils/checkSimplePaletteColorValues.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { PaletteColorOptions, SimplePaletteColorOptions } from '../styles/createPalette'; - -function hasCorrectMainProperty(obj: PaletteColorOptions): obj is SimplePaletteColorOptions { - return typeof (obj as SimplePaletteColorOptions).main === 'string'; -} - -/** - * Checks if the object conforms to the SimplePaletteColorOptions type. - * The minimum requirement is that the object has a "main" property of type string, this is always checked. - * Optionally, you can pass additional properties to check. - * - * @param obj - The object to check - * @param additionalPropertiesToCheck - Array containing "light", "dark", and/or "contrastText" - * @returns boolean - */ -export default function checkSimplePaletteColorValues( - obj: PaletteColorOptions, - additionalPropertiesToCheck: (keyof Omit)[] = [], -): boolean { - if (!hasCorrectMainProperty(obj)) { - return false; - } - - for (const value of additionalPropertiesToCheck) { - if (!obj.hasOwnProperty(value) || typeof obj[value] !== 'string') { - return false; - } - } - - return true; -} diff --git a/packages/mui-material/src/utils/createSimplePaletteValueFilter.ts b/packages/mui-material/src/utils/createSimplePaletteValueFilter.ts new file mode 100644 index 00000000000000..6fcbdb3ab162d3 --- /dev/null +++ b/packages/mui-material/src/utils/createSimplePaletteValueFilter.ts @@ -0,0 +1,54 @@ +import { PaletteColorOptions, SimplePaletteColorOptions } from '../styles/createPalette'; + +/** + * Type guard to check if the object has a "main" property of type string. + * + * @param obj - the object to check + * @returns boolean + */ +function hasCorrectMainProperty(obj: PaletteColorOptions): obj is SimplePaletteColorOptions { + return typeof (obj as SimplePaletteColorOptions).main === 'string'; +} + +type AdditionalPropertiesToCheck = (keyof Omit)[]; + +/** + * Checks if the object conforms to the SimplePaletteColorOptions type. + * The minimum requirement is that the object has a "main" property of type string, this is always checked. + * Optionally, you can pass additional properties to check. + * + * @param obj - The object to check + * @param additionalPropertiesToCheck - Array containing "light", "dark", and/or "contrastText" + * @returns boolean + */ +function checkSimplePaletteColorValues( + obj: PaletteColorOptions, + additionalPropertiesToCheck: AdditionalPropertiesToCheck = [], +): boolean { + if (!hasCorrectMainProperty(obj)) { + return false; + } + + for (const value of additionalPropertiesToCheck) { + if (!obj.hasOwnProperty(value) || typeof obj[value] !== 'string') { + return false; + } + } + + return true; +} + +/** + * Creates a filter function used to filter simple palette color options. + * The minimum requirement is that the object has a "main" property of type string, this is always checked. + * Optionally, you can pass additional properties to check. + * + * @param additionalPropertiesToCheck - Array containing "light", "dark", and/or "contrastText" + * @returns ([, value]: [any, PaletteColorOptions]) => boolean + */ +export default function createSimplePaletteValueFilter( + additionalPropertiesToCheck: AdditionalPropertiesToCheck = [], +) { + return ([, value]: [any, PaletteColorOptions]) => + value && checkSimplePaletteColorValues(value, additionalPropertiesToCheck); +} From 982213fc805e15db07aa3a34d6fbbd1f56ecded5 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Mon, 9 Sep 2024 17:52:31 -0300 Subject: [PATCH 7/7] Add test --- packages-internal/test-utils/src/describeConformance.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 3c2177b299de8a..744f4fdb8ad241 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -986,6 +986,13 @@ function testThemeCustomPalette( main: '#ff5252', }, unknown: null, + custom2: { + main: { + blue: { + dark: '#FFCC00', + }, + }, + }, }, });