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

mui · Jul 1, 2024 · 69e1d99 · 69e1d99
1 parent f993fe5
commit 69e1d99
Show file tree

Hide file tree

Showing 171 changed files with 1,289 additions and 908 deletions.
diff --git a/benchmark/browser/scenarios/grid-system/index.js b/benchmark/browser/scenarios/grid-system/index.js
@@ -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>
   );

diff --git a/docs/data/joy/components/aspect-ratio/VariantsRatio.js b/docs/data/joy/components/aspect-ratio/VariantsRatio.js
@@ -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

diff --git a/docs/data/joy/components/aspect-ratio/VariantsRatio.tsx b/docs/data/joy/components/aspect-ratio/VariantsRatio.tsx
@@ -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

diff --git a/docs/data/joy/components/grid/AutoGrid.js b/docs/data/joy/components/grid/AutoGrid.js
@@ -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>
   );

diff --git a/docs/data/joy/components/grid/AutoGrid.tsx b/docs/data/joy/components/grid/AutoGrid.tsx
@@ -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>
   );

diff --git a/docs/data/joy/components/grid/AutoGrid.tsx.preview b/docs/data/joy/components/grid/AutoGrid.tsx.preview
@@ -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>
diff --git a/docs/data/joy/components/grid/BasicGrid.js b/docs/data/joy/components/grid/BasicGrid.js
@@ -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>
   );

diff --git a/docs/data/joy/components/grid/BasicGrid.tsx b/docs/data/joy/components/grid/BasicGrid.tsx
@@ -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>
   );

diff --git a/docs/data/joy/components/grid/BasicGrid.tsx.preview b/docs/data/joy/components/grid/BasicGrid.tsx.preview
@@ -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>
diff --git a/docs/data/joy/components/grid/CSSGrid.js b/docs/data/joy/components/grid/CSSGrid.js
@@ -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>

diff --git a/docs/data/joy/components/grid/CSSGrid.tsx b/docs/data/joy/components/grid/CSSGrid.tsx
@@ -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>

diff --git a/docs/data/joy/components/grid/CSSGrid.tsx.preview b/docs/data/joy/components/grid/CSSGrid.tsx.preview
@@ -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>
diff --git a/docs/data/joy/components/grid/ChildrenCenteredGrid.js b/docs/data/joy/components/grid/ChildrenCenteredGrid.js
@@ -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>

diff --git a/docs/data/joy/components/grid/ChildrenCenteredGrid.tsx b/docs/data/joy/components/grid/ChildrenCenteredGrid.tsx
@@ -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>

diff --git a/docs/data/joy/components/grid/ColumnsGrid.js b/docs/data/joy/components/grid/ColumnsGrid.js
@@ -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>
   );

diff --git a/docs/data/joy/components/grid/ColumnsGrid.tsx b/docs/data/joy/components/grid/ColumnsGrid.tsx
@@ -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>
   );

diff --git a/docs/data/joy/components/grid/ColumnsGrid.tsx.preview b/docs/data/joy/components/grid/ColumnsGrid.tsx.preview
@@ -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>
diff --git a/docs/data/joy/components/grid/FullWidthGrid.js b/docs/data/joy/components/grid/FullWidthGrid.js
@@ -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>

diff --git a/docs/data/joy/components/grid/FullWidthGrid.tsx b/docs/data/joy/components/grid/FullWidthGrid.tsx
@@ -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>