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 1b23dc5e877ce7..de1f53d335753d 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 @@ -167,13 +167,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.