Skip to content

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

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

Merged
DiegoAndai merged 20 commits into from
Feb 20, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
1fb7d8a
initial setup
sai6855 Feb 17, 2024
8304c95
Refactor pagination item classes
sai6855 Feb 17, 2024
bc9f24e
Refactor pagination item classes
sai6855 Feb 17, 2024
d70a399
Refactor pagination item classes
sai6855 Feb 17, 2024
a04bfb1
Refactor pagination item classes
sai6855 Feb 17, 2024
20f4ce5
Refactor pagination item classes
sai6855 Feb 17, 2024
15975f4
Refactor pagination item classes
sai6855 Feb 17, 2024
8d75caf
add docs
sai6855 Feb 17, 2024
56e2bee
docs:api
sai6855 Feb 17, 2024
c4c317e
fix imports
sai6855 Feb 17, 2024
7d3e87f
fix test
sai6855 Feb 17, 2024
b7972fd
fix tests
sai6855 Feb 17, 2024
8a635b9
fix tests
sai6855 Feb 17, 2024
f0eecba
fix selector
sai6855 Feb 18, 2024
13c0dfe
fix selector
sai6855 Feb 18, 2024
3acdfd0
refactor
sai6855 Feb 18, 2024
5304834
update readme
sai6855 Feb 18, 2024
e9656ce
format migrating doc
sai6855 Feb 20, 2024
499e21d
update migration guide
sai6855 Feb 20, 2024
1969833
update migration guide
sai6855 Feb 20, 2024
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
Prev Previous commit
Next Next commit
update readme
  • Loading branch information
@sai6855
sai6855 committed Feb 18, 2024
commit 53048344078708faa0867985c3d82964bcc8c727
24 changes: 12 additions & 12 deletions ...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,11 +175,11 @@ npx @mui/codemod@latest deprecations/pagination-item-classes <path>

### .MuiPaginationItem-textPrimary
Copy link
Member

@DiegoAndai DiegoAndai Feb 19, 2024

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
Member Author

@sai6855 sai6855 Feb 20, 2024 •
edited
Loading

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

Copy link
Member

@DiegoAndai DiegoAndai Feb 20, 2024

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-primary` classes.
The PaginationItem's `.MuiPaginationItem-textPrimary` class was deprecated in favor of the `.MuiPaginationItem-text` and `.MuiPaginationItem-colorPrimary` classes.

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

@DiegoAndai DiegoAndai Feb 20, 2024

Choose a reason for hiding this comment

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

Suggested change
/>

```

Expand All @@ -190,7 +190,7 @@ The PaginationItem's `.MuiPaginationItem-textPrimary` class was deprecated in fa
styleOverrides: {
root: {
- [`&.${paginationItemClasses.textPrimary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.primary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
},
Expand All @@ -200,11 +200,11 @@ The PaginationItem's `.MuiPaginationItem-textPrimary` class was deprecated in fa

### .MuiPaginationItem-outlinedPrimary

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

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

Expand All @@ -215,7 +215,7 @@ The PaginationItem's `.MuiPaginationItem-outlinedPrimary` class was deprecated i
styleOverrides: {
root: {
- [`&.${paginationItemClasses.outlinedPrimary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
},
Expand All @@ -225,11 +225,11 @@ The PaginationItem's `.MuiPaginationItem-outlinedPrimary` class was deprecated i

### .MuiPaginationItem-textSecondary

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

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

Expand All @@ -240,7 +240,7 @@ The PaginationItem's `.MuiPaginationItem-textSecondary` class was deprecated in
styleOverrides: {
root: {
- [`&.${paginationItemClasses.textSecondary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
},
Expand All @@ -250,11 +250,11 @@ The PaginationItem's `.MuiPaginationItem-textSecondary` class was deprecated in

### .MuiPaginationItem-outlinedSecondary

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

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

Expand All @@ -265,7 +265,7 @@ The PaginationItem's `.MuiPaginationItem-outlinedSecondary` class was deprecated
styleOverrides: {
root: {
- [`&.${paginationItemClasses.outlinedSecondary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
},
Expand Down
16 changes: 8 additions & 8 deletions packages/mui-codemod/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,35 +202,35 @@ JS transforms:
styleOverrides: {
root: {
- [`&.${paginationItemClasses.textPrimary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.primary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
- [`&.${paginationItemClasses.textSecondary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: {
+ [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
- [`&.${paginationItemClasses.outlinedPrimary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: {
color: 'red',
},
- [`&.${paginationItemClasses.outlinedSecondary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: {
+ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: {
color: 'red',
},
- '&.MuiPaginationItem-textPrimary': {
+ '&.MuiPaginationItem-text.MuiPaginationItem-primary': {
+ '&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary': {
color: 'red',
},
- '&.MuiPaginationItem-textSecondary': {
+ '&.MuiPaginationItem-text.MuiPaginationItem-secondary': {
+ '&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary': {
color: 'red',
},
- '&.MuiPaginationItem-outlinedPrimary': {
+ '&.MuiPaginationItem-outlined.MuiPaginationItem-primary': {
+ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary': {
color: 'red',
},
- '&.MuiPaginationItem-outlinedSecondary': {
+ '&.MuiPaginationItem-outlined.MuiPaginationItem-secondary': {
+ '&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary': {
color: 'red',
},
},
Expand Down