Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[material-ui] Filter only valid theme palette for generating styles #42147

Merged
merged 3 commits into from
May 17, 2024
Merged

[material-ui] Filter only valid theme palette for generating styles #42147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1ebe407
filter only valid palette
siriwatknp May 6, 2024
9b370e8
Merge branch 'next' of https://github.com/mui/material-ui into fix/th…
siriwatknp May 14, 2024
c6f3d6c
add test and prevent all errors
siriwatknp May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/mui-material/src/Alert/Alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const AlertRoot = styled(Paper, {
padding: '6px 16px',
variants: [
...Object.entries(theme.palette)
.filter(([, value]) => value.main && value.light)
.filter(([, value]) => value && value.main && value.light)
.map(([color]) => ({
props: { colorSeverity: color, variant: 'standard' },
style: {
Expand All @@ -76,7 +76,7 @@ const AlertRoot = styled(Paper, {
},
})),
...Object.entries(theme.palette)
.filter(([, value]) => value.main && value.light)
.filter(([, value]) => value && value.main && value.light)
.map(([color]) => ({
props: { colorSeverity: color, variant: 'outlined' },
style: {
Expand All @@ -92,7 +92,7 @@ const AlertRoot = styled(Paper, {
},
})),
...Object.entries(theme.palette)
.filter(([, value]) => value.main && value.dark)
.filter(([, value]) => value && value.main && value.dark)
.map(([color]) => ({
props: { colorSeverity: color, variant: 'filled' },
style: {
Expand Down
10 changes: 3 additions & 7 deletions packages/mui-material/src/AppBar/AppBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,13 +114,9 @@ const AppBarRoot = styled(Paper, {
}),
},
},
...Object.keys((theme.vars ?? theme).palette)
.filter(
(key) =>
(theme.vars ?? theme).palette[key].main &&
(theme.vars ?? theme).palette[key].contrastText,
)
.map((color) => ({
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main && palette.contrastText)
.map(([color]) => ({
props: { color },
style: {
'--AppBar-background': (theme.vars ?? theme).palette[color].main,
Expand Down
10 changes: 3 additions & 7 deletions packages/mui-material/src/Badge/Badge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,13 +89,9 @@ const BadgeBadge = styled('span', {
duration: theme.transitions.duration.enteringScreen,
}),
variants: [
...Object.keys((theme.vars ?? theme).palette)
.filter(
(key) =>
(theme.vars ?? theme).palette[key].main &&
(theme.vars ?? theme).palette[key].contrastText,
)
.map((color) => ({
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main && palette.contrastText)
.map(([color]) => ({
props: { color },
style: {
backgroundColor: (theme.vars || theme).palette[color].main,
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Button/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ const ButtonRoot = styled(ButtonBase, {
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main && palette.dark && palette.contrastText)
.filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText)
.map(([color]) => ({
props: { color },
style: {
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/ButtonGroup/ButtonGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ const ButtonGroupRoot = styled('div', {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.flatMap(([color]) => [
{
props: { variant: 'text', color },
Expand Down Expand Up @@ -224,7 +224,7 @@ const ButtonGroupRoot = styled('div', {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.dark)
.filter(([, value]) => value && value.dark)
.map(([color]) => ({
props: { variant: 'contained', color },
style: {
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/Checkbox/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const CheckboxRoot = styled(SwitchBase, {
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main)
.filter(([, palette]) => palette && palette.main)
.map(([color]) => ({
props: { color, disableRipple: false },
style: {
Expand All @@ -76,7 +76,7 @@ const CheckboxRoot = styled(SwitchBase, {
},
})),
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main)
.filter(([, palette]) => palette && palette.main)
.map(([color]) => ({
props: { color },
style: {
Expand Down
8 changes: 4 additions & 4 deletions packages/mui-material/src/Chip/Chip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ const ChipRoot = styled('div', {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main && value.contrastText)
.filter(([, value]) => value && value.main && value.contrastText)
.map(([color]) => {
return {
props: { color },
Expand Down Expand Up @@ -212,7 +212,7 @@ const ChipRoot = styled('div', {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.dark)
.filter(([, value]) => value && value.dark)
.map(([color]) => {
return {
props: { color, onDelete: true },
Expand Down Expand Up @@ -251,7 +251,7 @@ const ChipRoot = styled('div', {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.dark)
.filter(([, value]) => value && value.dark)
.map(([color]) => ({
props: { color, clickable: true },
style: {
Expand Down Expand Up @@ -296,7 +296,7 @@ const ChipRoot = styled('div', {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main) // no need to check for mainChannel as it's calculated from main
.filter(([, value]) => value && value.main) // no need to check for mainChannel as it's calculated from main
.map(([color]) => ({
props: { variant: 'outlined', color },
style: {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/CircularProgress/CircularProgress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const CircularProgressRoot = styled('span', {
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main)
.filter(([, palette]) => palette && palette.main)
.map(([color]) => ({
props: { color },
style: {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Fab/Fab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const FabRoot = styled(ButtonBase, {
({ theme }) => ({
variants: [
...Object.entries(theme.palette)
.filter(([, value]) => value.main && value.dark && value.contrastText) // check all the used fields in the style below
.filter(([, value]) => value && value.main && value.dark && value.contrastText) // check all the used fields in the style below
.map(([color]) => ({
props: { color },
style: {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/FilledInput/FilledInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main) // check all the used fields in the style below
.filter(([, value]) => value && value.main) // check all the used fields in the style below
.map(([color]) => ({
props: {
disableUnderline: false,
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/FormLabel/FormLabel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const FormLabelRoot = styled('label', {
position: 'relative',
variants: [
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => ({
props: { color },
style: {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Icon/Icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const IconRoot = styled('span', {
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main)
.filter(([, palette]) => palette && palette.main)
.map(([color]) => ({
props: { color },
style: {
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/IconButton/IconButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,15 +104,15 @@ const IconButtonRoot = styled(ButtonBase, {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main) // check all the used fields in the style below
.filter(([, value]) => value && value.main) // check all the used fields in the style below
.map(([color]) => ({
props: { color },
style: {
color: (theme.vars || theme).palette[color].main,
},
})),
...Object.entries(theme.palette)
.filter(([, value]) => value.main) // check all the used fields in the style below
.filter(([, value]) => value && value.main) // check all the used fields in the style below
.map(([color]) => ({
props: { color, disableRipple: false },
style: {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Input/Input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const InputRoot = styled(InputBaseRoot, {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => ({
props: { color, disableUnderline: false },
style: {
Expand Down
10 changes: 5 additions & 5 deletions packages/mui-material/src/LinearProgress/LinearProgress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const LinearProgressRoot = styled('span', {
},
variants: [
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => ({
props: { color },
style: {
Expand Down Expand Up @@ -201,7 +201,7 @@ const LinearProgressDashed = styled('span', {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => {
const backgroundColor = getColorShade(theme, color);
return {
Expand Down Expand Up @@ -252,7 +252,7 @@ const LinearProgressBar1 = styled('span', {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => ({
props: { color },
style: {
Expand Down Expand Up @@ -317,7 +317,7 @@ const LinearProgressBar2 = styled('span', {
transformOrigin: 'left',
variants: [
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => ({
props: { color },
style: {
Expand All @@ -339,7 +339,7 @@ const LinearProgressBar2 = styled('span', {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => ({
props: { color, variant: 'buffer' },
style: {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Link/Link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const LinkRoot = styled(Typography, {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => ({
props: { underline: 'always', color },
style: {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/OutlinedInput/OutlinedInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
},
variants: [
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => ({
props: { color },
style: {
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/PaginationItem/PaginationItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ const PaginationItemPage = styled(ButtonBase, {
},
},
...Object.entries(theme.palette)
.filter(([, value]) => value.main && value.dark && value.contrastText)
.filter(([, value]) => value && value.main && value.dark && value.contrastText)
.map(([color]) => ({
props: { variant: 'text', color },
style: {
Expand All @@ -238,7 +238,7 @@ const PaginationItemPage = styled(ButtonBase, {
},
})),
...Object.entries(theme.palette)
.filter(([, value]) => value.main && value.light)
.filter(([, value]) => value && value.main && value.light)
.map(([color]) => ({
props: { variant: 'outlined', color },
style: {
Expand Down
4 changes: 2 additions & 2 deletions packages/mui-material/src/Radio/Radio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const RadioRoot = styled(SwitchBase, {
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main)
.filter(([, palette]) => palette && palette.main)
.map(([color]) => ({
props: { color, disableRipple: false },
style: {
Expand All @@ -71,7 +71,7 @@ const RadioRoot = styled(SwitchBase, {
},
})),
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main)
.filter(([, palette]) => palette && palette.main)
.map(([color]) => ({
props: { color },
style: {
Expand Down
18 changes: 9 additions & 9 deletions packages/mui-material/src/Slider/Slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ export const SliderRoot = styled('span', {
},
},
variants: [
...Object.keys((theme.vars ?? theme).palette)
.filter((key) => (theme.vars ?? theme).palette[key].main)
.map((color) => ({
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main)
.map(([color]) => ({
props: { color },
style: {
color: (theme.vars || theme).palette[color].main,
Expand Down Expand Up @@ -201,9 +201,9 @@ export const SliderTrack = styled('span', {
display: 'none',
},
},
...Object.keys((theme.vars ?? theme).palette)
.filter((key) => (theme.vars ?? theme).palette[key].main)
.map((color) => ({
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main)
.map(([color]) => ({
props: { color, track: 'inverted' },
style: {
...(theme.vars
Expand Down Expand Up @@ -301,9 +301,9 @@ export const SliderThumb = styled('span', {
transform: 'translate(-50%, 50%)',
},
},
...Object.keys((theme.vars ?? theme).palette)
.filter((key) => (theme.vars ?? theme).palette[key].main)
.map((color) => ({
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main)
.map(([color]) => ({
props: { color },
style: {
[`&:hover, &.${sliderClasses.focusVisible}`]: {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/SvgIcon/SvgIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const SvgIconRoot = styled('svg', {
},
// TODO v5 deprecate color prop, v6 remove for sx
...Object.entries((theme.vars ?? theme).palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => ({
props: { color },
style: { color: (theme.vars ?? theme).palette?.[color]?.main },
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Switch/Switch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const SwitchSwitchBase = styled(SwitchBase, {
},
variants: [
...Object.entries(theme.palette)
.filter(([, value]) => value.main && value.light) // check all the used fields in the style below
.filter(([, value]) => value && value.main && value.light) // check all the used fields in the style below
.map(([color]) => ({
props: { color },
style: {
Expand Down
10 changes: 3 additions & 7 deletions packages/mui-material/src/ToggleButton/ToggleButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,9 @@ const ToggleButtonRoot = styled(ButtonBase, {
},
},
},
...Object.keys((theme.vars || theme).palette)
.filter((key) =>
theme.vars
? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
: theme.palette[key].main,
)
.map((color) => ({
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main)
.map(([color]) => ({
props: { color },
style: {
[`&.${toggleButtonClasses.selected}`]: {
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Typography/Typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export const TypographyRoot = styled('span', {
style: value,
})),
...Object.entries(theme.palette)
.filter(([, value]) => value.main)
.filter(([, value]) => value && value.main)
.map(([color]) => ({
props: { color },
style: {
Expand Down