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.

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

[material-ui][PaginationItem] Add codemod for deprecated classes #41145

Merged
merged 20 commits into from
Feb 20, 2024
Merged
Show file tree
Hide file tree
Changes from 17 commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -164,3 +164,111 @@ The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or an
+ sx={{ opacity : "0.6" }}
/>
```

## 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:

```bash
npx @mui/codemod@latest deprecations/pagination-item-classes <path>
```

### .MuiPaginationItem-textPrimary
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should summarize all PaginationItem's composed classes deprecations into a single section. Otherwise, this file will get huge 😅. We can do:

### Composed CSS classes

The following CSS classes were deprecated:

- `.MuiPaginationItem-textPrimary` deprecated in favor of `.MuiPaginationItem-text.MuiPaginationItem-colorPrimary`
- `.MuiPaginationItem-outlinedPrimary` deprecated in favor of `.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary`
- ...

Here's an example on how to migrate:

(Example diffs for `.MuiPaginationItem-textPrimary`)

Copy link
Contributor Author

@sai6855 sai6855 Feb 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would remove the list to be more concise:

### Composed CSS classes

The CSS classes that composed the `variant` and `color` prop values were removed. Here's how to migrate:

(... diffs)


The PaginationItem's `.MuiPaginationItem-textPrimary` class was deprecated in favor of the `.MuiPaginationItem-text` and `.MuiPaginationItem-colorPrimary` classes.

```diff
-.MuiPaginationItem-textPrimary
+.MuiPaginationItem-text.MuiPaginationItem-colorPrimary
/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
/>

```

```diff
import { paginationItemClasses } from '@mui/material/PaginationItem';

MuiPaginationItem: {
styleOverrides: {
root: {
- [`&.${paginationItemClasses.textPrimary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
},
},
},
```

### .MuiPaginationItem-outlinedPrimary

The PaginationItem's `.MuiPaginationItem-outlinedPrimary` class was deprecated in favor of the `.MuiPaginationItem-outlined` and `.MuiPaginationItem-colorPrimary` classes.

```diff
-.MuiPaginationItem-outlinedPrimary
+.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary
/>
```

```diff
import { paginationItemClasses } from '@mui/material/PaginationItem';

MuiPaginationItem: {
styleOverrides: {
root: {
- [`&.${paginationItemClasses.outlinedPrimary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
},
},
},
```

### .MuiPaginationItem-textSecondary

The PaginationItem's `.MuiPaginationItem-textSecondary` class was deprecated in favor of the `.MuiPaginationItem-text` and `.MuiPaginationItem-colorSecondary` classes.

```diff
-.MuiPaginationItem-textSecondary
+.MuiPaginationItem-text.MuiPaginationItem-colorSecondary
/>
```

```diff
import { paginationItemClasses } from '@mui/material/PaginationItem';

MuiPaginationItem: {
styleOverrides: {
root: {
- [`&.${paginationItemClasses.textSecondary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
},
},
},
```

### .MuiPaginationItem-outlinedSecondary

The PaginationItem's `.MuiPaginationItem-outlinedSecondary` class was deprecated in favor of the `.MuiPaginationItem-outlined` and `.MuiPaginationItem-colorSecondary` classes.

```diff
-.MuiPaginationItem-outlinedSecondary
+.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary
/>
```

```diff
import { paginationItemClasses } from '@mui/material/PaginationItem';

MuiPaginationItem: {
styleOverrides: {
root: {
- [`&.${paginationItemClasses.outlinedSecondary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
},
},
},
```
Original file line number Diff line number Diff line change
Expand Up @@ -66,13 +66,13 @@
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-outlined\">.MuiPaginationItem-outlined</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary\">.MuiPaginationItem-colorPrimary</a> classes instead."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-outlined\">.MuiPaginationItem-outlined</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary\">.MuiPaginationItem-colorPrimary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
},
"outlinedSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-outlined\">.MuiPaginationItem-outlined</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary\">.MuiPaginationItem-colorSecondary</a> classes instead."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-outlined\">.MuiPaginationItem-outlined</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary\">.MuiPaginationItem-colorSecondary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
},
"page": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
Expand Down Expand Up @@ -114,13 +114,13 @@
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"text\"</code> and <code>color=\"primary\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-text\">.MuiPaginationItem-text</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary\">.MuiPaginationItem-colorPrimary</a> classes instead."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-text\">.MuiPaginationItem-text</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary\">.MuiPaginationItem-colorPrimary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
},
"textSecondary": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
"conditions": "<code>variant=\"text\"</code> and <code>color=\"secondary\"</code>",
"deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-text\">.MuiPaginationItem-text</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary\">.MuiPaginationItem-colorSecondary</a> classes instead."
"deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-text\">.MuiPaginationItem-text</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary\">.MuiPaginationItem-colorSecondary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
}
}
}
65 changes: 65 additions & 0 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,71 @@ npx @mui/codemod@latest deprecations/alert-props <path>
npx @mui/codemod@latest deprecations/divider-props <path>
```

#### `pagination-item-classes`

JS transforms:

```diff
import { paginationItemClasses } from '@mui/material/PaginationItem';

MuiPaginationItem: {
styleOverrides: {
root: {
- [`&.${paginationItemClasses.textPrimary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
- [`&.${paginationItemClasses.textSecondary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
- [`&.${paginationItemClasses.outlinedPrimary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
- [`&.${paginationItemClasses.outlinedSecondary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
- '&.MuiPaginationItem-textPrimary': {
+ '&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary': {
color: 'red',
},
- '&.MuiPaginationItem-textSecondary': {
+ '&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary': {
color: 'red',
},
- '&.MuiPaginationItem-outlinedPrimary': {
+ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary': {
color: 'red',
},
- '&.MuiPaginationItem-outlinedSecondary': {
+ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary': {
color: 'red',
},
},
},
},
```

CSS transforms:

```diff
-.MuiPaginationItem-textPrimary
+.MuiPaginationItem-text.MuiPaginationItem-primary
-.MuiPaginationItem-textSecondary
+.MuiPaginationItem-text.MuiPaginationItem-secondary
-.MuiPaginationItem-outlinedPrimary
+.MuiPaginationItem-outlined.MuiPaginationItem-primary
-.MuiPaginationItem-outlinedSecondary
+.MuiPaginationItem-outlined.MuiPaginationItem-secondary
/>
```

```bash
npx @mui/codemod@latest deprecations/pagination-item-classes <path>
```

### v5.0.0

#### `base-use-named-exports`
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 @@ -2,6 +2,7 @@ import transformAccordionProps from '../accordion-props';
import transformAvatarProps from '../avatar-props';
import transformDividerProps from '../divider-props';
import transformAccordionClasses from '../accordion-summary-classes';
import transformPaginationItemClasses from '../pagination-item-classes';

/**
* @param {import('jscodeshift').FileInfo} file
Expand All @@ -12,6 +13,7 @@ export default function deprecationsAll(file, api, options) {
file.source = transformAvatarProps(file, api, options);
file.source = transformDividerProps(file, api, options);
file.source = transformAccordionClasses(file, api, options);
file.source = transformPaginationItemClasses(file, api, options);

return file.source;
}
5 changes: 4 additions & 1 deletion packages/mui-codemod/src/deprecations/all/postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
const {
plugin: accordionSummaryClassesPlugin,
} = require('../accordion-summary-classes/postcss-plugin');
const {
plugin: paginationItemClassesPlugin,
} = require('../pagination-item-classes/postcss-plugin');

module.exports = {
plugins: [accordionSummaryClassesPlugin],
plugins: [accordionSummaryClassesPlugin, paginationItemClassesPlugin],
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './pagination-item-classes';
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { classes } from './postcss-plugin';

/**
* @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;
classes.forEach(({ deprecatedClass, replacementSelector }) => {
root
.find(j.ImportDeclaration)
.filter((path) => path.node.source.value.match(/^@mui\/material\/PaginationItem$/))
.forEach((path) => {
path.node.specifiers.forEach((specifier) => {
if (
specifier.type === 'ImportSpecifier' &&
specifier.imported.name === 'paginationItemClasses'
) {
const deprecatedAtomicClass = deprecatedClass.replace('.MuiPaginationItem-', '');
root
.find(j.MemberExpression, {
object: { name: specifier.local.name },
property: { name: deprecatedAtomicClass },
})
.forEach((memberExpression) => {
const parent = memberExpression.parentPath.parentPath.value;
if (parent.type === j.TemplateLiteral.name) {
const memberExpressionIndex = parent.expressions.findIndex(
(expression) => expression === memberExpression.value,
);
const precedingTemplateElement = parent.quasis[memberExpressionIndex];
const atomicClasses = replacementSelector
.replaceAll('MuiPaginationItem-', '')
.replaceAll('&.', '')
.split('.')
.filter(Boolean);

if (precedingTemplateElement.value.raw.endsWith('&.')) {
parent.expressions.splice(
memberExpressionIndex,
1,
j.memberExpression(
memberExpression.value.object,
j.identifier(atomicClasses[0]),
),
j.memberExpression(
memberExpression.value.object,
j.identifier(atomicClasses[1]),
),
);
parent.quasis.splice(
memberExpressionIndex,
1,
j.templateElement(
{
raw: precedingTemplateElement.value.raw,
cooked: precedingTemplateElement.value.cooked,
},
false,
),
j.templateElement({ raw: '.', cooked: '.' }, false),
);
}
}
});
}
});
});

const selectorRegex = new RegExp(`^&${deprecatedClass}`);

root
.find(
j.Literal,
(literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex),
)
.forEach((path) => {
path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`)));
});
});
return root.toSource(printOptions);
}
Loading
Loading