-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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
DiegoAndai
merged 20 commits into
mui:master
from
sai6855:pagination-item-codemode-class
Feb 20, 2024
Merged
Changes from 17 commits
Commits
Show all changes
20 commits
Select commit
Hold shift + click to select a range
1fb7d8a
initial setup
sai6855 8304c95
Refactor pagination item classes
sai6855 bc9f24e
Refactor pagination item classes
sai6855 d70a399
Refactor pagination item classes
sai6855 a04bfb1
Refactor pagination item classes
sai6855 20f4ce5
Refactor pagination item classes
sai6855 15975f4
Refactor pagination item classes
sai6855 8d75caf
add docs
sai6855 56e2bee
docs:api
sai6855 c4c317e
fix imports
sai6855 7d3e87f
fix test
sai6855 b7972fd
fix tests
sai6855 8a635b9
fix tests
sai6855 f0eecba
fix selector
sai6855 13c0dfe
fix selector
sai6855 3acdfd0
refactor
sai6855 5304834
update readme
sai6855 e9656ce
format migrating doc
sai6855 499e21d
update migration guide
sai6855 1969833
update migration guide
sai6855 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||
---|---|---|---|---|
|
@@ -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 | ||||
|
||||
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 | ||||
/> | ||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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', | ||||
}, | ||||
}, | ||||
}, | ||||
}, | ||||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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], | ||
}; |
1 change: 1 addition & 0 deletions
1
packages/mui-codemod/src/deprecations/pagination-item-classes/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from './pagination-item-classes'; |
84 changes: 84 additions & 0 deletions
84
packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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:There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what do you think of this format https://deploy-preview-41145--material-ui.netlify.app/material-ui/migration/migrating-from-deprecated-apis/#paginationitem
There was a problem hiding this comment.
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: