Skip to content

Commit

Permalink
[material-ui][Grid] Deprecate wrap prop (#42363)
Browse files Browse the repository at this point in the history
  • Loading branch information
fedirjh authored May 24, 2024
1 parent e03f9cb commit a3fdc9f
Show file tree
Hide file tree
Showing 18 changed files with 176 additions and 10 deletions.
6 changes: 3 additions & 3 deletions docs/data/material/components/grid/AutoGridNoWrap.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function AutoGridNoWrap() {
p: 2,
}}
>
<Grid container wrap="nowrap" spacing={2}>
<Grid container flexWrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
</Grid>
Expand All @@ -43,7 +43,7 @@ export default function AutoGridNoWrap() {
p: 2,
}}
>
<Grid container wrap="nowrap" spacing={2}>
<Grid container flexWrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
</Grid>
Expand All @@ -59,7 +59,7 @@ export default function AutoGridNoWrap() {
p: 2,
}}
>
<Grid container wrap="nowrap" spacing={2}>
<Grid container flexWrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
</Grid>
Expand Down
6 changes: 3 additions & 3 deletions docs/data/material/components/grid/AutoGridNoWrap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function AutoGridNoWrap() {
p: 2,
}}
>
<Grid container wrap="nowrap" spacing={2}>
<Grid container flexWrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
</Grid>
Expand All @@ -43,7 +43,7 @@ export default function AutoGridNoWrap() {
p: 2,
}}
>
<Grid container wrap="nowrap" spacing={2}>
<Grid container flexWrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
</Grid>
Expand All @@ -59,7 +59,7 @@ export default function AutoGridNoWrap() {
p: 2,
}}
>
<Grid container wrap="nowrap" spacing={2}>
<Grid container flexWrap="nowrap" spacing={2}>
<Grid item>
<Avatar>W</Avatar>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/skeleton/YouTube.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function Media(props) {
const { loading = false } = props;

return (
<Grid container wrap="nowrap">
<Grid container flexWrap="nowrap">
{(loading ? Array.from(new Array(3)) : data).map((item, index) => (
<Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
{item ? (
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/skeleton/YouTube.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function Media(props: MediaProps) {
const { loading = false } = props;

return (
<Grid container wrap="nowrap">
<Grid container flexWrap="nowrap">
{(loading ? Array.from(new Array(3)) : data).map((item, index) => (
<Box key={index} sx={{ width: 210, marginRight: 0.5, my: 5 }}>
{item ? (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1053,6 +1053,25 @@ The ListItemSecondaryAction component was deprecated in favor of the `secondaryA
</ListItem>
```

## Grid

Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#grid-props) below to migrate the code as described in the following sections:

```bash
npx @mui/codemod@next deprecations/grid-props <path>
```

### wrap prop

The Grid's `wrap` prop was deprecated in favor of `flexWrap` MUI System prop:

```diff
<Grid
- wrap="nowrap"
+ flexWrap="nowrap"
/>;
```

## PaginationItem

Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#pagination-item-classes) below to migrate the code as described in the following sections:
Expand Down
4 changes: 3 additions & 1 deletion docs/pages/material-ui/api/grid.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,9 @@
"name": "enum",
"description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
},
"default": "'wrap'"
"default": "'wrap'",
"deprecated": true,
"deprecationInfo": "Use <code>flexWrap</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"xl": {
"type": {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/layouts/HeroContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export default function HeroContainer(props: HeroContainerProps) {
transition: '0.3s',
}}
>
<Grid container alignItems="center" wrap="nowrap" sx={{ height: '100%', mx: 'auto' }}>
<Grid container alignItems="center" flexWrap="nowrap" sx={{ height: '100%', mx: 'auto' }}>
<Grid item md={7} lg={6} sx={{ m: 'auto' }}>
{left}
</Grid>
Expand Down
13 changes: 13 additions & 0 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1009,6 +1009,19 @@ npx @mui/codemod@next deprecations/form-control-label-props <path>
npx @mui/codemod@next deprecations/list-item-props <path>
```

#### `grid-props`

```diff
<Grid
- wrap="nowrap"
+ flexWrap="nowrap"
/>
```

```bash
npx @mui/codemod@next deprecations/grid-props <path>
```

#### `pagination-item-classes`

JS transforms:
Expand Down
2 changes: 2 additions & 0 deletions packages/mui-codemod/src/deprecations/all/deprecations-all.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import transformStepLabelProps from '../step-label-props';
import transformBackdropProps from '../backdrop-props';
import transformStepConnectorClasses from '../step-connector-classes';
import transformCircularProgressClasses from '../circular-progress-classes';
import transformGridProps from '../grid-props';
import transformSpeedDialProps from '../speed-dial-props';
import transformTextFieldProps from '../text-field-props';

Expand All @@ -40,6 +41,7 @@ export default function deprecationsAll(file, api, options) {
file.source = transformCircularProgressClasses(file, api, options);
file.source = transformSpeedDialProps(file, api, options);
file.source = transformTextFieldProps(file, api, options);
file.source = transformGridProps(file, api, options);

return file.source;
}
42 changes: 42 additions & 0 deletions packages/mui-codemod/src/deprecations/grid-props/grid-props.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import findComponentJSX from '../../util/findComponentJSX';

/**
* @param {import('jscodeshift').FileInfo} file
* @param {import('jscodeshift').API} api
*/
export default function transformer(file, api, options) {
const j = api.jscodeshift;
const root = j(file.source);
const printOptions = options.printOptions;

const filterJSXAttr = (attr, name) => attr.type === 'JSXAttribute' && attr.name.name === name;

findComponentJSX(j, { root, componentName: 'Grid' }, (gridElement) => {
const attrs = gridElement.node.openingElement.attributes;
const wrapPropIndex = attrs.findIndex((attr) => filterJSXAttr(attr, 'wrap'));

if (wrapPropIndex !== -1) {
if (attrs.findIndex((attr) => filterJSXAttr(attr, 'flexWrap')) !== -1) {
attrs.splice(wrapPropIndex, 1);
} else {
attrs[wrapPropIndex].name.name = 'flexWrap';
}
}
});

root.find(j.ObjectProperty, { key: { name: 'MuiGrid' } }).forEach((path) => {
const defaultProps = path.value.value.properties.find(({ key }) => key.name === 'defaultProps');
const props = defaultProps.value.properties;
const wrapPropIndex = props.findIndex((prop) => prop.key.name === 'wrap');

if (wrapPropIndex !== -1) {
if (props.findIndex((prop) => prop.key.name === 'flexWrap') !== -1) {
props.splice(wrapPropIndex, 1);
} else {
props[wrapPropIndex].key.name = 'flexWrap';
}
}
});

return root.toSource(printOptions);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { describeJscodeshiftTransform } from '../../../testUtils';
import transform from './grid-props';

describe('@mui/codemod', () => {
describe('deprecations', () => {
describeJscodeshiftTransform({
transform,
transformName: 'grid-props',
dirname: __dirname,
testCases: [
{ actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
{ actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
],
});
});
});
1 change: 1 addition & 0 deletions packages/mui-codemod/src/deprecations/grid-props/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './grid-props';
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Grid from '@mui/material/Grid';
import { Grid as MyGrid } from '@mui/material';

<Grid wrap="wrap-reverse" />;
<MyGrid wrap="wrap-reverse" />;

<Grid wrap="wrap-reverse" flexWrap="wrap" />;
<MyGrid wrap="wrap-reverse" flexWrap="wrap" />;

// should skip non MUI components
<NonMuiGrid wrap="wrap-reverse" />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Grid from '@mui/material/Grid';
import { Grid as MyGrid } from '@mui/material';

<Grid flexWrap="wrap-reverse" />;
<MyGrid flexWrap="wrap-reverse" />;

<Grid flexWrap="wrap" />;
<MyGrid flexWrap="wrap" />;

// should skip non MUI components
<NonMuiGrid wrap="wrap-reverse" />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
fn({
MuiGrid: {
defaultProps: {
wrap: 'wrap'
},
},
});

fn({
MuiGrid: {
defaultProps: {
wrap: 'wrap-reverse'
},
},
});

fn({
MuiGrid: {
defaultProps: {
wrap: 'wrap-reverse',
flexWrap: 'wrap'
},
},
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
fn({
MuiGrid: {
defaultProps: {
flexWrap: 'wrap'
},
},
});

fn({
MuiGrid: {
defaultProps: {
flexWrap: 'wrap-reverse'
},
},
});

fn({
MuiGrid: {
defaultProps: {
flexWrap: 'wrap'
},
},
});
1 change: 1 addition & 0 deletions packages/mui-material/src/Grid/Grid.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ export interface GridOwnProps extends SystemProps<Theme>, Breakpoints {
* Defines the `flex-wrap` style property.
* It's applied for all screen sizes.
* @default 'wrap'
* @deprecated Use `flexWrap` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
wrap?: GridWrap;
/**
Expand Down
1 change: 1 addition & 0 deletions packages/mui-material/src/Grid/Grid.js
Original file line number Diff line number Diff line change
Expand Up @@ -598,6 +598,7 @@ Grid.propTypes /* remove-proptypes */ = {
* Defines the `flex-wrap` style property.
* It's applied for all screen sizes.
* @default 'wrap'
* @deprecated Use `flexWrap` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
/**
Expand Down

0 comments on commit a3fdc9f

Please sign in to comment.