diff --git a/docs/data/material/components/app-bar/DenseAppBar.js b/docs/data/material/components/app-bar/DenseAppBar.js index 47728a59e7cc81..a170710ef0fa2b 100644 --- a/docs/data/material/components/app-bar/DenseAppBar.js +++ b/docs/data/material/components/app-bar/DenseAppBar.js @@ -13,7 +13,13 @@ export default function DenseAppBar() { - + Photos diff --git a/docs/data/material/components/app-bar/DenseAppBar.tsx b/docs/data/material/components/app-bar/DenseAppBar.tsx index 47728a59e7cc81..a170710ef0fa2b 100644 --- a/docs/data/material/components/app-bar/DenseAppBar.tsx +++ b/docs/data/material/components/app-bar/DenseAppBar.tsx @@ -13,7 +13,13 @@ export default function DenseAppBar() { - + Photos diff --git a/docs/data/material/components/app-bar/DenseAppBar.tsx.preview b/docs/data/material/components/app-bar/DenseAppBar.tsx.preview index 5ca69b1e786b53..09166609bd8828 100644 --- a/docs/data/material/components/app-bar/DenseAppBar.tsx.preview +++ b/docs/data/material/components/app-bar/DenseAppBar.tsx.preview @@ -3,7 +3,13 @@ - + Photos diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md index bc1fc3cff2aeab..758362f4c42e52 100644 --- a/docs/data/material/components/box/box.md +++ b/docs/data/material/components/box/box.md @@ -37,25 +37,11 @@ The demo below replaces the `
` with a `
` element: ## Customization -### With the sx prop - Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package. The demo below shows how to apply colors from the theme using this prop: {{"demo": "BoxSx.js", "defaultCodeOpen": true }} -### With MUI System props - -:::info -System props are deprecated and will be removed in the next major release. Please use the `sx` prop instead. - -```diff -- -+ -``` - -::: - ## Anatomy The Box component is composed of a single root `
` element: diff --git a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js b/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js index cd8eba43726a55..ed49640bdd0172 100644 --- a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js +++ b/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js @@ -23,9 +23,11 @@ export default function ActiveLastBreadcrumb() { Breadcrumbs diff --git a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx b/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx index 92cdbcff7236cb..a6af1a091439d3 100644 --- a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx +++ b/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx @@ -23,9 +23,11 @@ export default function ActiveLastBreadcrumb() { Breadcrumbs diff --git a/docs/data/material/components/buttons/ButtonBaseDemo.js b/docs/data/material/components/buttons/ButtonBaseDemo.js index b383b88a5c199a..28f79fd4672e2c 100644 --- a/docs/data/material/components/buttons/ButtonBaseDemo.js +++ b/docs/data/material/components/buttons/ButtonBaseDemo.js @@ -102,13 +102,17 @@ export default function ButtonBaseDemo() { ({ - position: 'relative', - p: 4, - pt: 2, - pb: `calc(${theme.spacing(1)} + 6px)`, - })} + sx={[ + { + color: 'inherit', + }, + (theme) => ({ + position: 'relative', + p: 4, + pt: 2, + pb: `calc(${theme.spacing(1)} + 6px)`, + }), + ]} > {image.title} diff --git a/docs/data/material/components/buttons/ButtonBaseDemo.tsx b/docs/data/material/components/buttons/ButtonBaseDemo.tsx index b383b88a5c199a..28f79fd4672e2c 100644 --- a/docs/data/material/components/buttons/ButtonBaseDemo.tsx +++ b/docs/data/material/components/buttons/ButtonBaseDemo.tsx @@ -102,13 +102,17 @@ export default function ButtonBaseDemo() { ({ - position: 'relative', - p: 4, - pt: 2, - pb: `calc(${theme.spacing(1)} + 6px)`, - })} + sx={[ + { + color: 'inherit', + }, + (theme) => ({ + position: 'relative', + p: 4, + pt: 2, + pb: `calc(${theme.spacing(1)} + 6px)`, + }), + ]} > {image.title} diff --git a/docs/data/material/components/cards/SelectActionCard.js b/docs/data/material/components/cards/SelectActionCard.js index 584d93eb113e65..7affd816ee9482 100644 --- a/docs/data/material/components/cards/SelectActionCard.js +++ b/docs/data/material/components/cards/SelectActionCard.js @@ -53,7 +53,7 @@ function SelectActionCard() { {card.title} - + {card.description} diff --git a/docs/data/material/components/cards/SelectActionCard.tsx b/docs/data/material/components/cards/SelectActionCard.tsx index 584d93eb113e65..7affd816ee9482 100644 --- a/docs/data/material/components/cards/SelectActionCard.tsx +++ b/docs/data/material/components/cards/SelectActionCard.tsx @@ -53,7 +53,7 @@ function SelectActionCard() { {card.title} - + {card.description} diff --git a/docs/data/material/components/lists/CustomizedList.js b/docs/data/material/components/lists/CustomizedList.js index f05db310f3226a..928055f5567dde 100644 --- a/docs/data/material/components/lists/CustomizedList.js +++ b/docs/data/material/components/lists/CustomizedList.js @@ -69,9 +69,7 @@ export default function CustomizedList() { primary="Firebash" slotProps={{ primary: { - fontSize: 20, - fontWeight: 'medium', - letterSpacing: 0, + sx: { fontSize: 20, fontWeight: 'medium', letterSpacing: 0 }, }, }} /> @@ -87,7 +85,7 @@ export default function CustomizedList() { slotProps={{ primary: { color: 'primary', - fontWeight: 'medium', + sx: { fontWeight: 'medium' }, variant: 'body2', }, }} @@ -184,16 +182,20 @@ export default function CustomizedList() { secondary="Authentication, Firestore Database, Realtime Database, Storage, Hosting, Functions, and Machine Learning" slotProps={{ primary: { - fontSize: 15, - fontWeight: 'medium', - lineHeight: '20px', - mb: '2px', + sx: { + fontSize: 15, + fontWeight: 'medium', + lineHeight: '20px', + mb: '2px', + }, }, secondary: { noWrap: true, - fontSize: 12, - lineHeight: '16px', - color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)', + sx: { + fontSize: 12, + lineHeight: '16px', + color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)', + }, }, }} sx={{ my: 0 }} @@ -226,7 +228,9 @@ export default function CustomizedList() { ))} diff --git a/docs/data/material/components/lists/CustomizedList.tsx b/docs/data/material/components/lists/CustomizedList.tsx index 722f088c11144e..ed72ebf00ba2f7 100644 --- a/docs/data/material/components/lists/CustomizedList.tsx +++ b/docs/data/material/components/lists/CustomizedList.tsx @@ -69,9 +69,7 @@ export default function CustomizedList() { primary="Firebash" slotProps={{ primary: { - fontSize: 20, - fontWeight: 'medium', - letterSpacing: 0, + sx: { fontSize: 20, fontWeight: 'medium', letterSpacing: 0 }, }, }} /> @@ -87,7 +85,7 @@ export default function CustomizedList() { slotProps={{ primary: { color: 'primary', - fontWeight: 'medium', + sx: { fontWeight: 'medium' }, variant: 'body2', }, }} @@ -184,16 +182,20 @@ export default function CustomizedList() { secondary="Authentication, Firestore Database, Realtime Database, Storage, Hosting, Functions, and Machine Learning" slotProps={{ primary: { - fontSize: 15, - fontWeight: 'medium', - lineHeight: '20px', - mb: '2px', + sx: { + fontSize: 15, + fontWeight: 'medium', + lineHeight: '20px', + mb: '2px', + }, }, secondary: { noWrap: true, - fontSize: 12, - lineHeight: '16px', - color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)', + sx: { + fontSize: 12, + lineHeight: '16px', + color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)', + }, }, }} sx={{ my: 0 }} @@ -226,7 +228,9 @@ export default function CustomizedList() { ))} diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js index ea9862d4d444a0..333c65411d8c94 100644 --- a/docs/data/material/components/material-icons/SearchIcons.js +++ b/docs/data/material/components/material-icons/SearchIcons.js @@ -615,9 +615,7 @@ export default function SearchIcons() { }} >
- - Filter the style - + Filter the style setTheme(event.target.value)} diff --git a/docs/data/material/components/progress/CircularSize.js b/docs/data/material/components/progress/CircularSize.js index e4ce05a6fa04cd..dd8de4828d875a 100644 --- a/docs/data/material/components/progress/CircularSize.js +++ b/docs/data/material/components/progress/CircularSize.js @@ -3,7 +3,7 @@ import CircularProgress from '@mui/material/CircularProgress'; export default function CircularSize() { return ( - + diff --git a/docs/data/material/components/progress/CircularSize.tsx b/docs/data/material/components/progress/CircularSize.tsx index e4ce05a6fa04cd..dd8de4828d875a 100644 --- a/docs/data/material/components/progress/CircularSize.tsx +++ b/docs/data/material/components/progress/CircularSize.tsx @@ -3,7 +3,7 @@ import CircularProgress from '@mui/material/CircularProgress'; export default function CircularSize() { return ( - + diff --git a/docs/data/material/components/slider/MusicPlayerSlider.js b/docs/data/material/components/slider/MusicPlayerSlider.js index bd128e86d6f640..145bbc2beed973 100644 --- a/docs/data/material/components/slider/MusicPlayerSlider.js +++ b/docs/data/material/components/slider/MusicPlayerSlider.js @@ -196,6 +196,7 @@ export default function MusicPlayerSlider() { spacing={2} direction="row" sx={(theme) => ({ + alignItems: 'center', mb: 1, px: 1, '& > svg': { @@ -205,7 +206,6 @@ export default function MusicPlayerSlider() { }), }, })} - alignItems="center" > ({ + alignItems: 'center', mb: 1, px: 1, '& > svg': { @@ -205,7 +206,6 @@ export default function MusicPlayerSlider() { }), }, })} - alignItems="center" > - + App bar diff --git a/docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx b/docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx index d4377768e3593a..034f858be59943 100644 --- a/docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx +++ b/docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx @@ -31,7 +31,13 @@ export default function FabIntegrationSnackbar() { > - + App bar diff --git a/docs/data/material/components/stack/stack.md b/docs/data/material/components/stack/stack.md index 0dd533b6c9d786..776322e11e95b7 100644 --- a/docs/data/material/components/stack/stack.md +++ b/docs/data/material/components/stack/stack.md @@ -99,18 +99,15 @@ Below is an interactive demo that lets you explore the visual results of the dif {{"demo": "InteractiveStack.js", "hideToolbar": true, "bg": true}} -## System props +## Customization -:::info -System props are deprecated and will be removed in the next major release. Please use the `sx` prop instead. +Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Stack instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package. +Below is an example of how to apply center align items using this prop: -```diff -- -+ +```jsx + ``` -::: - ## Limitations ### Margin on the children diff --git a/docs/data/material/components/table/EnhancedTable.js b/docs/data/material/components/table/EnhancedTable.js index 318b33a7da75cf..c6e0bf0a170cc2 100644 --- a/docs/data/material/components/table/EnhancedTable.js +++ b/docs/data/material/components/table/EnhancedTable.js @@ -171,10 +171,12 @@ function EnhancedTableToolbar(props) { > {numSelected > 0 ? ( {numSelected} selected diff --git a/docs/data/material/components/table/EnhancedTable.tsx b/docs/data/material/components/table/EnhancedTable.tsx index 77d55114bef7f0..cc80746fb2eb33 100644 --- a/docs/data/material/components/table/EnhancedTable.tsx +++ b/docs/data/material/components/table/EnhancedTable.tsx @@ -204,10 +204,12 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) { > {numSelected > 0 ? ( {numSelected} selected diff --git a/docs/data/material/components/timeline/CustomizedTimeline.js b/docs/data/material/components/timeline/CustomizedTimeline.js index 5f3e02a2420ef3..005d0d240ed75d 100644 --- a/docs/data/material/components/timeline/CustomizedTimeline.js +++ b/docs/data/material/components/timeline/CustomizedTimeline.js @@ -16,10 +16,12 @@ export default function CustomizedTimeline() { 9:30 am @@ -39,9 +41,11 @@ export default function CustomizedTimeline() { 10:00 am diff --git a/docs/data/material/components/timeline/CustomizedTimeline.tsx b/docs/data/material/components/timeline/CustomizedTimeline.tsx index 5f3e02a2420ef3..005d0d240ed75d 100644 --- a/docs/data/material/components/timeline/CustomizedTimeline.tsx +++ b/docs/data/material/components/timeline/CustomizedTimeline.tsx @@ -16,10 +16,12 @@ export default function CustomizedTimeline() { 9:30 am @@ -39,9 +41,11 @@ export default function CustomizedTimeline() { 10:00 am diff --git a/docs/data/material/components/timeline/OppositeContentTimeline.js b/docs/data/material/components/timeline/OppositeContentTimeline.js index d8c057cdd57a86..5d300d5fbeef0c 100644 --- a/docs/data/material/components/timeline/OppositeContentTimeline.js +++ b/docs/data/material/components/timeline/OppositeContentTimeline.js @@ -10,7 +10,11 @@ export default function OppositeContentTimeline() { return ( - + 09:30 am @@ -20,7 +24,11 @@ export default function OppositeContentTimeline() { Eat - + 10:00 am @@ -30,7 +38,11 @@ export default function OppositeContentTimeline() { Code - + 12:00 am @@ -40,7 +52,11 @@ export default function OppositeContentTimeline() { Sleep - + 9:00 am diff --git a/docs/data/material/components/timeline/OppositeContentTimeline.tsx b/docs/data/material/components/timeline/OppositeContentTimeline.tsx index d8c057cdd57a86..5d300d5fbeef0c 100644 --- a/docs/data/material/components/timeline/OppositeContentTimeline.tsx +++ b/docs/data/material/components/timeline/OppositeContentTimeline.tsx @@ -10,7 +10,11 @@ export default function OppositeContentTimeline() { return ( - + 09:30 am @@ -20,7 +24,11 @@ export default function OppositeContentTimeline() { Eat - + 10:00 am @@ -30,7 +38,11 @@ export default function OppositeContentTimeline() { Code - + 12:00 am @@ -40,7 +52,11 @@ export default function OppositeContentTimeline() { Sleep - + 9:00 am diff --git a/docs/data/material/components/tooltips/CustomizedTooltips.js b/docs/data/material/components/tooltips/CustomizedTooltips.js index bd899d79fc3182..9ff2739954dc34 100644 --- a/docs/data/material/components/tooltips/CustomizedTooltips.js +++ b/docs/data/material/components/tooltips/CustomizedTooltips.js @@ -50,7 +50,13 @@ export default function CustomizedTooltips() { - Tooltip with HTML + + Tooltip with HTML + {"And here's"} {'some'} {'amazing content'}.{' '} {"It's very engaging. Right?"} diff --git a/docs/data/material/components/tooltips/CustomizedTooltips.tsx b/docs/data/material/components/tooltips/CustomizedTooltips.tsx index f98b82af4ae3e5..082af52991e22a 100644 --- a/docs/data/material/components/tooltips/CustomizedTooltips.tsx +++ b/docs/data/material/components/tooltips/CustomizedTooltips.tsx @@ -50,7 +50,13 @@ export default function CustomizedTooltips() { - Tooltip with HTML + + Tooltip with HTML + {"And here's"} {'some'} {'amazing content'}.{' '} {"It's very engaging. Right?"} diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md index ab0fd9f040c02f..3254af8f40cdc2 100644 --- a/docs/data/material/components/typography/typography.md +++ b/docs/data/material/components/typography/typography.md @@ -119,18 +119,15 @@ const theme = createTheme({ }); ``` -### System props +### sx prop -:::info -System props are deprecated and will be removed in the next major release. Please use the `sx` prop instead. +Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Typography instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package. +Below is an example of how to apply margin using this prop: -```diff -- -+ +```jsx + ``` -::: - ## Accessibility Key factors to follow for an accessible typography: diff --git a/docs/data/material/customization/color/ColorDemo.js b/docs/data/material/customization/color/ColorDemo.js index 97abdf7761931f..60dd05ac50631a 100644 --- a/docs/data/material/customization/color/ColorDemo.js +++ b/docs/data/material/customization/color/ColorDemo.js @@ -52,7 +52,13 @@ function ColorDemo(props) { > - + Color diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/ColorTool.js index b8b221f247f581..919fe2c5602e38 100644 --- a/docs/data/material/customization/color/ColorTool.js +++ b/docs/data/material/customization/color/ColorTool.js @@ -239,7 +239,7 @@ function ColorTool() { onChange={handleChangeShade(intent)} aria-labelledby={`${intent}ShadeSliderLabel`} /> - {shades[intentShade]} + {shades[intentShade]} {hues.map((hue) => { diff --git a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.js b/docs/data/material/customization/css-theme-variables/ContrastTextDemo.js index 7afe8922d8b9aa..0a740379235278 100644 --- a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.js +++ b/docs/data/material/customization/css-theme-variables/ContrastTextDemo.js @@ -54,7 +54,7 @@ export default function ContrastTextDemo() { flexShrink: 0, }} > - + {backgroundColor} @@ -112,7 +112,7 @@ export default function ContrastTextDemo() { gap: 3, }} > - + Text color: {contrastText} diff --git a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx b/docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx index 7afe8922d8b9aa..0a740379235278 100644 --- a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx +++ b/docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx @@ -54,7 +54,7 @@ export default function ContrastTextDemo() { flexShrink: 0, }} > - + {backgroundColor} @@ -112,7 +112,7 @@ export default function ContrastTextDemo() { gap: 3, }} > - + Text color: {contrastText} diff --git a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js b/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js index 88e6dc4ab48f8c..80ab57d195a33a 100644 --- a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js +++ b/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js @@ -43,9 +43,11 @@ function ColorDisplay({ color }) { /> {color} @@ -104,19 +106,31 @@ export default function ThemeColorFunctions() { }} >
- + theme.alpha(color, 0.5)
- + theme.lighten(color, 0.5)
- + theme.darken(color, 0.5) diff --git a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.tsx b/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.tsx index 6c4223187e58e7..f3b3b839a96606 100644 --- a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.tsx +++ b/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.tsx @@ -42,9 +42,11 @@ function ColorDisplay({ color }: { color: string }) { /> {color} @@ -99,19 +101,31 @@ export default function ThemeColorFunctions() { }} >
- + theme.alpha(color, 0.5)
- + theme.lighten(color, 0.5)
- + theme.darken(color, 0.5) diff --git a/docs/data/material/getting-started/templates/blog/components/Footer.js b/docs/data/material/getting-started/templates/blog/components/Footer.js index a98ff4672ec646..68463fc107f573 100644 --- a/docs/data/material/getting-started/templates/blog/components/Footer.js +++ b/docs/data/material/getting-started/templates/blog/components/Footer.js @@ -18,7 +18,12 @@ function Copyright() { return ( {'Copyright © '} - + Sitemark   @@ -108,19 +113,49 @@ export default function Footer() { Product - + Features - + Testimonials - + Highlights - + Pricing - + FAQs @@ -134,13 +169,31 @@ export default function Footer() { Company - + About us - + Careers - + Press @@ -154,13 +207,31 @@ export default function Footer() { Legal - + Terms - + Privacy - + Contact @@ -176,13 +247,25 @@ export default function Footer() { }} >
- + Privacy Policy  •  - + Terms of Service diff --git a/docs/data/material/getting-started/templates/blog/components/Footer.tsx b/docs/data/material/getting-started/templates/blog/components/Footer.tsx index a98ff4672ec646..68463fc107f573 100644 --- a/docs/data/material/getting-started/templates/blog/components/Footer.tsx +++ b/docs/data/material/getting-started/templates/blog/components/Footer.tsx @@ -18,7 +18,12 @@ function Copyright() { return ( {'Copyright © '} - + Sitemark   @@ -108,19 +113,49 @@ export default function Footer() { Product - + Features - + Testimonials - + Highlights - + Pricing - + FAQs @@ -134,13 +169,31 @@ export default function Footer() { Company - + About us - + Careers - + Press @@ -154,13 +207,31 @@ export default function Footer() { Legal - + Terms - + Privacy - + Contact @@ -176,13 +247,25 @@ export default function Footer() { }} >
- + Privacy Policy  •  - + Terms of Service diff --git a/docs/data/material/getting-started/templates/blog/components/Latest.js b/docs/data/material/getting-started/templates/blog/components/Latest.js index 7f47d9949ccaa6..0bc023c6569eb4 100644 --- a/docs/data/material/getting-started/templates/blog/components/Latest.js +++ b/docs/data/material/getting-started/templates/blog/components/Latest.js @@ -223,7 +223,11 @@ export default function Latest() { sx={{ fontSize: '1rem' }} /> - + {article.description} diff --git a/docs/data/material/getting-started/templates/blog/components/Latest.tsx b/docs/data/material/getting-started/templates/blog/components/Latest.tsx index 9af951a80a1a20..b52df50350d23d 100644 --- a/docs/data/material/getting-started/templates/blog/components/Latest.tsx +++ b/docs/data/material/getting-started/templates/blog/components/Latest.tsx @@ -215,7 +215,11 @@ export default function Latest() { sx={{ fontSize: '1rem' }} /> - + {article.description} diff --git a/docs/data/material/getting-started/templates/blog/components/MainContent.js b/docs/data/material/getting-started/templates/blog/components/MainContent.js index c54a41d53885ff..5cfa5bcef58c71 100644 --- a/docs/data/material/getting-started/templates/blog/components/MainContent.js +++ b/docs/data/material/getting-started/templates/blog/components/MainContent.js @@ -309,7 +309,11 @@ export default function MainContent() { {cardData[0].title} - + {cardData[0].description} @@ -341,7 +345,11 @@ export default function MainContent() { {cardData[1].title} - + {cardData[1].description} @@ -373,7 +381,11 @@ export default function MainContent() { {cardData[2].title} - + {cardData[2].description} @@ -409,8 +421,8 @@ export default function MainContent() { {cardData[3].description} @@ -443,8 +455,8 @@ export default function MainContent() { {cardData[4].description} @@ -479,7 +491,11 @@ export default function MainContent() { {cardData[5].title} - + {cardData[5].description} diff --git a/docs/data/material/getting-started/templates/blog/components/MainContent.tsx b/docs/data/material/getting-started/templates/blog/components/MainContent.tsx index ceeb0dce9ad8a1..563292bedcfcf8 100644 --- a/docs/data/material/getting-started/templates/blog/components/MainContent.tsx +++ b/docs/data/material/getting-started/templates/blog/components/MainContent.tsx @@ -301,7 +301,11 @@ export default function MainContent() { {cardData[0].title} - + {cardData[0].description} @@ -333,7 +337,11 @@ export default function MainContent() { {cardData[1].title} - + {cardData[1].description} @@ -365,7 +373,11 @@ export default function MainContent() { {cardData[2].title} - + {cardData[2].description} @@ -401,8 +413,8 @@ export default function MainContent() { {cardData[3].description} @@ -435,8 +447,8 @@ export default function MainContent() { {cardData[4].description} @@ -471,7 +483,11 @@ export default function MainContent() { {cardData[5].title} - + {cardData[5].description} diff --git a/docs/data/material/getting-started/templates/crud-dashboard/components/DashboardHeader.js b/docs/data/material/getting-started/templates/crud-dashboard/components/DashboardHeader.js index 51d305c8185c35..8de1974cb13d21 100644 --- a/docs/data/material/getting-started/templates/crud-dashboard/components/DashboardHeader.js +++ b/docs/data/material/getting-started/templates/crud-dashboard/components/DashboardHeader.js @@ -69,17 +69,17 @@ function DashboardHeader({ logo, title, menuOpen, onToggleMenu }) { - + {getMenuIcon(menuOpen)} - + {logo ? {logo} : null} {title ? ( - + diff --git a/docs/data/material/getting-started/templates/crud-dashboard/components/DashboardHeader.tsx b/docs/data/material/getting-started/templates/crud-dashboard/components/DashboardHeader.tsx index 01db549c9e10da..0e58325497fcf7 100644 --- a/docs/data/material/getting-started/templates/crud-dashboard/components/DashboardHeader.tsx +++ b/docs/data/material/getting-started/templates/crud-dashboard/components/DashboardHeader.tsx @@ -80,17 +80,17 @@ export default function DashboardHeader({ - + {getMenuIcon(menuOpen)} - + {logo ? {logo} : null} {title ? ( - + diff --git a/docs/data/material/getting-started/templates/crud-dashboard/components/EmployeeForm.js b/docs/data/material/getting-started/templates/crud-dashboard/components/EmployeeForm.js index 0065880ffeb746..8b1e4407915034 100644 --- a/docs/data/material/getting-started/templates/crud-dashboard/components/EmployeeForm.js +++ b/docs/data/material/getting-started/templates/crud-dashboard/components/EmployeeForm.js @@ -190,7 +190,7 @@ function EmployeeForm(props) { - + - + Discover the experience diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.tsx b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.tsx index 0bb844b7965d75..545fc57d3233a9 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.tsx +++ b/docs/src/pages/premium-themes/onepirate/modules/views/ProductHero.tsx @@ -20,14 +20,18 @@ export default function ProductHero() { src={backgroundImage} alt="increase priority" /> - + Upgrade your Sundays Enjoy secret offers up to -70% off the best luxury hotels every Sunday. @@ -41,7 +45,7 @@ export default function ProductHero() { > Register - + Discover the experience diff --git a/docs/src/pages/premium-themes/paperbase/Header.js b/docs/src/pages/premium-themes/paperbase/Header.js index 59a184c8f6486d..42c2c13c780420 100644 --- a/docs/src/pages/premium-themes/paperbase/Header.js +++ b/docs/src/pages/premium-themes/paperbase/Header.js @@ -78,7 +78,13 @@ function Header(props) { - + Authentication diff --git a/docs/src/pages/premium-themes/paperbase/Header.tsx b/docs/src/pages/premium-themes/paperbase/Header.tsx index 570302e566e07b..15b33822c67ad9 100644 --- a/docs/src/pages/premium-themes/paperbase/Header.tsx +++ b/docs/src/pages/premium-themes/paperbase/Header.tsx @@ -81,7 +81,13 @@ export default function Header(props: HeaderProps) { - + Authentication diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 9c1539a5f676f3..382f002d20ed70 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -2521,6 +2521,30 @@ npx @mui/codemod@next deprecations/table-sort-label-classes npx @mui/codemod@next deprecations/typography-props ``` +### v9.0.0 + +#### `system-props` + +```bash +npx @mui/codemod@next v9.0.0/system-props +``` + +Remove system props from Box, Stack, Typography, Link, Grid, DialogContentText, TimelineContent, and TimelineOppositeContent components and move them to the `sx` prop. + +Compared to the v6 codemod, the v9 version also handles: + +- `color="inherit"` on Typography (moved to `sx`) +- `color="text.secondary"` on Link (moved to `sx`, while keeping named colors like `"primary"` and `"inherit"` as component props) +- DialogContentText, TimelineContent, and TimelineOppositeContent components + +```diff +- ++ + +- ++ +``` + ### v7.0.0 #### `theme-color-functions` diff --git a/packages/mui-codemod/src/v9.0.0/system-props/index.js b/packages/mui-codemod/src/v9.0.0/system-props/index.js new file mode 100644 index 00000000000000..d1fe754e407b16 --- /dev/null +++ b/packages/mui-codemod/src/v9.0.0/system-props/index.js @@ -0,0 +1 @@ +export { default } from './removeSystemProps'; diff --git a/packages/mui-codemod/src/v9.0.0/system-props/removeSystemProps.js b/packages/mui-codemod/src/v9.0.0/system-props/removeSystemProps.js new file mode 100644 index 00000000000000..493199b2dd6391 --- /dev/null +++ b/packages/mui-codemod/src/v9.0.0/system-props/removeSystemProps.js @@ -0,0 +1,319 @@ +// from `packages/mui-system/src/styleFunctionSx/defaultSxConfig.js` +const defaultSxConfig = { + // borders + border: {}, + borderTop: {}, + borderRight: {}, + borderBottom: {}, + borderLeft: {}, + borderColor: {}, + borderTopColor: {}, + borderRightColor: {}, + borderBottomColor: {}, + borderLeftColor: {}, + outline: {}, + outlineColor: {}, + borderRadius: {}, + color: {}, + bgcolor: {}, + backgroundColor: {}, + p: {}, + pt: {}, + pr: {}, + pb: {}, + pl: {}, + px: {}, + py: {}, + padding: {}, + paddingTop: {}, + paddingRight: {}, + paddingBottom: {}, + paddingLeft: {}, + paddingX: {}, + paddingY: {}, + paddingInline: {}, + paddingInlineStart: {}, + paddingInlineEnd: {}, + paddingBlock: {}, + paddingBlockStart: {}, + paddingBlockEnd: {}, + + m: {}, + mt: {}, + mr: {}, + mb: {}, + ml: {}, + mx: {}, + my: {}, + margin: {}, + marginTop: {}, + marginRight: {}, + marginBottom: {}, + marginLeft: {}, + marginX: {}, + marginY: {}, + marginInline: {}, + marginInlineStart: {}, + marginInlineEnd: {}, + marginBlock: {}, + marginBlockStart: {}, + marginBlockEnd: {}, + + // display + displayPrint: {}, + display: {}, + overflow: {}, + textOverflow: {}, + visibility: {}, + whiteSpace: {}, + + // flexbox + flexBasis: {}, + flexDirection: {}, + flexWrap: {}, + justifyContent: {}, + alignItems: {}, + alignContent: {}, + order: {}, + flex: {}, + flexGrow: {}, + flexShrink: {}, + alignSelf: {}, + justifyItems: {}, + justifySelf: {}, + + // grid + gap: {}, + rowGap: {}, + columnGap: {}, + gridColumn: {}, + gridRow: {}, + gridAutoFlow: {}, + gridAutoColumns: {}, + gridAutoRows: {}, + gridTemplateColumns: {}, + gridTemplateRows: {}, + gridTemplateAreas: {}, + gridArea: {}, + + // positions + position: {}, + zIndex: {}, + top: {}, + right: {}, + bottom: {}, + left: {}, + + // shadows + boxShadow: {}, + + // sizing + width: {}, + maxWidth: {}, + minWidth: {}, + height: {}, + maxHeight: {}, + minHeight: {}, + boxSizing: {}, + + // typography + font: {}, + fontFamily: {}, + fontSize: {}, + fontStyle: {}, + fontWeight: {}, + letterSpacing: {}, + textTransform: {}, + lineHeight: {}, + textAlign: {}, + typography: {}, +}; +const systemProps = Object.keys(defaultSxConfig); +const components = [ + 'Box', + 'Stack', + 'Typography', + 'Link', + 'Grid', + 'Grid2', + 'DialogContentText', + 'TimelineContent', + 'TimelineOppositeContent', +]; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function removeSystemProps(file, api, options) { + if (file.path?.endsWith('.json') || file.path?.endsWith('.d.ts')) { + return file.source; + } + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + const deprecatedElements = []; + const typographyColorMatcher = { + matcher: (key, val) => + key !== 'color' || + val.value === 'inherit' || + val.value?.includes('.') || + val.value === 'divider' || + val.value?.startsWith('#') || + val.value?.match(/\(.*\)/), + }; + const customReplacement = { + Typography: typographyColorMatcher, + // These components extend Typography + DialogContentText: typographyColorMatcher, + TimelineContent: typographyColorMatcher, + TimelineOppositeContent: typographyColorMatcher, + Link: { + // Same as Typography but keep color="inherit" as a Link component prop (controls underline behavior) + matcher: (key, val) => + key !== 'color' || + val.value?.includes('.') || + val.value === 'divider' || + val.value?.startsWith('#') || + val.value?.match(/\(.*\)/), + }, + }; + const elementReplacement = {}; + + root + .find(j.ImportDeclaration, (decl) => decl.source.value.includes('@mui')) + .forEach((decl) => { + decl.node.specifiers.forEach((spec) => { + if (spec.type === 'ImportSpecifier') { + const name = spec.imported.name; + if (components.includes(name)) { + deprecatedElements.push(spec.local.name); + if (customReplacement[name]) { + elementReplacement[spec.local.name] = customReplacement[name]; + } + } + } + if (spec.type === 'ImportDefaultSpecifier') { + const name = decl.node.source.value.split('/').pop(); + if (components.includes(name)) { + deprecatedElements.push(spec.local.name); + if (customReplacement[name]) { + elementReplacement[spec.local.name] = customReplacement[name]; + } + } + } + }); + }); + + root + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => { + return deprecatedElements.includes(name); + }, + }, + }, + }) + .forEach((el) => { + const sx = j.objectExpression([]); + const elementName = el.value?.openingElement?.name?.name; + + const sxNodes = j(el) + .find(j.JSXAttribute) + .filter((path) => path.parent.parent.node === el.node && path.node.name.name === 'sx'); + + const sxNodesArray = sxNodes.nodes() || []; + const existingSxValue = sxNodesArray[0]?.value?.expression; + + let spreadElement = null; + el.node.openingElement.attributes.forEach((attr) => { + if (attr.type === 'JSXSpreadAttribute') { + spreadElement = attr; + } + }); + + const attrToPrune = ['sx']; + el.node.openingElement.attributes.forEach((attr) => { + if ( + attr.type === 'JSXSpreadAttribute' || + !attr.value || + !systemProps.includes(attr?.name?.name) + ) { + return; + } + const key = attr?.name?.name; + const literal = attr?.value; + const val = literal.type === 'JSXExpressionContainer' ? literal.expression : literal; + const shouldPrune = + !elementReplacement[elementName] || elementReplacement[elementName].matcher(key, val); + if (key && val) { + if (shouldPrune) { + sx.properties.push(j.property('init', j.identifier(key), val)); + attrToPrune.push(key); + } + } + }); + + if (sx.properties.length) { + el.node.openingElement.attributes = el.node.openingElement.attributes.filter( + (attr) => attr.type !== 'JSXAttribute' || !attrToPrune.includes(attr?.name?.name), + ); + + let finalSx; + if (!existingSxValue) { + finalSx = sx; + } else if (existingSxValue?.type === 'ObjectExpression') { + sx.properties.push(...existingSxValue.properties); + finalSx = sx; + } else if (existingSxValue?.type === 'ArrayExpression') { + existingSxValue.elements = [sx, ...existingSxValue.elements]; + finalSx = existingSxValue; + } else { + finalSx = j.arrayExpression([ + sx, + existingSxValue.type === 'Identifier' + ? j.spreadElement( + j.conditionalExpression( + j.callExpression( + j.memberExpression(j.identifier('Array'), j.identifier('isArray')), + [existingSxValue], + ), + existingSxValue, + j.arrayExpression([existingSxValue]), + ), + ) + : existingSxValue, + ]); + } + + if (spreadElement && spreadElement.argument.type === 'Identifier') { + if (finalSx.type === 'ObjectExpression') { + const propSx = j.memberExpression(spreadElement.argument, j.identifier('sx')); + finalSx = j.arrayExpression([ + finalSx, + j.spreadElement( + j.conditionalExpression( + j.callExpression( + j.memberExpression(j.identifier('Array'), j.identifier('isArray')), + [propSx], + ), + propSx, + j.arrayExpression([propSx]), + ), + ), + ]); + } else if (finalSx.type === 'ArrayExpression') { + finalSx.elements.push(j.memberExpression(spreadElement.argument, j.identifier('sx'))); + } + } + + el.node.openingElement.attributes.push( + j.jsxAttribute(j.jsxIdentifier('sx'), j.jsxExpressionContainer(finalSx)), + ); + } + }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/v9.0.0/system-props/removeSystemProps.test.js b/packages/mui-codemod/src/v9.0.0/system-props/removeSystemProps.test.js new file mode 100644 index 00000000000000..57ff14b9ca570c --- /dev/null +++ b/packages/mui-codemod/src/v9.0.0/system-props/removeSystemProps.test.js @@ -0,0 +1,35 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './removeSystemProps'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('v9.0.0 - removeSystemProps', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/system-props.actual.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/system-props.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/system-props.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/system-props.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); +}); diff --git a/packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props.actual.js b/packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props.actual.js new file mode 100644 index 00000000000000..0ff5e8b0b8c9ba --- /dev/null +++ b/packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props.actual.js @@ -0,0 +1,65 @@ +import { Box as Boxxx, Grid as Griddd, Grid2 as Griddd2 } from '@mui/material'; +import Typography from '@mui/material/Typography'; +import Typographyyy from '@mui/material/Typography'; +import Stackkk from '@mui/material/Stack'; +import Link from '@mui/material/Link'; +import DialogContentText from '@mui/material/DialogContentText'; +import TimelineContent from '@mui/lab/TimelineContent'; +import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; + +; +; + +; +; + +const sx = { display: 'flex' }; +const ml = 2; +; +; +; +; +; + + $ + + } + sx={{ alignItems: 'flex-start' }} +> + 25 +; +function Copyright(props) { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()} + {'.'} + + ); +} + +; + +; + +Sitemark; +Features; +Primary Link; + +Some content; +Inherited; +Primary; + +09:30 am; +Eat; + +// Dynamic color values (expression, not string literal) +Dynamic; +Dynamic Link; diff --git a/packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props.expected.js b/packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props.expected.js new file mode 100644 index 00000000000000..977a1a31dc5d07 --- /dev/null +++ b/packages/mui-codemod/src/v9.0.0/system-props/test-cases/system-props.expected.js @@ -0,0 +1,127 @@ +import { Box as Boxxx, Grid as Griddd, Grid2 as Griddd2 } from '@mui/material'; +import Typography from '@mui/material/Typography'; +import Typographyyy from '@mui/material/Typography'; +import Stackkk from '@mui/material/Stack'; +import Link from '@mui/material/Link'; +import DialogContentText from '@mui/material/DialogContentText'; +import TimelineContent from '@mui/lab/TimelineContent'; +import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; + +; +; + +; +; + +const sx = { display: 'flex' }; +const ml = 2; +; +; +; +; +; + + $ + + } + sx={{ + fontSize: "xl4", + lineHeight: 1, + alignItems: 'flex-start' + }}> + 25 +; +function Copyright(props) { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()} + {'.'} + + ); +} + +; + +; + +Sitemark; +Features; +Primary Link; + +Some content; +Inherited; +Primary; + +09:30 am; +Eat; + +// Dynamic color values (expression, not string literal) +Dynamic; +Dynamic Link; diff --git a/packages/mui-docs/src/DocsApp/AnalyticsProvider.tsx b/packages/mui-docs/src/DocsApp/AnalyticsProvider.tsx index fb8d5d207290e5..877a9ab063fa2b 100644 --- a/packages/mui-docs/src/DocsApp/AnalyticsProvider.tsx +++ b/packages/mui-docs/src/DocsApp/AnalyticsProvider.tsx @@ -130,14 +130,14 @@ export function CookieConsentDialog() { Cookie Preferences We use cookies to understand site usage and improve our content. This includes third-party analytics. diff --git a/packages/mui-docs/src/InfoCard/InfoCard.tsx b/packages/mui-docs/src/InfoCard/InfoCard.tsx index 0b30c41b5103d8..fe7627480843a7 100644 --- a/packages/mui-docs/src/InfoCard/InfoCard.tsx +++ b/packages/mui-docs/src/InfoCard/InfoCard.tsx @@ -90,18 +90,23 @@ export function InfoCard(props: InfoCardProps) { {svg && svg} {icon && } {title} - + {description} diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json index c5e47f4a9f0e08..e75796bfd30e43 100644 --- a/packages/mui-material-pigment-css/package.json +++ b/packages/mui-material-pigment-css/package.json @@ -53,7 +53,6 @@ "generateAtomics": "@pigment-css/react/exports/generateAtomics", "css": "@pigment-css/react/exports/css", "createUseThemeProps": "@pigment-css/react/exports/createUseThemeProps", - "internal_createExtendSxProp": "@pigment-css/react/exports/internal_createExtendSxProp", "globalCss": "@pigment-css/react/exports/globalCss", "useTheme": "@pigment-css/react/exports/useTheme" } diff --git a/packages/mui-material/src/Box/Box.spec.tsx b/packages/mui-material/src/Box/Box.spec.tsx index 36b3cb4b2711cd..0a96426d0dfc9f 100644 --- a/packages/mui-material/src/Box/Box.spec.tsx +++ b/packages/mui-material/src/Box/Box.spec.tsx @@ -29,13 +29,14 @@ const defaultTheme = createTheme({}); const CustomBox = createBox({ defaultTheme }); expectType(CustomBox); -// @ts-expect-error System's Box has different type than Material UI's Box expectType(CustomBox); function ColorTest() { theme.vars.palette.common.black} - sx={(theme) => ({ backgroundColor: theme.vars.palette.background.default })} + sx={(theme) => ({ + color: theme.vars.palette.common.black, + backgroundColor: theme.vars.palette.background.default, + })} />; } diff --git a/packages/mui-material/src/Box/Box.test.js b/packages/mui-material/src/Box/Box.test.js index ec713584ca8c40..7ef7219ceb1fab 100644 --- a/packages/mui-material/src/Box/Box.test.js +++ b/packages/mui-material/src/Box/Box.test.js @@ -35,7 +35,7 @@ describe('', () => { const { container } = render( - + , ); diff --git a/packages/mui-material/src/CardHeader/CardHeader.js b/packages/mui-material/src/CardHeader/CardHeader.js index 246511a9f7e314..9d3690cfcd5aa8 100644 --- a/packages/mui-material/src/CardHeader/CardHeader.js +++ b/packages/mui-material/src/CardHeader/CardHeader.js @@ -214,7 +214,7 @@ CardHeader.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - slotProps: PropTypes.shape({ + slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({ action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), avatar: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), diff --git a/packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx b/packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx index ccde4cc2f73f80..28b6b5afbab135 100644 --- a/packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx +++ b/packages/mui-material/src/DialogContentText/DialogContentText.spec.tsx @@ -11,19 +11,16 @@ const dialogContentTextTest = () => { {/* @ts-expect-error */} - - - - - + + + + + - {/* TODO: system props did not catch this error. Add @ts-expect-error after it is fixed. */} - - - - {/* TODO: system props did not catch this error. Add @ts-expect-error after it is fixed. */} - + + + {/* @ts-expect-error */} {/* @ts-expect-error */} diff --git a/packages/mui-material/src/Link/Link.d.ts b/packages/mui-material/src/Link/Link.d.ts index 62857374359735..85ad4b1af99686 100644 --- a/packages/mui-material/src/Link/Link.d.ts +++ b/packages/mui-material/src/Link/Link.d.ts @@ -19,7 +19,7 @@ export interface LinkOwnProps extends DistributiveOmit * The color of the link. * @default 'primary' */ - color?: TypographyOwnProps['color'] | undefined; + color?: TypographyOwnProps['color'] | 'inherit' | undefined; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-material/src/ListItemText/ListItemText.js b/packages/mui-material/src/ListItemText/ListItemText.js index b5c2f33d3bd4bf..8b81317e5d2955 100644 --- a/packages/mui-material/src/ListItemText/ListItemText.js +++ b/packages/mui-material/src/ListItemText/ListItemText.js @@ -195,7 +195,7 @@ ListItemText.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - slotProps: PropTypes.shape({ + slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({ primary: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), secondary: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), diff --git a/packages/mui-material/src/ListItemText/ListItemText.spec.tsx b/packages/mui-material/src/ListItemText/ListItemText.spec.tsx index 4b1b4c79bd15ed..a1ff1530e90bfa 100644 --- a/packages/mui-material/src/ListItemText/ListItemText.spec.tsx +++ b/packages/mui-material/src/ListItemText/ListItemText.spec.tsx @@ -29,7 +29,7 @@ function typographyPropsTest() { slotProps={{ primary: { color: 'primary', - display: 'block', + sx: { display: 'block' }, gutterBottom: true, noWrap: true, variantMapping: { h1: 'h1' }, @@ -62,7 +62,7 @@ function secondaryTypographyPropsTest() { slotProps={{ secondary: { color: 'primary', - display: 'block', + sx: { display: 'block' }, gutterBottom: true, noWrap: true, variantMapping: { h1: 'h1' }, diff --git a/packages/mui-material/src/Stack/Stack.d.ts b/packages/mui-material/src/Stack/Stack.d.ts index a79d66b589a0c8..bd93d89c5e599e 100644 --- a/packages/mui-material/src/Stack/Stack.d.ts +++ b/packages/mui-material/src/Stack/Stack.d.ts @@ -1,9 +1,9 @@ import * as React from 'react'; -import { ResponsiveStyleValue, SxProps, SystemProps } from '@mui/system'; +import { ResponsiveStyleValue, SxProps } from '@mui/system'; import { OverrideProps, OverridableComponent } from '../OverridableComponent'; import { Theme } from '../styles/createTheme'; -export interface StackOwnProps extends SystemProps { +export interface StackOwnProps { /** * The content of the component. */ diff --git a/packages/mui-material/src/Typography/Typography.d.ts b/packages/mui-material/src/Typography/Typography.d.ts index c9659133af7be9..5a8968281a71fd 100644 --- a/packages/mui-material/src/Typography/Typography.d.ts +++ b/packages/mui-material/src/Typography/Typography.d.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { OverridableStringUnion } from '@mui/types'; -import { SxProps, SystemProps } from '@mui/system'; +import { SxProps } from '@mui/system'; import { Theme, TypeText } from '../styles'; import { OverrideProps, OverridableComponent } from '../OverridableComponent'; import { TypographyVariant } from '../styles/createTypography'; @@ -10,7 +10,7 @@ export interface TypographyPropsVariantOverrides {} export interface TypographyPropsColorOverrides {} -export interface TypographyOwnProps extends Omit, 'color'> { +export interface TypographyOwnProps { /** * Set the text-align on the component. * @default 'inherit' @@ -41,7 +41,7 @@ export interface TypographyOwnProps extends Omit, 'color'> { TypographyPropsColorOverrides > | (string & {}) - | undefined; // to work with v5 color prop type which allows any string + | undefined; /** * If `true`, the text will have a bottom margin. * @default false diff --git a/packages/mui-material/src/Typography/Typography.js b/packages/mui-material/src/Typography/Typography.js index a342b4b22d2d33..cc7ffe5839ecc8 100644 --- a/packages/mui-material/src/Typography/Typography.js +++ b/packages/mui-material/src/Typography/Typography.js @@ -3,27 +3,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, internal_createExtendSxProp } from '../zero-styled'; +import { styled } from '../zero-styled'; import memoTheme from '../utils/memoTheme'; import { useDefaultProps } from '../DefaultPropsProvider'; import capitalize from '../utils/capitalize'; import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter'; import { getTypographyUtilityClass } from './typographyClasses'; -const v6Colors = { - primary: true, - secondary: true, - error: true, - info: true, - success: true, - warning: true, - textPrimary: true, - textSecondary: true, - textDisabled: true, -}; - -const extendSxProp = internal_createExtendSxProp(); - const useUtilityClasses = (ownerState) => { const { align, gutterBottom, noWrap, variant, classes } = ownerState; @@ -130,15 +116,10 @@ const defaultVariantMapping = { }; const Typography = React.forwardRef(function Typography(inProps, ref) { - const { color, ...themeProps } = useDefaultProps({ props: inProps, name: 'MuiTypography' }); - const isSxColor = !v6Colors[color]; - // TODO: Remove `extendSxProp` in v7 - const props = extendSxProp({ - ...themeProps, - ...(isSxColor && { color }), - }); + const props = useDefaultProps({ props: inProps, name: 'MuiTypography' }); const { + color, align = 'inherit', className, component, diff --git a/packages/mui-material/src/Typography/Typography.test.js b/packages/mui-material/src/Typography/Typography.test.js index 7ceb426ff33ede..89ed203e88987e 100644 --- a/packages/mui-material/src/Typography/Typography.test.js +++ b/packages/mui-material/src/Typography/Typography.test.js @@ -105,8 +105,8 @@ describe('', () => { }); }); - it('combines system properties with the sx prop', () => { - const { container } = render(); + it('applies system properties via the sx prop', () => { + const { container } = render(); // @ts-ignore issue with typings on `toHaveComputedStyle` expect(container.firstChild).toHaveComputedStyle({ diff --git a/packages/mui-material/src/Typography/typography.spec.tsx b/packages/mui-material/src/Typography/typography.spec.tsx index c2a8be36a0960e..48dee62047c683 100644 --- a/packages/mui-material/src/Typography/typography.spec.tsx +++ b/packages/mui-material/src/Typography/typography.spec.tsx @@ -27,20 +27,17 @@ const typographyTest = () => { - - - - - + + + + + - {/* TODO: system props did not catch this error. Add @ts-expect-error after it is fixed. */} - - - - {/* TODO: system props did not catch this error. Add @ts-expect-error after it is fixed. */} - + + + {/* @ts-expect-error */} {/* @ts-expect-error */} diff --git a/packages/mui-system/src/Box/Box.d.ts b/packages/mui-system/src/Box/Box.d.ts index e0a0729d2d7adc..8146375fceb91e 100644 --- a/packages/mui-system/src/Box/Box.d.ts +++ b/packages/mui-system/src/Box/Box.d.ts @@ -50,7 +50,7 @@ export type SystemProps = { | ((theme: Theme) => ResponsiveStyleValue); }; -export interface BoxOwnProps extends SystemProps { +export interface BoxOwnProps { children?: React.ReactNode; ref?: React.Ref | undefined; /** diff --git a/packages/mui-system/src/Box/Box.spec.tsx b/packages/mui-system/src/Box/Box.spec.tsx index 5a117ea0ad6430..a4b72182bb6cb1 100644 --- a/packages/mui-system/src/Box/Box.spec.tsx +++ b/packages/mui-system/src/Box/Box.spec.tsx @@ -49,7 +49,7 @@ function ThemeCallbackTest() { theme.palette.primary.main }} />; ({ background: theme.palette.primary.main }) }} />; ({ background: theme.palette.primary.main }) }} />; - theme.breakpoints.values.sm} />; + theme.breakpoints.values.sm }} />; } function CssVariablesWithNestedSelectors() { @@ -118,5 +118,5 @@ function StyledBoxWithSx() { } function LogicalPropertiesTest() { - ; + ; } diff --git a/packages/mui-system/src/Box/Box.test.js b/packages/mui-system/src/Box/Box.test.js index aa67706388cffb..28306aab416343 100644 --- a/packages/mui-system/src/Box/Box.test.js +++ b/packages/mui-system/src/Box/Box.test.js @@ -33,9 +33,11 @@ describe('', () => { const elementRef = React.createRef(); render( , ); @@ -59,7 +61,7 @@ describe('', () => { it.skipIf(isJsdom())('respect properties order when generating the CSS', function test() { const { container: testCaseBorderColorWins } = render( - , + , ); expect(testCaseBorderColorWins.firstChild).toHaveComputedStyle({ @@ -78,7 +80,7 @@ describe('', () => { }); const { container: testCaseBorderWins } = render( - , + , ); expect(testCaseBorderWins.firstChild).toHaveComputedStyle({ @@ -102,14 +104,16 @@ describe('', () => { function test() { const { container: testCaseBorderPositionColorWins } = render( , ); @@ -130,14 +134,16 @@ describe('', () => { const { container: testCaseBorderPositionWins } = render( , ); @@ -261,16 +267,6 @@ describe('', () => { }, ); - it('combines system properties with the sx prop', () => { - const { container } = render(); - - expect(container.firstChild).toHaveComputedStyle({ - marginTop: '16px', - marginRight: '40px', - marginBottom: '16px', - }); - }); - it('adds the utility mui class', () => { render(); @@ -290,7 +286,7 @@ describe('', () => { const { container } = render( - , + , , ); diff --git a/packages/mui-system/src/Stack/StackProps.ts b/packages/mui-system/src/Stack/StackProps.ts index 97af1b4c8adf6e..1e97b9734b1f38 100644 --- a/packages/mui-system/src/Stack/StackProps.ts +++ b/packages/mui-system/src/Stack/StackProps.ts @@ -1,7 +1,6 @@ import * as React from 'react'; import { OverrideProps } from '@mui/types'; import { ResponsiveStyleValue, SxProps } from '../styleFunctionSx'; -import { SystemProps } from '../Box'; import { Theme } from '../createTheme'; export interface StackBaseProps { @@ -45,7 +44,7 @@ export interface StackTypeMap< * The system prop, which allows defining system overrides as well as additional CSS styles. */ sx?: SxProps | undefined; - } & SystemProps; + }; defaultComponent: DefaultComponent; } diff --git a/packages/mui-system/src/Stack/createStack.tsx b/packages/mui-system/src/Stack/createStack.tsx index ef22f09266afec..6d86179a554bb3 100644 --- a/packages/mui-system/src/Stack/createStack.tsx +++ b/packages/mui-system/src/Stack/createStack.tsx @@ -8,7 +8,6 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass'; import composeClasses from '@mui/utils/composeClasses'; import systemStyled from '../styled'; import useThemePropsSystem from '../useThemeProps'; -import { extendSxProp } from '../styleFunctionSx'; import createTheme from '../createTheme'; import { CreateMUIStyled } from '../createStyled'; import { StackTypeMap, StackOwnerState } from './StackProps'; @@ -183,7 +182,6 @@ export default function createStack( const themeProps = useThemeProps< typeof inProps & { component?: React.ElementType | undefined } >(inProps); - const props = extendSxProp(themeProps) as Omit; // `color` type conflicts with html color attribute. const { component = 'div', direction = 'column', @@ -193,7 +191,7 @@ export default function createStack( className, useFlexGap = false, ...other - } = props; + } = themeProps; const ownerState = { direction, diff --git a/packages/mui-system/src/createBox/createBox.js b/packages/mui-system/src/createBox/createBox.js index 94f8783396d889..400ba2c9b8b073 100644 --- a/packages/mui-system/src/createBox/createBox.js +++ b/packages/mui-system/src/createBox/createBox.js @@ -2,7 +2,7 @@ import * as React from 'react'; import clsx from 'clsx'; import styled from '@mui/styled-engine'; -import styleFunctionSx, { extendSxProp } from '../styleFunctionSx'; +import styleFunctionSx from '../styleFunctionSx'; import useTheme from '../useTheme'; export default function createBox(options = {}) { @@ -13,7 +13,7 @@ export default function createBox(options = {}) { const Box = React.forwardRef(function Box(inProps, ref) { const theme = useTheme(defaultTheme); - const { className, component = 'div', ...other } = extendSxProp(inProps); + const { className, component = 'div', ...other } = inProps; return ( theme.palette.primary.main }} />; ({ background: theme.palette.primary.main }) }} />; ({ background: theme.palette.primary.main }) }} />; - theme.breakpoints.values.sm} />; + theme.breakpoints.values.sm }} />; } diff --git a/packages/mui-system/src/createBox/createBox.test.js b/packages/mui-system/src/createBox/createBox.test.js index ebbb3950cf14af..9ac83ac81b3909 100644 --- a/packages/mui-system/src/createBox/createBox.test.js +++ b/packages/mui-system/src/createBox/createBox.test.js @@ -16,7 +16,7 @@ describe('createBox', () => { it('should use defaultTheme if provided', () => { const Box = createBox({ defaultTheme: { palette: { primary: { main: 'rgb(255, 0, 0)' } } } }); - const { container } = render(Content); + const { container } = render(Content); expect(container.firstChild).toHaveComputedStyle({ color: 'rgb(255, 0, 0)' }); }); @@ -25,7 +25,7 @@ describe('createBox', () => { const { container } = render( - Content + Content , ); expect(container.firstChild).toHaveComputedStyle({ color: 'rgb(0, 255, 0)' }); diff --git a/test/integration/material-ui/components.spec.tsx b/test/integration/material-ui/components.spec.tsx index bc08a487883ee4..43490ec1c49d31 100644 --- a/test/integration/material-ui/components.spec.tsx +++ b/test/integration/material-ui/components.spec.tsx @@ -94,7 +94,7 @@ function AppBarTest() { - + Title