Run codemod

mui · Jun 26, 2024 · 35b31ba · 35b31ba
1 parent b64c7e6
commit 35b31ba
Show file tree

Hide file tree

Showing 53 changed files with 151 additions and 153 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/snackbar/PositionedSnackbar.js b/docs/data/joy/components/snackbar/PositionedSnackbar.js
@@ -39,7 +39,7 @@ export default function PositionedSnackbar() {
         </Button>
       </Box>
       <Grid container sx={{ justifyContent: 'center' }}>
-        <Grid xs={6}>
+        <Grid size={6}>
           <Button
             variant="plain"
             startDecorator={<NorthWestIcon />}
@@ -48,7 +48,7 @@ export default function PositionedSnackbar() {
             Top Left
           </Button>
         </Grid>
-        <Grid xs={6} sx={{ textAlign: 'right', mb: 2 }}>
+        <Grid sx={{ textAlign: 'right', mb: 2 }} size={6}>
           <Button
             variant="plain"
             endDecorator={<NorthEastIcon />}
@@ -57,7 +57,7 @@ export default function PositionedSnackbar() {
             Top Right
           </Button>
         </Grid>
-        <Grid xs={6}>
+        <Grid size={6}>
           <Button
             variant="plain"
             startDecorator={<SouthWestIcon />}
@@ -66,7 +66,7 @@ export default function PositionedSnackbar() {
             Bottom Left
           </Button>
         </Grid>
-        <Grid xs={6} sx={{ textAlign: 'right' }}>
+        <Grid sx={{ textAlign: 'right' }} size={6}>
           <Button
             variant="plain"
             endDecorator={<SouthEastIcon />}

diff --git a/docs/data/joy/components/snackbar/PositionedSnackbar.tsx b/docs/data/joy/components/snackbar/PositionedSnackbar.tsx
@@ -43,7 +43,7 @@ export default function PositionedSnackbar() {
         </Button>
       </Box>
       <Grid container sx={{ justifyContent: 'center' }}>
-        <Grid xs={6}>
+        <Grid size={6}>
           <Button
             variant="plain"
             startDecorator={<NorthWestIcon />}
@@ -52,7 +52,7 @@ export default function PositionedSnackbar() {
             Top Left
           </Button>
         </Grid>
-        <Grid xs={6} sx={{ textAlign: 'right', mb: 2 }}>
+        <Grid sx={{ textAlign: 'right', mb: 2 }} size={6}>
           <Button
             variant="plain"
             endDecorator={<NorthEastIcon />}
@@ -61,7 +61,7 @@ export default function PositionedSnackbar() {
             Top Right
           </Button>
         </Grid>
-        <Grid xs={6}>
+        <Grid size={6}>
           <Button
             variant="plain"
             startDecorator={<SouthWestIcon />}
@@ -70,7 +70,7 @@ export default function PositionedSnackbar() {
             Bottom Left
           </Button>
         </Grid>
-        <Grid xs={6} sx={{ textAlign: 'right' }}>
+        <Grid sx={{ textAlign: 'right' }} size={6}>
           <Button
             variant="plain"
             endDecorator={<SouthEastIcon />}

diff --git a/docs/data/joy/components/stack/InteractiveStack.js b/docs/data/joy/components/stack/InteractiveStack.js
@@ -64,7 +64,7 @@ export default function InteractiveStack() {
         })}
       >
         <Grid container spacing={3}>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl>
               <FormLabel sx={{ mb: 0.5 }}>direction</FormLabel>
               <RadioGroup
@@ -85,7 +85,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl>
               <FormLabel sx={{ mb: 0.5 }}>alignItems</FormLabel>
               <RadioGroup
@@ -107,7 +107,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl>
               <FormLabel sx={{ mb: 0.5 }}>justifyContent</FormLabel>
               <RadioGroup
@@ -130,7 +130,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl>
               <FormLabel sx={{ mb: 0.5 }}>spacing</FormLabel>
               <RadioGroup

diff --git a/docs/data/joy/components/stack/InteractiveStack.tsx b/docs/data/joy/components/stack/InteractiveStack.tsx
@@ -64,7 +64,7 @@ export default function InteractiveStack() {
         })}
       >
         <Grid container spacing={3}>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl>
               <FormLabel sx={{ mb: 0.5 }}>direction</FormLabel>
               <RadioGroup
@@ -85,7 +85,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl>
               <FormLabel sx={{ mb: 0.5 }}>alignItems</FormLabel>
               <RadioGroup
@@ -107,7 +107,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl>
               <FormLabel sx={{ mb: 0.5 }}>justifyContent</FormLabel>
               <RadioGroup
@@ -130,7 +130,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl>
               <FormLabel sx={{ mb: 0.5 }}>spacing</FormLabel>
               <RadioGroup

diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.js
@@ -46,11 +46,11 @@ export default function MainGrid() {
       {/* cards */}
       <Grid container spacing={2} columns={12}>
         {data.map((card, index) => (
-          <Grid key={index} xs={6} sm={3} md={2} lg={2.25}>
+          <Grid key={index} size={{ xs: 6, sm: 3, md: 2, lg: 2.25 }}>
             <StatCard {...card} />
           </Grid>
         ))}
-        <Grid xs={12} md={4} lg={3}>
+        <Grid size={{ xs: 12, md: 4, lg: 3 }}>
           <HighlightedCard />
         </Grid>
       </Grid>
@@ -60,14 +60,14 @@ export default function MainGrid() {
         direction={{ xs: 'row-reverse', md: 'row' }}
         columns={12}
       >
-        <Grid xs={12} md={8} lg={9}>
+        <Grid size={{ xs: 12, md: 8, lg: 9 }}>
           <Stack spacing={2}>
             <PageViewsBarChart />
             <PageViewsChart />
             <CustomizedDataGrid />
           </Stack>
         </Grid>
-        <Grid xs={12} md={4} lg={3}>
+        <Grid size={{ xs: 12, md: 4, lg: 3 }}>
           <Stack spacing={2} direction={{ xs: 'column', sm: 'row', md: 'column' }}>
             <CustomizedTreeView />
             <ChartUserByCountry />

diff --git a/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx b/docs/data/material/getting-started/templates/dashboard/components/MainGrid.tsx
@@ -46,11 +46,11 @@ export default function MainGrid() {
       {/* cards */}
       <Grid container spacing={2} columns={12}>
         {data.map((card, index) => (
-          <Grid key={index} xs={6} sm={3} md={2} lg={2.25}>
+          <Grid key={index} size={{ xs: 6, sm: 3, md: 2, lg: 2.25 }}>
             <StatCard {...card} />
           </Grid>
         ))}
-        <Grid xs={12} md={4} lg={3}>
+        <Grid size={{ xs: 12, md: 4, lg: 3 }}>
           <HighlightedCard />
         </Grid>
       </Grid>
@@ -60,14 +60,14 @@ export default function MainGrid() {
         direction={{ xs: 'row-reverse', md: 'row' }}
         columns={12}
       >
-        <Grid xs={12} md={8} lg={9}>
+        <Grid size={{ xs: 12, md: 8, lg: 9 }}>
           <Stack spacing={2}>
             <PageViewsBarChart />
             <PageViewsChart />
             <CustomizedDataGrid />
           </Stack>
         </Grid>
-        <Grid xs={12} md={4} lg={3}>
+        <Grid size={{ xs: 12, md: 4, lg: 3 }}>
           <Stack spacing={2} direction={{ xs: 'column', sm: 'row', md: 'column' }}>
             <CustomizedTreeView />
             <ChartUserByCountry />

diff --git a/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js b/docs/data/material/migration/migration-grid-v2/GridDisableEqualOverflow.js
@@ -20,7 +20,7 @@ export default function GridDisableEqualOverflow() {
             alignItems="center"
             justifyContent="center"
             textAlign="center"
-            xs
+            size="grow"
           >
             ver.2 <br />
             Top and left overflow

diff --git a/docs/data/material/migration/migration-grid-v2/GridsDiff.js b/docs/data/material/migration/migration-grid-v2/GridsDiff.js
@@ -50,7 +50,7 @@ export default function GridsDiff() {
               alignItems="center"
               justifyContent="center"
               textAlign="center"
-              xs
+              size="grow"
             >
               ver.2 <br />
               All sides

diff --git a/docs/data/system/components/stack/InteractiveStack.js b/docs/data/system/components/stack/InteractiveStack.js
@@ -52,7 +52,7 @@ export default function InteractiveStack() {
       </Stack>
       <Paper sx={{ p: 2 }}>
         <Grid container spacing={3}>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl component="fieldset">
               <FormLabel component="legend">direction</FormLabel>
               <RadioGroup
@@ -83,7 +83,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl component="fieldset">
               <FormLabel component="legend">alignItems</FormLabel>
               <RadioGroup
@@ -123,7 +123,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl component="fieldset">
               <FormLabel component="legend">justifyContent</FormLabel>
               <RadioGroup
@@ -168,7 +168,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl component="fieldset">
               <FormLabel component="legend">spacing</FormLabel>
               <RadioGroup

diff --git a/docs/data/system/components/stack/InteractiveStack.tsx b/docs/data/system/components/stack/InteractiveStack.tsx
@@ -52,7 +52,7 @@ export default function InteractiveStack() {
       </Stack>
       <Paper sx={{ p: 2 }}>
         <Grid container spacing={3}>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl component="fieldset">
               <FormLabel component="legend">direction</FormLabel>
               <RadioGroup
@@ -83,7 +83,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl component="fieldset">
               <FormLabel component="legend">alignItems</FormLabel>
               <RadioGroup
@@ -123,7 +123,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl component="fieldset">
               <FormLabel component="legend">justifyContent</FormLabel>
               <RadioGroup
@@ -168,7 +168,7 @@ export default function InteractiveStack() {
               </RadioGroup>
             </FormControl>
           </Grid>
-          <Grid xs={12}>
+          <Grid size={12}>
             <FormControl component="fieldset">
               <FormLabel component="legend">spacing</FormLabel>
               <RadioGroup

diff --git a/docs/src/components/about/HowToSupport.tsx b/docs/src/components/about/HowToSupport.tsx
@@ -64,7 +64,7 @@ export default function HowToSupport() {
         description=""
       />
       <Grid container spacing={3}>
-        <Grid xs={12} sm={6} md={4}>
+        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
           <Widget
             icon={<ForumRoundedIcon fontSize="small" color="primary" />}
             title="Give feedback"
@@ -88,7 +88,7 @@ export default function HowToSupport() {
             </Button>
           </Widget>
         </Grid>
-        <Grid xs={12} sm={6} md={4}>
+        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
           <Widget
             icon={<PeopleRoundedIcon fontSize="small" color="primary" />}
             title="Join the community"
@@ -141,7 +141,7 @@ export default function HowToSupport() {
             </Button>
           </Widget>
         </Grid>
-        <Grid xs={12} sm={6} md={4}>
+        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
           <Widget
             icon={<LocalAtmRoundedIcon fontSize="small" color="primary" />}
             title="Support us financially"