Skip to content

Commit f0de39a

Browse files
DiegoAndaiDiegoAndai
authored
[material-ui][Grid2] Rename to Grid (#45381)
1 parent d85b936 commit f0de39a

File tree

226 files changed

+1577
-755
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

226 files changed

+1577
-755
lines changed

‎apps/bare-next-app/src/app/grid/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22
import Box from '@mui/material/Box';
3-
import Grid from '@mui/material/Grid2';
3+
import Grid from '@mui/material/Grid';
44
import { styled } from '@mui/material';
55

66
const Item = styled('div')`

‎apps/bare-next-app/src/app/material-ui/react-grid/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import * as React from 'react';
33
import Box from '@mui/material/Box';
44
import Paper from '@mui/material/Paper';
5-
import Grid from '@mui/material/Grid2';
5+
import Grid from '@mui/material/Grid';
66
import { styled } from '@mui/material';
77

88
const Item = styled(Paper)(({ theme }) => ({

‎benchmark/browser/scenarios/grid-material-ui/index.js

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import * as React from 'react';
2-
import Grid from '@mui/material/GridLegacy';
2+
import Grid from '@mui/material/Grid';
33

44
export default function GridMaterialUI() {
55
return (
66
<Grid container spacing={2}>
77
{new Array(1000).fill().map(() => (
8-
<Grid item xs={12} sm={6} md={4}>
8+
<Grid
9+
size={{
10+
xs: 12,
11+
sm: 6,
12+
md: 4,
13+
}}
14+
>
915
test case
1016
</Grid>
1117
))}

‎docs/data/joy/components/tooltip/PositionedTooltips.js

+8-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import * as React from 'react';
22
import Box from '@mui/joy/Box';
3-
import Grid from '@mui/material/GridLegacy';
3+
import Grid from '@mui/material/Grid';
44
import Button from '@mui/joy/Button';
55
import Tooltip from '@mui/joy/Tooltip';
66

77
export default function PositionedTooltips() {
88
return (
99
<Box sx={{ width: 500 }}>
1010
<Grid container sx={{ justifyContent: 'center' }}>
11-
<Grid item>
11+
<Grid>
1212
<Tooltip title="Add" placement="top-start">
1313
<Button variant="plain">top-start</Button>
1414
</Tooltip>
@@ -21,7 +21,7 @@ export default function PositionedTooltips() {
2121
</Grid>
2222
</Grid>
2323
<Grid container sx={{ justifyContent: 'center' }}>
24-
<Grid item xs={6}>
24+
<Grid size={6}>
2525
<Tooltip title="Add" placement="left-start">
2626
<Button variant="plain">left-start</Button>
2727
</Tooltip>
@@ -34,32 +34,26 @@ export default function PositionedTooltips() {
3434
<Button variant="plain">left-end</Button>
3535
</Tooltip>
3636
</Grid>
37-
<Grid
38-
item
39-
container
40-
xs={6}
41-
direction="column"
42-
sx={{ alignItems: 'flex-end' }}
43-
>
44-
<Grid item>
37+
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
38+
<Grid>
4539
<Tooltip title="Add" placement="right-start">
4640
<Button variant="plain">right-start</Button>
4741
</Tooltip>
4842
</Grid>
49-
<Grid item>
43+
<Grid>
5044
<Tooltip title="Add" placement="right">
5145
<Button variant="plain">right</Button>
5246
</Tooltip>
5347
</Grid>
54-
<Grid item>
48+
<Grid>
5549
<Tooltip title="Add" placement="right-end">
5650
<Button variant="plain">right-end</Button>
5751
</Tooltip>
5852
</Grid>
5953
</Grid>
6054
</Grid>
6155
<Grid container sx={{ justifyContent: 'center' }}>
62-
<Grid item>
56+
<Grid>
6357
<Tooltip title="Add" placement="bottom-start">
6458
<Button variant="plain">bottom-start</Button>
6559
</Tooltip>

‎docs/data/joy/components/tooltip/PositionedTooltips.tsx

+8-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import * as React from 'react';
22
import Box from '@mui/joy/Box';
3-
import Grid from '@mui/material/GridLegacy';
3+
import Grid from '@mui/material/Grid';
44
import Button from '@mui/joy/Button';
55
import Tooltip from '@mui/joy/Tooltip';
66

77
export default function PositionedTooltips() {
88
return (
99
<Box sx={{ width: 500 }}>
1010
<Grid container sx={{ justifyContent: 'center' }}>
11-
<Grid item>
11+
<Grid>
1212
<Tooltip title="Add" placement="top-start">
1313
<Button variant="plain">top-start</Button>
1414
</Tooltip>
@@ -21,7 +21,7 @@ export default function PositionedTooltips() {
2121
</Grid>
2222
</Grid>
2323
<Grid container sx={{ justifyContent: 'center' }}>
24-
<Grid item xs={6}>
24+
<Grid size={6}>
2525
<Tooltip title="Add" placement="left-start">
2626
<Button variant="plain">left-start</Button>
2727
</Tooltip>
@@ -34,32 +34,26 @@ export default function PositionedTooltips() {
3434
<Button variant="plain">left-end</Button>
3535
</Tooltip>
3636
</Grid>
37-
<Grid
38-
item
39-
container
40-
xs={6}
41-
direction="column"
42-
sx={{ alignItems: 'flex-end' }}
43-
>
44-
<Grid item>
37+
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
38+
<Grid>
4539
<Tooltip title="Add" placement="right-start">
4640
<Button variant="plain">right-start</Button>
4741
</Tooltip>
4842
</Grid>
49-
<Grid item>
43+
<Grid>
5044
<Tooltip title="Add" placement="right">
5145
<Button variant="plain">right</Button>
5246
</Tooltip>
5347
</Grid>
54-
<Grid item>
48+
<Grid>
5549
<Tooltip title="Add" placement="right-end">
5650
<Button variant="plain">right-end</Button>
5751
</Tooltip>
5852
</Grid>
5953
</Grid>
6054
</Grid>
6155
<Grid container sx={{ justifyContent: 'center' }}>
62-
<Grid item>
56+
<Grid>
6357
<Tooltip title="Add" placement="bottom-start">
6458
<Button variant="plain">bottom-start</Button>
6559
</Tooltip>

‎docs/data/material/components/app-bar/DashboardLayoutBasic.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import LayersIcon from '@mui/icons-material/Layers';
88
import { AppProvider } from '@toolpad/core/AppProvider';
99
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
1010
import { PageContainer } from '@toolpad/core/PageContainer';
11-
import Grid from '@mui/material/Grid2';
11+
import Grid from '@mui/material/Grid';
1212

1313
const NAVIGATION = [
1414
{

‎docs/data/material/components/app-bar/DashboardLayoutBasic.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import LayersIcon from '@mui/icons-material/Layers';
88
import { AppProvider, Navigation, Router } from '@toolpad/core/AppProvider';
99
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
1010
import { PageContainer } from '@toolpad/core/PageContainer';
11-
import Grid from '@mui/material/Grid2';
11+
import Grid from '@mui/material/Grid';
1212

1313
const NAVIGATION: Navigation = [
1414
{

‎docs/data/material/components/autocomplete/GoogleMaps.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import TextField from '@mui/material/TextField';
55
import Autocomplete from '@mui/material/Autocomplete';
66
import Paper from '@mui/material/Paper';
77
import LocationOnIcon from '@mui/icons-material/LocationOn';
8-
import Grid2 from '@mui/material/Grid2';
8+
import Grid from '@mui/material/Grid';
99
import Typography from '@mui/material/Typography';
1010
import { useTheme } from '@mui/material/styles';
1111
import parse from 'autosuggest-highlight/parse';
@@ -212,11 +212,11 @@ export default function GoogleMaps() {
212212
);
213213
return (
214214
<li key={key} {...optionProps}>
215-
<Grid2 container sx={{ alignItems: 'center' }}>
216-
<Grid2 sx={{ display: 'flex', width: 44 }}>
215+
<Grid container sx={{ alignItems: 'center' }}>
216+
<Grid sx={{ display: 'flex', width: 44 }}>
217217
<LocationOnIcon sx={{ color: 'text.secondary' }} />
218-
</Grid2>
219-
<Grid2 sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
218+
</Grid>
219+
<Grid sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
220220
{parts.map((part, index) => (
221221
<Box
222222
key={index}
@@ -235,8 +235,8 @@ export default function GoogleMaps() {
235235
{option.structured_formatting.secondary_text}
236236
</Typography>
237237
) : null}
238-
</Grid2>
239-
</Grid2>
238+
</Grid>
239+
</Grid>
240240
</li>
241241
);
242242
}}

‎docs/data/material/components/autocomplete/GoogleMaps.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import TextField from '@mui/material/TextField';
44
import Autocomplete from '@mui/material/Autocomplete';
55
import Paper, { PaperProps } from '@mui/material/Paper';
66
import LocationOnIcon from '@mui/icons-material/LocationOn';
7-
import Grid2 from '@mui/material/Grid2';
7+
import Grid from '@mui/material/Grid';
88
import Typography from '@mui/material/Typography';
99
import { useTheme } from '@mui/material/styles';
1010
import parse from 'autosuggest-highlight/parse';
@@ -230,11 +230,11 @@ export default function GoogleMaps() {
230230
);
231231
return (
232232
<li key={key} {...optionProps}>
233-
<Grid2 container sx={{ alignItems: 'center' }}>
234-
<Grid2 sx={{ display: 'flex', width: 44 }}>
233+
<Grid container sx={{ alignItems: 'center' }}>
234+
<Grid sx={{ display: 'flex', width: 44 }}>
235235
<LocationOnIcon sx={{ color: 'text.secondary' }} />
236-
</Grid2>
237-
<Grid2 sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
236+
</Grid>
237+
<Grid sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
238238
{parts.map((part, index) => (
239239
<Box
240240
key={index}
@@ -253,8 +253,8 @@ export default function GoogleMaps() {
253253
{option.structured_formatting.secondary_text}
254254
</Typography>
255255
) : null}
256-
</Grid2>
257-
</Grid2>
256+
</Grid>
257+
</Grid>
258258
</li>
259259
);
260260
}}

‎docs/data/material/components/breadcrumbs/PageContainerBasic.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
PageHeader,
88
PageHeaderToolbar,
99
} from '@toolpad/core/PageContainer';
10-
import Grid from '@mui/material/Grid2';
10+
import Grid from '@mui/material/Grid';
1111
import Paper from '@mui/material/Paper';
1212
import Stack from '@mui/material/Stack';
1313
import Button from '@mui/material/Button';

‎docs/data/material/components/breadcrumbs/PageContainerBasic.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
PageHeader,
88
PageHeaderToolbar,
99
} from '@toolpad/core/PageContainer';
10-
import Grid from '@mui/material/Grid2';
10+
import Grid from '@mui/material/Grid';
1111
import Paper from '@mui/material/Paper';
1212
import Stack from '@mui/material/Stack';
1313
import Button from '@mui/material/Button';

‎docs/data/material/components/chips/ChipsPlayground.js

+41-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import Grid from '@mui/material/GridLegacy';
2+
import Grid from '@mui/material/Grid';
33
import FormControl from '@mui/material/FormControl';
44
import FormLabel from '@mui/material/FormLabel';
55
import FormControlLabel from '@mui/material/FormControlLabel';
@@ -91,9 +91,9 @@ function ChipsPlayground() {
9191

9292
return (
9393
<Grid container sx={{ flexGrow: 1 }}>
94-
<Grid item xs={12}>
94+
<Grid size={12}>
9595
<Grid container sx={{ justifyContent: 'center', alignItems: 'center' }}>
96-
<Grid item sx={(theme) => ({ height: theme.spacing(10) })}>
96+
<Grid sx={(theme) => ({ height: theme.spacing(10) })}>
9797
<Chip
9898
label="Chip Component"
9999
color={color}
@@ -107,9 +107,14 @@ function ChipsPlayground() {
107107
</Grid>
108108
</Grid>
109109
</Grid>
110-
<Grid item xs={12}>
110+
<Grid size={12}>
111111
<Grid container spacing={3}>
112-
<Grid item xs={12} md={6}>
112+
<Grid
113+
size={{
114+
xs: 12,
115+
md: 6,
116+
}}
117+
>
113118
<FormControl component="fieldset">
114119
<FormLabel>variant</FormLabel>
115120
<RadioGroup
@@ -132,7 +137,12 @@ function ChipsPlayground() {
132137
</RadioGroup>
133138
</FormControl>
134139
</Grid>
135-
<Grid item xs={12} md={6}>
140+
<Grid
141+
size={{
142+
xs: 12,
143+
md: 6,
144+
}}
145+
>
136146
<FormControl component="fieldset">
137147
<FormLabel>color</FormLabel>
138148
<RadioGroup
@@ -172,7 +182,12 @@ function ChipsPlayground() {
172182
</RadioGroup>
173183
</FormControl>
174184
</Grid>
175-
<Grid item xs={12} md={6}>
185+
<Grid
186+
size={{
187+
xs: 12,
188+
md: 6,
189+
}}
190+
>
176191
<FormControl component="fieldset">
177192
<FormLabel>size</FormLabel>
178193
<RadioGroup
@@ -191,7 +206,12 @@ function ChipsPlayground() {
191206
</RadioGroup>
192207
</FormControl>
193208
</Grid>
194-
<Grid item xs={12} md={6}>
209+
<Grid
210+
size={{
211+
xs: 12,
212+
md: 6,
213+
}}
214+
>
195215
<FormControl component="fieldset">
196216
<FormLabel>icon</FormLabel>
197217
<RadioGroup
@@ -206,7 +226,12 @@ function ChipsPlayground() {
206226
</RadioGroup>
207227
</FormControl>
208228
</Grid>
209-
<Grid item xs={12} md={6}>
229+
<Grid
230+
size={{
231+
xs: 12,
232+
md: 6,
233+
}}
234+
>
210235
<FormControl component="fieldset">
211236
<FormLabel>avatar</FormLabel>
212237
<RadioGroup
@@ -226,7 +251,12 @@ function ChipsPlayground() {
226251
</RadioGroup>
227252
</FormControl>
228253
</Grid>
229-
<Grid item xs={12} md={6}>
254+
<Grid
255+
size={{
256+
xs: 12,
257+
md: 6,
258+
}}
259+
>
230260
<FormControl component="fieldset">
231261
<FormLabel>onDelete</FormLabel>
232262
<RadioGroup
@@ -252,7 +282,7 @@ function ChipsPlayground() {
252282
</Grid>
253283
</Grid>
254284
</Grid>
255-
<Grid item xs={12}>
285+
<Grid size={12}>
256286
<HighlightedCode code={jsx} language="jsx" />
257287
</Grid>
258288
</Grid>

‎docs/data/material/components/grid-legacy/grid-legacy.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ The `GridLegacy` component shouldn't be confused with a data grid; it is closer
2222

2323
:::warning
2424
The `GridLegacy` component has been deprecated.
25-
Please use [Grid2](/material-ui/react-grid2/) instead.
26-
See the [Grid2 upgrade guide](/material-ui/migration/upgrade-to-grid-v2/) for more details.
25+
Please use [Grid](/material-ui/react-grid/) instead.
26+
See the [Grid upgrade guide](/material-ui/migration/upgrade-to-grid-v2/) for more details.
2727
:::
2828

2929
## How it works

0 commit comments

Comments
 (0)