From f078cf4078fed2ea2c54deb97d4eb40d45df9c63 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Thu, 18 Jul 2024 16:55:34 -0400 Subject: [PATCH 01/14] Stabilize Grid in the system package --- docs/data/system/components/grid/AutoGrid.js | 3 ++- docs/data/system/components/grid/AutoGrid.tsx | 3 ++- .../system/components/grid/AutoGridNoWrap.js | 3 ++- .../system/components/grid/AutoGridNoWrap.tsx | 3 ++- docs/data/system/components/grid/BasicGrid.js | 3 ++- .../data/system/components/grid/BasicGrid.tsx | 3 ++- .../system/components/grid/ColumnsGrid.js | 3 ++- .../system/components/grid/ColumnsGrid.tsx | 3 ++- .../components/grid/CustomBreakpointsGrid.js | 3 ++- .../system/components/grid/FullWidthGrid.js | 3 ++- .../system/components/grid/FullWidthGrid.tsx | 3 ++- .../data/system/components/grid/NestedGrid.js | 3 ++- .../system/components/grid/NestedGrid.tsx | 3 ++- .../data/system/components/grid/OffsetGrid.js | 3 ++- .../system/components/grid/OffsetGrid.tsx | 3 ++- .../system/components/grid/ResponsiveGrid.js | 3 ++- .../system/components/grid/ResponsiveGrid.tsx | 3 ++- .../components/grid/RowAndColumnSpacing.js | 3 ++- .../components/grid/RowAndColumnSpacing.tsx | 3 ++- .../system/components/grid/SpacingGrid.js | 3 ++- .../system/components/grid/SpacingGrid.tsx | 3 ++- .../components/grid/VariableWidthGrid.js | 3 ++- .../components/grid/VariableWidthGrid.tsx | 3 ++- docs/data/system/components/grid/grid.md | 1 - .../components/stack/InteractiveStack.js | 3 ++- .../components/stack/InteractiveStack.tsx | 3 ++- .../migrating-to-v6/migrating-to-v6.md | 16 +++++++++++- docs/pages/system/api/grid.json | 7 ++--- .../src/{Unstable_Grid => Grid}/Grid.test.js | 2 +- .../src/{Unstable_Grid => Grid}/Grid.tsx | 0 .../src/{Unstable_Grid => Grid}/GridProps.ts | 0 .../{Unstable_Grid => Grid}/createGrid.tsx | 0 .../{Unstable_Grid => Grid}/gridClasses.ts | 0 .../gridGenerator.test.js | 0 .../{Unstable_Grid => Grid}/gridGenerator.ts | 0 .../src/{Unstable_Grid => Grid}/index.ts | 0 .../traverseBreakpoints.test.ts | 0 .../traverseBreakpoints.ts | 0 packages/mui-system/src/index.d.ts | 4 +-- packages/mui-system/src/index.js | 4 +-- .../gridCustomBreakpoints.spec.tsx | 26 +++++++++++-------- 41 files changed, 87 insertions(+), 48 deletions(-) rename packages/mui-system/src/{Unstable_Grid => Grid}/Grid.test.js (99%) rename packages/mui-system/src/{Unstable_Grid => Grid}/Grid.tsx (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/GridProps.ts (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/createGrid.tsx (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/gridClasses.ts (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/gridGenerator.test.js (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/gridGenerator.ts (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/index.ts (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/traverseBreakpoints.test.ts (100%) rename packages/mui-system/src/{Unstable_Grid => Grid}/traverseBreakpoints.ts (100%) diff --git a/docs/data/system/components/grid/AutoGrid.js b/docs/data/system/components/grid/AutoGrid.js index 5bca5c0db7dde2..1225ef609ed67e 100644 --- a/docs/data/system/components/grid/AutoGrid.js +++ b/docs/data/system/components/grid/AutoGrid.js @@ -1,6 +1,7 @@ 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..1225ef609ed67e 100644 --- a/docs/data/system/components/grid/AutoGrid.tsx +++ b/docs/data/system/components/grid/AutoGrid.tsx @@ -1,6 +1,7 @@ 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..350c7702a3997c 100644 --- a/docs/data/system/components/grid/AutoGridNoWrap.js +++ b/docs/data/system/components/grid/AutoGridNoWrap.js @@ -1,6 +1,7 @@ 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..350c7702a3997c 100644 --- a/docs/data/system/components/grid/AutoGridNoWrap.tsx +++ b/docs/data/system/components/grid/AutoGridNoWrap.tsx @@ -1,6 +1,7 @@ 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..1ab6db08369256 100644 --- a/docs/data/system/components/grid/BasicGrid.js +++ b/docs/data/system/components/grid/BasicGrid.js @@ -1,6 +1,7 @@ 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..1ab6db08369256 100644 --- a/docs/data/system/components/grid/BasicGrid.tsx +++ b/docs/data/system/components/grid/BasicGrid.tsx @@ -1,6 +1,7 @@ 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..cbd3e1b663ab43 100644 --- a/docs/data/system/components/grid/ColumnsGrid.js +++ b/docs/data/system/components/grid/ColumnsGrid.js @@ -1,6 +1,7 @@ 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..cbd3e1b663ab43 100644 --- a/docs/data/system/components/grid/ColumnsGrid.tsx +++ b/docs/data/system/components/grid/ColumnsGrid.tsx @@ -1,6 +1,7 @@ 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..d591289a90d1d2 100644 --- a/docs/data/system/components/grid/CustomBreakpointsGrid.js +++ b/docs/data/system/components/grid/CustomBreakpointsGrid.js @@ -1,7 +1,8 @@ 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..00a4638c3b9a91 100644 --- a/docs/data/system/components/grid/FullWidthGrid.js +++ b/docs/data/system/components/grid/FullWidthGrid.js @@ -1,6 +1,7 @@ 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..00a4638c3b9a91 100644 --- a/docs/data/system/components/grid/FullWidthGrid.tsx +++ b/docs/data/system/components/grid/FullWidthGrid.tsx @@ -1,6 +1,7 @@ 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..447033ce6e3a41 100644 --- a/docs/data/system/components/grid/NestedGrid.js +++ b/docs/data/system/components/grid/NestedGrid.js @@ -1,6 +1,7 @@ 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..447033ce6e3a41 100644 --- a/docs/data/system/components/grid/NestedGrid.tsx +++ b/docs/data/system/components/grid/NestedGrid.tsx @@ -1,6 +1,7 @@ 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..2ece713b055810 100644 --- a/docs/data/system/components/grid/OffsetGrid.js +++ b/docs/data/system/components/grid/OffsetGrid.js @@ -1,5 +1,6 @@ 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..2ece713b055810 100644 --- a/docs/data/system/components/grid/OffsetGrid.tsx +++ b/docs/data/system/components/grid/OffsetGrid.tsx @@ -1,5 +1,6 @@ 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..e1829701b38283 100644 --- a/docs/data/system/components/grid/ResponsiveGrid.js +++ b/docs/data/system/components/grid/ResponsiveGrid.js @@ -1,6 +1,7 @@ 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..e1829701b38283 100644 --- a/docs/data/system/components/grid/ResponsiveGrid.tsx +++ b/docs/data/system/components/grid/ResponsiveGrid.tsx @@ -1,6 +1,7 @@ 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..86858252ef104d 100644 --- a/docs/data/system/components/grid/RowAndColumnSpacing.js +++ b/docs/data/system/components/grid/RowAndColumnSpacing.js @@ -1,6 +1,7 @@ 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..86858252ef104d 100644 --- a/docs/data/system/components/grid/RowAndColumnSpacing.tsx +++ b/docs/data/system/components/grid/RowAndColumnSpacing.tsx @@ -1,6 +1,7 @@ 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..2994bb9ffcd409 100644 --- a/docs/data/system/components/grid/SpacingGrid.js +++ b/docs/data/system/components/grid/SpacingGrid.js @@ -1,5 +1,6 @@ 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..f0c2184b9771ae 100644 --- a/docs/data/system/components/grid/SpacingGrid.tsx +++ b/docs/data/system/components/grid/SpacingGrid.tsx @@ -1,5 +1,6 @@ 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..3f38f0a31a6d77 100644 --- a/docs/data/system/components/grid/VariableWidthGrid.js +++ b/docs/data/system/components/grid/VariableWidthGrid.js @@ -1,6 +1,7 @@ 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..3f38f0a31a6d77 100644 --- a/docs/data/system/components/grid/VariableWidthGrid.tsx +++ b/docs/data/system/components/grid/VariableWidthGrid.tsx @@ -1,6 +1,7 @@ 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..f10e86813386ae 100644 --- a/docs/data/system/components/stack/InteractiveStack.js +++ b/docs/data/system/components/stack/InteractiveStack.js @@ -5,7 +5,8 @@ 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..c3b48d490fd190 100644 --- a/docs/data/system/components/stack/InteractiveStack.tsx +++ b/docs/data/system/components/stack/InteractiveStack.tsx @@ -5,7 +5,8 @@ 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..510afbe85451e2 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 stabilized and updated to match the API of the new `PigmentGrid` component, to allow interoperability between the two: - The previous size and offset props 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. 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/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 ec606cc14d467b..1ef0ccbe228564 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 8bc93c6d64d0c9..b04f183597c9bf 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 */} - + ; From 6d2bd327399a43a0e7442216fd76ad0f89d03cc8 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Tue, 23 Jul 2024 16:25:24 -0400 Subject: [PATCH 02/14] Stabilize material's Grid2 --- .../material/components/grid2/AutoGrid.js | 2 +- .../material/components/grid2/AutoGrid.tsx | 2 +- .../material/components/grid2/BasicGrid.js | 2 +- .../material/components/grid2/BasicGrid.tsx | 2 +- .../components/grid2/CenteredElementGrid.js | 2 +- .../components/grid2/CenteredElementGrid.tsx | 2 +- .../material/components/grid2/ColumnsGrid.js | 2 +- .../material/components/grid2/ColumnsGrid.tsx | 2 +- .../components/grid2/FullBorderedGrid.js | 2 +- .../components/grid2/FullBorderedGrid.tsx | 2 +- .../components/grid2/FullWidthGrid.js | 2 +- .../components/grid2/FullWidthGrid.tsx | 2 +- .../components/grid2/HalfBorderedGrid.js | 2 +- .../components/grid2/HalfBorderedGrid.tsx | 2 +- .../material/components/grid2/NestedGrid.js | 2 +- .../material/components/grid2/NestedGrid.tsx | 2 +- .../components/grid2/NestedGridColumns.js | 2 +- .../components/grid2/NestedGridColumns.tsx | 2 +- .../material/components/grid2/OffsetGrid.js | 2 +- .../material/components/grid2/OffsetGrid.tsx | 2 +- .../components/grid2/ResponsiveGrid.js | 2 +- .../components/grid2/ResponsiveGrid.tsx | 2 +- .../components/grid2/RowAndColumnSpacing.js | 2 +- .../components/grid2/RowAndColumnSpacing.tsx | 2 +- .../material/components/grid2/SpacingGrid.js | 2 +- .../material/components/grid2/SpacingGrid.tsx | 2 +- .../components/grid2/VariableWidthGrid.js | 2 +- .../components/grid2/VariableWidthGrid.tsx | 2 +- docs/data/material/components/grid2/grid2.md | 6 +- .../dashboard/components/MainGrid.js | 2 +- .../dashboard/components/MainGrid.tsx | 2 +- .../GridDisableEqualOverflow.js | 2 +- .../migration/migration-grid-v2/GridsDiff.js | 2 +- .../migration-grid-v2/migration-grid-v2.md | 4 +- .../migration-v4/v5-component-changes.md | 2 +- docs/data/material/pagesApi.js | 1 + docs/pages/material-ui/api/grid-2.js | 19 ++ docs/pages/material-ui/api/grid-2.json | 65 +++++ docs/src/components/about/HowToSupport.tsx | 2 +- docs/src/components/about/OurValues.tsx | 2 +- docs/src/components/about/Team.tsx | 2 +- docs/src/components/careers/CareersFaq.tsx | 2 +- docs/src/components/careers/PerksBenefits.tsx | 2 +- docs/src/components/home/CompaniesGrid.tsx | 2 +- docs/src/components/home/DiamondSponsors.tsx | 2 +- docs/src/components/home/GoldSponsors.tsx | 2 +- docs/src/components/home/ProductSuite.tsx | 2 +- docs/src/components/home/UserFeedbacks.tsx | 2 +- docs/src/components/home/ValueProposition.tsx | 2 +- docs/src/components/pricing/PricingFAQ.tsx | 2 +- .../productBaseUI/BaseUIComponents.tsx | 2 +- .../components/productBaseUI/BaseUIEnd.tsx | 2 +- .../productBaseUI/BaseUISummary.tsx | 2 +- .../productBaseUI/BaseUITestimonial.tsx | 2 +- .../productDesignKit/DesignKitDemo.tsx | 2 +- .../productDesignKit/DesignKitFAQ.tsx | 2 +- .../productDesignKit/DesignKitValues.tsx | 2 +- .../productDesignKit/SyncFeatures.tsx | 2 +- .../productMaterial/MaterialComponents.tsx | 2 +- .../productMaterial/MaterialDesignKits.tsx | 2 +- .../productMaterial/MaterialEnd.tsx | 2 +- .../productMaterial/MaterialStyling.tsx | 2 +- .../productMaterial/MaterialTheming.tsx | 2 +- .../productTemplate/TemplateDemo.tsx | 2 +- docs/src/components/productX/XComponents.tsx | 2 +- docs/src/components/productX/XDataGrid.tsx | 2 +- docs/src/components/productX/XPlans.tsx | 2 +- docs/src/components/productX/XRoadmap.tsx | 2 +- docs/src/components/productX/XTheming.tsx | 2 +- .../components/JoyStartingLinksCollection.js | 2 +- .../modules/components/MaterialShowcase.js | 2 +- .../MaterialStartingLinksCollection.js | 2 +- .../MaterialUtilComponents.js | 2 +- .../components/MaterialUIDesignResources.js | 2 +- .../components/MaterialUIExampleCollection.js | 2 +- docs/translations/api-docs/grid-2/grid-2.json | 30 +++ .../materialUi/projectSettings.ts | 2 +- .../ApiBuilders/ComponentApiBuilder.ts | 2 +- .../{Unstable_Grid2 => Grid2}/Grid2.test.js | 4 +- packages/mui-material/src/Grid2/Grid2.tsx | 254 ++++++++++++++++++ .../{Unstable_Grid2 => Grid2}/grid2Classes.ts | 2 +- .../src/{Unstable_Grid2 => Grid2}/index.ts | 2 +- .../src/PigmentGrid/PigmentGrid.tsx | 2 +- .../mui-material/src/PigmentGrid/index.ts | 2 +- .../mui-material/src/Unstable_Grid2/Grid2.tsx | 37 --- .../src/Unstable_Grid2/Grid2Props.ts | 19 -- packages/mui-material/src/index.d.ts | 5 +- packages/mui-material/src/index.js | 5 +- .../mui-material/src/styles/overrides.d.ts | 2 +- packages/mui-material/src/styles/props.d.ts | 2 +- .../fixtures/Grid/StressNestedGrid2.js | 2 +- test/regressions/fixtures/Grid/StyledGrid2.js | 2 +- 92 files changed, 460 insertions(+), 149 deletions(-) create mode 100644 docs/pages/material-ui/api/grid-2.js create mode 100644 docs/pages/material-ui/api/grid-2.json create mode 100644 docs/translations/api-docs/grid-2/grid-2.json rename packages/mui-material/src/{Unstable_Grid2 => Grid2}/Grid2.test.js (80%) create mode 100644 packages/mui-material/src/Grid2/Grid2.tsx rename packages/mui-material/src/{Unstable_Grid2 => Grid2}/grid2Classes.ts (95%) rename packages/mui-material/src/{Unstable_Grid2 => Grid2}/index.ts (82%) delete mode 100644 packages/mui-material/src/Unstable_Grid2/Grid2.tsx delete mode 100644 packages/mui-material/src/Unstable_Grid2/Grid2Props.ts 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..90368d9dc480c2 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 --- @@ -24,7 +24,7 @@ We built the `Grid` component from scratch in order to: - 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. +Since the new implementation is considered a breaking change, we introduced it as `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/). @@ -33,7 +33,7 @@ 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 +import Grid from '@mui/material/Grid2'; // Grid version 2 ``` ::: 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/migration-grid-v2/GridDisableEqualOverflow.js b/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js index 9540a6c296583c..917938417cc296 100644 --- a/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js +++ b/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Grid2 from '@mui/material/Unstable_Grid2'; +import Grid2 from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; export default function GridDisableEqualOverflow() { 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..fda43fef9489ef 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 @@ -34,7 +34,7 @@ The default implementation of the negative margin in Grid v2 is spread equally o ```diff -import Grid from '@mui/material/Grid'; -+import Grid from '@mui/material/Unstable_Grid2'; ++import Grid from '@mui/material/Grid2'; ``` ### Remove props @@ -56,7 +56,7 @@ To apply to all grids, add the default props to the theme: ```js import { createTheme, ThemeProvider } from '@mui/material/styles'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; const theme = createTheme({ components: { 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/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/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/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 5367f36386fc6b..09874b34f32bac 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/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-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/test/regressions/fixtures/Grid/StressNestedGrid2.js b/test/regressions/fixtures/Grid/StressNestedGrid2.js index 43af25b5004974..63b9d66e59bae0 100644 --- a/test/regressions/fixtures/Grid/StressNestedGrid2.js +++ b/test/regressions/fixtures/Grid/StressNestedGrid2.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; export default function StressNestedGrid2() { return ( diff --git a/test/regressions/fixtures/Grid/StyledGrid2.js b/test/regressions/fixtures/Grid/StyledGrid2.js index ac0b2bce4b7b8b..983a37c0968fd7 100644 --- a/test/regressions/fixtures/Grid/StyledGrid2.js +++ b/test/regressions/fixtures/Grid/StyledGrid2.js @@ -1,7 +1,7 @@ import * as React from 'react'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; +import Grid from '@mui/material/Grid2'; import { styled } from '@mui/material/styles'; // styled(Grid) should work with nested grids. From 3f00fe75937762b511939e683abe68ec32a7e7e5 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Tue, 23 Jul 2024 16:35:58 -0400 Subject: [PATCH 03/14] Adapt to changes in Joy package --- packages/mui-joy/src/Grid/Grid.tsx | 2 +- packages/mui-joy/src/Grid/GridProps.ts | 2 +- packages/mui-joy/src/Grid/gridClasses.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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; From bae2e7d1938ca63559ae93c6c11986f03dc98f5b Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Tue, 23 Jul 2024 16:41:43 -0400 Subject: [PATCH 04/14] Fix missing broken imports --- benchmark/browser/scenarios/grid-system/index.js | 2 +- packages/mui-joy/src/ButtonGroup/ButtonGroup.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/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, From 8ea62ab880cdf303364db1ee7183b40f9a143a44 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 24 Jul 2024 09:47:03 -0400 Subject: [PATCH 05/14] Update documentation --- docs/data/material/components/grid/grid.md | 4 ++++ docs/data/material/components/grid2/grid2.md | 23 ------------------ .../migrating-to-v6/migrating-to-v6.md | 16 ++++++++++++- .../migration-grid-v2/migration-grid-v2.md | 24 ++++++++++++------- docs/data/material/pages.ts | 4 ++-- docs/pages/material-ui/api/grid.json | 3 ++- packages/mui-material/src/Grid/Grid.d.ts | 2 ++ packages/mui-material/src/Grid/Grid.js | 3 +++ 8 files changed, 44 insertions(+), 35 deletions(-) diff --git a/docs/data/material/components/grid/grid.md b/docs/data/material/components/grid/grid.md index 816918f92a7201..3993846a74dc90 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/grid2.md b/docs/data/material/components/grid2/grid2.md index 90368d9dc480c2..cea778689f5c90 100644 --- a/docs/data/material/components/grid2/grid2.md +++ b/docs/data/material/components/grid2/grid2.md @@ -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 `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/Grid2'; // Grid version 2 -``` - -::: - ## How it works The grid system is implemented with the `Grid` component: 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..fd8168a8c8af03 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 `

  • Grid
    • ", - "cssComponent": true + "cssComponent": true, + "deprecated": true } diff --git a/packages/mui-material/src/Grid/Grid.d.ts b/packages/mui-material/src/Grid/Grid.d.ts index 475d0e09ce6835..0db4884a787acc 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` component](https://next.mui.com/material-ui/react-grid2/) from the `@mui/material` package 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..d0636e524d599d 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` component](https://next.mui.com/material-ui/react-grid2/) from the `@mui/material` package instead. + */ const Grid = React.forwardRef(function Grid(inProps, ref) { const themeProps = useThemeProps({ props: inProps, name: 'MuiGrid' }); const { breakpoints } = useTheme(); From e9891aa97a4c8bcda26d6f2e422efe6a90bf0d30 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 24 Jul 2024 09:59:26 -0400 Subject: [PATCH 06/14] Update codemod --- .../migration/migrating-to-v6/migrating-to-v6.md | 4 ++++ .../migration/migrating-to-v6/migrating-to-v6.md | 4 ++++ packages/mui-codemod/README.md | 2 +- .../src/v6.0.0/grid-v2-props/grid-v2-props.js | 10 +++------- .../src/v6.0.0/grid-v2-props/test-cases/actual.js | 12 +++++++----- .../test-cases/custom-breakpoints.actual.js | 2 +- .../test-cases/custom-breakpoints.expected.js | 2 +- .../src/v6.0.0/grid-v2-props/test-cases/expected.js | 12 +++++++----- 8 files changed, 28 insertions(+), 20 deletions(-) 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 fd8168a8c8af03..5fecfe1cff07c2 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 @@ -229,6 +229,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/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/system/migration/migrating-to-v6/migrating-to-v6.md b/docs/data/system/migration/migrating-to-v6/migrating-to-v6.md index 510afbe85451e2..5d9c4b3903d976 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 @@ -99,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/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index aab255add10428..dad002189880d5 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1787,7 +1787,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 `Grid` v2 component to have the same API as the `PigmentGrid`. ```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 -; +; +; From 9e5f8b7f96f9facef77eb7f920ade703dce0ff54 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Wed, 24 Jul 2024 11:08:08 -0400 Subject: [PATCH 07/14] Non-breaking spaces --- docs/data/material/components/grid/grid.md | 2 +- .../migration/migration-grid-v2/migration-grid-v2.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/material/components/grid/grid.md b/docs/data/material/components/grid/grid.md index 3993846a74dc90..3e1898118b6ba7 100644 --- a/docs/data/material/components/grid/grid.md +++ b/docs/data/material/components/grid/grid.md @@ -20,7 +20,7 @@ The `Grid` component shouldn't be confused with a data grid; it is closer to a l ::: :::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/). +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 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 521668ee226860..613d60c8563c0b 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 @@ -73,9 +73,9 @@ function Demo() { } ``` -### With Material UI v6 +### With Material UI v6 -The Grid v2 is marked as stable in Material UI v6, so the `Unstable_` prefix is removed: +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'; @@ -83,7 +83,7 @@ The Grid v2 is marked as stable in Material UI v6, so the `Unstable_` prefix is ``` 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/). +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. From ddb320b43ad9b7e5c353ce096d9c393beb61d775 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Thu, 25 Jul 2024 16:17:34 -0400 Subject: [PATCH 08/14] Remove unnecessary empty lines --- docs/data/system/components/grid/AutoGrid.js | 1 - docs/data/system/components/grid/AutoGrid.tsx | 1 - docs/data/system/components/grid/AutoGridNoWrap.js | 1 - docs/data/system/components/grid/AutoGridNoWrap.tsx | 1 - docs/data/system/components/grid/BasicGrid.js | 1 - docs/data/system/components/grid/BasicGrid.tsx | 1 - docs/data/system/components/grid/ColumnsGrid.js | 1 - docs/data/system/components/grid/ColumnsGrid.tsx | 1 - docs/data/system/components/grid/CustomBreakpointsGrid.js | 1 - docs/data/system/components/grid/FullWidthGrid.js | 1 - docs/data/system/components/grid/FullWidthGrid.tsx | 1 - docs/data/system/components/grid/NestedGrid.js | 1 - docs/data/system/components/grid/NestedGrid.tsx | 1 - docs/data/system/components/grid/OffsetGrid.js | 1 - docs/data/system/components/grid/OffsetGrid.tsx | 1 - docs/data/system/components/grid/ResponsiveGrid.js | 1 - docs/data/system/components/grid/ResponsiveGrid.tsx | 1 - docs/data/system/components/grid/RowAndColumnSpacing.js | 1 - docs/data/system/components/grid/RowAndColumnSpacing.tsx | 1 - docs/data/system/components/grid/SpacingGrid.js | 1 - docs/data/system/components/grid/SpacingGrid.tsx | 1 - docs/data/system/components/grid/VariableWidthGrid.js | 1 - docs/data/system/components/grid/VariableWidthGrid.tsx | 1 - docs/data/system/components/stack/InteractiveStack.js | 1 - docs/data/system/components/stack/InteractiveStack.tsx | 1 - 25 files changed, 25 deletions(-) diff --git a/docs/data/system/components/grid/AutoGrid.js b/docs/data/system/components/grid/AutoGrid.js index 1225ef609ed67e..7e6795574e63e0 100644 --- a/docs/data/system/components/grid/AutoGrid.js +++ b/docs/data/system/components/grid/AutoGrid.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 1225ef609ed67e..7e6795574e63e0 100644 --- a/docs/data/system/components/grid/AutoGrid.tsx +++ b/docs/data/system/components/grid/AutoGrid.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 350c7702a3997c..5e28c136639e95 100644 --- a/docs/data/system/components/grid/AutoGridNoWrap.js +++ b/docs/data/system/components/grid/AutoGridNoWrap.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 350c7702a3997c..5e28c136639e95 100644 --- a/docs/data/system/components/grid/AutoGridNoWrap.tsx +++ b/docs/data/system/components/grid/AutoGridNoWrap.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 1ab6db08369256..69f1e8c48390e7 100644 --- a/docs/data/system/components/grid/BasicGrid.js +++ b/docs/data/system/components/grid/BasicGrid.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 1ab6db08369256..69f1e8c48390e7 100644 --- a/docs/data/system/components/grid/BasicGrid.tsx +++ b/docs/data/system/components/grid/BasicGrid.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 cbd3e1b663ab43..9d9f131ebc1842 100644 --- a/docs/data/system/components/grid/ColumnsGrid.js +++ b/docs/data/system/components/grid/ColumnsGrid.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 cbd3e1b663ab43..9d9f131ebc1842 100644 --- a/docs/data/system/components/grid/ColumnsGrid.tsx +++ b/docs/data/system/components/grid/ColumnsGrid.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 d591289a90d1d2..d0c5c09a73a2b5 100644 --- a/docs/data/system/components/grid/CustomBreakpointsGrid.js +++ b/docs/data/system/components/grid/CustomBreakpointsGrid.js @@ -2,7 +2,6 @@ import * as React from 'react'; import { ThemeProvider, createTheme } from '@mui/system'; import Box from '@mui/system/Box'; 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 00a4638c3b9a91..592739cdbcc5e7 100644 --- a/docs/data/system/components/grid/FullWidthGrid.js +++ b/docs/data/system/components/grid/FullWidthGrid.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 00a4638c3b9a91..592739cdbcc5e7 100644 --- a/docs/data/system/components/grid/FullWidthGrid.tsx +++ b/docs/data/system/components/grid/FullWidthGrid.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 447033ce6e3a41..f4e4399b05b924 100644 --- a/docs/data/system/components/grid/NestedGrid.js +++ b/docs/data/system/components/grid/NestedGrid.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 447033ce6e3a41..f4e4399b05b924 100644 --- a/docs/data/system/components/grid/NestedGrid.tsx +++ b/docs/data/system/components/grid/NestedGrid.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 2ece713b055810..c17f8451fda021 100644 --- a/docs/data/system/components/grid/OffsetGrid.js +++ b/docs/data/system/components/grid/OffsetGrid.js @@ -1,6 +1,5 @@ import * as React from 'react'; 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 2ece713b055810..c17f8451fda021 100644 --- a/docs/data/system/components/grid/OffsetGrid.tsx +++ b/docs/data/system/components/grid/OffsetGrid.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; 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 e1829701b38283..abd60378e9d595 100644 --- a/docs/data/system/components/grid/ResponsiveGrid.js +++ b/docs/data/system/components/grid/ResponsiveGrid.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 e1829701b38283..abd60378e9d595 100644 --- a/docs/data/system/components/grid/ResponsiveGrid.tsx +++ b/docs/data/system/components/grid/ResponsiveGrid.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 86858252ef104d..bc9c0caa12fae9 100644 --- a/docs/data/system/components/grid/RowAndColumnSpacing.js +++ b/docs/data/system/components/grid/RowAndColumnSpacing.js @@ -1,7 +1,6 @@ import * as React from 'react'; import styled from '@mui/system/styled'; 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 86858252ef104d..bc9c0caa12fae9 100644 --- a/docs/data/system/components/grid/RowAndColumnSpacing.tsx +++ b/docs/data/system/components/grid/RowAndColumnSpacing.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import styled from '@mui/system/styled'; 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 2994bb9ffcd409..391d18ad7b340f 100644 --- a/docs/data/system/components/grid/SpacingGrid.js +++ b/docs/data/system/components/grid/SpacingGrid.js @@ -1,6 +1,5 @@ import * as React from 'react'; 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 f0c2184b9771ae..a1e34f3ad3fbb0 100644 --- a/docs/data/system/components/grid/SpacingGrid.tsx +++ b/docs/data/system/components/grid/SpacingGrid.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; 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 3f38f0a31a6d77..539b0e71198ff8 100644 --- a/docs/data/system/components/grid/VariableWidthGrid.js +++ b/docs/data/system/components/grid/VariableWidthGrid.js @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; 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 3f38f0a31a6d77..539b0e71198ff8 100644 --- a/docs/data/system/components/grid/VariableWidthGrid.tsx +++ b/docs/data/system/components/grid/VariableWidthGrid.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/system/Box'; import Grid from '@mui/system/Grid'; - import styled from '@mui/system/styled'; const Item = styled('div')(({ theme }) => ({ diff --git a/docs/data/system/components/stack/InteractiveStack.js b/docs/data/system/components/stack/InteractiveStack.js index f10e86813386ae..1f4a0926e900d7 100644 --- a/docs/data/system/components/stack/InteractiveStack.js +++ b/docs/data/system/components/stack/InteractiveStack.js @@ -6,7 +6,6 @@ import Paper from '@mui/material/Paper'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; 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 c3b48d490fd190..95a6bb71b432eb 100644 --- a/docs/data/system/components/stack/InteractiveStack.tsx +++ b/docs/data/system/components/stack/InteractiveStack.tsx @@ -6,7 +6,6 @@ import Paper from '@mui/material/Paper'; import RadioGroup from '@mui/material/RadioGroup'; import Radio from '@mui/material/Radio'; import Grid from '@mui/system/Grid'; - import Stack, { StackProps } from '@mui/system/Stack'; import { styled } from '@mui/system'; import { HighlightedCode } from '@mui/docs/HighlightedCode'; From fa3df2b4a32003bacec5e6687f280b2eadc5303a Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Thu, 25 Jul 2024 16:20:50 -0400 Subject: [PATCH 09/14] Update packages/mui-material/src/Grid/Grid.d.ts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Aarón García Hervás Signed-off-by: Diego Andai --- packages/mui-material/src/Grid/Grid.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Grid/Grid.d.ts b/packages/mui-material/src/Grid/Grid.d.ts index 0db4884a787acc..8621d3f06a2090 100644 --- a/packages/mui-material/src/Grid/Grid.d.ts +++ b/packages/mui-material/src/Grid/Grid.d.ts @@ -168,7 +168,7 @@ export interface GridTypeMap< * * - [Grid API](https://next.mui.com/material-ui/api/grid/) * - * @deprecated Use the [`Grid2` component](https://next.mui.com/material-ui/react-grid2/) from the `@mui/material` package instead. + * @deprecated Use the [`Grid2`](https://next.mui.com/material-ui/react-grid2/) component instead. */ declare const Grid: OverridableComponent; From 3d05ceddff85fed2a6c17d7f3bb40e2978e509c2 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Thu, 25 Jul 2024 16:21:03 -0400 Subject: [PATCH 10/14] Update packages/mui-material/src/Grid/Grid.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Aarón García Hervás Signed-off-by: Diego Andai --- packages/mui-material/src/Grid/Grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Grid/Grid.js b/packages/mui-material/src/Grid/Grid.js index d0636e524d599d..5856cf5d0f093d 100644 --- a/packages/mui-material/src/Grid/Grid.js +++ b/packages/mui-material/src/Grid/Grid.js @@ -398,7 +398,7 @@ const useUtilityClasses = (ownerState) => { }; /** - * @deprecated Use the [`Grid2` component](https://next.mui.com/material-ui/react-grid2/) from the `@mui/material` package instead. + * @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' }); From 24ff2bba590c7e0a7bc0390c3b6519e16a04171c Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Thu, 25 Jul 2024 16:37:11 -0400 Subject: [PATCH 11/14] Improve documentation phrasing --- docs/data/material/migration/migrating-to-v6/migrating-to-v6.md | 2 +- docs/data/system/migration/migrating-to-v6/migrating-to-v6.md | 2 +- packages/mui-codemod/README.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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 5fecfe1cff07c2..5e07e4cbb80f94 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 @@ -169,7 +169,7 @@ The `children` passed to the Loading Button component is now wrapped in a ` ``` -Updates the usage of the `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 Date: Thu, 25 Jul 2024 16:55:15 -0400 Subject: [PATCH 12/14] Remove mention to PigmentGrid --- .../material/migration/migrating-to-v6/migrating-to-v6.md | 6 +++--- .../system/migration/migrating-to-v6/migrating-to-v6.md | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) 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 5e07e4cbb80f94..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,16 +167,16 @@ The `children` passed to the Loading Button component is now wrapped in a ` Date: Fri, 26 Jul 2024 11:25:51 -0400 Subject: [PATCH 13/14] Add deprecated nav flag and use it for Grid --- docs/data/material/pages.ts | 2 +- docs/src/MuiPage.ts | 4 ++++ docs/src/modules/components/AppNavDrawer.js | 2 ++ docs/src/modules/components/AppNavDrawerItem.js | 3 +++ 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 0a242b918c5f33..bac35ba97326ea 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -106,7 +106,7 @@ const pages: MuiPage[] = [ children: [ { pathname: '/material-ui/react-box' }, { pathname: '/material-ui/react-container' }, - { pathname: '/material-ui/react-grid', legacy: 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' }, 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/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]), From c3ef7a81d490e619f6ddfb928f1aeb9592876ad1 Mon Sep 17 00:00:00 2001 From: DiegoAndai Date: Tue, 30 Jul 2024 10:54:28 -0400 Subject: [PATCH 14/14] Final copy edits and remove stale demo --- .../GridDisableEqualOverflow.js | 35 ------------------- .../migration-grid-v2/migration-grid-v2.md | 17 ++++----- 2 files changed, 7 insertions(+), 45 deletions(-) delete mode 100644 docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js 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 917938417cc296..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/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/migration-grid-v2.md b/docs/data/material/migration/migration-grid-v2/migration-grid-v2.md index 613d60c8563c0b..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 @@ -14,13 +14,13 @@ Grid v2 has several new feature and many improvements over the original: ## 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}} @@ -42,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 @@ -73,7 +70,7 @@ function Demo() { } ``` -### With Material UI v6 +## With Material UI v6 The Grid v2 is marked as stable in Material UI v6, so the `Unstable_` prefix is removed: @@ -83,7 +80,7 @@ The Grid v2 is marked as stable in Material UI v6, so the `Unstable_` prefix is ``` 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/). +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.