-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
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][Tab] Deprecate iconWrapper class for icon class #42647
Merged
Merged
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
c742b20
Deprecate iconWrapper class for icon class
sai6855 789644e
docs:api
sai6855 2087f02
Merge branch 'next' into deprecate-iconwrapper
sai6855 0e0c914
codemod setup
sai6855 9760073
set up codemod
sai6855 6c4cd00
add read me
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 | ||||
---|---|---|---|---|---|---|
|
@@ -1465,6 +1465,39 @@ Here's how to migrate: | |||||
}, | ||||||
``` | ||||||
|
||||||
## Tab | ||||||
|
||||||
Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#tab-classes) below to migrate the code as described in the following sections: | ||||||
|
||||||
```bash | ||||||
npx @mui/codemod@next deprecations/tab-classes <path> | ||||||
``` | ||||||
|
||||||
### Composed CSS classes | ||||||
|
||||||
The `iconWrapper` class is removed. | ||||||
|
||||||
Here's how to migrate: | ||||||
|
||||||
```diff | ||||||
- .MuiTab-iconWrapper | ||||||
+ .MuiTab-icon | ||||||
``` | ||||||
|
||||||
```diff | ||||||
import { tabClasses } from '@mui/material/Tab'; | ||||||
|
||||||
MuiTab: { | ||||||
styleOverrides: { | ||||||
root: { | ||||||
- [`& .${tabClasses.iconWrapper}`]: { | ||||||
+ [`& .${tabClasses.icon}`]: { | ||||||
color: 'red', | ||||||
}, | ||||||
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
Moved to #42711 |
||||||
}, | ||||||
}, | ||||||
``` | ||||||
|
||||||
## TableSortLabel | ||||||
|
||||||
Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#table-sort-label-classes) below to migrate the code as described in the following sections: | ||||||
|
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
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 |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from './tab-classes'; |
29 changes: 29 additions & 0 deletions
29
packages/mui-codemod/src/deprecations/tab-classes/postcss-plugin.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,29 @@ | ||
const classes = [ | ||
{ | ||
deprecatedClass: ' .MuiTab-iconWrapper', | ||
replacementSelector: ' .MuiTab-icon', | ||
}, | ||
]; | ||
|
||
const plugin = () => { | ||
return { | ||
postcssPlugin: `Replace deprecated Tab classes with new classes`, | ||
Rule(rule) { | ||
const { selector } = rule; | ||
|
||
classes.forEach(({ deprecatedClass, replacementSelector }) => { | ||
const selectorRegex = new RegExp(`${deprecatedClass}$`); | ||
|
||
if (selector.match(selectorRegex)) { | ||
rule.selector = selector.replace(selectorRegex, replacementSelector); | ||
} | ||
}); | ||
}, | ||
}; | ||
}; | ||
plugin.postcss = true; | ||
|
||
module.exports = { | ||
plugin, | ||
classes, | ||
}; |
5 changes: 5 additions & 0 deletions
5
packages/mui-codemod/src/deprecations/tab-classes/postcss.config.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,5 @@ | ||
const { plugin } = require('./postcss-plugin'); | ||
|
||
module.exports = { | ||
plugins: [plugin], | ||
}; |
80 changes: 80 additions & 0 deletions
80
packages/mui-codemod/src/deprecations/tab-classes/tab-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,80 @@ | ||
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 }) => { | ||
const replacementSelectorPrefix = '&'; | ||
root | ||
.find(j.ImportDeclaration) | ||
.filter((path) => path.node.source.value.match(/^@mui\/material\/Tab$/)) | ||
.forEach((path) => { | ||
path.node.specifiers.forEach((specifier) => { | ||
if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'tabClasses') { | ||
const deprecatedAtomicClass = deprecatedClass.replace( | ||
`${deprecatedClass.split('-')[0]}-`, | ||
'', | ||
); | ||
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 = ['icon']; | ||
|
||
if ( | ||
precedingTemplateElement.value.raw.endsWith( | ||
deprecatedClass.startsWith(' ') | ||
? `${replacementSelectorPrefix} .` | ||
: `${replacementSelectorPrefix}.`, | ||
) | ||
) { | ||
const atomicClassesArgs = [ | ||
memberExpressionIndex, | ||
1, | ||
...atomicClasses.map((atomicClass) => | ||
j.memberExpression( | ||
memberExpression.value.object, | ||
j.identifier(atomicClass), | ||
), | ||
), | ||
]; | ||
parent.expressions.splice(...atomicClassesArgs); | ||
} | ||
} | ||
}); | ||
} | ||
}); | ||
}); | ||
|
||
const selectorRegex = new RegExp(`${replacementSelectorPrefix}${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, | ||
`${replacementSelectorPrefix}${replacementSelector}`, | ||
), | ||
), | ||
); | ||
}); | ||
}); | ||
return root.toSource(printOptions); | ||
} |
78 changes: 78 additions & 0 deletions
78
packages/mui-codemod/src/deprecations/tab-classes/tab-classes.test.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,78 @@ | ||
import path from 'path'; | ||
import { expect } from 'chai'; | ||
import postcss from 'postcss'; | ||
import { jscodeshift } from '../../../testUtils'; | ||
import jsTransform from './tab-classes'; | ||
import { plugin as postcssPlugin } from './postcss-plugin'; | ||
import readFile from '../../util/readFile'; | ||
|
||
function read(fileName) { | ||
return readFile(path.join(__dirname, fileName)); | ||
} | ||
|
||
const postcssProcessor = postcss([postcssPlugin]); | ||
|
||
describe('@mui/codemod', () => { | ||
describe('deprecations', () => { | ||
describe('toggle-button-group-classes', () => { | ||
describe('js-transform', () => { | ||
it('transforms props as needed', () => { | ||
const actual = jsTransform( | ||
{ source: read('./test-cases/actual.js') }, | ||
{ jscodeshift }, | ||
{ printOptions: { quote: 'double', trailingComma: true } }, | ||
); | ||
|
||
const expected = read('./test-cases/expected.js'); | ||
expect(actual).to.equal(expected, 'The transformed version should be correct'); | ||
}); | ||
|
||
it('should be idempotent', () => { | ||
const actual = jsTransform( | ||
{ source: read('./test-cases/expected.js') }, | ||
{ jscodeshift }, | ||
{}, | ||
); | ||
|
||
const expected = read('./test-cases/expected.js'); | ||
expect(actual).to.equal(expected, 'The transformed version should be correct'); | ||
}); | ||
}); | ||
|
||
describe('css-transform', () => { | ||
it('transforms classes as needed', async () => { | ||
const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { | ||
from: undefined, | ||
}); | ||
|
||
const expected = read('./test-cases/expected.css'); | ||
expect(actual.css).to.equal(expected, 'The transformed version should be correct'); | ||
}); | ||
|
||
it('should be idempotent', async () => { | ||
const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { | ||
from: undefined, | ||
}); | ||
|
||
const expected = read('./test-cases/expected.css'); | ||
expect(actual.css).to.equal(expected, 'The transformed version should be correct'); | ||
}); | ||
}); | ||
|
||
describe('test-cases', () => { | ||
it('should not be the same', () => { | ||
const actualJS = read('./test-cases/actual.js'); | ||
const expectedJS = read('./test-cases/expected.js'); | ||
expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); | ||
|
||
const actualCSS = read('./test-cases/actual.css'); | ||
const expectedCSS = read('./test-cases/expected.css'); | ||
expect(actualCSS).not.to.equal( | ||
expectedCSS, | ||
'The actual and expected should be different', | ||
); | ||
}); | ||
}); | ||
}); | ||
}); | ||
}); |
4 changes: 4 additions & 0 deletions
4
packages/mui-codemod/src/deprecations/tab-classes/test-cases/actual.css
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,4 @@ | ||
.MuiTab-root .MuiTab-iconWrapper { | ||
color: red; | ||
} | ||
|
4 changes: 4 additions & 0 deletions
4
packages/mui-codemod/src/deprecations/tab-classes/test-cases/actual.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,4 @@ | ||
import { tabClasses } from '@mui/material/Tab'; | ||
|
||
('& .MuiTab-iconWrapper'); | ||
`& .${tabClasses.iconWrapper}`; |
3 changes: 3 additions & 0 deletions
3
packages/mui-codemod/src/deprecations/tab-classes/test-cases/expected.css
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,3 @@ | ||
.MuiTab-root .MuiTab-icon { | ||
color: red; | ||
} |
4 changes: 4 additions & 0 deletions
4
packages/mui-codemod/src/deprecations/tab-classes/test-cases/expected.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,4 @@ | ||
import { tabClasses } from '@mui/material/Tab'; | ||
|
||
("& .MuiTab-icon"); | ||
`& .${tabClasses.icon}`; |
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.
Moved to #42711