[Grid] Add deprecation for justify prop rename (#24078)

mui · Dec 22, 2020 · e617d71 · e617d71
1 parent e9542ee
commit e617d71
Show file tree

Hide file tree

Showing 34 changed files with 233 additions and 102 deletions.
diff --git a/docs/pages/api-docs/grid.md b/docs/pages/api-docs/grid.md
@@ -36,7 +36,8 @@ The `MuiGrid` name can be used for providing [default props](/customization/glob
 | <span class="prop-name">container</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. |
 | <span class="prop-name">direction</span> | <span class="prop-type">'row'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'column-reverse'</span> | <span class="prop-default">'row'</span> | Defines the `flex-direction` style property. It is applied for all screen sizes. |
 | <span class="prop-name">item</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. |
-| <span class="prop-name">justify</span> | <span class="prop-type">'flex-start'<br>&#124;&nbsp;'center'<br>&#124;&nbsp;'flex-end'<br>&#124;&nbsp;'space-between'<br>&#124;&nbsp;'space-around'<br>&#124;&nbsp;'space-evenly'</span> | <span class="prop-default">'flex-start'</span> | Defines the `justify-content` style property. It is applied for all screen sizes. |
+| ~~<span class="prop-name">justify</span>~~ | <span class="prop-type">oneOf(['center'</span> |  | *Deprecated*. Use `justifyContent` instead, the prop was renamed.<br><br>Defines the `justify-content` style property. It is applied for all screen sizes. |
+| <span class="prop-name">justifyContent</span> | <span class="prop-type">'center'<br>&#124;&nbsp;'flex-end'<br>&#124;&nbsp;'space-between'<br>&#124;&nbsp;'space-around'<br>&#124;&nbsp;'space-evenly'</span> | <span class="prop-default">'flex-start'</span> | Defines the `justify-content` style property. It is applied for all screen sizes. |
 | <span class="prop-name">lg</span> | <span class="prop-type">false<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;true<br>&#124;&nbsp;1<br>&#124;&nbsp;2<br>&#124;&nbsp;3<br>&#124;&nbsp;4<br>&#124;&nbsp;5<br>&#124;&nbsp;6<br>&#124;&nbsp;7<br>&#124;&nbsp;8<br>&#124;&nbsp;9<br>&#124;&nbsp;10<br>&#124;&nbsp;11<br>&#124;&nbsp;12</span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `lg` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">md</span> | <span class="prop-type">false<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;true<br>&#124;&nbsp;1<br>&#124;&nbsp;2<br>&#124;&nbsp;3<br>&#124;&nbsp;4<br>&#124;&nbsp;5<br>&#124;&nbsp;6<br>&#124;&nbsp;7<br>&#124;&nbsp;8<br>&#124;&nbsp;9<br>&#124;&nbsp;10<br>&#124;&nbsp;11<br>&#124;&nbsp;12</span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `md` breakpoint and wider screens if not overridden. |
 | <span class="prop-name">sm</span> | <span class="prop-type">false<br>&#124;&nbsp;'auto'<br>&#124;&nbsp;true<br>&#124;&nbsp;1<br>&#124;&nbsp;2<br>&#124;&nbsp;3<br>&#124;&nbsp;4<br>&#124;&nbsp;5<br>&#124;&nbsp;6<br>&#124;&nbsp;7<br>&#124;&nbsp;8<br>&#124;&nbsp;9<br>&#124;&nbsp;10<br>&#124;&nbsp;11<br>&#124;&nbsp;12</span> | <span class="prop-default">false</span> | Defines the number of grids the component is going to use. It's applied for the `sm` breakpoint and wider screens if not overridden. |
@@ -72,11 +73,11 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">align-content-xs-flex-end</span> | <span class="prop-name">.MuiGrid-align-content-xs-flex-end</span> | 
 | <span class="prop-name">align-content-xs-space-between</span> | <span class="prop-name">.MuiGrid-align-content-xs-space-between</span> | 
 | <span class="prop-name">align-content-xs-space-around</span> | <span class="prop-name">.MuiGrid-align-content-xs-space-around</span> | 
-| <span class="prop-name">justify-xs-center</span> | <span class="prop-name">.MuiGrid-justify-xs-center</span> | 
-| <span class="prop-name">justify-xs-flex-end</span> | <span class="prop-name">.MuiGrid-justify-xs-flex-end</span> | 
-| <span class="prop-name">justify-xs-space-between</span> | <span class="prop-name">.MuiGrid-justify-xs-space-between</span> | 
-| <span class="prop-name">justify-xs-space-around</span> | <span class="prop-name">.MuiGrid-justify-xs-space-around</span> | 
-| <span class="prop-name">justify-xs-space-evenly</span> | <span class="prop-name">.MuiGrid-justify-xs-space-evenly</span> | 
+| <span class="prop-name">justify-content-xs-center</span> | <span class="prop-name">.MuiGrid-justify-content-xs-center</span> | 
+| <span class="prop-name">justify-content-xs-flex-end</span> | <span class="prop-name">.MuiGrid-justify-content-xs-flex-end</span> | 
+| <span class="prop-name">justify-content-xs-space-between</span> | <span class="prop-name">.MuiGrid-justify-content-xs-space-between</span> | 
+| <span class="prop-name">justify-content-xs-space-around</span> | <span class="prop-name">.MuiGrid-justify-content-xs-space-around</span> | 
+| <span class="prop-name">justify-content-xs-space-evenly</span> | <span class="prop-name">.MuiGrid-justify-content-xs-space-evenly</span> | 
 | <span class="prop-name">spacing-xs-1</span> | <span class="prop-name">.MuiGrid-spacing-xs-1</span> | 
 | <span class="prop-name">spacing-xs-2</span> | <span class="prop-name">.MuiGrid-spacing-xs-2</span> | 
 | <span class="prop-name">spacing-xs-3</span> | <span class="prop-name">.MuiGrid-spacing-xs-3</span> | 

diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js
@@ -104,7 +104,7 @@ function ChipsPlayground(props) {
   return (
     <Grid container className={classes.root}>
       <Grid item xs={12}>
-        <Grid container justify="center" alignItems="center">
+        <Grid container justifyContent="center" alignItems="center">
           <Grid item className={classes.chipWrapper}>
             <Chip
               label="Chip Component"

diff --git a/docs/src/pages/components/grid/InteractiveGrid.js b/docs/src/pages/components/grid/InteractiveGrid.js
@@ -29,14 +29,14 @@ const useStyles = makeStyles((theme) => ({
 export default function InteractiveGrid() {
   const classes = useStyles();
   const [direction, setDirection] = React.useState('row');
-  const [justify, setJustify] = React.useState('center');
+  const [justifyContent, setJustifyContent] = React.useState('center');
   const [alignItems, setAlignItems] = React.useState('center');
 
   const jsx = `
 <Grid
   container
   direction="${direction}"
-  justify="${justify}"
+  justifyContent="${justifyContent}"
   alignItems="${alignItems}"
 >
 `;
@@ -50,7 +50,7 @@ export default function InteractiveGrid() {
           className={classes.demo}
           alignItems={alignItems}
           direction={direction}
-          justify={justify}
+          justifyContent={justifyContent}
         >
           {[0, 1, 2].map((value) => (
             <Grid key={value} item>
@@ -92,14 +92,14 @@ export default function InteractiveGrid() {
             </Grid>
             <Grid item xs={12}>
               <FormControl component="fieldset">
-                <FormLabel>justify</FormLabel>
+                <FormLabel>justifyContent</FormLabel>
                 <RadioGroup
                   row
-                  name="justify"
-                  aria-label="justify"
-                  value={justify}
+                  name="justifyContent"
+                  aria-label="justifyContent"
+                  value={justifyContent}
                   onChange={(event) => {
-                    setJustify(event.target.value);
+                    setJustifyContent(event.target.value);
                   }}
                 >
                   <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />

diff --git a/docs/src/pages/components/grid/InteractiveGrid.tsx b/docs/src/pages/components/grid/InteractiveGrid.tsx
@@ -31,14 +31,14 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function InteractiveGrid() {
   const classes = useStyles();
   const [direction, setDirection] = React.useState<GridDirection>('row');
-  const [justify, setJustify] = React.useState<GridJustification>('center');
+  const [justifyContent, setJustifyContent] = React.useState<GridJustification>('center');
   const [alignItems, setAlignItems] = React.useState<GridItemsAlignment>('center');
 
   const jsx = `
 <Grid
   container
   direction="${direction}"
-  justify="${justify}"
+  justifyContent="${justifyContent}"
   alignItems="${alignItems}"
 >
 `;
@@ -52,7 +52,7 @@ export default function InteractiveGrid() {
           className={classes.demo}
           alignItems={alignItems}
           direction={direction}
-          justify={justify}
+          justifyContent={justifyContent}
         >
           {[0, 1, 2].map((value) => (
             <Grid key={value} item>
@@ -94,14 +94,16 @@ export default function InteractiveGrid() {
             </Grid>
             <Grid item xs={12}>
               <FormControl component="fieldset">
-                <FormLabel>justify</FormLabel>
+                <FormLabel>justifyContent</FormLabel>
                 <RadioGroup
                   row
-                  name="justify"
-                  aria-label="justify"
-                  value={justify}
+                  name="justifyContent"
+                  aria-label="justifyContent"
+                  value={justifyContent}
                   onChange={(event) => {
-                    setJustify((event.target as HTMLInputElement).value as GridJustification);
+                    setJustifyContent(
+                      (event.target as HTMLInputElement).value as GridJustification,
+                    );
                   }}
                 >
                   <FormControlLabel value="flex-start" control={<Radio />} label="flex-start" />

diff --git a/docs/src/pages/components/grid/SpacingGrid.js b/docs/src/pages/components/grid/SpacingGrid.js
@@ -31,7 +31,7 @@ export default function SpacingGrid() {
   return (
     <Grid container className={classes.root} spacing={2}>
       <Grid item xs={12}>
-        <Grid container justify="center" spacing={spacing}>
+        <Grid container justifyContent="center" spacing={spacing}>
           {[0, 1, 2].map((value) => (
             <Grid key={value} item>
               <Paper className={classes.paper} />

diff --git a/docs/src/pages/components/grid/SpacingGrid.tsx b/docs/src/pages/components/grid/SpacingGrid.tsx
@@ -33,7 +33,7 @@ export default function SpacingGrid() {
   return (
     <Grid container className={classes.root} spacing={2}>
       <Grid item xs={12}>
-        <Grid container justify="center" spacing={spacing}>
+        <Grid container justifyContent="center" spacing={spacing}>
           {[0, 1, 2].map((value) => (
             <Grid key={value} item>
               <Paper className={classes.paper} />

diff --git a/docs/src/pages/components/material-icons/SearchIcons.js b/docs/src/pages/components/material-icons/SearchIcons.js
@@ -221,12 +221,12 @@ let DialogDetails = (props) => {
           <DialogContent>
             <Grid container className={classes.container}>
               <Grid item xs={12} sm="auto">
-                <Grid container justify="center">
+                <Grid container justifyContent="center">
                   <selectedIcon.Icon className={classes.canvas} />
                 </Grid>
               </Grid>
               <Grid item xs>
-                <Grid container alignItems="flex-end" justify="center">
+                <Grid container alignItems="flex-end" justifyContent="center">
                   <Grid item>
                     <Tooltip title="fontSize small">
                       <selectedIcon.Icon className={classes.fontSize} fontSize="small" />
@@ -243,21 +243,20 @@ let DialogDetails = (props) => {
                     </Tooltip>
                   </Grid>
                 </Grid>
-                <Grid container justify="center">
-                  <selectedIcon.Icon className={clsx(classes.context, classes.contextPrimary)} />
+                <Grid container justifyContent="center">
                   <selectedIcon.Icon
                     className={clsx(classes.context, classes.contextPrimaryInverse)}
                   />
                 </Grid>
-                <Grid container justify="center">
+                <Grid container justifyContent="center">
                   <selectedIcon.Icon
                     className={clsx(classes.context, classes.contextTextPrimary)}
                   />
                   <selectedIcon.Icon
                     className={clsx(classes.context, classes.contextTextPrimaryInverse)}
                   />
                 </Grid>
-                <Grid container justify="center">
+                <Grid container justifyContent="center">
                   <selectedIcon.Icon
                     className={clsx(classes.context, classes.contextTextSecondary)}
                   />

diff --git a/docs/src/pages/components/pickers/MaterialUIPickers.js b/docs/src/pages/components/pickers/MaterialUIPickers.js
@@ -18,7 +18,7 @@ export default function MaterialUIPickers() {
 
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <Grid container justify="space-around">
+      <Grid container justifyContent="space-around">
         <KeyboardDatePicker
           disableToolbar
           variant="inline"

diff --git a/docs/src/pages/components/pickers/MaterialUIPickers.tsx b/docs/src/pages/components/pickers/MaterialUIPickers.tsx
@@ -20,7 +20,7 @@ export default function MaterialUIPickers() {
 
   return (
     <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <Grid container justify="space-around">
+      <Grid container justifyContent="space-around">
         <KeyboardDatePicker
           disableToolbar
           variant="inline"

diff --git a/docs/src/pages/components/popover/AnchorPlayground.js b/docs/src/pages/components/popover/AnchorPlayground.js
@@ -145,7 +145,7 @@ function AnchorPlayground(props) {
 
   return (
     <div>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item className={classes.buttonWrapper}>
           <Button ref={anchorRef} variant="contained" onClick={handleClickButton}>
             Open Popover

diff --git a/docs/src/pages/components/popper/PositionedPopper.js b/docs/src/pages/components/popper/PositionedPopper.js
@@ -39,14 +39,14 @@ export default function PositionedPopper() {
           </Fade>
         )}
       </Popper>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Button onClick={handleClick('top-start')}>top-start</Button>
           <Button onClick={handleClick('top')}>top</Button>
           <Button onClick={handleClick('top-end')}>top-end</Button>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item xs={6}>
           <Button onClick={handleClick('left-start')}>left-start</Button>
           <br />
@@ -66,7 +66,7 @@ export default function PositionedPopper() {
           </Grid>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Button onClick={handleClick('bottom-start')}>bottom-start</Button>
           <Button onClick={handleClick('bottom')}>bottom</Button>

diff --git a/docs/src/pages/components/popper/PositionedPopper.tsx b/docs/src/pages/components/popper/PositionedPopper.tsx
@@ -43,14 +43,14 @@ export default function PositionedPopper() {
           </Fade>
         )}
       </Popper>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Button onClick={handleClick('top-start')}>top-start</Button>
           <Button onClick={handleClick('top')}>top</Button>
           <Button onClick={handleClick('top-end')}>top-end</Button>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item xs={6}>
           <Button onClick={handleClick('left-start')}>left-start</Button>
           <br />
@@ -70,7 +70,7 @@ export default function PositionedPopper() {
           </Grid>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Button onClick={handleClick('bottom-start')}>bottom-start</Button>
           <Button onClick={handleClick('bottom')}>bottom</Button>

diff --git a/docs/src/pages/components/popper/ScrollPlayground.js b/docs/src/pages/components/popper/ScrollPlayground.js
@@ -156,7 +156,7 @@ export default function ScrollPlayground() {
           className={classes.scroll}
           container
           alignItems="center"
-          justify="center"
+          justifyContent="center"
           ref={centerScroll}
         >
           <div>

diff --git a/docs/src/pages/components/tooltips/PositionedTooltips.js b/docs/src/pages/components/tooltips/PositionedTooltips.js
@@ -15,7 +15,7 @@ export default function PositionedTooltips() {
 
   return (
     <div className={classes.root}>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip title="Add" placement="top-start">
             <Button>top-start</Button>
@@ -28,7 +28,7 @@ export default function PositionedTooltips() {
           </Tooltip>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item xs={6}>
           <Tooltip title="Add" placement="left-start">
             <Button>left-start</Button>
@@ -60,7 +60,7 @@ export default function PositionedTooltips() {
           </Grid>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip title="Add" placement="bottom-start">
             <Button>bottom-start</Button>

diff --git a/docs/src/pages/components/tooltips/PositionedTooltips.tsx b/docs/src/pages/components/tooltips/PositionedTooltips.tsx
@@ -15,7 +15,7 @@ export default function PositionedTooltips() {
 
   return (
     <div className={classes.root}>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip title="Add" placement="top-start">
             <Button>top-start</Button>
@@ -28,7 +28,7 @@ export default function PositionedTooltips() {
           </Tooltip>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item xs={6}>
           <Tooltip title="Add" placement="left-start">
             <Button>left-start</Button>
@@ -60,7 +60,7 @@ export default function PositionedTooltips() {
           </Grid>
         </Grid>
       </Grid>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip title="Add" placement="bottom-start">
             <Button>bottom-start</Button>

diff --git a/docs/src/pages/components/tooltips/TriggersTooltips.js b/docs/src/pages/components/tooltips/TriggersTooltips.js
@@ -17,7 +17,7 @@ export default function TriggersTooltips() {
 
   return (
     <div>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip disableFocusListener title="Add">
             <Button>Hover or touch</Button>

diff --git a/docs/src/pages/components/tooltips/TriggersTooltips.tsx b/docs/src/pages/components/tooltips/TriggersTooltips.tsx
@@ -17,7 +17,7 @@ export default function TriggersTooltips() {
 
   return (
     <div>
-      <Grid container justify="center">
+      <Grid container justifyContent="center">
         <Grid item>
           <Tooltip disableFocusListener title="Add">
             <Button>Hover or touch</Button>

diff --git a/docs/src/pages/components/transfer-list/SelectAllTransferList.js b/docs/src/pages/components/transfer-list/SelectAllTransferList.js
@@ -126,7 +126,13 @@ export default function TransferList() {
   );
 
   return (
-    <Grid container spacing={2} justify="center" alignItems="center" className={classes.root}>
+    <Grid
+      container
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      className={classes.root}
+    >
       <Grid item>{customList('Choices', left)}</Grid>
       <Grid item>
         <Grid container direction="column" alignItems="center">

diff --git a/docs/src/pages/components/transfer-list/SelectAllTransferList.tsx b/docs/src/pages/components/transfer-list/SelectAllTransferList.tsx
@@ -128,7 +128,13 @@ export default function TransferList() {
   );
 
   return (
-    <Grid container spacing={2} justify="center" alignItems="center" className={classes.root}>
+    <Grid
+      container
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      className={classes.root}
+    >
       <Grid item>{customList('Choices', left)}</Grid>
       <Grid item>
         <Grid container direction="column" alignItems="center">

diff --git a/docs/src/pages/components/transfer-list/TransferList.js b/docs/src/pages/components/transfer-list/TransferList.js
@@ -101,7 +101,13 @@ export default function TransferList() {
   );
 
   return (
-    <Grid container spacing={2} justify="center" alignItems="center" className={classes.root}>
+    <Grid
+      container
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      className={classes.root}
+    >
       <Grid item>{customList(left)}</Grid>
       <Grid item>
         <Grid container direction="column" alignItems="center">