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

[Grid] Add deprecation for justify prop rename #24078

Merged
merged 4 commits into from
Dec 22, 2020
Merged

[Grid] Add deprecation for justify prop rename #24078

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
674d5a4
[Grid] Rename justify prop to justifyContent (#21845)
mnajdova Jul 21, 2020
2abb6e0
add deprecation
oliviertassinari Dec 20, 2020
5bf7047
Retain the previous test case
oliviertassinari Dec 22, 2020
9370c6f
Merge branch 'v4-deprecations' into grid-prop-change
oliviertassinari Dec 22, 2020
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
13 changes: 7 additions & 6 deletions docs/pages/api-docs/grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down Expand Up @@ -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> |
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/chips/ChipsPlayground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
16 changes: 8 additions & 8 deletions docs/src/pages/components/grid/InteractiveGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
>
`;
Expand All @@ -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>
Expand Down Expand Up @@ -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" />
Expand Down
18 changes: 10 additions & 8 deletions docs/src/pages/components/grid/InteractiveGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}"
>
`;
Expand All @@ -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>
Expand Down Expand Up @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/grid/SpacingGrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/grid/SpacingGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
11 changes: 5 additions & 6 deletions docs/src/pages/components/material-icons/SearchIcons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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)}
/>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/pickers/MaterialUIPickers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/pickers/MaterialUIPickers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/popover/AnchorPlayground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/popper/PositionedPopper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/popper/PositionedPopper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/popper/ScrollPlayground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export default function ScrollPlayground() {
className={classes.scroll}
container
alignItems="center"
justify="center"
justifyContent="center"
ref={centerScroll}
>
<div>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/tooltips/PositionedTooltips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/tooltips/PositionedTooltips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/tooltips/TriggersTooltips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/tooltips/TriggersTooltips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion docs/src/pages/components/transfer-list/SelectAllTransferList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 7 additions & 1 deletion docs/src/pages/components/transfer-list/SelectAllTransferList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 7 additions & 1 deletion docs/src/pages/components/transfer-list/TransferList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading