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

Jump to bottom

[material-ui][Grid] Update Grid props to match PigmentGrid #42742

Merged
merged 16 commits into from
Jul 1, 2024
Merged

[material-ui][Grid] Update Grid props to match PigmentGrid #42742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
aea5ba5
Replace breakpoint-props with size and offset props
DiegoAndai Jun 21, 2024
95feb44
Add Grid v2 props codemod
DiegoAndai Jun 21, 2024
db9e2f5
Cover spread props in codemod
DiegoAndai Jun 24, 2024
35bcb91
Do not process grid v1 in codemod
DiegoAndai Jun 25, 2024
b64c7e6
Update grid docs
DiegoAndai Jun 25, 2024
ebf69d2
Run codemod
DiegoAndai Jun 25, 2024
70316af
update tests
DiegoAndai Jun 26, 2024
87b5407
Fix proptypes
DiegoAndai Jun 26, 2024
8a285b9
Add migration guide
DiegoAndai Jun 26, 2024
9ae9eda
Update docs api
DiegoAndai Jun 26, 2024
ab05dc7
Fix vale
DiegoAndai Jun 26, 2024
b72e8a9
Fix half bordered demo
DiegoAndai Jun 28, 2024
e0397ce
Merge branch 'next' into grid-v2-props
DiegoAndai Jun 28, 2024
f5b6746
Adapt to PigmentGrid changes
DiegoAndai Jun 28, 2024
b3b22f7
Temporarily revert demo label changes to test Argos
DiegoAndai Jun 28, 2024
186c18e
Revert "Temporarily revert demo label changes to test Argos"
DiegoAndai Jun 28, 2024
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
4 changes: 1 addition & 3 deletions benchmark/browser/scenarios/grid-system/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ export default function GridSystem() {
return (
<Grid container spacing={2}>
{new Array(1000).fill().map(() => (
<Grid xs={12} sm={6} md={4}>
test case
</Grid>
<Grid size={{ xs: 12, sm: 6, md: 4 }}>test case</Grid>
))}
</Grid>
);
Expand Down
8 changes: 4 additions & 4 deletions docs/data/joy/components/aspect-ratio/VariantsRatio.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,28 @@ import Typography from '@mui/joy/Typography';
export default function VariantsRatio() {
return (
<Grid container spacing={2} sx={{ width: '100%' }}>
<Grid xs={6} md>
<Grid size={{ xs: 6, md: 'grow' }}>
<AspectRatio variant="solid">
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
Solid
</Typography>
</AspectRatio>
</Grid>
<Grid xs={6} md>
<Grid size={{ xs: 6, md: 'grow' }}>
<AspectRatio variant="soft">
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
Soft
</Typography>
</AspectRatio>
</Grid>
<Grid xs={6} md>
<Grid size={{ xs: 6, md: 'grow' }}>
<AspectRatio variant="outlined">
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
Outlined
</Typography>
</AspectRatio>
</Grid>
<Grid xs={6} md>
<Grid size={{ xs: 6, md: 'grow' }}>
<AspectRatio variant="plain">
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
Plain
Expand Down
8 changes: 4 additions & 4 deletions docs/data/joy/components/aspect-ratio/VariantsRatio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,28 @@ import Typography from '@mui/joy/Typography';
export default function VariantsRatio() {
return (
<Grid container spacing={2} sx={{ width: '100%' }}>
<Grid xs={6} md>
<Grid size={{ xs: 6, md: 'grow' }}>
<AspectRatio variant="solid">
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
Solid
</Typography>
</AspectRatio>
</Grid>
<Grid xs={6} md>
<Grid size={{ xs: 6, md: 'grow' }}>
<AspectRatio variant="soft">
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
Soft
</Typography>
</AspectRatio>
</Grid>
<Grid xs={6} md>
<Grid size={{ xs: 6, md: 'grow' }}>
<AspectRatio variant="outlined">
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
Outlined
</Typography>
</AspectRatio>
</Grid>
<Grid xs={6} md>
<Grid size={{ xs: 6, md: 'grow' }}>
<AspectRatio variant="plain">
<Typography level="inherit" sx={{ fontWeight: 'lg' }}>
Plain
Expand Down
12 changes: 6 additions & 6 deletions docs/data/joy/components/grid/AutoGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function AutoGrid() {
return (
<Grid container spacing={3} sx={{ flexGrow: 1 }}>
<Grid xs>
<Item>xs</Item>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
<Grid xs={6}>
<Item>xs=6</Item>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid xs>
<Item>xs</Item>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
</Grid>
);
Expand Down
12 changes: 6 additions & 6 deletions docs/data/joy/components/grid/AutoGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function AutoGrid() {
return (
<Grid container spacing={3} sx={{ flexGrow: 1 }}>
<Grid xs>
<Item>xs</Item>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
<Grid xs={6}>
<Item>xs=6</Item>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid xs>
<Item>xs</Item>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
</Grid>
);
Expand Down
12 changes: 6 additions & 6 deletions docs/data/joy/components/grid/AutoGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<Grid container spacing={3} sx={{ flexGrow: 1 }}>
<Grid xs>
<Item>xs</Item>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
<Grid xs={6}>
<Item>xs=6</Item>
<Grid size={6}>
<Item>size=6</Item>
</Grid>
<Grid xs>
<Item>xs</Item>
<Grid size="grow">
<Item>size=grow</Item>
</Grid>
</Grid>
16 changes: 8 additions & 8 deletions docs/data/joy/components/grid/BasicGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,17 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function BasicGrid() {
return (
<Grid container spacing={2} sx={{ flexGrow: 1 }}>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
);
Expand Down
16 changes: 8 additions & 8 deletions docs/data/joy/components/grid/BasicGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,17 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function BasicGrid() {
return (
<Grid container spacing={2} sx={{ flexGrow: 1 }}>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
);
Expand Down
16 changes: 8 additions & 8 deletions docs/data/joy/components/grid/BasicGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<Grid container spacing={2} sx={{ flexGrow: 1 }}>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid xs={4}>
<Item>xs=4</Item>
<Grid size={4}>
<Item>size=4</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
8 changes: 4 additions & 4 deletions docs/data/joy/components/grid/CSSGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,16 @@ export default function CSSGrid() {
<Box sx={{ width: 1 }}>
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 2 }}>
<Box sx={{ gridColumn: 'span 8' }}>
<Item>xs=8</Item>
<Item>size=8</Item>
</Box>
<Box sx={{ gridColumn: 'span 4' }}>
<Item>xs=4</Item>
<Item>size=4</Item>
</Box>
<Box sx={{ gridColumn: 'span 4' }}>
<Item>xs=4</Item>
<Item>size=4</Item>
</Box>
<Box sx={{ gridColumn: 'span 8' }}>
<Item>xs=8</Item>
<Item>size=8</Item>
</Box>
</Box>
</Box>
Expand Down
8 changes: 4 additions & 4 deletions docs/data/joy/components/grid/CSSGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,16 @@ export default function CSSGrid() {
<Box sx={{ width: 1 }}>
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 2 }}>
<Box sx={{ gridColumn: 'span 8' }}>
<Item>xs=8</Item>
<Item>size=8</Item>
</Box>
<Box sx={{ gridColumn: 'span 4' }}>
<Item>xs=4</Item>
<Item>size=4</Item>
</Box>
<Box sx={{ gridColumn: 'span 4' }}>
<Item>xs=4</Item>
<Item>size=4</Item>
</Box>
<Box sx={{ gridColumn: 'span 8' }}>
<Item>xs=8</Item>
<Item>size=8</Item>
</Box>
</Box>
</Box>
Expand Down
8 changes: 4 additions & 4 deletions docs/data/joy/components/grid/CSSGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 2 }}>
<Box sx={{ gridColumn: 'span 8' }}>
<Item>xs=8</Item>
<Item>size=8</Item>
</Box>
<Box sx={{ gridColumn: 'span 4' }}>
<Item>xs=4</Item>
<Item>size=4</Item>
</Box>
<Box sx={{ gridColumn: 'span 4' }}>
<Item>xs=4</Item>
<Item>size=4</Item>
</Box>
<Box sx={{ gridColumn: 'span 8' }}>
<Item>xs=8</Item>
<Item>size=8</Item>
</Box>
</Box>
4 changes: 1 addition & 3 deletions docs/data/joy/components/grid/ChildrenCenteredGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@ export default function ChildrenCenteredGrid() {
{['Jimmy', 'Michal', 'Jun', 'Marija'].map((name, index) => (
<Grid
key={name}
xs={12}
sm={6}
md={3}
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: 180,
}}
size={{ xs: 12, sm: 6, md: 3 }}
>
<Avatar src={`/static/images/avatar/${index + 1}.jpg`} size="lg" />
<Typography sx={{ ml: 1.5 }}>{name}</Typography>
Expand Down
4 changes: 1 addition & 3 deletions docs/data/joy/components/grid/ChildrenCenteredGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,13 @@ export default function ChildrenCenteredGrid() {
{['Jimmy', 'Michal', 'Jun', 'Marija'].map((name, index) => (
<Grid
key={name}
xs={12}
sm={6}
md={3}
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: 180,
}}
size={{ xs: 12, sm: 6, md: 3 }}
>
<Avatar src={`/static/images/avatar/${index + 1}.jpg`} size="lg" />
<Typography sx={{ ml: 1.5 }}>{name}</Typography>
Expand Down
8 changes: 4 additions & 4 deletions docs/data/joy/components/grid/ColumnsGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function ColumnsGrid() {
return (
<Grid container spacing={2} columns={16} sx={{ flexGrow: 1 }}>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
);
Expand Down
8 changes: 4 additions & 4 deletions docs/data/joy/components/grid/ColumnsGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function ColumnsGrid() {
return (
<Grid container spacing={2} columns={16} sx={{ flexGrow: 1 }}>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
);
Expand Down
8 changes: 4 additions & 4 deletions docs/data/joy/components/grid/ColumnsGrid.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<Grid container spacing={2} columns={16} sx={{ flexGrow: 1 }}>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
<Grid xs={8}>
<Item>xs=8</Item>
<Grid size={8}>
<Item>size=8</Item>
</Grid>
</Grid>
8 changes: 4 additions & 4 deletions docs/data/joy/components/grid/FullWidthGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,16 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function FullWidthGrid() {
return (
<Grid container spacing={2} sx={{ flexGrow: 1 }}>
<Grid xs={6} md={8}>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid xs={6} md={4}>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid xs={6} md={4}>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid xs={6} md={8}>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>
Expand Down
8 changes: 4 additions & 4 deletions docs/data/joy/components/grid/FullWidthGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,16 @@ const Item = styled(Sheet)(({ theme }) => ({
export default function FullWidthGrid() {
return (
<Grid container spacing={2} sx={{ flexGrow: 1 }}>
<Grid xs={6} md={8}>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
<Grid xs={6} md={4}>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid xs={6} md={4}>
<Grid size={{ xs: 6, md: 4 }}>
<Item>xs=6 md=4</Item>
</Grid>
<Grid xs={6} md={8}>
<Grid size={{ xs: 6, md: 8 }}>
<Item>xs=6 md=8</Item>
</Grid>
</Grid>
Expand Down
Loading
Loading