From 9e7158bc1d7e858c821d8ddeac5cb98b0ab4d663 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 29 Jul 2024 22:01:23 +0530 Subject: [PATCH 01/12] Bump Font awesome SVG icons to ^6.6.0 (#43019) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: ZeeshanTamboli --- docs/package.json | 4 +-- .../typescript/OverridableComponent.spec.tsx | 2 +- pnpm-lock.yaml | 36 +++++++++---------- 3 files changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/package.json b/docs/package.json index bd9a78aea28f61..0edc8bc33b826f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -27,8 +27,8 @@ "@emotion/react": "^11.13.0", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.13.0", - "@fortawesome/fontawesome-svg-core": "^6.5.2", - "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/fontawesome-svg-core": "^6.6.0", + "@fortawesome/free-solid-svg-icons": "^6.6.0", "@fortawesome/react-fontawesome": "^0.2.2", "@mui/base": "workspace:*", "@mui/docs": "workspace:^", diff --git a/packages/mui-material/test/typescript/OverridableComponent.spec.tsx b/packages/mui-material/test/typescript/OverridableComponent.spec.tsx index 3c4827ca7d0625..19f464659889d0 100644 --- a/packages/mui-material/test/typescript/OverridableComponent.spec.tsx +++ b/packages/mui-material/test/typescript/OverridableComponent.spec.tsx @@ -76,7 +76,7 @@ declare const Foo: OverridableComponent<{ expectType(elem); }} onClick={(event) => { - expectType, typeof e>(e); + expectType, typeof event>(event); event.currentTarget.checkValidity(); }} />; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4f4171b8560f0a..514cc2ea1299e4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -561,14 +561,14 @@ importers: specifier: ^11.13.0 version: 11.13.0(@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1))(@types/react@18.3.3)(react@18.3.1) '@fortawesome/fontawesome-svg-core': - specifier: ^6.5.2 - version: 6.5.2 + specifier: ^6.6.0 + version: 6.6.0 '@fortawesome/free-solid-svg-icons': - specifier: ^6.5.2 - version: 6.5.2 + specifier: ^6.6.0 + version: 6.6.0 '@fortawesome/react-fontawesome': specifier: ^0.2.2 - version: 0.2.2(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.3.1) + version: 0.2.2(@fortawesome/fontawesome-svg-core@6.6.0)(react@18.3.1) '@mui/base': specifier: workspace:* version: link:../packages/mui-base/build @@ -3580,16 +3580,16 @@ packages: '@floating-ui/utils@0.2.1': resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==} - '@fortawesome/fontawesome-common-types@6.5.2': - resolution: {integrity: sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==} + '@fortawesome/fontawesome-common-types@6.6.0': + resolution: {integrity: sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==} engines: {node: '>=6'} - '@fortawesome/fontawesome-svg-core@6.5.2': - resolution: {integrity: sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==} + '@fortawesome/fontawesome-svg-core@6.6.0': + resolution: {integrity: sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==} engines: {node: '>=6'} - '@fortawesome/free-solid-svg-icons@6.5.2': - resolution: {integrity: sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==} + '@fortawesome/free-solid-svg-icons@6.6.0': + resolution: {integrity: sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==} engines: {node: '>=6'} '@fortawesome/react-fontawesome@0.2.2': @@ -13646,19 +13646,19 @@ snapshots: '@floating-ui/utils@0.2.1': {} - '@fortawesome/fontawesome-common-types@6.5.2': {} + '@fortawesome/fontawesome-common-types@6.6.0': {} - '@fortawesome/fontawesome-svg-core@6.5.2': + '@fortawesome/fontawesome-svg-core@6.6.0': dependencies: - '@fortawesome/fontawesome-common-types': 6.5.2 + '@fortawesome/fontawesome-common-types': 6.6.0 - '@fortawesome/free-solid-svg-icons@6.5.2': + '@fortawesome/free-solid-svg-icons@6.6.0': dependencies: - '@fortawesome/fontawesome-common-types': 6.5.2 + '@fortawesome/fontawesome-common-types': 6.6.0 - '@fortawesome/react-fontawesome@0.2.2(@fortawesome/fontawesome-svg-core@6.5.2)(react@18.3.1)': + '@fortawesome/react-fontawesome@0.2.2(@fortawesome/fontawesome-svg-core@6.6.0)(react@18.3.1)': dependencies: - '@fortawesome/fontawesome-svg-core': 6.5.2 + '@fortawesome/fontawesome-svg-core': 6.6.0 prop-types: 15.8.1 react: 18.3.1 From f9c523dc42d8b3739c65ec53c72a5af64ee09cf5 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Tue, 30 Jul 2024 14:03:55 +0700 Subject: [PATCH 02/12] [material-ui] Attach selector for default color scheme (#43035) --- .../src/styles/createGetSelector.ts | 5 +- .../src/styles/extendTheme.test.js | 20 ++- .../src/cssVars/createCssVarsProvider.js | 25 ++-- .../src/cssVars/createCssVarsProvider.test.js | 127 ++++++++++++++++-- .../src/cssVars/prepareCssVars.test.ts | 2 +- .../mui-system/src/cssVars/prepareCssVars.ts | 3 + 6 files changed, 160 insertions(+), 22 deletions(-) diff --git a/packages/mui-material/src/styles/createGetSelector.ts b/packages/mui-material/src/styles/createGetSelector.ts index 2f79dc98c99cab..fc228cf50541ff 100644 --- a/packages/mui-material/src/styles/createGetSelector.ts +++ b/packages/mui-material/src/styles/createGetSelector.ts @@ -39,11 +39,14 @@ export default < if (rule) { return { [rule.replace('%s', colorScheme)]: excludedVariables, - ':root': css, + [`:root, ${rule.replace('%s', colorScheme)}`]: css, }; } return { ':root': { ...css, ...excludedVariables } }; } + if (rule && rule !== 'media') { + return `:root, ${rule.replace('%s', String(colorScheme))}`; + } } else if (colorScheme) { if (rule === 'media') { return `@media (prefers-color-scheme: ${String(colorScheme)}) { :root`; diff --git a/packages/mui-material/src/styles/extendTheme.test.js b/packages/mui-material/src/styles/extendTheme.test.js index 3f8d8f5e9ced3f..a92099aaebd178 100644 --- a/packages/mui-material/src/styles/extendTheme.test.js +++ b/packages/mui-material/src/styles/extendTheme.test.js @@ -759,7 +759,7 @@ describe('extendTheme', () => { }); expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([ ':root', - ':root', + ':root, .light', '.dark', ]); }); @@ -771,7 +771,7 @@ describe('extendTheme', () => { }); expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([ ':root', - ':root', + ':root, .mode-light', '.mode-dark', ]); }); @@ -793,7 +793,7 @@ describe('extendTheme', () => { }); expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([ ':root', - ':root', + ':root, [data-theme-light]', '[data-theme-dark]', ]); }); @@ -807,5 +807,19 @@ describe('extendTheme', () => { expect(theme.getColorSchemeSelector('light')).to.equal('[data-theme-light] &'); expect(theme.getColorSchemeSelector('dark')).to.equal('[data-theme-dark] &'); }); + + it('should use a custom class selector when dark is the default', () => { + const theme = extendTheme({ + colorSchemes: { light: true, dark: true }, + colorSchemeSelector: '.mode-%s', + defaultColorScheme: 'dark', + }); + expect(theme.generateStyleSheets().flatMap((sheet) => Object.keys(sheet))).to.deep.equal([ + ':root', + '.mode-dark', // specific variables for dark + ':root, .mode-dark', + '.mode-light', + ]); + }); }); }); diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index 61b93ce8b14948..39a612a2078c20 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -161,16 +161,25 @@ export default function createCssVarsProvider(options) { colorSchemeSelector && colorSchemeSelector !== 'media' ) { - const selector = colorSchemeSelector.replace('%s', colorScheme); - if (selector.startsWith('.')) { + const selector = colorSchemeSelector; + let rule = colorSchemeSelector; + if (selector === 'class') { + rule = `.%s`; + } + if (selector === 'data') { + rule = `[data-%s]`; + } + if (selector?.startsWith('data-') && !selector.includes('%s')) { + // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]' + rule = `[${selector}="%s"]`; + } + if (rule.startsWith('.')) { colorSchemeNode.classList.remove( - ...allColorSchemes.map((scheme) => - colorSchemeSelector.substring(1).replace('%s', scheme), - ), + ...allColorSchemes.map((scheme) => rule.substring(1).replace('%s', scheme)), ); - colorSchemeNode.classList.add(selector.substring(1)); + colorSchemeNode.classList.add(rule.substring(1).replace('%s', colorScheme)); } else { - const matches = selector.match(/\[([^\]]+)\]/); + const matches = rule.replace('%s', colorScheme).match(/\[([^\]]+)\]/); if (matches) { const [attr, value] = matches[1].split('='); if (!value) { @@ -182,7 +191,7 @@ export default function createCssVarsProvider(options) { } colorSchemeNode.setAttribute(attr, value ? value.replace(/"|'/g, '') : ''); } else { - colorSchemeNode.setAttribute(selector, colorScheme); + colorSchemeNode.setAttribute(rule, colorScheme); } } } diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js index 3aef4d93cbf4c1..6168066a83dac4 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js @@ -395,29 +395,138 @@ describe('createCssVarsProvider', () => { describe('DOM', () => { it('attach default dataset on html', () => { - const { CssVarsProvider } = createCssVarsProvider({ + const { CssVarsProvider, useColorScheme } = createCssVarsProvider({ theme: createCssVarsTheme({ - colorSchemes: { light: {} }, + colorSchemes: { light: {}, dark: {} }, }), - defaultColorScheme: 'light', + defaultColorScheme: { light: 'light', dark: 'dark' }, }); - render(); + function Toggle() { + const { mode, setMode } = useColorScheme(); + return ( + + ); + } + render( + + + , + ); expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('light'); + + fireEvent.click(screen.getByRole('button')); + + expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('dark'); + }); + + it('attach class on html', () => { + const { CssVarsProvider, useColorScheme } = createCssVarsProvider({ + theme: createCssVarsTheme({ + colorSchemeSelector: 'class', + colorSchemes: { light: {}, dark: {} }, + }), + defaultColorScheme: { light: 'light', dark: 'dark' }, + }); + function Toggle() { + const { mode, setMode } = useColorScheme(); + return ( + + ); + } + render( + + + , + ); + + expect(document.documentElement.classList.contains('light')).to.equal(true); + + fireEvent.click(screen.getByRole('button')); + + expect(document.documentElement.classList.contains('light')).to.equal(false); + expect(document.documentElement.classList.contains('dark')).to.equal(true); + + document.documentElement.classList.remove('dark'); // cleanup + }); + + it('attach data- on html', () => { + const { CssVarsProvider, useColorScheme } = createCssVarsProvider({ + theme: createCssVarsTheme({ + colorSchemeSelector: 'data', + colorSchemes: { light: {}, dark: {} }, + }), + defaultColorScheme: { light: 'light', dark: 'dark' }, + }); + function Toggle() { + const { mode, setMode } = useColorScheme(); + return ( + + ); + } + render( + + + , + ); + + expect(document.documentElement.getAttribute('data-light')).to.equal(''); + + fireEvent.click(screen.getByRole('button')); + + expect(document.documentElement.getAttribute('data-light')).to.equal(null); + expect(document.documentElement.getAttribute('data-dark')).to.equal(''); }); it('use custom attribute', () => { - const { CssVarsProvider } = createCssVarsProvider({ + const { CssVarsProvider, useColorScheme } = createCssVarsProvider({ theme: createCssVarsTheme({ colorSchemeSelector: 'data-foo-bar', - colorSchemes: { light: {} }, + colorSchemes: { light: {}, dark: {} }, }), - defaultColorScheme: 'light', + defaultColorScheme: { light: 'light', dark: 'dark' }, }); - - render(); + function Toggle() { + const { mode, setMode } = useColorScheme(); + return ( + + ); + } + render( + + + , + ); expect(document.documentElement.getAttribute('data-foo-bar')).to.equal('light'); + + fireEvent.click(screen.getByRole('button')); + + expect(document.documentElement.getAttribute('data-foo-bar')).to.equal('dark'); }); it('does not crash if documentNode is null', () => { diff --git a/packages/mui-system/src/cssVars/prepareCssVars.test.ts b/packages/mui-system/src/cssVars/prepareCssVars.test.ts index f54507b6d44df9..865fbb34bf684d 100644 --- a/packages/mui-system/src/cssVars/prepareCssVars.test.ts +++ b/packages/mui-system/src/cssVars/prepareCssVars.test.ts @@ -152,7 +152,7 @@ describe('prepareCssVars', () => { const stylesheets = result.generateStyleSheets(); expect(stylesheets).to.deep.equal([ { ':root': { '--fontSize-base': '1rem' } }, - { '[data-color-scheme="dark"]': { '--color': 'red' } }, + { ':root, [data-color-scheme="dark"]': { '--color': 'red' } }, { '[data-color-scheme="light"]': { '--color': 'green' } }, ]); }); diff --git a/packages/mui-system/src/cssVars/prepareCssVars.ts b/packages/mui-system/src/cssVars/prepareCssVars.ts index aa15b025ceb23d..42d63d94667f78 100644 --- a/packages/mui-system/src/cssVars/prepareCssVars.ts +++ b/packages/mui-system/src/cssVars/prepareCssVars.ts @@ -69,6 +69,9 @@ function prepareCssVars Date: Tue, 30 Jul 2024 08:09:18 +0100 Subject: [PATCH 03/12] [docs][material-ui] Replace deprecated `` with `ListItemButton` component in routing libraries list example (#43110) Co-authored-by: ZeeshanTamboli --- .../integrations/routing/ListRouter.js | 29 ++++++++++++------- .../integrations/routing/ListRouter.tsx | 29 ++++++++++++------- 2 files changed, 36 insertions(+), 22 deletions(-) diff --git a/docs/data/material/integrations/routing/ListRouter.js b/docs/data/material/integrations/routing/ListRouter.js index 23db2bb775557f..950cf175d56a72 100644 --- a/docs/data/material/integrations/routing/ListRouter.js +++ b/docs/data/material/integrations/routing/ListRouter.js @@ -1,8 +1,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import List from '@mui/material/List'; -import Box from '@mui/material/Box'; import ListItem from '@mui/material/ListItem'; +import Box from '@mui/material/Box'; +import ListItemButton from '@mui/material/ListItemButton'; import Paper from '@mui/material/Paper'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; @@ -44,12 +45,10 @@ function ListItemLink(props) { const { icon, primary, to } = props; return ( -
  • - - {icon ? {icon} : null} - - -
    • + + {icon ? {icon} : null} + + ); } @@ -78,13 +77,21 @@ export default function ListRouter() { - } /> - } /> + + } /> + + + } /> + - - + + + + + + diff --git a/docs/data/material/integrations/routing/ListRouter.tsx b/docs/data/material/integrations/routing/ListRouter.tsx index 58c05b3d7d6962..a711dbbd6be900 100644 --- a/docs/data/material/integrations/routing/ListRouter.tsx +++ b/docs/data/material/integrations/routing/ListRouter.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import List from '@mui/material/List'; -import Box from '@mui/material/Box'; import ListItem from '@mui/material/ListItem'; +import Box from '@mui/material/Box'; +import ListItemButton from '@mui/material/ListItemButton'; import Paper from '@mui/material/Paper'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; @@ -48,12 +49,10 @@ function ListItemLink(props: ListItemLinkProps) { const { icon, primary, to } = props; return ( -
  • - - {icon ? {icon} : null} - - -
    • + + {icon ? {icon} : null} + + ); } @@ -76,13 +75,21 @@ export default function ListRouter() { - } /> - } /> + + } /> + + + } /> + - - + + + + + + From ed833daa09cf605970ec2f14c1674a4823a7a766 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Tue, 30 Jul 2024 09:29:28 -0500 Subject: [PATCH 04/12] [docs][pigment-css] Fix syntax in migrating-to-pigment-css guide (#43107) Signed-off-by: Kevin Van Cott Co-authored-by: ZeeshanTamboli --- .../migration/migrating-to-v6/migrating-to-pigment-css.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md index 99d5db156b13ef..a3e87cbb508950 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-pigment-css.md @@ -550,8 +550,8 @@ Pigment CSS can extract the `sx` prop from any JSX element, so there is no need - - ... - -+
    -+ ++
    ++ + ... +
    ) From f160039530d201f840486e564446512cc1c856c9 Mon Sep 17 00:00:00 2001 From: shahzaibdev1 <65166554+shahzaibdev1@users.noreply.github.com> Date: Tue, 30 Jul 2024 19:55:00 +0500 Subject: [PATCH 05/12] [docs][material-ui][Card] Update CardMedia description (#43067) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: shahzaibdev1 <65166554+shahzaibdev1@users.noreply.github.com> Co-authored-by: Aarón García Hervás Co-authored-by: ZeeshanTamboli --- docs/data/material/components/cards/cards.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md index e6c0ccba1d699f..93b026b4890624 100644 --- a/docs/data/material/components/cards/cards.md +++ b/docs/data/material/components/cards/cards.md @@ -20,7 +20,7 @@ The Material UI Card component includes several complementary utility component - Card: a surface-level container for grouping related components. - Card Content: the wrapper for the Card content. - Card Header: an optional wrapper for the Card header. -- Card Media: an optional container for displaying background images and gradient layers behind the Card Content. +- Card Media: an optional container for displaying images, videos, etc. - Card Actions: an optional wrapper that groups a set of buttons. - Card Action Area: an optional wrapper that allows users to interact with the specified area of the Card. From 08dce48d69c0cda46455d5ce35a329bb7f6f6edc Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Tue, 30 Jul 2024 11:10:38 -0400 Subject: [PATCH 06/12] [material-ui][mui-system] Stabilize Grid v2 and deprecate Grid v1 (#43054) --- .../browser/scenarios/grid-system/index.js | 2 +- docs/data/material/components/grid/grid.md | 4 + .../material/components/grid2/AutoGrid.js | 2 +- .../material/components/grid2/AutoGrid.tsx | 2 +- .../material/components/grid2/BasicGrid.js | 2 +- .../material/components/grid2/BasicGrid.tsx | 2 +- .../components/grid2/CenteredElementGrid.js | 2 +- .../components/grid2/CenteredElementGrid.tsx | 2 +- .../material/components/grid2/ColumnsGrid.js | 2 +- .../material/components/grid2/ColumnsGrid.tsx | 2 +- .../components/grid2/FullBorderedGrid.js | 2 +- .../components/grid2/FullBorderedGrid.tsx | 2 +- .../components/grid2/FullWidthGrid.js | 2 +- .../components/grid2/FullWidthGrid.tsx | 2 +- .../components/grid2/HalfBorderedGrid.js | 2 +- .../components/grid2/HalfBorderedGrid.tsx | 2 +- .../material/components/grid2/NestedGrid.js | 2 +- .../material/components/grid2/NestedGrid.tsx | 2 +- .../components/grid2/NestedGridColumns.js | 2 +- .../components/grid2/NestedGridColumns.tsx | 2 +- .../material/components/grid2/OffsetGrid.js | 2 +- .../material/components/grid2/OffsetGrid.tsx | 2 +- .../components/grid2/ResponsiveGrid.js | 2 +- .../components/grid2/ResponsiveGrid.tsx | 2 +- .../components/grid2/RowAndColumnSpacing.js | 2 +- .../components/grid2/RowAndColumnSpacing.tsx | 2 +- .../material/components/grid2/SpacingGrid.js | 2 +- .../material/components/grid2/SpacingGrid.tsx | 2 +- .../components/grid2/VariableWidthGrid.js | 2 +- .../components/grid2/VariableWidthGrid.tsx | 2 +- docs/data/material/components/grid2/grid2.md | 25 +- .../dashboard/components/MainGrid.js | 2 +- .../dashboard/components/MainGrid.tsx | 2 +- .../migrating-to-v6/migrating-to-v6.md | 22 +- .../GridDisableEqualOverflow.js | 35 --- .../migration/migration-grid-v2/GridsDiff.js | 2 +- .../migration-grid-v2/migration-grid-v2.md | 33 ++- .../migration-v4/v5-component-changes.md | 2 +- docs/data/material/pages.ts | 4 +- docs/data/material/pagesApi.js | 1 + docs/data/system/components/grid/AutoGrid.js | 2 +- docs/data/system/components/grid/AutoGrid.tsx | 2 +- .../system/components/grid/AutoGridNoWrap.js | 2 +- .../system/components/grid/AutoGridNoWrap.tsx | 2 +- docs/data/system/components/grid/BasicGrid.js | 2 +- .../data/system/components/grid/BasicGrid.tsx | 2 +- .../system/components/grid/ColumnsGrid.js | 2 +- .../system/components/grid/ColumnsGrid.tsx | 2 +- .../components/grid/CustomBreakpointsGrid.js | 2 +- .../system/components/grid/FullWidthGrid.js | 2 +- .../system/components/grid/FullWidthGrid.tsx | 2 +- .../data/system/components/grid/NestedGrid.js | 2 +- .../system/components/grid/NestedGrid.tsx | 2 +- .../data/system/components/grid/OffsetGrid.js | 2 +- .../system/components/grid/OffsetGrid.tsx | 2 +- .../system/components/grid/ResponsiveGrid.js | 2 +- .../system/components/grid/ResponsiveGrid.tsx | 2 +- .../components/grid/RowAndColumnSpacing.js | 2 +- .../components/grid/RowAndColumnSpacing.tsx | 2 +- .../system/components/grid/SpacingGrid.js | 2 +- .../system/components/grid/SpacingGrid.tsx | 2 +- .../components/grid/VariableWidthGrid.js | 2 +- .../components/grid/VariableWidthGrid.tsx | 2 +- docs/data/system/components/grid/grid.md | 1 - .../components/stack/InteractiveStack.js | 2 +- .../components/stack/InteractiveStack.tsx | 2 +- .../migrating-to-v6/migrating-to-v6.md | 22 +- docs/pages/material-ui/api/grid-2.js | 19 ++ docs/pages/material-ui/api/grid-2.json | 65 +++++ docs/pages/material-ui/api/grid.json | 3 +- docs/pages/system/api/grid.json | 7 +- docs/src/MuiPage.ts | 4 + docs/src/components/about/HowToSupport.tsx | 2 +- docs/src/components/about/OurValues.tsx | 2 +- docs/src/components/about/Team.tsx | 2 +- docs/src/components/careers/CareersFaq.tsx | 2 +- docs/src/components/careers/PerksBenefits.tsx | 2 +- docs/src/components/home/CompaniesGrid.tsx | 2 +- docs/src/components/home/DiamondSponsors.tsx | 2 +- docs/src/components/home/GoldSponsors.tsx | 2 +- docs/src/components/home/ProductSuite.tsx | 2 +- docs/src/components/home/UserFeedbacks.tsx | 2 +- docs/src/components/home/ValueProposition.tsx | 2 +- docs/src/components/pricing/PricingFAQ.tsx | 2 +- .../productBaseUI/BaseUIComponents.tsx | 2 +- .../components/productBaseUI/BaseUIEnd.tsx | 2 +- .../productBaseUI/BaseUISummary.tsx | 2 +- .../productBaseUI/BaseUITestimonial.tsx | 2 +- .../productDesignKit/DesignKitDemo.tsx | 2 +- .../productDesignKit/DesignKitFAQ.tsx | 2 +- .../productDesignKit/DesignKitValues.tsx | 2 +- .../productDesignKit/SyncFeatures.tsx | 2 +- .../productMaterial/MaterialComponents.tsx | 2 +- .../productMaterial/MaterialDesignKits.tsx | 2 +- .../productMaterial/MaterialEnd.tsx | 2 +- .../productMaterial/MaterialStyling.tsx | 2 +- .../productMaterial/MaterialTheming.tsx | 2 +- .../productTemplate/TemplateDemo.tsx | 2 +- docs/src/components/productX/XComponents.tsx | 2 +- docs/src/components/productX/XDataGrid.tsx | 2 +- docs/src/components/productX/XPlans.tsx | 2 +- docs/src/components/productX/XRoadmap.tsx | 2 +- docs/src/components/productX/XTheming.tsx | 2 +- docs/src/modules/components/AppNavDrawer.js | 2 + .../modules/components/AppNavDrawerItem.js | 3 + .../components/JoyStartingLinksCollection.js | 2 +- .../modules/components/MaterialShowcase.js | 2 +- .../MaterialStartingLinksCollection.js | 2 +- .../MaterialUtilComponents.js | 2 +- .../components/MaterialUIDesignResources.js | 2 +- .../components/MaterialUIExampleCollection.js | 2 +- docs/translations/api-docs/grid-2/grid-2.json | 30 +++ .../materialUi/projectSettings.ts | 2 +- .../ApiBuilders/ComponentApiBuilder.ts | 2 +- packages/mui-codemod/README.md | 2 +- .../src/v6.0.0/grid-v2-props/grid-v2-props.js | 10 +- .../v6.0.0/grid-v2-props/test-cases/actual.js | 12 +- .../test-cases/custom-breakpoints.actual.js | 2 +- .../test-cases/custom-breakpoints.expected.js | 2 +- .../grid-v2-props/test-cases/expected.js | 12 +- .../mui-joy/src/ButtonGroup/ButtonGroup.tsx | 2 +- packages/mui-joy/src/Grid/Grid.tsx | 2 +- packages/mui-joy/src/Grid/GridProps.ts | 2 +- packages/mui-joy/src/Grid/gridClasses.ts | 2 +- packages/mui-material/src/Grid/Grid.d.ts | 2 + packages/mui-material/src/Grid/Grid.js | 3 + .../{Unstable_Grid2 => Grid2}/Grid2.test.js | 4 +- packages/mui-material/src/Grid2/Grid2.tsx | 254 ++++++++++++++++++ .../{Unstable_Grid2 => Grid2}/grid2Classes.ts | 2 +- .../src/{Unstable_Grid2 => Grid2}/index.ts | 2 +- .../src/PigmentGrid/PigmentGrid.tsx | 2 +- .../mui-material/src/PigmentGrid/index.ts | 2 +- .../mui-material/src/Unstable_Grid2/Grid2.tsx | 37 --- .../src/Unstable_Grid2/Grid2Props.ts | 19 -- packages/mui-material/src/index.d.ts | 5 +- packages/mui-material/src/index.js | 5 +- .../mui-material/src/styles/overrides.d.ts | 2 +- packages/mui-material/src/styles/props.d.ts | 2 +- .../src/{Unstable_Grid => Grid}/Grid.test.js | 2 +- .../src/{Unstable_Grid => Grid}/Grid.tsx | 0 .../src/{Unstable_Grid => Grid}/GridProps.ts | 0 .../{Unstable_Grid => Grid}/createGrid.tsx | 0 .../{Unstable_Grid => Grid}/gridClasses.ts | 0 .../gridGenerator.test.js | 0 .../{Unstable_Grid => Grid}/gridGenerator.ts | 0 .../src/{Unstable_Grid => Grid}/index.ts | 0 .../traverseBreakpoints.test.ts | 0 .../traverseBreakpoints.ts | 0 packages/mui-system/src/index.d.ts | 4 +- packages/mui-system/src/index.js | 4 +- .../gridCustomBreakpoints.spec.tsx | 26 +- .../fixtures/Grid/StressNestedGrid2.js | 2 +- test/regressions/fixtures/Grid/StyledGrid2.js | 2 +- 153 files changed, 608 insertions(+), 295 deletions(-) delete mode 100644 docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js create mode 100644 docs/pages/material-ui/api/grid-2.js create mode 100644 docs/pages/material-ui/api/grid-2.json create mode 100644 docs/translations/api-docs/grid-2/grid-2.json rename packages/mui-material/src/{Unstable_Grid2 => Grid2}/Grid2.test.js (80%) create mode 100644 packages/mui-material/src/Grid2/Grid2.tsx rename packages/mui-material/src/{Unstable_Grid2 => Grid2}/grid2Classes.ts (95%) rename packages/mui-material/src/{Unstable_Grid2 => Grid2}/index.ts (82%) delete mode 100644 packages/mui-material/src/Unstable_Grid2/Grid2.tsx delete mode 100644 packages/mui-material/src/Unstable_Grid2/Grid2Props.ts rename packages/mui-system/src/{Unstable_Grid => Grid}/Grid.test.js (99%) rename packages/mui-system/src/{Unstable_Grid => Grid}/Grid.tsx (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/GridProps.ts (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/createGrid.tsx (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/gridClasses.ts (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/gridGenerator.test.js (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/gridGenerator.ts (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/index.ts (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/traverseBreakpoints.test.ts (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/traverseBreakpoints.ts (100%) diff --git a/benchmark/browser/scenarios/grid-system/index.js b/benchmark/browser/scenarios/grid-system/index.js index cead80916b8af3..bdfaad77c2736e 100644 --- a/benchmark/browser/scenarios/grid-system/index.js +++ b/benchmark/browser/scenarios/grid-system/index.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; export default function GridSystem() { return ( diff --git a/docs/data/material/components/grid/grid.md b/docs/data/material/components/grid/grid.md index 816918f92a7201..3e1898118b6ba7 100644 --- a/docs/data/material/components/grid/grid.md +++ b/docs/data/material/components/grid/grid.md @@ -19,6 +19,10 @@ Material Design's responsive UI is based on a 12-column grid layout. The `Grid` component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to [the `DataGrid` component](/x/react-data-grid/). ::: +:::warning +The `Grid` component has been deprecated. Please use the [Grid v2](/material-ui/react-grid2/) instead. See how to migrate in the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/) and [Material UI v6 migration guide](/material-ui/migration/migrating-to-v6/). +::: + ## How it works The grid system is implemented with the `Grid` component: diff --git a/docs/data/material/components/grid2/AutoGrid.js b/docs/data/material/components/grid2/AutoGrid.js index ca9c7ec891ad18..ea1617c9f5e42a 100644 --- a/docs/data/material/components/grid2/AutoGrid.js +++ b/docs/data/material/components/grid2/AutoGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/AutoGrid.tsx b/docs/data/material/components/grid2/AutoGrid.tsx index ca9c7ec891ad18..ea1617c9f5e42a 100644 --- a/docs/data/material/components/grid2/AutoGrid.tsx +++ b/docs/data/material/components/grid2/AutoGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/BasicGrid.js b/docs/data/material/components/grid2/BasicGrid.js index 86f550e3c5949c..7f167521cfd5d0 100644 --- a/docs/data/material/components/grid2/BasicGrid.js +++ b/docs/data/material/components/grid2/BasicGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/BasicGrid.tsx b/docs/data/material/components/grid2/BasicGrid.tsx index 86f550e3c5949c..7f167521cfd5d0 100644 --- a/docs/data/material/components/grid2/BasicGrid.tsx +++ b/docs/data/material/components/grid2/BasicGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/CenteredElementGrid.js b/docs/data/material/components/grid2/CenteredElementGrid.js index bb53cea3e4d8ac..0d4fa14b4ac95e 100644 --- a/docs/data/material/components/grid2/CenteredElementGrid.js +++ b/docs/data/material/components/grid2/CenteredElementGrid.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; export default function CenteredElementGrid() { return ( diff --git a/docs/data/material/components/grid2/CenteredElementGrid.tsx b/docs/data/material/components/grid2/CenteredElementGrid.tsx index bb53cea3e4d8ac..0d4fa14b4ac95e 100644 --- a/docs/data/material/components/grid2/CenteredElementGrid.tsx +++ b/docs/data/material/components/grid2/CenteredElementGrid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; export default function CenteredElementGrid() { return ( diff --git a/docs/data/material/components/grid2/ColumnsGrid.js b/docs/data/material/components/grid2/ColumnsGrid.js index 15ceb2c25893bd..442dbf01bbe105 100644 --- a/docs/data/material/components/grid2/ColumnsGrid.js +++ b/docs/data/material/components/grid2/ColumnsGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/ColumnsGrid.tsx b/docs/data/material/components/grid2/ColumnsGrid.tsx index 15ceb2c25893bd..442dbf01bbe105 100644 --- a/docs/data/material/components/grid2/ColumnsGrid.tsx +++ b/docs/data/material/components/grid2/ColumnsGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/FullBorderedGrid.js b/docs/data/material/components/grid2/FullBorderedGrid.js index c586d97ee78659..ccd93a973108dc 100644 --- a/docs/data/material/components/grid2/FullBorderedGrid.js +++ b/docs/data/material/components/grid2/FullBorderedGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; export default function FullBorderedGrid() { return ( diff --git a/docs/data/material/components/grid2/FullBorderedGrid.tsx b/docs/data/material/components/grid2/FullBorderedGrid.tsx index c586d97ee78659..ccd93a973108dc 100644 --- a/docs/data/material/components/grid2/FullBorderedGrid.tsx +++ b/docs/data/material/components/grid2/FullBorderedGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; export default function FullBorderedGrid() { return ( diff --git a/docs/data/material/components/grid2/FullWidthGrid.js b/docs/data/material/components/grid2/FullWidthGrid.js index 641c8eb56ca8f9..94ce3c71790400 100644 --- a/docs/data/material/components/grid2/FullWidthGrid.js +++ b/docs/data/material/components/grid2/FullWidthGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/FullWidthGrid.tsx b/docs/data/material/components/grid2/FullWidthGrid.tsx index 641c8eb56ca8f9..94ce3c71790400 100644 --- a/docs/data/material/components/grid2/FullWidthGrid.tsx +++ b/docs/data/material/components/grid2/FullWidthGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/HalfBorderedGrid.js b/docs/data/material/components/grid2/HalfBorderedGrid.js index 088e91fee523ed..e0c51b84407fd0 100644 --- a/docs/data/material/components/grid2/HalfBorderedGrid.js +++ b/docs/data/material/components/grid2/HalfBorderedGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; export default function HalfBorderedGrid() { const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 }; diff --git a/docs/data/material/components/grid2/HalfBorderedGrid.tsx b/docs/data/material/components/grid2/HalfBorderedGrid.tsx index 86559e7b7f2a07..8c08fda0130141 100644 --- a/docs/data/material/components/grid2/HalfBorderedGrid.tsx +++ b/docs/data/material/components/grid2/HalfBorderedGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; export default function HalfBorderedGrid() { const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 } as const; diff --git a/docs/data/material/components/grid2/NestedGrid.js b/docs/data/material/components/grid2/NestedGrid.js index acde87b966314e..5bb80f4483644c 100644 --- a/docs/data/material/components/grid2/NestedGrid.js +++ b/docs/data/material/components/grid2/NestedGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/NestedGrid.tsx b/docs/data/material/components/grid2/NestedGrid.tsx index acde87b966314e..5bb80f4483644c 100644 --- a/docs/data/material/components/grid2/NestedGrid.tsx +++ b/docs/data/material/components/grid2/NestedGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/NestedGridColumns.js b/docs/data/material/components/grid2/NestedGridColumns.js index 6bbb985a425ba7..cbe82b160cf8a5 100644 --- a/docs/data/material/components/grid2/NestedGridColumns.js +++ b/docs/data/material/components/grid2/NestedGridColumns.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/NestedGridColumns.tsx b/docs/data/material/components/grid2/NestedGridColumns.tsx index 6bbb985a425ba7..cbe82b160cf8a5 100644 --- a/docs/data/material/components/grid2/NestedGridColumns.tsx +++ b/docs/data/material/components/grid2/NestedGridColumns.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/OffsetGrid.js b/docs/data/material/components/grid2/OffsetGrid.js index 93e52e754fd946..20883b5e6bceef 100644 --- a/docs/data/material/components/grid2/OffsetGrid.js +++ b/docs/data/material/components/grid2/OffsetGrid.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/OffsetGrid.tsx b/docs/data/material/components/grid2/OffsetGrid.tsx index 93e52e754fd946..20883b5e6bceef 100644 --- a/docs/data/material/components/grid2/OffsetGrid.tsx +++ b/docs/data/material/components/grid2/OffsetGrid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/ResponsiveGrid.js b/docs/data/material/components/grid2/ResponsiveGrid.js index e80fbbdee44bec..2e25849576f911 100644 --- a/docs/data/material/components/grid2/ResponsiveGrid.js +++ b/docs/data/material/components/grid2/ResponsiveGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/ResponsiveGrid.tsx b/docs/data/material/components/grid2/ResponsiveGrid.tsx index e80fbbdee44bec..2e25849576f911 100644 --- a/docs/data/material/components/grid2/ResponsiveGrid.tsx +++ b/docs/data/material/components/grid2/ResponsiveGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { experimentalStyled as styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.js b/docs/data/material/components/grid2/RowAndColumnSpacing.js index 60432628c330f7..452c578fe9aa39 100644 --- a/docs/data/material/components/grid2/RowAndColumnSpacing.js +++ b/docs/data/material/components/grid2/RowAndColumnSpacing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; diff --git a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx b/docs/data/material/components/grid2/RowAndColumnSpacing.tsx index 60432628c330f7..452c578fe9aa39 100644 --- a/docs/data/material/components/grid2/RowAndColumnSpacing.tsx +++ b/docs/data/material/components/grid2/RowAndColumnSpacing.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; diff --git a/docs/data/material/components/grid2/SpacingGrid.js b/docs/data/material/components/grid2/SpacingGrid.js index 3d8458a87f53fd..2b252f5f4df68a 100644 --- a/docs/data/material/components/grid2/SpacingGrid.js +++ b/docs/data/material/components/grid2/SpacingGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import FormLabel from '@mui/material/FormLabel'; import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; diff --git a/docs/data/material/components/grid2/SpacingGrid.tsx b/docs/data/material/components/grid2/SpacingGrid.tsx index 5f5b04cc7acc8d..4b9132af7ffe11 100644 --- a/docs/data/material/components/grid2/SpacingGrid.tsx +++ b/docs/data/material/components/grid2/SpacingGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import FormLabel from '@mui/material/FormLabel'; import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; diff --git a/docs/data/material/components/grid2/VariableWidthGrid.js b/docs/data/material/components/grid2/VariableWidthGrid.js index 669561ef0eff1b..0b50197b503b8e 100644 --- a/docs/data/material/components/grid2/VariableWidthGrid.js +++ b/docs/data/material/components/grid2/VariableWidthGrid.js @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/VariableWidthGrid.tsx b/docs/data/material/components/grid2/VariableWidthGrid.tsx index 669561ef0eff1b..0b50197b503b8e 100644 --- a/docs/data/material/components/grid2/VariableWidthGrid.tsx +++ b/docs/data/material/components/grid2/VariableWidthGrid.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const Item = styled(Paper)(({ theme }) => ({ backgroundColor: '#fff', diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid2/grid2.md index f0b407444e19eb..cea778689f5c90 100644 --- a/docs/data/material/components/grid2/grid2.md +++ b/docs/data/material/components/grid2/grid2.md @@ -1,7 +1,7 @@ --- productId: material-ui title: React Grid component -components: PigmentGrid +components: PigmentGrid, Grid2 githubLabel: 'component: Grid' materialDesign: https://m2.material.io/design/layout/understanding-layout.html --- @@ -15,29 +15,6 @@ The columns can be configured with multiple breakpoints to specify the column sp {{"component": "@mui/docs/ComponentLinkHeader", "design": false}} -## What's changed - -We built the `Grid` component from scratch in order to: - -- Fix [known issues](https://github.com/mui/material-ui/pull/32746) introduced in Material UI v5. -- Simplify the logic with CSS variables, removing the unnecessary `item` prop and reducing CSS specificity. -- Introduce a proper fix for [preventing a scrollbar](#prevent-scrollbar) by switching between negative margin approaches. -- Set negative margins of equal size on all sides of the grid container by default. - -Since the new implementation is considered a breaking change, we introduced it as `Unstable_Grid2` to gather feedbacks from the community before making it stable in the next major release of Material UI. - -We encourage everyone to try the new version of the `Grid` by visiting the [Grid v2 migration guide](/material-ui/migration/migration-grid-v2/). - -:::info -From now on, the `Grid` v1 and `Grid` v2 refer to the import as: - -```js -import Grid from '@mui/material/Grid'; // Grid version 1 -import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2 -``` - -::: - ## How it works The grid system is implemented with the `Grid` component: diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js index df3148d7fbb465..be0ab712f7423c 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js +++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx index 67ef806c5b8819..e981d697a6a8cf 100644 --- a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx +++ b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md index 36a5ec48e4c804..40fc7c1421dbf9 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md @@ -191,13 +191,27 @@ The `children` passed to the Loading Button component is now wrapped in a ` ``` +:::warning +You need to modify the import from `@mui/material/Unstable_Grid2` to `@mui/material/Grid2` before running the codemod. +::: + If you have custom breakpoints, the change is the same: ```diff diff --git a/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js b/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js deleted file mode 100644 index 9540a6c296583c..00000000000000 --- a/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Grid2 from '@mui/material/Unstable_Grid2'; -import Typography from '@mui/material/Typography'; - -export default function GridDisableEqualOverflow() { - return ( - - - - - ver.2
    - Top and left overflow -     -     -     - - The overflow represents the negative margin of the grid. - -     - ); -} diff --git a/docs/data/material/migration/migration-grid-v2/GridsDiff.js b/docs/data/material/migration/migration-grid-v2/GridsDiff.js index 05a8e81dd41117..9c75b750dd81d9 100644 --- a/docs/data/material/migration/migration-grid-v2/GridsDiff.js +++ b/docs/data/material/migration/migration-grid-v2/GridsDiff.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; -import Grid2 from '@mui/material/Unstable_Grid2'; +import Grid2 from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; export default function GridsDiff() { diff --git a/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md b/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md index 516605b47229d4..d885b13b4caaf0 100644 --- a/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md +++ b/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md @@ -11,22 +11,16 @@ Grid v2 has several new feature and many improvements over the original: - All grids are considered items without specifying the `item` prop. - The long-awaited [offset feature](/material-ui/react-grid2/#offset) gives you more flexibility for positioning. - [Nested grids](/material-ui/react-grid2/#nested-grid) now have no depth limitation. -- The `disableEqualOverflow` flag disables the horizontal scrollbar in smaller viewports. - -:::info -Grid v2 is currently considered `Unstable_` as we give the community time to try it out and offer feedback. -We will make it stable and deprecate v1 in the next major release of Material UI. -::: ## With Material UI v4 -The Grid v2 is introduced in Material UI v5, so you have to follow the [Material UI migration guide](/material-ui/migration/migration-v4/) first. +The Grid v2 is introduced in Material UI v5, so you have to follow the [Material UI v5 migration guide](/material-ui/migration/migration-v4/) first. ## With Material UI v5 -The migration is expected to be smooth since most of the APIs remains the same. However, there is one breaking change that we want to clarify: - -The default implementation of the negative margin in Grid v2 is spread equally on all sides (same as the Grid in Material UI v4). +The migration is expected to be smooth since most of the APIs remains the same. +There is one breaking change that we want to clarify: +The default implementation of the negative margin in Grid v2 is spread equally on all sides. {{"demo": "GridsDiff.js", "bg": true, "hideToolbar": true}} @@ -48,10 +42,7 @@ The `item` and `zeroMinWidth` props have been removed in Grid v2: ### Negative margins -If you want to apply the negative margins similar to the Grid v1, specify `disableEqualOverflow: true` on the grid container: - -{{"demo": "GridDisableEqualOverflow.js", "bg": true, "hideToolbar": true}} - +If you want to apply the negative margins similar to the Grid v1, specify `disableEqualOverflow={true}` on the grid container. To apply to all grids, add the default props to the theme: ```js @@ -79,6 +70,20 @@ function Demo() { } ``` +## With Material UI v6 + +The Grid v2 is marked as stable in Material UI v6, so the `Unstable_` prefix is removed: + +```diff +-import Grid from '@mui/material/Unstable_Grid2'; ++import Grid from '@mui/material/Grid2'; +``` + +Alongside the stabilization, the API has been improved. +You can see the changes and further details of how to migrate in the [Material UI v6 migration guide](/material-ui/migrating-to-v6/). + +Finally, the original Grid component is deprecated and will be removed in the future, so we highly encourage you to migrate to Grid v2. + ## Documentation page Check out [Grid v2 docs](/material-ui/react-grid2/#fluid-grids) for all the demos and code samples. diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md index 09c37a3fe69ac5..f2f179a7b0d820 100644 --- a/docs/data/material/migration/migration-v4/v5-component-changes.md +++ b/docs/data/material/migration/migration-v4/v5-component-changes.md @@ -772,7 +772,7 @@ If you need negative margins on all sides, we recommend using the new Grid v2 in ```diff - import Grid from '@mui/material/Grid'; -+ import Grid from '@mui/material/Unstable_Grid2'; ++ import Grid from '@mui/material/Grid2'; ``` To learn more about the Grid v2, check out the [demos](/material-ui/react-grid2/#whats-changed) and the [Grid migration guide](/material-ui/migration/migration-grid-v2/). diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 3df0800866aa33..bac35ba97326ea 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -106,8 +106,8 @@ const pages: MuiPage[] = [ children: [ { pathname: '/material-ui/react-box' }, { pathname: '/material-ui/react-container' }, - { pathname: '/material-ui/react-grid' }, - { pathname: '/material-ui/react-grid2', title: 'Grid v2', newFeature: true }, + { pathname: '/material-ui/react-grid', deprecated: true }, + { pathname: '/material-ui/react-grid2', title: 'Grid v2' }, { pathname: '/material-ui/react-stack' }, { pathname: '/material-ui/react-image-list', title: 'Image List' }, { pathname: '/material-ui/react-hidden' }, diff --git a/docs/data/material/pagesApi.js b/docs/data/material/pagesApi.js index 0d8fdd2ebbda25..2c6f1e2aca5155 100644 --- a/docs/data/material/pagesApi.js +++ b/docs/data/material/pagesApi.js @@ -48,6 +48,7 @@ module.exports = [ { pathname: '/material-ui/api/form-label' }, { pathname: '/material-ui/api/global-styles' }, { pathname: '/material-ui/api/grid' }, + { pathname: '/material-ui/api/grid-2' }, { pathname: '/material-ui/api/grow' }, { pathname: '/material-ui/api/hidden' }, { pathname: '/material-ui/api/icon' }, diff --git a/docs/data/system/components/grid/AutoGrid.js b/docs/data/system/components/grid/AutoGrid.js index 5bca5c0db7dde2..7e6795574e63e0 100644 --- a/docs/data/system/components/grid/AutoGrid.js +++ b/docs/data/system/components/grid/AutoGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/AutoGrid.tsx b/docs/data/system/components/grid/AutoGrid.tsx index 5bca5c0db7dde2..7e6795574e63e0 100644 --- a/docs/data/system/components/grid/AutoGrid.tsx +++ b/docs/data/system/components/grid/AutoGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/AutoGridNoWrap.js b/docs/data/system/components/grid/AutoGridNoWrap.js index 971db7e1721af4..5e28c136639e95 100644 --- a/docs/data/system/components/grid/AutoGridNoWrap.js +++ b/docs/data/system/components/grid/AutoGridNoWrap.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; diff --git a/docs/data/system/components/grid/AutoGridNoWrap.tsx b/docs/data/system/components/grid/AutoGridNoWrap.tsx index 971db7e1721af4..5e28c136639e95 100644 --- a/docs/data/system/components/grid/AutoGridNoWrap.tsx +++ b/docs/data/system/components/grid/AutoGridNoWrap.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; diff --git a/docs/data/system/components/grid/BasicGrid.js b/docs/data/system/components/grid/BasicGrid.js index 9d119cd6b3e405..69f1e8c48390e7 100644 --- a/docs/data/system/components/grid/BasicGrid.js +++ b/docs/data/system/components/grid/BasicGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/BasicGrid.tsx b/docs/data/system/components/grid/BasicGrid.tsx index 9d119cd6b3e405..69f1e8c48390e7 100644 --- a/docs/data/system/components/grid/BasicGrid.tsx +++ b/docs/data/system/components/grid/BasicGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/ColumnsGrid.js b/docs/data/system/components/grid/ColumnsGrid.js index 3294d5aa72922f..9d9f131ebc1842 100644 --- a/docs/data/system/components/grid/ColumnsGrid.js +++ b/docs/data/system/components/grid/ColumnsGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/ColumnsGrid.tsx b/docs/data/system/components/grid/ColumnsGrid.tsx index 3294d5aa72922f..9d9f131ebc1842 100644 --- a/docs/data/system/components/grid/ColumnsGrid.tsx +++ b/docs/data/system/components/grid/ColumnsGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/CustomBreakpointsGrid.js b/docs/data/system/components/grid/CustomBreakpointsGrid.js index d51105cdb55559..d0c5c09a73a2b5 100644 --- a/docs/data/system/components/grid/CustomBreakpointsGrid.js +++ b/docs/data/system/components/grid/CustomBreakpointsGrid.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { ThemeProvider, createTheme } from '@mui/system'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/FullWidthGrid.js b/docs/data/system/components/grid/FullWidthGrid.js index e86bf34a209edc..592739cdbcc5e7 100644 --- a/docs/data/system/components/grid/FullWidthGrid.js +++ b/docs/data/system/components/grid/FullWidthGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/FullWidthGrid.tsx b/docs/data/system/components/grid/FullWidthGrid.tsx index e86bf34a209edc..592739cdbcc5e7 100644 --- a/docs/data/system/components/grid/FullWidthGrid.tsx +++ b/docs/data/system/components/grid/FullWidthGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/NestedGrid.js b/docs/data/system/components/grid/NestedGrid.js index 267c08c3881666..f4e4399b05b924 100644 --- a/docs/data/system/components/grid/NestedGrid.js +++ b/docs/data/system/components/grid/NestedGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/NestedGrid.tsx b/docs/data/system/components/grid/NestedGrid.tsx index 267c08c3881666..f4e4399b05b924 100644 --- a/docs/data/system/components/grid/NestedGrid.tsx +++ b/docs/data/system/components/grid/NestedGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/OffsetGrid.js b/docs/data/system/components/grid/OffsetGrid.js index 7143b5f1b45e81..c17f8451fda021 100644 --- a/docs/data/system/components/grid/OffsetGrid.js +++ b/docs/data/system/components/grid/OffsetGrid.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/OffsetGrid.tsx b/docs/data/system/components/grid/OffsetGrid.tsx index 7143b5f1b45e81..c17f8451fda021 100644 --- a/docs/data/system/components/grid/OffsetGrid.tsx +++ b/docs/data/system/components/grid/OffsetGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/ResponsiveGrid.js b/docs/data/system/components/grid/ResponsiveGrid.js index 7fd174a2bc301c..abd60378e9d595 100644 --- a/docs/data/system/components/grid/ResponsiveGrid.js +++ b/docs/data/system/components/grid/ResponsiveGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/ResponsiveGrid.tsx b/docs/data/system/components/grid/ResponsiveGrid.tsx index 7fd174a2bc301c..abd60378e9d595 100644 --- a/docs/data/system/components/grid/ResponsiveGrid.tsx +++ b/docs/data/system/components/grid/ResponsiveGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/RowAndColumnSpacing.js b/docs/data/system/components/grid/RowAndColumnSpacing.js index fded5d876109f5..bc9c0caa12fae9 100644 --- a/docs/data/system/components/grid/RowAndColumnSpacing.js +++ b/docs/data/system/components/grid/RowAndColumnSpacing.js @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from '@mui/system/styled'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import Box from '@mui/system/Box'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/RowAndColumnSpacing.tsx b/docs/data/system/components/grid/RowAndColumnSpacing.tsx index fded5d876109f5..bc9c0caa12fae9 100644 --- a/docs/data/system/components/grid/RowAndColumnSpacing.tsx +++ b/docs/data/system/components/grid/RowAndColumnSpacing.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import styled from '@mui/system/styled'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import Box from '@mui/system/Box'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/SpacingGrid.js b/docs/data/system/components/grid/SpacingGrid.js index 4141d66e7934ed..391d18ad7b340f 100644 --- a/docs/data/system/components/grid/SpacingGrid.js +++ b/docs/data/system/components/grid/SpacingGrid.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import FormLabel from '@mui/material/FormLabel'; import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; diff --git a/docs/data/system/components/grid/SpacingGrid.tsx b/docs/data/system/components/grid/SpacingGrid.tsx index dac4291794e53a..a1e34f3ad3fbb0 100644 --- a/docs/data/system/components/grid/SpacingGrid.tsx +++ b/docs/data/system/components/grid/SpacingGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import FormLabel from '@mui/material/FormLabel'; import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; diff --git a/docs/data/system/components/grid/VariableWidthGrid.js b/docs/data/system/components/grid/VariableWidthGrid.js index cc3e7219c95056..539b0e71198ff8 100644 --- a/docs/data/system/components/grid/VariableWidthGrid.js +++ b/docs/data/system/components/grid/VariableWidthGrid.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/VariableWidthGrid.tsx b/docs/data/system/components/grid/VariableWidthGrid.tsx index cc3e7219c95056..539b0e71198ff8 100644 --- a/docs/data/system/components/grid/VariableWidthGrid.tsx +++ b/docs/data/system/components/grid/VariableWidthGrid.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/grid/grid.md b/docs/data/system/components/grid/grid.md index 9441ce63c7d66e..dc26f2b19a7b84 100644 --- a/docs/data/system/components/grid/grid.md +++ b/docs/data/system/components/grid/grid.md @@ -21,7 +21,6 @@ The grid system is implemented with the `Grid` component: - Item widths are set in percentages, so they're always fluid and sized relative to their parent element. - There are five default grid breakpoints: xs, sm, md, lg, and xl. If you need custom breakpoints, check out [custom breakpoints grid](#custom-breakpoints). - Integer values can be given to each breakpoint, indicating how many of the 12 available columns are occupied by the component when the viewport width satisfies the [breakpoint constraints](/material-ui/customization/breakpoints/#default-breakpoints). -- It uses negative margin and padding technique to create [gap-like](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) between children. - It **does not** have the concept of rows. Meaning, you can't make the children span to multiple rows. If you need to do that, we recommend to use [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) instead. - It **does not** offer auto-placement children feature. It will try to fit the children one by one and if there is not enough space, the rest of the children will start on the next line and so on. If you need the auto-placement feature, we recommend to use [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Auto-placement_in_grid_layout) instead. diff --git a/docs/data/system/components/stack/InteractiveStack.js b/docs/data/system/components/stack/InteractiveStack.js index 140e9c5fff789b..1f4a0926e900d7 100644 --- a/docs/data/system/components/stack/InteractiveStack.js +++ b/docs/data/system/components/stack/InteractiveStack.js @@ -5,7 +5,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import Paper from '@mui/material/Paper'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import Stack from '@mui/system/Stack'; import { styled } from '@mui/system'; import { HighlightedCode } from '@mui/docs/HighlightedCode'; diff --git a/docs/data/system/components/stack/InteractiveStack.tsx b/docs/data/system/components/stack/InteractiveStack.tsx index dd612ca6ca5b7b..95a6bb71b432eb 100644 --- a/docs/data/system/components/stack/InteractiveStack.tsx +++ b/docs/data/system/components/stack/InteractiveStack.tsx @@ -5,7 +5,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import Paper from '@mui/material/Paper'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; import Stack, { StackProps } from '@mui/system/Stack'; import { styled } from '@mui/system'; import { HighlightedCode } from '@mui/docs/HighlightedCode'; diff --git a/docs/data/system/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/system/migration/migrating-to-v6/migrating-to-v6.md index cb9012f86fb63a..bd24626f5ac58b 100644 --- a/docs/data/system/migration/migrating-to-v6/migrating-to-v6.md +++ b/docs/data/system/migration/migrating-to-v6/migrating-to-v6.md @@ -37,13 +37,27 @@ You can follow progress on https://github.com/mui/material-ui/issues/30671. ### Grid -The `Grid` component was updated to match the API of the new `PigmentGrid` component, to allow interoperability between the two: +The `Grid` component was updated and stabilized: -- The previous size and offset props were replaced with the `size` and `offset` props +- The previous size (`xs`, `sm`, `md`, ...) and offset (`xsOffset`, `smOffset`, `mdOffset`, ...) props, which were named after the theme's breakpoints, were replaced with the `size` and `offset` props. - The spacing mechanism was reworked to use the `gap` CSS property. This brings some breaking changes described in the following sections. +#### Stabilized API + +The `Grid` component API was stabilized, so its import no longer contains the `Unstable_` prefix: + +```diff +- import { Unstable_Grid as Grid } from '@mui/system'; ++ import { Grid } from '@mui/system'; +``` + +```diff +- import Grid from '@mui/system/Unstable_Grid'; ++ import Grid from '@mui/system/Grid'; +``` + #### Size and offset props Previously, the size and offset props were named corresponding to the theme's breakpoints. @@ -85,6 +99,10 @@ Use this codemod to migrate your project to the new size and offset props: npx @mui/codemod@next v6.0.0/grid-v2-props ``` +:::warning +You need to modify the import from `@mui/system/Unstable_Grid` to `@mui/system/Grid` before running the codemod. +::: + If you have custom breakpoints, the change is the same: ```diff diff --git a/docs/pages/material-ui/api/grid-2.js b/docs/pages/material-ui/api/grid-2.js new file mode 100644 index 00000000000000..39e0924da9ff1b --- /dev/null +++ b/docs/pages/material-ui/api/grid-2.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; +import jsonPageContent from './grid-2.json'; + +export default function Page(props) { + const { descriptions, pageContent } = props; + return ; +} + +Page.getInitialProps = () => { + const req = require.context('docs/translations/api-docs/grid-2', false, /\.\/grid-2.*.json$/); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid-2.json new file mode 100644 index 00000000000000..08188af737d19a --- /dev/null +++ b/docs/pages/material-ui/api/grid-2.json @@ -0,0 +1,65 @@ +{ + "props": { + "children": { "type": { "name": "node" } }, + "columns": { + "type": { + "name": "union", + "description": "Array<number>
    | number
    | object" + } + }, + "columnSpacing": { + "type": { + "name": "union", + "description": "Array<number
    | string>
    | number
    | object
    | string" + } + }, + "container": { "type": { "name": "bool" } }, + "direction": { + "type": { + "name": "union", + "description": "'column-reverse'
    | 'column'
    | 'row-reverse'
    | 'row'
    | Array<'column-reverse'
    | 'column'
    | 'row-reverse'
    | 'row'>
    | object" + } + }, + "offset": { + "type": { + "name": "union", + "description": "string
    | number
    | Array<string
    | number>
    | object" + } + }, + "rowSpacing": { + "type": { + "name": "union", + "description": "Array<number
    | string>
    | number
    | object
    | string" + } + }, + "size": { + "type": { + "name": "union", + "description": "string
    | bool
    | number
    | Array<string
    | bool
    | number>
    | object" + } + }, + "spacing": { + "type": { + "name": "union", + "description": "Array<number
    | string>
    | number
    | object
    | string" + } + }, + "wrap": { + "type": { + "name": "enum", + "description": "'nowrap'
    | 'wrap-reverse'
    | 'wrap'" + } + } + }, + "name": "Grid2", + "imports": ["import Grid2 from '@mui/material/Grid2';", "import { Grid2 } from '@mui/material';"], + "classes": [], + "spread": true, + "themeDefaultProps": true, + "muiName": "MuiGrid2", + "forwardsRefTo": "HTMLElement", + "filename": "/packages/mui-material/src/Grid2/Grid2.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/material-ui/api/grid.json b/docs/pages/material-ui/api/grid.json index eacdac14949355..3e5fa15e9b0f58 100644 --- a/docs/pages/material-ui/api/grid.json +++ b/docs/pages/material-ui/api/grid.json @@ -255,5 +255,6 @@ "filename": "/packages/mui-material/src/Grid/Grid.js", "inheritance": null, "demos": "", - "cssComponent": true + "cssComponent": true, + "deprecated": true } diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json index 625c6aa8177d1a..3a3c9d23850287 100644 --- a/docs/pages/system/api/grid.json +++ b/docs/pages/system/api/grid.json @@ -52,10 +52,7 @@ } }, "name": "Grid", - "imports": [ - "import Grid from '@mui/system/Unstable_Grid';", - "import { Unstable_Grid as Grid } from '@mui/system';" - ], + "imports": ["import Grid from '@mui/system/Grid';", "import { Grid } from '@mui/system';"], "classes": [ { "key": "container", @@ -104,7 +101,7 @@ "themeDefaultProps": true, "muiName": "MuiGrid", "forwardsRefTo": "HTMLElement", - "filename": "/packages/mui-system/src/Unstable_Grid/Grid.tsx", + "filename": "/packages/mui-system/src/Grid/Grid.tsx", "inheritance": null, "demos": "", "cssComponent": true diff --git a/docs/src/MuiPage.ts b/docs/src/MuiPage.ts index 36296ce8f71096..27fe43ada7a09f 100644 --- a/docs/src/MuiPage.ts +++ b/docs/src/MuiPage.ts @@ -57,6 +57,10 @@ export interface MuiPage { * Indicates the item is in beta release. */ beta?: boolean; + /** + * Indicates if the pages are regarding some deprecated API. + */ + deprecated?: boolean; } export interface OrderedMuiPage extends MuiPage { diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx index 855df28a277688..270d092bb82bc0 100644 --- a/docs/src/components/about/HowToSupport.tsx +++ b/docs/src/components/about/HowToSupport.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; diff --git a/docs/src/components/about/OurValues.tsx b/docs/src/components/about/OurValues.tsx index b67dcd84172892..01e386c87e27ee 100644 --- a/docs/src/components/about/OurValues.tsx +++ b/docs/src/components/about/OurValues.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx index 51adddc5596514..582a6fcb43cc16 100644 --- a/docs/src/components/about/Team.tsx +++ b/docs/src/components/about/Team.tsx @@ -5,7 +5,7 @@ import Button from '@mui/material/Button'; import Container from '@mui/material/Container'; import Divider from '@mui/material/Divider'; import IconButton from '@mui/material/IconButton'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Paper, { PaperProps } from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import Tooltip from '@mui/material/Tooltip'; diff --git a/docs/src/components/careers/CareersFaq.tsx b/docs/src/components/careers/CareersFaq.tsx index b3a385cfc9a4ba..ceab7d1f7dc573 100644 --- a/docs/src/components/careers/CareersFaq.tsx +++ b/docs/src/components/careers/CareersFaq.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; diff --git a/docs/src/components/careers/PerksBenefits.tsx b/docs/src/components/careers/PerksBenefits.tsx index ea43dac6a546a2..91ed9781f33423 100644 --- a/docs/src/components/careers/PerksBenefits.tsx +++ b/docs/src/components/careers/PerksBenefits.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Stack from '@mui/material/Stack'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx index 3165859c29d65f..d8a8e3c79a515e 100644 --- a/docs/src/components/home/CompaniesGrid.tsx +++ b/docs/src/components/home/CompaniesGrid.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage'; export const CORE_CUSTOMERS: Array = [ diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx index aa9ba2ccf9f79d..5d89c01da5672f 100644 --- a/docs/src/components/home/DiamondSponsors.tsx +++ b/docs/src/components/home/DiamondSponsors.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { useInView } from 'react-intersection-observer'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx index b1e68a7e45ebc7..ef92649a1075b6 100644 --- a/docs/src/components/home/GoldSponsors.tsx +++ b/docs/src/components/home/GoldSponsors.tsx @@ -4,7 +4,7 @@ import Paper from '@mui/material/Paper'; import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import AddRounded from '@mui/icons-material/AddRounded'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import SponsorCard from 'docs/src/components/home/SponsorCard'; import { Link } from '@mui/docs/Link'; import ROUTES from 'docs/src/route'; diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx index 854a470a0aee7c..6e800c3dddfcad 100644 --- a/docs/src/components/home/ProductSuite.tsx +++ b/docs/src/components/home/ProductSuite.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import dynamic from 'next/dynamic'; import { useInView } from 'react-intersection-observer'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Box, { BoxProps } from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Section from 'docs/src/layouts/Section'; diff --git a/docs/src/components/home/UserFeedbacks.tsx b/docs/src/components/home/UserFeedbacks.tsx index 30cf0e8a81d135..8d8316d68bd1e6 100644 --- a/docs/src/components/home/UserFeedbacks.tsx +++ b/docs/src/components/home/UserFeedbacks.tsx @@ -3,7 +3,7 @@ import { alpha } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import MuiStatistics from 'docs/src/components/home/MuiStatistics'; const TESTIMONIALS = [ diff --git a/docs/src/components/home/ValueProposition.tsx b/docs/src/components/home/ValueProposition.tsx index 7f06c970ff3911..de021e0c070de6 100644 --- a/docs/src/components/home/ValueProposition.tsx +++ b/docs/src/components/home/ValueProposition.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import InvertColorsRoundedIcon from '@mui/icons-material/InvertColorsRounded'; import HandymanRoundedIcon from '@mui/icons-material/HandymanRounded'; import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded'; diff --git a/docs/src/components/pricing/PricingFAQ.tsx b/docs/src/components/pricing/PricingFAQ.tsx index 6e13b94c077914..ccff1240d3f2c2 100644 --- a/docs/src/components/pricing/PricingFAQ.tsx +++ b/docs/src/components/pricing/PricingFAQ.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Link from '@mui/material/Link'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/components/productBaseUI/BaseUIComponents.tsx b/docs/src/components/productBaseUI/BaseUIComponents.tsx index 97709951c7ed83..f0ecbab9d3000b 100644 --- a/docs/src/components/productBaseUI/BaseUIComponents.tsx +++ b/docs/src/components/productBaseUI/BaseUIComponents.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled as materialStyled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import SmartButtonRoundedIcon from '@mui/icons-material/SmartButtonRounded'; import TabUnselectedRoundedIcon from '@mui/icons-material/TabUnselectedRounded'; diff --git a/docs/src/components/productBaseUI/BaseUIEnd.tsx b/docs/src/components/productBaseUI/BaseUIEnd.tsx index 6009fd3579227f..cf9ea8da96761d 100644 --- a/docs/src/components/productBaseUI/BaseUIEnd.tsx +++ b/docs/src/components/productBaseUI/BaseUIEnd.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/components/productBaseUI/BaseUISummary.tsx b/docs/src/components/productBaseUI/BaseUISummary.tsx index ccf05616baf70a..a42d450154ceb1 100644 --- a/docs/src/components/productBaseUI/BaseUISummary.tsx +++ b/docs/src/components/productBaseUI/BaseUISummary.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import StyleRoundedIcon from '@mui/icons-material/StyleRounded'; import AccessibilityNewRounded from '@mui/icons-material/AccessibilityNewRounded'; import PhishingRoundedIcon from '@mui/icons-material/PhishingRounded'; diff --git a/docs/src/components/productBaseUI/BaseUITestimonial.tsx b/docs/src/components/productBaseUI/BaseUITestimonial.tsx index 6f5c85def523df..c7c19b95ef433a 100644 --- a/docs/src/components/productBaseUI/BaseUITestimonial.tsx +++ b/docs/src/components/productBaseUI/BaseUITestimonial.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; import Avatar from '@mui/material/Avatar'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Divider from '@mui/material/Divider'; import Typography from '@mui/material/Typography'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; diff --git a/docs/src/components/productDesignKit/DesignKitDemo.tsx b/docs/src/components/productDesignKit/DesignKitDemo.tsx index a1385a49445658..885c798d8c1515 100644 --- a/docs/src/components/productDesignKit/DesignKitDemo.tsx +++ b/docs/src/components/productDesignKit/DesignKitDemo.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Fade from '@mui/material/Fade'; import Typography from '@mui/material/Typography'; import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx index e54fef7f10753b..daed191ae85a38 100644 --- a/docs/src/components/productDesignKit/DesignKitFAQ.tsx +++ b/docs/src/components/productDesignKit/DesignKitFAQ.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Button from '@mui/material/Button'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; import Paper from '@mui/material/Paper'; diff --git a/docs/src/components/productDesignKit/DesignKitValues.tsx b/docs/src/components/productDesignKit/DesignKitValues.tsx index 4a93862f824017..51ee8cf70d5342 100644 --- a/docs/src/components/productDesignKit/DesignKitValues.tsx +++ b/docs/src/components/productDesignKit/DesignKitValues.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Palette from '@mui/icons-material/Palette'; import LibraryBooks from '@mui/icons-material/LibraryBooks'; import { InfoCard } from '@mui/docs/InfoCard'; diff --git a/docs/src/components/productDesignKit/SyncFeatures.tsx b/docs/src/components/productDesignKit/SyncFeatures.tsx index a5246c8ba7b8bc..596270f65cdd1f 100644 --- a/docs/src/components/productDesignKit/SyncFeatures.tsx +++ b/docs/src/components/productDesignKit/SyncFeatures.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; import Fade from '@mui/material/Fade'; diff --git a/docs/src/components/productMaterial/MaterialComponents.tsx b/docs/src/components/productMaterial/MaterialComponents.tsx index d48acb6212aca2..94fb2a407b8e7e 100644 --- a/docs/src/components/productMaterial/MaterialComponents.tsx +++ b/docs/src/components/productMaterial/MaterialComponents.tsx @@ -3,7 +3,7 @@ import { CssVarsProvider } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Alert from '@mui/material/Alert'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Stack from '@mui/material/Stack'; import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; diff --git a/docs/src/components/productMaterial/MaterialDesignKits.tsx b/docs/src/components/productMaterial/MaterialDesignKits.tsx index 1c216e201809b7..dcd432db4d2de0 100644 --- a/docs/src/components/productMaterial/MaterialDesignKits.tsx +++ b/docs/src/components/productMaterial/MaterialDesignKits.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Fade from '@mui/material/Fade'; import Typography from '@mui/material/Typography'; import ExtensionRoundedIcon from '@mui/icons-material/ExtensionRounded'; diff --git a/docs/src/components/productMaterial/MaterialEnd.tsx b/docs/src/components/productMaterial/MaterialEnd.tsx index c43278f35b5e59..f38fcdae423c17 100644 --- a/docs/src/components/productMaterial/MaterialEnd.tsx +++ b/docs/src/components/productMaterial/MaterialEnd.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx index 157170f2f376c6..df868fd09ed7e3 100644 --- a/docs/src/components/productMaterial/MaterialStyling.tsx +++ b/docs/src/components/productMaterial/MaterialStyling.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import DevicesOtherRoundedIcon from '@mui/icons-material/DevicesOtherRounded'; import SwitchAccessShortcutRoundedIcon from '@mui/icons-material/SwitchAccessShortcutRounded'; diff --git a/docs/src/components/productMaterial/MaterialTheming.tsx b/docs/src/components/productMaterial/MaterialTheming.tsx index 4e93f5e64ad3a4..9b30439d4a044e 100644 --- a/docs/src/components/productMaterial/MaterialTheming.tsx +++ b/docs/src/components/productMaterial/MaterialTheming.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { CssVarsProvider } from '@mui/material/styles'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import AutoAwesomeRounded from '@mui/icons-material/AutoAwesomeRounded'; import { HighlightedCode } from '@mui/docs/HighlightedCode'; diff --git a/docs/src/components/productTemplate/TemplateDemo.tsx b/docs/src/components/productTemplate/TemplateDemo.tsx index ab785734a060e4..3a8b392f97cedf 100644 --- a/docs/src/components/productTemplate/TemplateDemo.tsx +++ b/docs/src/components/productTemplate/TemplateDemo.tsx @@ -3,7 +3,7 @@ import SwipeableViews from 'react-swipeable-views'; import { alpha } from '@mui/material/styles'; import Box from '@mui/material/Box'; import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import LaunchRounded from '@mui/icons-material/LaunchRounded'; import KeyboardArrowLeftRounded from '@mui/icons-material/KeyboardArrowLeftRounded'; diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx index a83c5f343d771f..9c6a9a25eb36ad 100644 --- a/docs/src/components/productX/XComponents.tsx +++ b/docs/src/components/productX/XComponents.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx index 02ac7c7327758a..8dcaa8acdea390 100644 --- a/docs/src/components/productX/XDataGrid.tsx +++ b/docs/src/components/productX/XDataGrid.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro'; import { useDemoData } from '@mui/x-data-grid-generator'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import Paper from '@mui/material/Paper'; import EditRoundedIcon from '@mui/icons-material/EditRounded'; diff --git a/docs/src/components/productX/XPlans.tsx b/docs/src/components/productX/XPlans.tsx index 24f8efbf012525..70d7889ac777d6 100644 --- a/docs/src/components/productX/XPlans.tsx +++ b/docs/src/components/productX/XPlans.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import Section from 'docs/src/layouts/Section'; import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; diff --git a/docs/src/components/productX/XRoadmap.tsx b/docs/src/components/productX/XRoadmap.tsx index 6ddd927c2aeca1..67e414c526769d 100644 --- a/docs/src/components/productX/XRoadmap.tsx +++ b/docs/src/components/productX/XRoadmap.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; diff --git a/docs/src/components/productX/XTheming.tsx b/docs/src/components/productX/XTheming.tsx index 4b8fb72becd8db..f248030852792d 100644 --- a/docs/src/components/productX/XTheming.tsx +++ b/docs/src/components/productX/XTheming.tsx @@ -8,7 +8,7 @@ import { import { useDemoData } from '@mui/x-data-grid-generator'; import { CssVarsProvider } from '@mui/material/styles'; import { red } from '@mui/material/colors'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import Paper from '@mui/material/Paper'; import Section from 'docs/src/layouts/Section'; diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index cb0649232521eb..b1125b6210398f 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -288,6 +288,7 @@ function reduceChildRoutes(context) { planned={page.planned} unstable={page.unstable} beta={page.beta} + deprecated={page.deprecated} plan={page.plan} icon={page.icon} subheader={subheader} @@ -322,6 +323,7 @@ function reduceChildRoutes(context) { planned={page.planned} unstable={page.unstable} beta={page.beta} + deprecated={page.deprecated} plan={page.plan} icon={page.icon} subheader={Boolean(page.subheader)} diff --git a/docs/src/modules/components/AppNavDrawerItem.js b/docs/src/modules/components/AppNavDrawerItem.js index 1590a6680c5506..13395f5b6b9bfd 100644 --- a/docs/src/modules/components/AppNavDrawerItem.js +++ b/docs/src/modules/components/AppNavDrawerItem.js @@ -296,6 +296,7 @@ export default function AppNavDrawerItem(props) { const { beta, children, + deprecated, depth, href, icon, @@ -378,6 +379,7 @@ export default function AppNavDrawerItem(props) { {planned && } {unstable && } {beta && } + {deprecated && } {expandable ? ( @@ -393,6 +395,7 @@ export default function AppNavDrawerItem(props) { AppNavDrawerItem.propTypes = { beta: PropTypes.bool, children: PropTypes.node, + deprecated: PropTypes.bool, depth: PropTypes.number.isRequired, expandable: PropTypes.bool, href: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), diff --git a/docs/src/modules/components/JoyStartingLinksCollection.js b/docs/src/modules/components/JoyStartingLinksCollection.js index 9d1a2b2cf1eb62..b2e25c6f5e2ec7 100644 --- a/docs/src/modules/components/JoyStartingLinksCollection.js +++ b/docs/src/modules/components/JoyStartingLinksCollection.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded'; import WebRoundedIcon from '@mui/icons-material/WebRounded'; import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; diff --git a/docs/src/modules/components/MaterialShowcase.js b/docs/src/modules/components/MaterialShowcase.js index 58e88bc0a315da..2cc103b80fd94a 100644 --- a/docs/src/modules/components/MaterialShowcase.js +++ b/docs/src/modules/components/MaterialShowcase.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Card from '@mui/material/Card'; diff --git a/docs/src/modules/components/MaterialStartingLinksCollection.js b/docs/src/modules/components/MaterialStartingLinksCollection.js index 0672e41aa6ef7a..87e6851a7879b7 100644 --- a/docs/src/modules/components/MaterialStartingLinksCollection.js +++ b/docs/src/modules/components/MaterialStartingLinksCollection.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import InstallDesktopRoundedIcon from '@mui/icons-material/InstallDesktopRounded'; import WebRoundedIcon from '@mui/icons-material/WebRounded'; import DrawRoundedIcon from '@mui/icons-material/DrawRounded'; diff --git a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js index 533f87a1b1a17e..b25f7b76208bf3 100644 --- a/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js +++ b/docs/src/modules/components/MaterialUIComponents/MaterialUtilComponents.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import { InfoCard } from '@mui/docs/InfoCard'; import HighlightAltRoundedIcon from '@mui/icons-material/HighlightAltRounded'; import CssRoundedIcon from '@mui/icons-material/CssRounded'; diff --git a/docs/src/modules/components/MaterialUIDesignResources.js b/docs/src/modules/components/MaterialUIDesignResources.js index 3b9034f3b049d9..e47d0dbf53da8c 100644 --- a/docs/src/modules/components/MaterialUIDesignResources.js +++ b/docs/src/modules/components/MaterialUIDesignResources.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import { InfoCard } from '@mui/docs/InfoCard'; const content = [ diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js index a1128bdefe06b7..064f2f22912eaa 100644 --- a/docs/src/modules/components/MaterialUIExampleCollection.js +++ b/docs/src/modules/components/MaterialUIExampleCollection.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import Avatar from '@mui/material/Avatar'; import Typography from '@mui/material/Typography'; diff --git a/docs/translations/api-docs/grid-2/grid-2.json b/docs/translations/api-docs/grid-2/grid-2.json new file mode 100644 index 00000000000000..ef2a4d9cb8bba9 --- /dev/null +++ b/docs/translations/api-docs/grid-2/grid-2.json @@ -0,0 +1,30 @@ +{ + "componentDescription": "", + "propDescriptions": { + "children": { "description": "The content of the component." }, + "columns": { "description": "The number of columns." }, + "columnSpacing": { + "description": "Defines the horizontal space between the type item components. It overrides the value of the spacing prop." + }, + "container": { + "description": "If true, the component will have the flex container behavior. You should be wrapping items with a container." + }, + "direction": { + "description": "Defines the flex-direction style property. It is applied for all screen sizes." + }, + "offset": { + "description": "Defines the offset value for the type item components." + }, + "rowSpacing": { + "description": "Defines the vertical space between the type item components. It overrides the value of the spacing prop." + }, + "size": { "description": "Defines the size of the the type item components." }, + "spacing": { + "description": "Defines the space between the type item components. It can only be used on a type container component." + }, + "wrap": { + "description": "Defines the flex-wrap style property. It's applied for all screen sizes." + } + }, + "classDescriptions": {} +} diff --git a/packages/api-docs-builder-core/materialUi/projectSettings.ts b/packages/api-docs-builder-core/materialUi/projectSettings.ts index 45b4b8ec90041a..5d0c11f161135a 100644 --- a/packages/api-docs-builder-core/materialUi/projectSettings.ts +++ b/packages/api-docs-builder-core/materialUi/projectSettings.ts @@ -36,7 +36,7 @@ export const projectSettings: ProjectSettings = { skipComponent(filename: string) { return ( filename.match( - /(ThemeProvider|CssVarsProvider|DefaultPropsProvider|InitColorSchemeScript|Grid2)/, + /(ThemeProvider|CssVarsProvider|DefaultPropsProvider|InitColorSchemeScript)/, ) !== null ); }, diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts index c4279fd99407d8..e5ac6920404295 100644 --- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts +++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts @@ -624,7 +624,7 @@ export default async function generateComponentApi( const filename = componentInfo.filename; let reactApi: ComponentReactApi; - if (componentInfo.isSystemComponent) { + if (componentInfo.isSystemComponent || componentInfo.name === 'Grid2') { try { reactApi = docgenParse( src, diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index e1a6766b0a0651..1989628090afb9 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1844,7 +1844,7 @@ However, it has some **limitations**: npx @mui/codemod@next v6.0.0/grid-v2-props ``` -Updates the usage of the `Unstable_Grid` (Grid v2) component to have the same API as the `PigmentGrid`. +Updates the usage of the `@mui/material/Grid2`, `@mui/system/Grid`, and `@mui/joy/Grid` components to their updated APIs. ```diff ; // Doesn't transform Grid v1 -; +; +; diff --git a/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js index edd2527bf9d24b..d4f1223ad047bb 100644 --- a/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js +++ b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.actual.js @@ -1,4 +1,4 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; // Transforms custom breakpoints ; diff --git a/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js index ede253532be318..d202dffc1b29c2 100644 --- a/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js +++ b/packages/mui-codemod/src/v6.0.0/grid-v2-props/test-cases/custom-breakpoints.expected.js @@ -1,4 +1,4 @@ -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; // Transforms custom breakpoints ; // Doesn't transform Grid v1 -; +; +; diff --git a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx index 00cd3fbff6f73c..b90562734a6c9d 100644 --- a/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import clsx from 'clsx'; import PropTypes from 'prop-types'; import { unstable_composeClasses as composeClasses } from '@mui/base'; -import { unstable_traverseBreakpoints as traverseBreakpoints } from '@mui/system/Unstable_Grid'; +import { unstable_traverseBreakpoints as traverseBreakpoints } from '@mui/system/Grid'; import { OverridableComponent } from '@mui/types'; import { unstable_capitalize as capitalize, diff --git a/packages/mui-joy/src/Grid/Grid.tsx b/packages/mui-joy/src/Grid/Grid.tsx index b36406b6f25577..e753f0cf25dd8f 100644 --- a/packages/mui-joy/src/Grid/Grid.tsx +++ b/packages/mui-joy/src/Grid/Grid.tsx @@ -1,6 +1,6 @@ 'use client'; import PropTypes from 'prop-types'; -import { createGrid } from '@mui/system/Unstable_Grid'; +import { createGrid } from '@mui/system/Grid'; import { OverridableComponent } from '@mui/types'; import { styled, useThemeProps } from '../styles'; import { GridTypeMap } from './GridProps'; diff --git a/packages/mui-joy/src/Grid/GridProps.ts b/packages/mui-joy/src/Grid/GridProps.ts index dbb362f34404a1..20ba959bee5852 100644 --- a/packages/mui-joy/src/Grid/GridProps.ts +++ b/packages/mui-joy/src/Grid/GridProps.ts @@ -1,6 +1,6 @@ import * as React from 'react'; import { OverrideProps } from '@mui/types'; -import { GridBaseProps } from '@mui/system/Unstable_Grid'; +import { GridBaseProps } from '@mui/system/Grid'; import { SxProps, SystemProps } from '../styles/types'; import { SlotProps, CreateSlotsAndSlotProps } from '../utils/types'; diff --git a/packages/mui-joy/src/Grid/gridClasses.ts b/packages/mui-joy/src/Grid/gridClasses.ts index e34cc3c742f748..c3ed2ccfff076e 100644 --- a/packages/mui-joy/src/Grid/gridClasses.ts +++ b/packages/mui-joy/src/Grid/gridClasses.ts @@ -2,7 +2,7 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses, } from '@mui/utils'; -import { GridClasses } from '@mui/system/Unstable_Grid'; +import { GridClasses } from '@mui/system/Grid'; export type GridClassKey = keyof GridClasses; diff --git a/packages/mui-material/src/Grid/Grid.d.ts b/packages/mui-material/src/Grid/Grid.d.ts index 475d0e09ce6835..8621d3f06a2090 100644 --- a/packages/mui-material/src/Grid/Grid.d.ts +++ b/packages/mui-material/src/Grid/Grid.d.ts @@ -167,6 +167,8 @@ export interface GridTypeMap< * API: * * - [Grid API](https://next.mui.com/material-ui/api/grid/) + * + * @deprecated Use the [`Grid2`](https://next.mui.com/material-ui/react-grid2/) component instead. */ declare const Grid: OverridableComponent; diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js index 9d1f9974b06aa8..5856cf5d0f093d 100644 --- a/packages/mui-material/src/Grid/Grid.js +++ b/packages/mui-material/src/Grid/Grid.js @@ -397,6 +397,9 @@ const useUtilityClasses = (ownerState) => { return composeClasses(slots, getGridUtilityClass, classes); }; +/** + * @deprecated Use the [`Grid2`](https://next.mui.com/material-ui/react-grid2/) component instead. + */ const Grid = React.forwardRef(function Grid(inProps, ref) { const themeProps = useThemeProps({ props: inProps, name: 'MuiGrid' }); const { breakpoints } = useTheme(); diff --git a/packages/mui-material/src/Unstable_Grid2/Grid2.test.js b/packages/mui-material/src/Grid2/Grid2.test.js similarity index 80% rename from packages/mui-material/src/Unstable_Grid2/Grid2.test.js rename to packages/mui-material/src/Grid2/Grid2.test.js index cba4834e0f29f1..87c952bca83cd7 100644 --- a/packages/mui-material/src/Unstable_Grid2/Grid2.test.js +++ b/packages/mui-material/src/Grid2/Grid2.test.js @@ -1,9 +1,9 @@ import * as React from 'react'; import { createRenderer } from '@mui/internal-test-utils'; -import Grid2, { grid2Classes as classes } from '@mui/material/Unstable_Grid2'; +import Grid2, { grid2Classes as classes } from '@mui/material/Grid2'; import describeConformance from '../../test/describeConformance'; -// The main tests are in mui-system Unstable_Grid folder +// The main tests are in mui-system Grid folder describe('', () => { const { render } = createRenderer(); diff --git a/packages/mui-material/src/Grid2/Grid2.tsx b/packages/mui-material/src/Grid2/Grid2.tsx new file mode 100644 index 00000000000000..6fefa1c7d335e1 --- /dev/null +++ b/packages/mui-material/src/Grid2/Grid2.tsx @@ -0,0 +1,254 @@ +'use client'; +import PropTypes from 'prop-types'; +import { createGrid as createGrid2 } from '@mui/system/Grid'; +import { SxProps, SystemProps } from '@mui/system'; +import { OverridableComponent, OverrideProps } from '@mui/types'; +import { Theme, styled, useThemeProps, Breakpoint } from '../styles'; + +export type Grid2Slot = 'root'; + +type ResponsiveStyleValue = T | Array | { [key in Breakpoint]?: T | null }; + +export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; + +export type GridSpacing = number | string; + +export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse'; + +export type GridSize = 'auto' | 'grow' | number | false; + +export type GridOffset = 'auto' | number; + +export interface GridBaseProps { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * The number of columns. + * @default 12 + */ + columns?: ResponsiveStyleValue; + /** + * Defines the horizontal space between the type `item` components. + * It overrides the value of the `spacing` prop. + */ + columnSpacing?: ResponsiveStyleValue; + /** + * If `true`, the component will have the flex *container* behavior. + * You should be wrapping *items* with a *container*. + * @default false + */ + container?: boolean; + /** + * Defines the `flex-direction` style property. + * It is applied for all screen sizes. + * @default 'row' + */ + direction?: ResponsiveStyleValue; + /** + * Defines the offset value for the type `item` components. + */ + offset?: ResponsiveStyleValue; + /** + * @internal + * The level of the grid starts from `0` + * and increases when the grid nests inside another grid regardless of container or item. + * + * ```js + * // level 0 + * // level 1 + * // level 2 + * // level 1 + * ``` + * + * Only consecutive grid is considered nesting. + * A grid container will start at `0` if there are non-Grid element above it. + * + * ```js + * // level 0 + *
    + * // level 0 + * // level 1 + * ``` + */ + unstable_level?: number; + /** + * Defines the vertical space between the type `item` components. + * It overrides the value of the `spacing` prop. + */ + rowSpacing?: ResponsiveStyleValue; + /** + * Defines the size of the the type `item` components. + */ + size?: ResponsiveStyleValue; + /** + * Defines the space between the type `item` components. + * It can only be used on a type `container` component. + * @default 0 + */ + spacing?: ResponsiveStyleValue | undefined; + /** + * Defines the `flex-wrap` style property. + * It's applied for all screen sizes. + * @default 'wrap' + */ + wrap?: GridWrap; +} + +export interface Grid2TypeMap

    { + props: P & GridBaseProps & { sx?: SxProps } & SystemProps; + defaultComponent: D; +} + +export type Grid2Props< + D extends React.ElementType = Grid2TypeMap['defaultComponent'], + P = { + component?: React.ElementType; + }, +> = OverrideProps, D>; + +/** + * + * Demos: + * + * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/) + * + * API: + * + * - [Grid2 API](https://next.mui.com/material-ui/api/grid-2/) + */ +const Grid2 = createGrid2({ + createStyledComponent: styled('div', { + name: 'MuiGrid2', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, + }), + componentName: 'MuiGrid2', + useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }), +}) as OverridableComponent; + +Grid2.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * The number of columns. + * @default 12 + */ + columns: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.arrayOf(PropTypes.number), + PropTypes.number, + PropTypes.object, + ]), + /** + * Defines the horizontal space between the type `item` components. + * It overrides the value of the `spacing` prop. + */ + columnSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), + PropTypes.number, + PropTypes.object, + PropTypes.string, + ]), + /** + * If `true`, the component will have the flex *container* behavior. + * You should be wrapping *items* with a *container*. + * @default false + */ + container: PropTypes.bool, + /** + * Defines the `flex-direction` style property. + * It is applied for all screen sizes. + * @default 'row' + */ + direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), + PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), + PropTypes.object, + ]), + /** + * Defines the offset value for the type `item` components. + */ + offset: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), + PropTypes.object, + ]), + /** + * Defines the vertical space between the type `item` components. + * It overrides the value of the `spacing` prop. + */ + rowSpacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), + PropTypes.number, + PropTypes.object, + PropTypes.string, + ]), + /** + * Defines the size of the the type `item` components. + */ + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.string, + PropTypes.bool, + PropTypes.number, + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])), + PropTypes.object, + ]), + /** + * Defines the space between the type `item` components. + * It can only be used on a type `container` component. + * @default 0 + */ + spacing: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), + PropTypes.number, + PropTypes.object, + PropTypes.string, + ]), + /** + * @ignore + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), + /** + * @internal + * The level of the grid starts from `0` + * and increases when the grid nests inside another grid regardless of container or item. + * + * ```js + * // level 0 + * // level 1 + * // level 2 + * // level 1 + * ``` + * + * Only consecutive grid is considered nesting. + * A grid container will start at `0` if there are non-Grid element above it. + * + * ```js + * // level 0 + *

    + * // level 0 + * // level 1 + * ``` + */ + unstable_level: PropTypes.number, + /** + * Defines the `flex-wrap` style property. + * It's applied for all screen sizes. + * @default 'wrap' + */ + wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']), +} as any; + +export default Grid2; diff --git a/packages/mui-material/src/Unstable_Grid2/grid2Classes.ts b/packages/mui-material/src/Grid2/grid2Classes.ts similarity index 95% rename from packages/mui-material/src/Unstable_Grid2/grid2Classes.ts rename to packages/mui-material/src/Grid2/grid2Classes.ts index 2db581dc244a8b..eb26cc4f1a3567 100644 --- a/packages/mui-material/src/Unstable_Grid2/grid2Classes.ts +++ b/packages/mui-material/src/Grid2/grid2Classes.ts @@ -1,4 +1,4 @@ -import { GridClasses } from '@mui/system/Unstable_Grid'; +import { GridClasses } from '@mui/system/Grid'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; diff --git a/packages/mui-material/src/Unstable_Grid2/index.ts b/packages/mui-material/src/Grid2/index.ts similarity index 82% rename from packages/mui-material/src/Unstable_Grid2/index.ts rename to packages/mui-material/src/Grid2/index.ts index ca358d2c60797f..b3ff428524d803 100644 --- a/packages/mui-material/src/Unstable_Grid2/index.ts +++ b/packages/mui-material/src/Grid2/index.ts @@ -1,5 +1,5 @@ 'use client'; export { default } from './Grid2'; -export * from './Grid2Props'; +export * from './Grid2'; export { default as grid2Classes } from './grid2Classes'; export * from './grid2Classes'; diff --git a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx index a34e4586c60efe..7d18a8dd1ead3a 100644 --- a/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx +++ b/packages/mui-material/src/PigmentGrid/PigmentGrid.tsx @@ -11,7 +11,7 @@ import { generateDirectionClasses, generateSizeClassNames, generateSpacingClassNames, -} from '@mui/system/Unstable_Grid/gridGenerator'; +} from '@mui/system/Grid/gridGenerator'; import { Breakpoint, Theme } from '../styles'; type ResponsiveStyleValue = T | Array | { [key in Breakpoint]?: T | null }; diff --git a/packages/mui-material/src/PigmentGrid/index.ts b/packages/mui-material/src/PigmentGrid/index.ts index 9be62559663f67..d5cf10f404dccf 100644 --- a/packages/mui-material/src/PigmentGrid/index.ts +++ b/packages/mui-material/src/PigmentGrid/index.ts @@ -1,3 +1,3 @@ export { default } from './PigmentGrid'; export * from './PigmentGrid'; -export { default as grid2Classes } from '../Unstable_Grid2/grid2Classes'; +export { default as grid2Classes } from '../Grid2/grid2Classes'; diff --git a/packages/mui-material/src/Unstable_Grid2/Grid2.tsx b/packages/mui-material/src/Unstable_Grid2/Grid2.tsx deleted file mode 100644 index 04f56b6c78c6ae..00000000000000 --- a/packages/mui-material/src/Unstable_Grid2/Grid2.tsx +++ /dev/null @@ -1,37 +0,0 @@ -'use client'; -import PropTypes from 'prop-types'; -import { createGrid as createGrid2 } from '@mui/system/Unstable_Grid'; -import { OverridableComponent } from '@mui/types'; -import { styled, useThemeProps } from '../styles'; -import { Grid2TypeMap } from './Grid2Props'; - -const Grid2 = createGrid2({ - createStyledComponent: styled('div', { - name: 'MuiGrid2', - slot: 'Root', - overridesResolver: (props, styles) => styles.root, - }), - componentName: 'MuiGrid2', - useThemeProps: (inProps) => useThemeProps({ props: inProps, name: 'MuiGrid2' }), -}) as OverridableComponent; - -Grid2.propTypes /* remove-proptypes */ = { - // ┌────────────────────────────── Warning ──────────────────────────────┐ - // │ These PropTypes are generated from the TypeScript type definitions. │ - // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ - // └─────────────────────────────────────────────────────────────────────┘ - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * @ignore - */ - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), -} as any; - -export default Grid2; diff --git a/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts b/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts deleted file mode 100644 index 7f2ab917c51a27..00000000000000 --- a/packages/mui-material/src/Unstable_Grid2/Grid2Props.ts +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import { OverrideProps } from '@mui/types'; -import { SxProps, SystemProps } from '@mui/system'; -import { GridBaseProps } from '@mui/system/Unstable_Grid'; -import { Theme } from '../styles'; - -export type Grid2Slot = 'root'; - -export interface Grid2TypeMap

    { - props: P & GridBaseProps & { sx?: SxProps } & SystemProps; - defaultComponent: D; -} - -export type Grid2Props< - D extends React.ElementType = Grid2TypeMap['defaultComponent'], - P = { - component?: React.ElementType; - }, -> = OverrideProps, D>; diff --git a/packages/mui-material/src/index.d.ts b/packages/mui-material/src/index.d.ts index c7e50f416ff072..6df30184e376b9 100644 --- a/packages/mui-material/src/index.d.ts +++ b/packages/mui-material/src/index.d.ts @@ -222,10 +222,9 @@ export { default as FormLabel } from './FormLabel'; export * from './FormLabel'; export { default as Grid } from './Grid'; -export * from './Grid'; -export { default as Unstable_Grid2 } from './Unstable_Grid2'; -export * from './Unstable_Grid2'; +export { default as Grid2 } from './Grid2'; +export * from './Grid2'; export { default as Grow } from './Grow'; export * from './Grow'; diff --git a/packages/mui-material/src/index.js b/packages/mui-material/src/index.js index 2546a29634a3a1..6877769b6767b2 100644 --- a/packages/mui-material/src/index.js +++ b/packages/mui-material/src/index.js @@ -152,10 +152,9 @@ export { default as FormLabel } from './FormLabel'; export * from './FormLabel'; export { default as Grid } from './Grid'; -export * from './Grid'; -export { default as Unstable_Grid2 } from './Unstable_Grid2'; -export * from './Unstable_Grid2'; +export { default as Grid2 } from './Grid2'; +export * from './Grid2'; export { default as Grow } from './Grow'; export * from './Grow'; diff --git a/packages/mui-material/src/styles/overrides.d.ts b/packages/mui-material/src/styles/overrides.d.ts index c93ba7697f4de4..4228da8c3e8f33 100644 --- a/packages/mui-material/src/styles/overrides.d.ts +++ b/packages/mui-material/src/styles/overrides.d.ts @@ -45,7 +45,7 @@ import { FormGroupClassKey } from '../FormGroup'; import { FormHelperTextClassKey } from '../FormHelperText'; import { FormLabelClassKey } from '../FormLabel'; import { GridClassKey } from '../Grid'; -import { Grid2Slot } from '../Unstable_Grid2'; +import { Grid2Slot } from '../Grid2'; import { IconButtonClassKey } from '../IconButton'; import { IconClassKey } from '../Icon'; import { ImageListClassKey } from '../ImageList'; diff --git a/packages/mui-material/src/styles/props.d.ts b/packages/mui-material/src/styles/props.d.ts index f8f08561c9c7d3..50754c24c591c9 100644 --- a/packages/mui-material/src/styles/props.d.ts +++ b/packages/mui-material/src/styles/props.d.ts @@ -43,7 +43,7 @@ import { FormGroupProps } from '../FormGroup'; import { FormHelperTextProps } from '../FormHelperText'; import { FormLabelProps } from '../FormLabel'; import { GridProps } from '../Grid'; -import { Grid2Props } from '../Unstable_Grid2'; +import { Grid2Props } from '../Grid2'; import { IconButtonProps } from '../IconButton'; import { IconProps } from '../Icon'; import { ImageListProps } from '../ImageList'; diff --git a/packages/mui-system/src/Unstable_Grid/Grid.test.js b/packages/mui-system/src/Grid/Grid.test.js similarity index 99% rename from packages/mui-system/src/Unstable_Grid/Grid.test.js rename to packages/mui-system/src/Grid/Grid.test.js index e21ec6418441e3..a5ea1acca7c81f 100644 --- a/packages/mui-system/src/Unstable_Grid/Grid.test.js +++ b/packages/mui-system/src/Grid/Grid.test.js @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { createRenderer, screen } from '@mui/internal-test-utils'; import { ThemeProvider } from '@mui/system'; import createTheme from '@mui/system/createTheme'; -import Grid, { gridClasses as classes } from '@mui/system/Unstable_Grid'; +import Grid, { gridClasses as classes } from '@mui/system/Grid'; import describeConformance from '../../test/describeConformance'; describe('System ', () => { diff --git a/packages/mui-system/src/Unstable_Grid/Grid.tsx b/packages/mui-system/src/Grid/Grid.tsx similarity index 100% rename from packages/mui-system/src/Unstable_Grid/Grid.tsx rename to packages/mui-system/src/Grid/Grid.tsx diff --git a/packages/mui-system/src/Unstable_Grid/GridProps.ts b/packages/mui-system/src/Grid/GridProps.ts similarity index 100% rename from packages/mui-system/src/Unstable_Grid/GridProps.ts rename to packages/mui-system/src/Grid/GridProps.ts diff --git a/packages/mui-system/src/Unstable_Grid/createGrid.tsx b/packages/mui-system/src/Grid/createGrid.tsx similarity index 100% rename from packages/mui-system/src/Unstable_Grid/createGrid.tsx rename to packages/mui-system/src/Grid/createGrid.tsx diff --git a/packages/mui-system/src/Unstable_Grid/gridClasses.ts b/packages/mui-system/src/Grid/gridClasses.ts similarity index 100% rename from packages/mui-system/src/Unstable_Grid/gridClasses.ts rename to packages/mui-system/src/Grid/gridClasses.ts diff --git a/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js b/packages/mui-system/src/Grid/gridGenerator.test.js similarity index 100% rename from packages/mui-system/src/Unstable_Grid/gridGenerator.test.js rename to packages/mui-system/src/Grid/gridGenerator.test.js diff --git a/packages/mui-system/src/Unstable_Grid/gridGenerator.ts b/packages/mui-system/src/Grid/gridGenerator.ts similarity index 100% rename from packages/mui-system/src/Unstable_Grid/gridGenerator.ts rename to packages/mui-system/src/Grid/gridGenerator.ts diff --git a/packages/mui-system/src/Unstable_Grid/index.ts b/packages/mui-system/src/Grid/index.ts similarity index 100% rename from packages/mui-system/src/Unstable_Grid/index.ts rename to packages/mui-system/src/Grid/index.ts diff --git a/packages/mui-system/src/Unstable_Grid/traverseBreakpoints.test.ts b/packages/mui-system/src/Grid/traverseBreakpoints.test.ts similarity index 100% rename from packages/mui-system/src/Unstable_Grid/traverseBreakpoints.test.ts rename to packages/mui-system/src/Grid/traverseBreakpoints.test.ts diff --git a/packages/mui-system/src/Unstable_Grid/traverseBreakpoints.ts b/packages/mui-system/src/Grid/traverseBreakpoints.ts similarity index 100% rename from packages/mui-system/src/Unstable_Grid/traverseBreakpoints.ts rename to packages/mui-system/src/Grid/traverseBreakpoints.ts diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index b6ee33d027fcf0..39833a63d62e29 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -117,8 +117,8 @@ export * from './Container/createContainer'; export { default as Container } from './Container'; export * from './Container'; -export { default as Unstable_Grid } from './Unstable_Grid'; -export * from './Unstable_Grid'; +export { default as Grid } from './Grid'; +export * from './Grid'; export { default as Stack } from './Stack'; export * from './Stack'; diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js index acd66226b8727a..1356ec711b58b4 100644 --- a/packages/mui-system/src/index.js +++ b/packages/mui-system/src/index.js @@ -74,8 +74,8 @@ export { default as createContainer } from './Container/createContainer'; export { default as Container } from './Container'; export * from './Container'; -export { default as Unstable_Grid } from './Unstable_Grid/Grid'; -export * from './Unstable_Grid'; +export { default as Grid } from './Grid/Grid'; +export * from './Grid'; export { default as Stack } from './Stack/Stack'; export * from './Stack'; diff --git a/packages/mui-system/test/typescript/moduleAugmentation/gridCustomBreakpoints.spec.tsx b/packages/mui-system/test/typescript/moduleAugmentation/gridCustomBreakpoints.spec.tsx index 78c8e0d5cbdb65..55a8b7a8c9918a 100644 --- a/packages/mui-system/test/typescript/moduleAugmentation/gridCustomBreakpoints.spec.tsx +++ b/packages/mui-system/test/typescript/moduleAugmentation/gridCustomBreakpoints.spec.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { createTheme, ThemeProvider } from '@mui/system'; -import Grid from '@mui/system/Unstable_Grid'; +import Grid from '@mui/system/Grid'; declare module '@mui/system' { interface BreakpointOverrides { @@ -29,23 +29,27 @@ const theme = createTheme({ ; {/* @ts-expect-error unknown desk */} - + ; {/* @ts-expect-error unknown deskOffset */} - + ; diff --git a/test/regressions/fixtures/Grid/StressNestedGrid2.js b/test/regressions/fixtures/Grid/StressNestedGrid2.js index 43af25b5004974..63b9d66e59bae0 100644 --- a/test/regressions/fixtures/Grid/StressNestedGrid2.js +++ b/test/regressions/fixtures/Grid/StressNestedGrid2.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; export default function StressNestedGrid2() { return ( diff --git a/test/regressions/fixtures/Grid/StyledGrid2.js b/test/regressions/fixtures/Grid/StyledGrid2.js index ac0b2bce4b7b8b..983a37c0968fd7 100644 --- a/test/regressions/fixtures/Grid/StyledGrid2.js +++ b/test/regressions/fixtures/Grid/StyledGrid2.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import { styled } from '@mui/material/styles'; // styled(Grid) should work with nested grids. From 12532afa3e4f6f13a9fa86eb459c27792c36b6f9 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Tue, 30 Jul 2024 16:32:42 -0400 Subject: [PATCH 07/12] [release] v6.0.0-beta.4 (#43111) --- CHANGELOG.md | 41 +++++++++++++++++++ package.json | 2 +- packages/mui-codemod/package.json | 2 +- .../mui-core-downloads-tracker/package.json | 2 +- packages/mui-docs/package.json | 2 +- packages/mui-icons-material/package.json | 2 +- packages/mui-lab/package.json | 2 +- packages/mui-material-nextjs/package.json | 2 +- .../mui-material-pigment-css/package.json | 2 +- packages/mui-material/package.json | 2 +- packages/mui-private-theming/package.json | 2 +- packages/mui-styled-engine-sc/package.json | 2 +- packages/mui-styled-engine/package.json | 2 +- packages/mui-styles/package.json | 2 +- packages/mui-system/package.json | 2 +- packages/mui-utils/package.json | 2 +- 16 files changed, 56 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f6698480d3e0be..6e2e47de870e69 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,46 @@ # [Versions](https://mui.com/versions/) +## 6.0.0-beta.4 + + + +_Jul 30, 2024_ + +A big thanks to the 12 contributors who made this release possible. + +### `@mui/material@6.0.0-beta.4` + +- [Accordion] Render a heading wrapping `AccordionSummary` button per W3C Accordion Pattern standards (#42914) @ZeeshanTamboli +- [Divider] Enable borderStyle enhancement in divider with children (#42715) @anuujj +- [ImageListItemBar] Deprecate composed classes (#42905) @sai6855 +- Attach selector for default color scheme (#43035) @siriwatknp +- Stabilize Grid v2 and deprecate Grid v1 (#43054) @DiegoAndai + +### `@mui/system@6.0.0-beta.4` + +- Make `createBreakpoints` independent for stringify theme (#43048) @siriwatknp + +### `@mui/utils@6.0.0-beta.4` + +- Fix issues reported by the React Compiler (#43051) @markliu2013 + +### Docs + +- [material-ui] Replace deprecated `` with `ListItemButton` component in routing libraries list example (#43110) @aliharis99 +- [material-ui][Card] Update CardMedia description (#43067) @shahzaibdev1 +- [material-ui] Polish out data table demo (#43072) @zanivan +- [material-ui][Snackbar] Improve reason type in demos (#43077) @sai6855 +- [pigment-css] Fix syntax in migrating-to-pigment-css guide (#43107) @KevinVandy +- Fix page description line break @oliviertassinari + +### Core + +- Fix event naming convention @oliviertassinari +- [docs-infra] Move ads to the `@mui/docs` package (#42944) @alexfauquette +- [website] Fine-tune button styles on the branding theme (#43082) @zanivan + +All contributors of this release in alphabetical order: @alexfauquette, @aliharis99, @anuujj, @DiegoAndai, @KevinVandy, @markliu2013, @oliviertassinari, @sai6855, @shahzaibdev1, @siriwatknp, @zanivan, @ZeeshanTamboli + ## 6.0.0-beta.3 diff --git a/package.json b/package.json index d8467bcf61dd24..ddc6bccd8d0cab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mui/monorepo", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": true, "scripts": { "preinstall": "npx only-allow pnpm", diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index 0278d63628d89d..5c6e91200075d3 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -1,6 +1,6 @@ { "name": "@mui/codemod", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "bin": "./codemod.js", "private": false, "author": "MUI Team", diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json index 140442bf5b1f5d..abdac7ed536fa4 100644 --- a/packages/mui-core-downloads-tracker/package.json +++ b/packages/mui-core-downloads-tracker/package.json @@ -1,6 +1,6 @@ { "name": "@mui/core-downloads-tracker", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "Internal package to track number of downloads of our design system libraries", diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index 1a0dd51f2b9b13..c3c0ad7c103198 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/docs", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "MUI Docs - Documentation building blocks.", diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index bd702a8c0e377e..d11bf8f981ac33 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/icons-material", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "Material Design icons distributed as SVG React components.", diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 4f611fd57dcbec..2a51c2ef6591f8 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@mui/lab", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "Laboratory for new MUI modules.", diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json index 0d5b31c9f6459f..ae7f9c9d930f14 100644 --- a/packages/mui-material-nextjs/package.json +++ b/packages/mui-material-nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material-nextjs", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "Collection of utilities for integration between Material UI and Next.js.", diff --git a/packages/mui-material-pigment-css/package.json b/packages/mui-material-pigment-css/package.json index 61b231e0cc618c..149668659a22f7 100644 --- a/packages/mui-material-pigment-css/package.json +++ b/packages/mui-material-pigment-css/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material-pigment-css", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "author": "MUI Team", "description": "A wrapper over Pigment CSS that provides the same styled and theming APIs as Material UI.", "main": "./src/index.ts", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 1939438e06dcb8..44e8c56dfe1b15 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -1,6 +1,6 @@ { "name": "@mui/material", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.", diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index c04e1179d19984..b33aec2d8d8626 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -1,6 +1,6 @@ { "name": "@mui/private-theming", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.", diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index b7b52aedcb3a8e..ffb78ccd7831e4 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine-sc", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for styled-components.", diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index 59c334e76ea7da..05a5d40ae18ed8 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styled-engine", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "styled() API wrapper package for emotion.", diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index ab65820ae50167..06ad3001a56771 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -1,6 +1,6 @@ { "name": "@mui/styles", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "MUI Styles - The legacy JSS-based styling solution of Material UI.", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 78d0d633d31dcd..b61fa63552d6f8 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -1,6 +1,6 @@ { "name": "@mui/system", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.", diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 9b2f8576162294..6e5756a86617d2 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -1,6 +1,6 @@ { "name": "@mui/utils", - "version": "6.0.0-beta.3", + "version": "6.0.0-beta.4", "private": false, "author": "MUI Team", "description": "Utility functions for React components.", From 22d362d5da2f27355dfef1cbf4a5f80fcc4107b6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 31 Jul 2024 09:01:43 +0200 Subject: [PATCH 08/12] [typescript] Update the minimum supported version (#43116) --- docs/data/material/components/about-the-lab/about-the-lab.md | 3 --- .../getting-started/supported-platforms/supported-platforms.md | 2 +- docs/data/material/guides/typescript/typescript.md | 2 +- .../data/material/migration/migrating-to-v6/migrating-to-v6.md | 2 +- 4 files changed, 3 insertions(+), 6 deletions(-) diff --git a/docs/data/material/components/about-the-lab/about-the-lab.md b/docs/data/material/components/about-the-lab/about-the-lab.md index 0b86d1f0c90305..c1e8e3bc707a37 100644 --- a/docs/data/material/components/about-the-lab/about-the-lab.md +++ b/docs/data/material/components/about-the-lab/about-the-lab.md @@ -48,10 +48,7 @@ Note that the lab has a peer dependency on the Material UI components. In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/material-ui/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab. ```tsx -// When using TypeScript 4.x and above import type {} from '@mui/lab/themeAugmentation'; -// When using TypeScript 3.x and below -import '@mui/lab/themeAugmentation'; const theme = createTheme({ components: { diff --git a/docs/data/material/getting-started/supported-platforms/supported-platforms.md b/docs/data/material/getting-started/supported-platforms/supported-platforms.md index c490ec2d5b4e8d..087e1ac8adced6 100644 --- a/docs/data/material/getting-started/supported-platforms/supported-platforms.md +++ b/docs/data/material/getting-started/supported-platforms/supported-platforms.md @@ -37,5 +37,5 @@ Have a look at the older [versions](https://mui.com/versions/) for backward comp ## TypeScript -Material UI requires a minimum version of TypeScript 3.5. +Material UI requires a minimum version of TypeScript 4.7. This aims to match the policy of [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), with the support of the versions of TypeScript that are less than two years old. diff --git a/docs/data/material/guides/typescript/typescript.md b/docs/data/material/guides/typescript/typescript.md index e781767ed8d904..ab31f6937079e3 100644 --- a/docs/data/material/guides/typescript/typescript.md +++ b/docs/data/material/guides/typescript/typescript.md @@ -6,7 +6,7 @@ -Material UI requires a minimum version of TypeScript 3.5. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts) example. +Material UI requires a minimum version of TypeScript 4.7. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/next/examples/material-ui-cra-ts) example. For types to work, it's recommended that you have at least the following options enabled in your `tsconfig.json`: diff --git a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md index 40fc7c1421dbf9..d5e82f71a3a54c 100644 --- a/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md +++ b/docs/data/material/migration/migrating-to-v6/migrating-to-v6.md @@ -86,7 +86,7 @@ pnpm add react@ react-dom@ ### Update TypeScript -The minimum supported version of TypeScript has been increased from v3.5 to 4.1. +The minimum supported version of TypeScript has been increased from v3.5 to 4.7. :::info We align with types released by [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) (published on npm under the `@types` namespace). From 4a82b6b0e0395db8fa0a0d49b6b76de4516b1579 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Wed, 31 Jul 2024 10:28:53 +0200 Subject: [PATCH 09/12] Fix resolution of @mui/material-ui in docs (#43108) --- .../components/autocomplete/AutocompleteHint.js | 3 ++- .../components/autocomplete/AutocompleteHint.tsx | 3 ++- docs/data/material/components/box/BoxSx.js | 3 ++- docs/data/material/components/box/BoxSx.tsx | 3 ++- docs/data/material/components/cards/ActionAreaCard.js | 2 +- docs/data/material/components/cards/ActionAreaCard.tsx | 2 +- .../material/components/cards/MultiActionAreaCard.js | 4 +++- .../material/components/cards/MultiActionAreaCard.tsx | 4 +++- .../masonry/MasonryWithVariableHeightItems.js | 10 ++++------ .../masonry/MasonryWithVariableHeightItems.tsx | 10 ++++------ .../customization/palette/AddingColorTokens.js | 5 +++-- .../customization/palette/AddingColorTokens.tsx | 5 +++-- .../palette/ManuallyProvideCustomColor.js | 5 +++-- .../palette/ManuallyProvideCustomColor.tsx | 5 +++-- .../palette/ManuallyProvidePaletteColor.js | 5 +++-- .../palette/ManuallyProvidePaletteColor.tsx | 5 +++-- .../data/material/customization/palette/TonalOffset.js | 5 +++-- .../material/customization/palette/TonalOffset.tsx | 5 +++-- .../customization/palette/UsingAugmentColor.js | 5 +++-- .../customization/palette/UsingAugmentColor.tsx | 5 +++-- .../material/customization/palette/UsingStylesUtils.js | 5 +++-- .../customization/palette/UsingStylesUtils.tsx | 5 +++-- .../configure-the-sx-prop/ChangeTheBehaviorSxProp.js | 3 ++- .../configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx | 3 ++- docs/next.config.mjs | 6 ++++++ .../components/ApiPage/list/ExpandableApiItem.tsx | 5 +++-- .../onepirate/modules/form/FormButton.tsx | 2 +- 27 files changed, 74 insertions(+), 49 deletions(-) diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.js b/docs/data/material/components/autocomplete/AutocompleteHint.js index 6d4f491545c5bf..ab0db8c05e1cfc 100644 --- a/docs/data/material/components/autocomplete/AutocompleteHint.js +++ b/docs/data/material/components/autocomplete/AutocompleteHint.js @@ -1,7 +1,8 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; -import { Box, Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; export default function AutocompleteHint() { const hint = React.useRef(''); diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.tsx b/docs/data/material/components/autocomplete/AutocompleteHint.tsx index 6d4f491545c5bf..ab0db8c05e1cfc 100644 --- a/docs/data/material/components/autocomplete/AutocompleteHint.tsx +++ b/docs/data/material/components/autocomplete/AutocompleteHint.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; -import { Box, Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; export default function AutocompleteHint() { const hint = React.useRef(''); diff --git a/docs/data/material/components/box/BoxSx.js b/docs/data/material/components/box/BoxSx.js index 490d11833351b8..a507dbba08a3c0 100644 --- a/docs/data/material/components/box/BoxSx.js +++ b/docs/data/material/components/box/BoxSx.js @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Box, ThemeProvider } from '@mui/material'; +import Box from '@mui/material/Box'; +import { ThemeProvider } from '@mui/material/styles'; export default function BoxSx() { return ( diff --git a/docs/data/material/components/box/BoxSx.tsx b/docs/data/material/components/box/BoxSx.tsx index 490d11833351b8..a507dbba08a3c0 100644 --- a/docs/data/material/components/box/BoxSx.tsx +++ b/docs/data/material/components/box/BoxSx.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Box, ThemeProvider } from '@mui/material'; +import Box from '@mui/material/Box'; +import { ThemeProvider } from '@mui/material/styles'; export default function BoxSx() { return ( diff --git a/docs/data/material/components/cards/ActionAreaCard.js b/docs/data/material/components/cards/ActionAreaCard.js index d70a0952579f59..7902ef66b12f0b 100644 --- a/docs/data/material/components/cards/ActionAreaCard.js +++ b/docs/data/material/components/cards/ActionAreaCard.js @@ -3,7 +3,7 @@ import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import Typography from '@mui/material/Typography'; -import { CardActionArea } from '@mui/material'; +import CardActionArea from '@mui/material/CardActionArea'; export default function ActionAreaCard() { return ( diff --git a/docs/data/material/components/cards/ActionAreaCard.tsx b/docs/data/material/components/cards/ActionAreaCard.tsx index d70a0952579f59..7902ef66b12f0b 100644 --- a/docs/data/material/components/cards/ActionAreaCard.tsx +++ b/docs/data/material/components/cards/ActionAreaCard.tsx @@ -3,7 +3,7 @@ import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import Typography from '@mui/material/Typography'; -import { CardActionArea } from '@mui/material'; +import CardActionArea from '@mui/material/CardActionArea'; export default function ActionAreaCard() { return ( diff --git a/docs/data/material/components/cards/MultiActionAreaCard.js b/docs/data/material/components/cards/MultiActionAreaCard.js index 859ae9eef68207..74348192caee58 100644 --- a/docs/data/material/components/cards/MultiActionAreaCard.js +++ b/docs/data/material/components/cards/MultiActionAreaCard.js @@ -3,7 +3,9 @@ import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import Typography from '@mui/material/Typography'; -import { Button, CardActionArea, CardActions } from '@mui/material'; +import Button from '@mui/material/Button'; +import CardActionArea from '@mui/material/CardActionArea'; +import CardActions from '@mui/material/CardActions'; export default function MultiActionAreaCard() { return ( diff --git a/docs/data/material/components/cards/MultiActionAreaCard.tsx b/docs/data/material/components/cards/MultiActionAreaCard.tsx index 859ae9eef68207..74348192caee58 100644 --- a/docs/data/material/components/cards/MultiActionAreaCard.tsx +++ b/docs/data/material/components/cards/MultiActionAreaCard.tsx @@ -3,7 +3,9 @@ import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import Typography from '@mui/material/Typography'; -import { Button, CardActionArea, CardActions } from '@mui/material'; +import Button from '@mui/material/Button'; +import CardActionArea from '@mui/material/CardActionArea'; +import CardActions from '@mui/material/CardActions'; export default function MultiActionAreaCard() { return ( diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js index 5b4106edcb7596..c894e3fac75041 100644 --- a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js +++ b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js @@ -2,12 +2,10 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Masonry from '@mui/lab/Masonry'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Typography, -} from '@mui/material'; +import Accordion from '@mui/material/Accordion'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx index 5b4106edcb7596..c894e3fac75041 100644 --- a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx +++ b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx @@ -2,12 +2,10 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Masonry from '@mui/lab/Masonry'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Typography, -} from '@mui/material'; +import Accordion from '@mui/material/Accordion'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import Paper from '@mui/material/Paper'; diff --git a/docs/data/material/customization/palette/AddingColorTokens.js b/docs/data/material/customization/palette/AddingColorTokens.js index e96c922eb69cdf..6c3007d0aa0b79 100644 --- a/docs/data/material/customization/palette/AddingColorTokens.js +++ b/docs/data/material/customization/palette/AddingColorTokens.js @@ -1,8 +1,9 @@ import * as React from 'react'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { blue } from '@mui/material/colors'; -import { Box, Stack } from '@mui/system'; -import { Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; const theme = createTheme({ palette: { diff --git a/docs/data/material/customization/palette/AddingColorTokens.tsx b/docs/data/material/customization/palette/AddingColorTokens.tsx index befffec4fad4ef..334c88193d03ac 100644 --- a/docs/data/material/customization/palette/AddingColorTokens.tsx +++ b/docs/data/material/customization/palette/AddingColorTokens.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { blue } from '@mui/material/colors'; -import { Box, Stack } from '@mui/system'; -import { Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; declare module '@mui/material/styles' { interface PaletteColor { diff --git a/docs/data/material/customization/palette/ManuallyProvideCustomColor.js b/docs/data/material/customization/palette/ManuallyProvideCustomColor.js index c73af734f014c6..ea924fefd85a33 100644 --- a/docs/data/material/customization/palette/ManuallyProvideCustomColor.js +++ b/docs/data/material/customization/palette/ManuallyProvideCustomColor.js @@ -1,8 +1,9 @@ import * as React from 'react'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import { Box, Stack } from '@mui/system'; -import { Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; // Augment the palette to include an ochre color diff --git a/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx b/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx index 4e0583ca41861b..bca5cc06c3dfff 100644 --- a/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx +++ b/docs/data/material/customization/palette/ManuallyProvideCustomColor.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import { Box, Stack } from '@mui/system'; -import { Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; // Augment the palette to include an ochre color declare module '@mui/material/styles' { diff --git a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js index 2da583793843b8..dd1316a429fa7d 100644 --- a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js +++ b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.js @@ -2,9 +2,10 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import { Box, Stack } from '@mui/system'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import { unstable_capitalize as capitalize } from '@mui/utils'; -import { Typography } from '@mui/material'; +import Typography from '@mui/material/Typography'; const theme = createTheme({ palette: { diff --git a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx index 09b9f54f289332..c0e493eed90594 100644 --- a/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx +++ b/docs/data/material/customization/palette/ManuallyProvidePaletteColor.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import { Box, Stack } from '@mui/system'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import { unstable_capitalize as capitalize } from '@mui/utils'; -import { Typography } from '@mui/material'; +import Typography from '@mui/material/Typography'; const theme = createTheme({ palette: { diff --git a/docs/data/material/customization/palette/TonalOffset.js b/docs/data/material/customization/palette/TonalOffset.js index 84c38c941fa7af..73be9e394b79ef 100644 --- a/docs/data/material/customization/palette/TonalOffset.js +++ b/docs/data/material/customization/palette/TonalOffset.js @@ -2,8 +2,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; import { blue } from '@mui/material/colors'; -import { Box, Stack } from '@mui/system'; -import { Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; const defaultTonalOffsetTheme = createTheme({ palette: { diff --git a/docs/data/material/customization/palette/TonalOffset.tsx b/docs/data/material/customization/palette/TonalOffset.tsx index a8caeda2080537..ac6885e9c1dd7a 100644 --- a/docs/data/material/customization/palette/TonalOffset.tsx +++ b/docs/data/material/customization/palette/TonalOffset.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; import { blue } from '@mui/material/colors'; -import { Box, Stack } from '@mui/system'; -import { Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; const defaultTonalOffsetTheme = createTheme({ palette: { diff --git a/docs/data/material/customization/palette/UsingAugmentColor.js b/docs/data/material/customization/palette/UsingAugmentColor.js index cc9f5b28ec3c3a..ae14dc3e4b104c 100644 --- a/docs/data/material/customization/palette/UsingAugmentColor.js +++ b/docs/data/material/customization/palette/UsingAugmentColor.js @@ -1,8 +1,9 @@ import * as React from 'react'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import { Box, Stack } from '@mui/system'; -import { Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; // Augment the palette to include a salmon color diff --git a/docs/data/material/customization/palette/UsingAugmentColor.tsx b/docs/data/material/customization/palette/UsingAugmentColor.tsx index f40e2acb558dbf..705294f4a8c04d 100644 --- a/docs/data/material/customization/palette/UsingAugmentColor.tsx +++ b/docs/data/material/customization/palette/UsingAugmentColor.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import { Box, Stack } from '@mui/system'; -import { Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; // Augment the palette to include a salmon color declare module '@mui/material/styles' { diff --git a/docs/data/material/customization/palette/UsingStylesUtils.js b/docs/data/material/customization/palette/UsingStylesUtils.js index 466167ec1ea73a..b9d8560047f2a7 100644 --- a/docs/data/material/customization/palette/UsingStylesUtils.js +++ b/docs/data/material/customization/palette/UsingStylesUtils.js @@ -6,8 +6,9 @@ import { getContrastRatio, } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import { Box, Stack } from '@mui/system'; -import { Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; // Augment the palette to include a violet color diff --git a/docs/data/material/customization/palette/UsingStylesUtils.tsx b/docs/data/material/customization/palette/UsingStylesUtils.tsx index 21a26e95e7c1d8..26934daef8511e 100644 --- a/docs/data/material/customization/palette/UsingStylesUtils.tsx +++ b/docs/data/material/customization/palette/UsingStylesUtils.tsx @@ -6,8 +6,9 @@ import { getContrastRatio, } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import { Box, Stack } from '@mui/system'; -import { Typography } from '@mui/material'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; // Augment the palette to include a violet color declare module '@mui/material/styles' { diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js index 7753788ec198a3..2de7826af6e29f 100644 --- a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.js @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Box, Stack } from '@mui/system'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import { createTheme, ThemeProvider } from '@mui/material/styles'; // Retain type safety. diff --git a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx index 78c7db94c99363..01269e928daaea 100644 --- a/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx +++ b/docs/data/system/experimental-api/configure-the-sx-prop/ChangeTheBehaviorSxProp.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Box, Stack } from '@mui/system'; +import Box from '@mui/material/Box'; +import Stack from '@mui/material/Stack'; import { createTheme, ThemeProvider } from '@mui/material/styles'; // Retain type safety. diff --git a/docs/next.config.mjs b/docs/next.config.mjs index 23c6188e700b86..10a11a86e00f33 100644 --- a/docs/next.config.mjs +++ b/docs/next.config.mjs @@ -98,8 +98,14 @@ export default withDocsInfra({ ...config.resolve.alias, // for 3rd party packages with dependencies in this repository + '@mui/material$': path.resolve(workspaceRoot, 'packages/mui-material/src/index.js'), '@mui/material': path.resolve(workspaceRoot, 'packages/mui-material/src'), + '@mui/docs': path.resolve(workspaceRoot, 'packages/mui-docs/src'), + '@mui/icons-material$': path.resolve( + workspaceRoot, + 'packages/mui-icons-material/lib/esm/index.js', + ), '@mui/icons-material': path.resolve(workspaceRoot, 'packages/mui-icons-material/lib/esm'), '@mui/lab': path.resolve(workspaceRoot, 'packages/mui-lab/src'), '@mui/styled-engine': path.resolve(workspaceRoot, 'packages/mui-styled-engine/src'), diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx index 0a2598466f3f69..e860607994d0f5 100644 --- a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx +++ b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import clsx from 'clsx'; -import { alpha, styled } from '@mui/material/styles'; +import { alpha, styled, SxProps } from '@mui/material/styles'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; -import { Divider, IconButton, SxProps } from '@mui/material'; +import Divider from '@mui/material/Divider'; +import IconButton from '@mui/material/IconButton'; import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme, diff --git a/docs/src/pages/premium-themes/onepirate/modules/form/FormButton.tsx b/docs/src/pages/premium-themes/onepirate/modules/form/FormButton.tsx index b403f8846ebab5..db687eb5424e20 100644 --- a/docs/src/pages/premium-themes/onepirate/modules/form/FormButton.tsx +++ b/docs/src/pages/premium-themes/onepirate/modules/form/FormButton.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ButtonProps } from '@mui/material'; +import { ButtonProps } from '@mui/material/Button'; import Button from '../components/Button'; import defer from './defer'; From 9b04e742db33b7d815c782f515f4ee24dd83461a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Wed, 31 Jul 2024 15:22:58 +0200 Subject: [PATCH 10/12] [code-infra] Automate canary releases (#43066) --- .github/workflows/publish-canaries.yml | 23 +++++++++++++++++++++++ scripts/canaryRelease.mts | 11 +---------- 2 files changed, 24 insertions(+), 10 deletions(-) create mode 100644 .github/workflows/publish-canaries.yml diff --git a/.github/workflows/publish-canaries.yml b/.github/workflows/publish-canaries.yml new file mode 100644 index 00000000000000..4433f9ff8015d4 --- /dev/null +++ b/.github/workflows/publish-canaries.yml @@ -0,0 +1,23 @@ +name: Publish canary packages to npm + +on: + workflow_dispatch: + +jobs: + publish: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7 + with: + fetch-depth: 0 + - name: Set up pnpm + uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # v4.0.0 + - name: Use Node.js 18.x + uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3 + with: + node-version: 18 + cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies + - run: pnpm install + - run: pnpm canary:release --ignore @mui/icons-material --yes + env: + NPM_TOKEN: ${{secrets.NPM_TOKEN}} diff --git a/scripts/canaryRelease.mts b/scripts/canaryRelease.mts index c61cb0fcff52d4..6307abed2a162a 100644 --- a/scripts/canaryRelease.mts +++ b/scripts/canaryRelease.mts @@ -156,16 +156,7 @@ async function setVersion(packages: PackageInfo[]) { const packageJsonPath = resolve(pkg.path, './package.json'); try { const packageJson = JSON.parse(await readFile(packageJsonPath, { encoding: 'utf8' })); - const version = packageJson.version; - const dashIndex = version.indexOf('-'); - let newVersion = version; - if (dashIndex !== -1) { - newVersion = version.slice(0, dashIndex); - } - - newVersion = `${newVersion}-dev.${timestamp}-${currentRevisionSha}`; - packageJson.version = newVersion; - + packageJson.version = `${packageJson.version}-dev.${timestamp}-${currentRevisionSha}`; await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n'); } catch (error) { console.error(`${chalk.red(`❌ ${packageJsonPath}`)}`, error); From d9018e8a4a28df11a4c3e5e11fc40fdc423e724d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Wed, 31 Jul 2024 15:49:05 +0200 Subject: [PATCH 11/12] [code-infra] Do not look for changes with previous commit when releasing a canary version (#43129) --- .github/workflows/publish-canaries.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/publish-canaries.yml b/.github/workflows/publish-canaries.yml index 4433f9ff8015d4..6ceb6385a7dfbf 100644 --- a/.github/workflows/publish-canaries.yml +++ b/.github/workflows/publish-canaries.yml @@ -18,6 +18,6 @@ jobs: node-version: 18 cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies - run: pnpm install - - run: pnpm canary:release --ignore @mui/icons-material --yes + - run: pnpm canary:release --ignore @mui/icons-material --yes --skip-last-commit-comparison env: NPM_TOKEN: ${{secrets.NPM_TOKEN}} From c105c0b2854d14cd89616ba6008a8455e63034d4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 31 Jul 2024 17:44:26 +0200 Subject: [PATCH 12/12] [docs] Fix 301 --- docs/data/material/components/icons/icons.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md index fa1e8c49403b64..ed689aedbde926 100644 --- a/docs/data/material/components/icons/icons.md +++ b/docs/data/material/components/icons/icons.md @@ -303,10 +303,10 @@ const theme = createTheme({ ## Font vs. SVGs: Which approach to use? -Both approaches work fine, however there are some subtle differences, especially in terms of performance and rendering quality. +Both approaches work fine, however, there are some subtle differences, especially in terms of performance and rendering quality. Whenever possible SVG is preferred as it allows code splitting, supports more icons, and renders faster and better. -For more details, take a look at [why GitHub migrated from font icons to SVG icons](https://github.blog/2016-02-22-delivering-octicons-with-svg/). +For more details, take a look at [why GitHub migrated from font icons to SVG icons](https://github.blog/engineering/delivering-octicons-with-svg/). ## Accessibility