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] Improve color map filter on styles #43579

Merged
merged 9 commits into from
Sep 10, 2024
Merged

[material-ui] Improve color map filter on styles #43579

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
93c006a
Implement checkSimplePaletteColorValues util and use it
DiegoAndai Sep 2, 2024
897c07c
Add missing default optionalValuesToCheck empty array
DiegoAndai Sep 3, 2024
a1a51ca
Use util in all palette mappings
DiegoAndai Sep 3, 2024
a68c79b
Refactor checksimplePaletteColorValues util
DiegoAndai Sep 3, 2024
c501913
Standardize palette mapping calls
DiegoAndai Sep 3, 2024
e8c98a2
Refactor to simplify filter calls
DiegoAndai Sep 6, 2024
952e336
Merge branch 'master' into improve-color-map-filter
DiegoAndai Sep 6, 2024
982213f
Add test
DiegoAndai Sep 9, 2024
7e95a90
Merge branch 'master' into improve-color-map-filter
DiegoAndai Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 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 @@ -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';
Expand Down Expand Up @@ -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']))
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
.map(([color]) => ({
props: { colorSeverity: color, variant: 'standard' },
style: {
Expand All @@ -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: {
Expand All @@ -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: {
Expand Down
3 changes: 2 additions & 1 deletion packages/mui-material/src/AppBar/AppBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -116,7 +117,7 @@ const AppBarRoot = styled(Paper, {
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main && palette.contrastText)
.filter(([, value]) => value && checkSimplePaletteColorValues(value, ['contrastText']))
.map(([color]) => ({
props: { color },
style: {
Expand Down
3 changes: 2 additions & 1 deletion packages/mui-material/src/Badge/Badge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -91,7 +92,7 @@ const BadgeBadge = styled('span', {
}),
variants: [
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main && palette.contrastText)
.filter(([, value]) => value && checkSimplePaletteColorValues(value, ['contrastText']))
.map(([color]) => ({
props: { color },
style: {
Expand Down
5 changes: 4 additions & 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 @@ -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';
Expand Down Expand Up @@ -161,7 +162,9 @@ const ButtonRoot = styled(ButtonBase, {
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText)
.filter(
([, value]) => value && checkSimplePaletteColorValues(value, ['dark', 'contrastText']),
)
.map(([color]) => ({
props: { color },
style: {
Expand Down
5 changes: 3 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 @@ -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';
Expand Down Expand Up @@ -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 },
Expand Down Expand Up @@ -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: {
Expand Down
5 changes: 3 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 @@ -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';

Expand Down Expand Up @@ -66,7 +67,7 @@ const CheckboxRoot = styled(SwitchBase, {
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main)
.filter(([, value]) => value && checkSimplePaletteColorValues(value))
.map(([color]) => ({
props: { color, disableRipple: false },
style: {
Expand All @@ -78,7 +79,7 @@ const CheckboxRoot = styled(SwitchBase, {
},
})),
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main)
.filter(([, value]) => value && checkSimplePaletteColorValues(value))
.map(([color]) => ({
props: { color },
style: {
Expand Down
9 changes: 5 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 @@ -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';

Expand Down Expand Up @@ -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 },
Expand Down Expand Up @@ -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 },
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down
3 changes: 2 additions & 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 @@ -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;
Expand Down Expand Up @@ -101,7 +102,7 @@ const CircularProgressRoot = styled('span', {
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main)
.filter(([, value]) => value && checkSimplePaletteColorValues(value))
.map(([color]) => ({
props: { color },
style: {
Expand Down
5 changes: 4 additions & 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 @@ -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';

Expand Down Expand Up @@ -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: {
Expand Down
3 changes: 2 additions & 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 @@ -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 {
Expand Down Expand Up @@ -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,
Expand Down
3 changes: 2 additions & 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 @@ -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';

Expand Down Expand Up @@ -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: {
Expand Down
3 changes: 2 additions & 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 @@ -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';

Expand Down Expand Up @@ -104,7 +105,7 @@ const IconRoot = styled('span', {
},
},
...Object.entries(theme.palette)
.filter(([, palette]) => palette && palette.main)
.filter(([, value]) => value && checkSimplePaletteColorValues(value))
.map(([color]) => ({
props: { color },
style: {
Expand Down
5 changes: 3 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 @@ -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';
Expand Down Expand Up @@ -102,15 +103,15 @@ 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: {
color: (theme.vars || theme).palette[color].main,
},
})),
...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: {
Expand Down
3 changes: 2 additions & 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 @@ -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 {
Expand Down Expand Up @@ -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: {
Expand Down
11 changes: 6 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 @@ -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';
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand All @@ -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: {
Expand Down
3 changes: 2 additions & 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 @@ -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';
Expand Down Expand Up @@ -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: {
Expand Down
Loading
Loading