Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][Grid2] Rename to Grid #45381

Merged
merged 6 commits into from
Feb 24, 2025
Merged

[material-ui][Grid2] Rename to Grid #45381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0901a36
Rename Grid2 to Grid
DiegoAndai Feb 20, 2025
9aa5cef
Replace GridLegacy internal usage
DiegoAndai Feb 21, 2025
47f3312
Add grid-props codemod
DiegoAndai Feb 21, 2025
eb50f83
Update grid v2 upgrade guide
DiegoAndai Feb 21, 2025
990d919
Add section to upgrade to v7 guide
DiegoAndai Feb 21, 2025
399e87d
Trigger CI
DiegoAndai Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/bare-next-app/src/app/grid/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid2';
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material';

const Item = styled('div')`
Expand Down
2 changes: 1 addition & 1 deletion apps/bare-next-app/src/app/material-ui/react-grid/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid2';
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material';

const Item = styled(Paper)(({ theme }) => ({
Expand Down
10 changes: 8 additions & 2 deletions benchmark/browser/scenarios/grid-material-ui/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import * as React from 'react';
import Grid from '@mui/material/GridLegacy';
import Grid from '@mui/material/Grid';

export default function GridMaterialUI() {
return (
<Grid container spacing={2}>
{new Array(1000).fill().map(() => (
<Grid item xs={12} sm={6} md={4}>
<Grid
size={{
xs: 12,
sm: 6,
md: 4,
}}
>
test case
</Grid>
))}
Expand Down
22 changes: 8 additions & 14 deletions docs/data/joy/components/tooltip/PositionedTooltips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import Grid from '@mui/material/GridLegacy';
import Grid from '@mui/material/Grid';
import Button from '@mui/joy/Button';
import Tooltip from '@mui/joy/Tooltip';

export default function PositionedTooltips() {
return (
<Box sx={{ width: 500 }}>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid item>
<Grid>
<Tooltip title="Add" placement="top-start">
<Button variant="plain">top-start</Button>
</Tooltip>
Expand All @@ -21,7 +21,7 @@ export default function PositionedTooltips() {
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid item xs={6}>
<Grid size={6}>
<Tooltip title="Add" placement="left-start">
<Button variant="plain">left-start</Button>
</Tooltip>
Expand All @@ -34,32 +34,26 @@ export default function PositionedTooltips() {
<Button variant="plain">left-end</Button>
</Tooltip>
</Grid>
<Grid
item
container
xs={6}
direction="column"
sx={{ alignItems: 'flex-end' }}
>
<Grid item>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button variant="plain">right-start</Button>
</Tooltip>
</Grid>
<Grid item>
<Grid>
<Tooltip title="Add" placement="right">
<Button variant="plain">right</Button>
</Tooltip>
</Grid>
<Grid item>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button variant="plain">right-end</Button>
</Tooltip>
</Grid>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid item>
<Grid>
<Tooltip title="Add" placement="bottom-start">
<Button variant="plain">bottom-start</Button>
</Tooltip>
Expand Down
22 changes: 8 additions & 14 deletions docs/data/joy/components/tooltip/PositionedTooltips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import Grid from '@mui/material/GridLegacy';
import Grid from '@mui/material/Grid';
import Button from '@mui/joy/Button';
import Tooltip from '@mui/joy/Tooltip';

export default function PositionedTooltips() {
return (
<Box sx={{ width: 500 }}>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid item>
<Grid>
<Tooltip title="Add" placement="top-start">
<Button variant="plain">top-start</Button>
</Tooltip>
Expand All @@ -21,7 +21,7 @@ export default function PositionedTooltips() {
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid item xs={6}>
<Grid size={6}>
<Tooltip title="Add" placement="left-start">
<Button variant="plain">left-start</Button>
</Tooltip>
Expand All @@ -34,32 +34,26 @@ export default function PositionedTooltips() {
<Button variant="plain">left-end</Button>
</Tooltip>
</Grid>
<Grid
item
container
xs={6}
direction="column"
sx={{ alignItems: 'flex-end' }}
>
<Grid item>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button variant="plain">right-start</Button>
</Tooltip>
</Grid>
<Grid item>
<Grid>
<Tooltip title="Add" placement="right">
<Button variant="plain">right</Button>
</Tooltip>
</Grid>
<Grid item>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button variant="plain">right-end</Button>
</Tooltip>
</Grid>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid item>
<Grid>
<Tooltip title="Add" placement="bottom-start">
<Button variant="plain">bottom-start</Button>
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/app-bar/DashboardLayoutBasic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import LayersIcon from '@mui/icons-material/Layers';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { PageContainer } from '@toolpad/core/PageContainer';
import Grid from '@mui/material/Grid2';
import Grid from '@mui/material/Grid';

const NAVIGATION = [
{
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/app-bar/DashboardLayoutBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import LayersIcon from '@mui/icons-material/Layers';
import { AppProvider, Navigation, Router } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { PageContainer } from '@toolpad/core/PageContainer';
import Grid from '@mui/material/Grid2';
import Grid from '@mui/material/Grid';

const NAVIGATION: Navigation = [
{
Expand Down
14 changes: 7 additions & 7 deletions docs/data/material/components/autocomplete/GoogleMaps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Paper from '@mui/material/Paper';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import Grid2 from '@mui/material/Grid2';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import parse from 'autosuggest-highlight/parse';
Expand Down Expand Up @@ -212,11 +212,11 @@ export default function GoogleMaps() {
);
return (
<li key={key} {...optionProps}>
<Grid2 container sx={{ alignItems: 'center' }}>
<Grid2 sx={{ display: 'flex', width: 44 }}>
<Grid container sx={{ alignItems: 'center' }}>
<Grid sx={{ display: 'flex', width: 44 }}>
<LocationOnIcon sx={{ color: 'text.secondary' }} />
</Grid2>
<Grid2 sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
</Grid>
<Grid sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
{parts.map((part, index) => (
<Box
key={index}
Expand All @@ -235,8 +235,8 @@ export default function GoogleMaps() {
{option.structured_formatting.secondary_text}
</Typography>
) : null}
</Grid2>
</Grid2>
</Grid>
</Grid>
</li>
);
}}
Expand Down
14 changes: 7 additions & 7 deletions docs/data/material/components/autocomplete/GoogleMaps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Paper, { PaperProps } from '@mui/material/Paper';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import Grid2 from '@mui/material/Grid2';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { useTheme } from '@mui/material/styles';
import parse from 'autosuggest-highlight/parse';
Expand Down Expand Up @@ -230,11 +230,11 @@ export default function GoogleMaps() {
);
return (
<li key={key} {...optionProps}>
<Grid2 container sx={{ alignItems: 'center' }}>
<Grid2 sx={{ display: 'flex', width: 44 }}>
<Grid container sx={{ alignItems: 'center' }}>
<Grid sx={{ display: 'flex', width: 44 }}>
<LocationOnIcon sx={{ color: 'text.secondary' }} />
</Grid2>
<Grid2 sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
</Grid>
<Grid sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
{parts.map((part, index) => (
<Box
key={index}
Expand All @@ -253,8 +253,8 @@ export default function GoogleMaps() {
{option.structured_formatting.secondary_text}
</Typography>
) : null}
</Grid2>
</Grid2>
</Grid>
</Grid>
</li>
);
}}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/breadcrumbs/PageContainerBasic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
PageHeader,
PageHeaderToolbar,
} from '@toolpad/core/PageContainer';
import Grid from '@mui/material/Grid2';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/breadcrumbs/PageContainerBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
PageHeader,
PageHeaderToolbar,
} from '@toolpad/core/PageContainer';
import Grid from '@mui/material/Grid2';
import Grid from '@mui/material/Grid';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
Expand Down
52 changes: 41 additions & 11 deletions docs/data/material/components/chips/ChipsPlayground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import Grid from '@mui/material/GridLegacy';
import Grid from '@mui/material/Grid';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import FormControlLabel from '@mui/material/FormControlLabel';
Expand Down Expand Up @@ -91,9 +91,9 @@ function ChipsPlayground() {

return (
<Grid container sx={{ flexGrow: 1 }}>
<Grid item xs={12}>
<Grid size={12}>
<Grid container sx={{ justifyContent: 'center', alignItems: 'center' }}>
<Grid item sx={(theme) => ({ height: theme.spacing(10) })}>
<Grid sx={(theme) => ({ height: theme.spacing(10) })}>
<Chip
label="Chip Component"
color={color}
Expand All @@ -107,9 +107,14 @@ function ChipsPlayground() {
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid size={12}>
<Grid container spacing={3}>
<Grid item xs={12} md={6}>
<Grid
size={{
xs: 12,
md: 6,
}}
>
<FormControl component="fieldset">
<FormLabel>variant</FormLabel>
<RadioGroup
Expand All @@ -132,7 +137,12 @@ function ChipsPlayground() {
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<Grid
size={{
xs: 12,
md: 6,
}}
>
<FormControl component="fieldset">
<FormLabel>color</FormLabel>
<RadioGroup
Expand Down Expand Up @@ -172,7 +182,12 @@ function ChipsPlayground() {
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<Grid
size={{
xs: 12,
md: 6,
}}
>
<FormControl component="fieldset">
<FormLabel>size</FormLabel>
<RadioGroup
Expand All @@ -191,7 +206,12 @@ function ChipsPlayground() {
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<Grid
size={{
xs: 12,
md: 6,
}}
>
<FormControl component="fieldset">
<FormLabel>icon</FormLabel>
<RadioGroup
Expand All @@ -206,7 +226,12 @@ function ChipsPlayground() {
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<Grid
size={{
xs: 12,
md: 6,
}}
>
<FormControl component="fieldset">
<FormLabel>avatar</FormLabel>
<RadioGroup
Expand All @@ -226,7 +251,12 @@ function ChipsPlayground() {
</RadioGroup>
</FormControl>
</Grid>
<Grid item xs={12} md={6}>
<Grid
size={{
xs: 12,
md: 6,
}}
>
<FormControl component="fieldset">
<FormLabel>onDelete</FormLabel>
<RadioGroup
Expand All @@ -252,7 +282,7 @@ function ChipsPlayground() {
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid size={12}>
<HighlightedCode code={jsx} language="jsx" />
</Grid>
</Grid>
Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/components/grid-legacy/grid-legacy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ The `GridLegacy` component shouldn't be confused with a data grid; it is closer

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

## How it works
Expand Down
Loading