From 1fb7d8ac9e43a2906a27a486d80920b2258afa4e Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 16:09:30 +0530 Subject: [PATCH 01/20] initial setup --- .../pagination-item-classes/index.js | 1 + .../pagination-item-classes.js | 70 +++++++++++++++++++ .../pagination-item-classes.test.js | 0 .../pagination-item-classes/postcss-plugin.js | 0 .../pagination-item-classes/postcss.config.js | 0 .../test-cases/actual.css | 0 .../test-cases/actual.js | 57 +++++++++++++++ .../test-cases/expected.css | 0 .../test-cases/expected.js | 0 9 files changed, 128 insertions(+) create mode 100644 packages/mui-codemod/src/deprecations/pagination-item-classes/index.js create mode 100644 packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js create mode 100644 packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js create mode 100644 packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js create mode 100644 packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js create mode 100644 packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css create mode 100644 packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css create mode 100644 packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/index.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/index.js new file mode 100644 index 00000000000000..9200e42765f6b8 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/index.js @@ -0,0 +1 @@ +export { default } from './pagination-item-classes'; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js new file mode 100644 index 00000000000000..eacbd725697216 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -0,0 +1,70 @@ +import { deprecatedClass, replacementSelector } 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; + + 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' + ) { + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: 'textPrimary' }, + }) + .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]; + if (precedingTemplateElement.value.raw.endsWith(' .')) { + parent.expressions.splice( + memberExpressionIndex, + 1, + j.memberExpression(memberExpression.value.object, j.identifier('text')), + j.memberExpression(memberExpression.value.object, j.identifier('primary')), + ); + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + 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); +} diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js new file mode 100644 index 00000000000000..52fa2f84009b39 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js @@ -0,0 +1,57 @@ +import { paginationItemClasses } from '@mui/material/PaginationItem'; + +fn({ + PaginationItem: { + styleOverrides: { + root: { + '& .MuiPaginationItem-textPrimary': { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + PaginationItem: { + styleOverrides: { + root: { + [`& .${paginationItemClasses.textPrimary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + '& .MuiPaginationItem-textPrimary': { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`& .${paginationItemClasses.textPrimary}`]: { + color: 'red', + }, + }; +}); + +; + +; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js new file mode 100644 index 00000000000000..e69de29bb2d1d6 From 8304c9539eb9a6a740df88ef2c650b329fdcd08e Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 16:10:34 +0530 Subject: [PATCH 02/20] Refactor pagination item classes --- .../deprecations/pagination-item-classes/test-cases/actual.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js index 52fa2f84009b39..c0f98038db910f 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js @@ -1,7 +1,7 @@ import { paginationItemClasses } from '@mui/material/PaginationItem'; fn({ - PaginationItem: { + MuiPaginationItem: { styleOverrides: { root: { '& .MuiPaginationItem-textPrimary': { @@ -13,7 +13,7 @@ fn({ }); fn({ - PaginationItem: { + MuiPaginationItem: { styleOverrides: { root: { [`& .${paginationItemClasses.textPrimary}`]: { From bc9f24e32eb62f47d89dd04c0f8d083c0e43825b Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 16:56:12 +0530 Subject: [PATCH 03/20] Refactor pagination item classes --- .../pagination-item-classes/pagination-item-classes.js | 7 ++++--- .../deprecations/pagination-item-classes/postcss.config.js | 5 +++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js index eacbd725697216..f5ee92e2eed61f 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -1,5 +1,3 @@ -import { deprecatedClass, replacementSelector } from './postcss-plugin'; - /** * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api @@ -56,6 +54,9 @@ export default function transformer(file, api, options) { }); }); + const deprecatedClass = '.MuiPaginationItem-textPrimary'; + const replacementSelector = '.MuiPaginationItem-text.MuiPaginationItem-primary'; + const selectorRegex = new RegExp(`^& ${deprecatedClass}`); root .find( @@ -63,7 +64,7 @@ export default function transformer(file, api, options) { (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), ) .forEach((path) => { - path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`))); + path.replace(j.literal(path.value.value.replace(selectorRegex, `& ${replacementSelector}`))); }); return root.toSource(printOptions); diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js index e69de29bb2d1d6..23bebc1125be6e 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; From d70a399f3097cf5b8ea1d3e0aa542007d87ed1c5 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 17:10:59 +0530 Subject: [PATCH 04/20] Refactor pagination item classes --- .../pagination-item-classes/pagination-item-classes.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js index f5ee92e2eed61f..dd86076299c448 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -40,12 +40,12 @@ export default function transformer(file, api, options) { 1, j.templateElement( { - raw: precedingTemplateElement.value.raw.replace(' ', ''), - cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, }, false, ), - j.templateElement({ raw: ' .', cooked: ' .' }, false), + j.templateElement({ raw: '.', cooked: '.' }, false), ); } } From a04bfb117267ef2b24da2658feb1677dd86dd115 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 17:24:02 +0530 Subject: [PATCH 05/20] Refactor pagination item classes --- .../pagination-item-classes.js | 143 +++++++++++------- 1 file changed, 86 insertions(+), 57 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js index dd86076299c448..4d0ff8fa398e37 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -3,69 +3,98 @@ * @param {import('jscodeshift').API} api */ export default function transformer(file, api, options) { + const classes = [ + { + deprecatedClass: '.MuiPaginationItem-textPrimary', + replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-primary', + }, + { + deprecatedClass: '.MuiPaginationItem-textSecondary', + replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-secondary', + }, + { + deprecatedClass: '.MuiPaginationItem-outlinedPrimary', + replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-primary', + }, + { + deprecatedClass: '.MuiPaginationItem-outlinedSecondary', + replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-secondary', + }, + ]; + const j = api.jscodeshift; const root = j(file.source); const printOptions = options.printOptions; - - 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' - ) { - root - .find(j.MemberExpression, { - object: { name: specifier.local.name }, - property: { name: 'textPrimary' }, - }) - .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]; - if (precedingTemplateElement.value.raw.endsWith(' .')) { - parent.expressions.splice( - memberExpressionIndex, - 1, - j.memberExpression(memberExpression.value.object, j.identifier('text')), - j.memberExpression(memberExpression.value.object, j.identifier('primary')), - ); - parent.quasis.splice( - memberExpressionIndex, - 1, - j.templateElement( - { - raw: precedingTemplateElement.value.raw, - cooked: precedingTemplateElement.value.cooked, - }, - false, - ), - j.templateElement({ raw: '.', cooked: '.' }, false), + 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' + ) { + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: 'textPrimary' }, + }) + .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-', '') + .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 deprecatedClass = '.MuiPaginationItem-textPrimary'; - const replacementSelector = '.MuiPaginationItem-text.MuiPaginationItem-primary'; - - 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}`))); - }); + 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); } From 20f4ce578a5b9720313a10f3d3d005b4bb41e2e9 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 17:25:21 +0530 Subject: [PATCH 06/20] Refactor pagination item classes --- .../test-cases/actual.js | 167 ++++++++++++++++++ 1 file changed, 167 insertions(+) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js index c0f98038db910f..5eb6237e827c35 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js @@ -55,3 +55,170 @@ styled(Component)(() => { }, }} />; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + '& .MuiPaginationItem-textSecondary': { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`& .${paginationItemClasses.textSecondary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + '& .MuiPaginationItem-textSecondary': { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`& .${paginationItemClasses.textSecondary}`]: { + color: 'red', + }, + }; +}); + +; + +; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + '& .MuiPaginationItem-outlinedPrimary': { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`& .${paginationItemClasses.outlinedPrimary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + '& .MuiPaginationItem-outlinedPrimary': { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`& .${paginationItemClasses.outlinedPrimary}`]: { + color: 'red', + }, + }; +}); + +; + +; +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + '& .MuiPaginationItem-outlinedSecondary': { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`& .${paginationItemClasses.outlinedSecondary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + '& .MuiPaginationItem-outlinedSecondary': { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`& .${paginationItemClasses.outlinedSecondary}`]: { + color: 'red', + }, + }; +}); + +; + +; From 15975f48b37f524fc90e01e7a9df84640feca2a5 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 17:30:08 +0530 Subject: [PATCH 07/20] Refactor pagination item classes --- .../pagination-item-classes.js | 3 +- .../test-cases/expected.js | 224 ++++++++++++++++++ 2 files changed, 226 insertions(+), 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js index 4d0ff8fa398e37..24fe7a8ad78f1a 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -35,10 +35,11 @@ export default function transformer(file, api, options) { specifier.type === 'ImportSpecifier' && specifier.imported.name === 'paginationItemClasses' ) { + const deprecatedAtomicClass = deprecatedClass.replace('.MuiPaginationItem-', ''); root .find(j.MemberExpression, { object: { name: specifier.local.name }, - property: { name: 'textPrimary' }, + property: { name: deprecatedAtomicClass }, }) .forEach((memberExpression) => { const parent = memberExpression.parentPath.parentPath.value; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js index e69de29bb2d1d6..b4e5129dbe1afa 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js @@ -0,0 +1,224 @@ +import { paginationItemClasses } from '@mui/material/PaginationItem'; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + "& .MuiPaginationItem-text.MuiPaginationItem-primary": { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`& .${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + "& .MuiPaginationItem-text.MuiPaginationItem-primary": { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`& .${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { + color: 'red', + }, + }; +}); + +; + +; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + "& .MuiPaginationItem-text.MuiPaginationItem-secondary": { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`& .${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + "& .MuiPaginationItem-text.MuiPaginationItem-secondary": { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`& .${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { + color: 'red', + }, + }; +}); + +; + +; + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + "& .MuiPaginationItem-outlined.MuiPaginationItem-primary": { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`& .${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + "& .MuiPaginationItem-outlined.MuiPaginationItem-primary": { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`& .${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { + color: 'red', + }, + }; +}); + +; + +; +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + "& .MuiPaginationItem-outlined.MuiPaginationItem-secondary": { + color: 'red', + }, + }, + }, + }, +}); + +fn({ + MuiPaginationItem: { + styleOverrides: { + root: { + [`& .${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { + color: 'red', + }, + }, + }, + }, +}); + +styled(Component)(() => { + return { + "& .MuiPaginationItem-outlined.MuiPaginationItem-secondary": { + color: 'red', + }, + }; +}); + +styled(Component)(() => { + return { + [`& .${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { + color: 'red', + }, + }; +}); + +; + +; From 8d75caf3482f49ecde451dd0f55621b038e0972d Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 18:06:59 +0530 Subject: [PATCH 08/20] add docs --- .../migrating-from-deprecated-apis.md | 108 +++++++++++++ packages/mui-codemod/README.md | 146 ++++++++++++++++++ .../src/deprecations/all/deprecations-all.js | 2 + .../src/deprecations/all/postcss.config.js | 5 +- .../pagination-item-classes.js | 21 +-- .../pagination-item-classes.test.js | 78 ++++++++++ .../pagination-item-classes/postcss-plugin.js | 40 +++++ .../test-cases/actual.css | 15 ++ .../test-cases/expected.css | 16 ++ .../PaginationItem/paginationItemClasses.ts | 12 +- 10 files changed, 415 insertions(+), 28 deletions(-) diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 903eb619001eac..698ffcd2fe1832 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -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 +``` + +### .MuiPaginationItem-textPrimary + +The PaginationItem's `.MuiPaginationItem-textPrimary` class was deprecated in favor of the `.MuiPaginationItem-text` and `.MuiPaginationItem-primary` classes. + +```diff +-.MuiPaginationItem-textPrimary ++.MuiPaginationItem-text.MuiPaginationItem-primary + /> +``` + +```diff + import { paginationItemClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`& .${paginationItemClasses.textPrimary}`]: { ++ [`& .${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { + color: 'red', + }, + }, + }, + }, +``` + +### .MuiPaginationItem-outlinedPrimary + +The PaginationItem's `.MuiPaginationItem-outlinedPrimary` class was deprecated in favor of the `.MuiPaginationItem-outlined` and `.MuiPaginationItem-primary` classes. + +```diff +-.MuiPaginationItem-outlinedPrimary ++.MuiPaginationItem-outlined.MuiPaginationItem-primary + /> +``` + +```diff + import { paginationItemClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`& .${paginationItemClasses.outlinedPrimary}`]: { ++ [`& .${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { + color: 'red', + }, + }, + }, + }, +``` + +### .MuiPaginationItem-textSecondary + +The PaginationItem's `.MuiPaginationItem-textSecondary` class was deprecated in favor of the `.MuiPaginationItem-text` and `.MuiPaginationItem-secondary` classes. + +```diff +-.MuiPaginationItem-textSecondary ++.MuiPaginationItem-text.MuiPaginationItem-secondary + /> +``` + +```diff + import { paginationItemClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`& .${paginationItemClasses.textSecondary}`]: { ++ [`& .${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { + color: 'red', + }, + }, + }, + }, +``` + +### .MuiPaginationItem-outlinedSecondary + +The PaginationItem's `.MuiPaginationItem-outlinedSecondary` class was deprecated in favor of the `.MuiPaginationItem-outlined` and `.MuiPaginationItem-secondary` classes. + +```diff +-.MuiPaginationItem-outlinedSecondary ++.MuiPaginationItem-outlined.MuiPaginationItem-secondary + /> +``` + +```diff + import { paginationItemClasses } from '@mui/material/PaginationItem'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`& .${paginationItemClasses.outlinedSecondary}`]: { ++ [`& .${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { + color: 'red', + }, + }, + }, + }, +``` diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 9fe3cfe94910ba..3537ad1f95917d 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -191,6 +191,152 @@ npx @mui/codemod@latest deprecations/alert-props npx @mui/codemod@latest deprecations/divider-props ``` +#### `pagination-item-classes` + +JS transforms: + +```diff + import { paginationItemClasses } from '@mui/material/AccordionSummary'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`& .${paginationItemClasses.textPrimary}`]: { ++ [`& .${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { + color: 'red', + }, + }, + }, + }, +``` + +```diff + import { paginationItemClasses } from '@mui/material/AccordionSummary'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`& .${paginationItemClasses.textSecondary}`]: { ++ [`& .${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { + color: 'red', + }, + }, + }, + }, +``` + +```diff + import { paginationItemClasses } from '@mui/material/AccordionSummary'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`& .${paginationItemClasses.outlinedPrimary}`]: { ++ [`& .${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { + color: 'red', + }, + }, + }, + }, +``` + +```diff + import { paginationItemClasses } from '@mui/material/AccordionSummary'; + + MuiPaginationItem: { + styleOverrides: { + root: { +- [`& .${paginationItemClasses.outlinedSecondary}`]: { ++ [`& .${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { + color: 'red', + }, + }, + }, + }, +``` + +```diff + MuiPaginationItem: { + styleOverrides: { + root: { +- '& .MuiPaginationItem-textPrimary': { ++ '& .MuiPaginationItem-text.MuiPaginationItem-primary': { + color: 'red', + }, + }, + }, + }, +``` + +```diff + MuiPaginationItem: { + styleOverrides: { + root: { +- '& .MuiPaginationItem-textSecondary': { ++ '& .MuiPaginationItem-text.MuiPaginationItem-secondary': { + color: 'red', + }, + }, + }, + }, +``` + +```diff + MuiPaginationItem: { + styleOverrides: { + root: { +- '& .MuiPaginationItem-outlinedPrimary': { ++ '& .MuiPaginationItem-outlined.MuiPaginationItem-primary': { + color: 'red', + }, + }, + }, + }, +``` + +```diff + MuiPaginationItem: { + styleOverrides: { + root: { +- '& .MuiPaginationItem-outlinedSecondary': { ++ '& .MuiPaginationItem-outlined.MuiPaginationItem-secondary': { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +-.MuiPaginationItem-textPrimary ++.MuiPaginationItem-text.MuiPaginationItem-primary + /> +``` + +```diff +-.MuiPaginationItem-textSecondary ++.MuiPaginationItem-text.MuiPaginationItem-secondary + /> +``` + +```diff +-.MuiPaginationItem-outlinedPrimary ++.MuiPaginationItem-outlined.MuiPaginationItem-primary + /> +``` + +```diff +-.MuiPaginationItem-outlinedSecondary ++.MuiPaginationItem-outlined.MuiPaginationItem-secondary + /> +``` + +```bash +npx @mui/codemod@latest deprecations/pagination-item-classes +``` + ### v5.0.0 #### `base-use-named-exports` diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index 2ea28ab2ed544a..c004445f169f0d 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -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 @@ -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; } diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index ee2e3316deba79..bcf170eacbfb8d 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -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], }; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js index 24fe7a8ad78f1a..7992a8074c1853 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -1,27 +1,10 @@ +import { classes } from './postcss-plugin'; + /** * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api */ export default function transformer(file, api, options) { - const classes = [ - { - deprecatedClass: '.MuiPaginationItem-textPrimary', - replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-primary', - }, - { - deprecatedClass: '.MuiPaginationItem-textSecondary', - replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-secondary', - }, - { - deprecatedClass: '.MuiPaginationItem-outlinedPrimary', - replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-primary', - }, - { - deprecatedClass: '.MuiPaginationItem-outlinedSecondary', - replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-secondary', - }, - ]; - const j = api.jscodeshift; const root = j(file.source); const printOptions = options.printOptions; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js index e69de29bb2d1d6..b31d2e15c5c707 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './pagination-item-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('pagination-item-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'single', 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', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js index e69de29bb2d1d6..c799de5a3483aa 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js @@ -0,0 +1,40 @@ +const classes = [ + { + deprecatedClass: '.MuiPaginationItem-textPrimary', + replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-primary', + }, + { + deprecatedClass: '.MuiPaginationItem-textSecondary', + replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-secondary', + }, + { + deprecatedClass: '.MuiPaginationItem-outlinedPrimary', + replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-primary', + }, + { + deprecatedClass: '.MuiPaginationItem-outlinedSecondary', + replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-secondary', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace Deperecated Pagination Item 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, +}; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css index e69de29bb2d1d6..2bf14ae9103fe5 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.css @@ -0,0 +1,15 @@ +.MuiPaginationItem-textPrimary { + color: red; +} + +.MuiPaginationItem-textSecondary { + color: blue; +} + +.MuiPaginationItem-outlinedPrimary { + border: 1px solid black; +} + +.MuiPaginationItem-outlinedSecondary { + border: 1px solid green; +} diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css index e69de29bb2d1d6..819a8d7faefc1c 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css @@ -0,0 +1,16 @@ +.MuiPaginationItem-text.MuiPaginationItem-primary { + color: red; +} + +.MuiPaginationItem-text.MuiPaginationItem-secondary { + color: blue; +} + +.MuiPaginationItem-outlined.MuiPaginationItem-primary { + border: 1px solid black; +} + +.MuiPaginationItem-outlined.MuiPaginationItem-secondary { + border: 1px solid green; +} + diff --git a/packages/mui-material/src/PaginationItem/paginationItemClasses.ts b/packages/mui-material/src/PaginationItem/paginationItemClasses.ts index c1a2ed82a4f7b8..1ec0961e66114c 100644 --- a/packages/mui-material/src/PaginationItem/paginationItemClasses.ts +++ b/packages/mui-material/src/PaginationItem/paginationItemClasses.ts @@ -13,25 +13,21 @@ export interface PaginationItemClasses { /** Styles applied to the root element if `variant="text"`. */ text: string; /** Styles applied to the root element if `variant="text"` and `color="primary"`. - * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) - * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. + * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ textPrimary: string; /** Styles applied to the root element if `variant="text"` and `color="secondary"`. - * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) - * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. + * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ textSecondary: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: string; /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. - * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) - * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. + * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ outlinedPrimary: string; /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. - * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) - * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. + * @deprecated Combine the [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ outlinedSecondary: string; /** Styles applied to the root element if `rounded="true"`. */ From 56e2bee7a0eba92f0a609819ebc17d5ce7171089 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 18:13:08 +0530 Subject: [PATCH 09/20] docs:api --- .../api-docs/pagination-item/pagination-item.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/translations/api-docs/pagination-item/pagination-item.json b/docs/translations/api-docs/pagination-item/pagination-item.json index 4184e90ba4d8e1..de26e46725f5d8 100644 --- a/docs/translations/api-docs/pagination-item/pagination-item.json +++ b/docs/translations/api-docs/pagination-item/pagination-item.json @@ -66,13 +66,13 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorPrimary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorPrimary classes instead. How to migrate." }, "outlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"outlined\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorSecondary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-outlined and .MuiPaginationItem-colorSecondary classes instead. How to migrate." }, "page": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -114,13 +114,13 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"text\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorPrimary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorPrimary classes instead. How to migrate." }, "textSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"text\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead." + "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead. How to migrate." } } } From c4c317e43a6260786381232e1913f848def3d2f2 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 18:19:17 +0530 Subject: [PATCH 10/20] fix imports --- packages/mui-codemod/README.md | 8 ++++---- .../pagination-item-classes/postcss-plugin.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 3537ad1f95917d..3c34d7926f376b 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -196,7 +196,7 @@ npx @mui/codemod@latest deprecations/divider-props JS transforms: ```diff - import { paginationItemClasses } from '@mui/material/AccordionSummary'; + import { paginationItemClasses } from '@mui/material/PaginationItem'; MuiPaginationItem: { styleOverrides: { @@ -211,7 +211,7 @@ JS transforms: ``` ```diff - import { paginationItemClasses } from '@mui/material/AccordionSummary'; + import { paginationItemClasses } from '@mui/material/PaginationItem'; MuiPaginationItem: { styleOverrides: { @@ -226,7 +226,7 @@ JS transforms: ``` ```diff - import { paginationItemClasses } from '@mui/material/AccordionSummary'; + import { paginationItemClasses } from '@mui/material/PaginationItem'; MuiPaginationItem: { styleOverrides: { @@ -241,7 +241,7 @@ JS transforms: ``` ```diff - import { paginationItemClasses } from '@mui/material/AccordionSummary'; + import { paginationItemClasses } from '@mui/material/PaginationItem'; MuiPaginationItem: { styleOverrides: { diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js index c799de5a3483aa..bc14c8b16834a3 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js @@ -19,7 +19,7 @@ const classes = [ const plugin = () => { return { - postcssPlugin: `Replace Deperecated Pagination Item Classes with new classes`, + postcssPlugin: `Replace deperecated PaginationItem classes with new classes`, Rule(rule) { const { selector } = rule; From 7d3e87f3e5914bf2a4e0cef69e7c57a169e6edc0 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 18:40:48 +0530 Subject: [PATCH 11/20] fix test --- .../pagination-item-classes/pagination-item-classes.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js index b31d2e15c5c707..4949d6d844ef3a 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.test.js @@ -20,7 +20,7 @@ describe('@mui/codemod', () => { const actual = jsTransform( { source: read('./test-cases/actual.js') }, { jscodeshift }, - { printOptions: { quote: 'single', trailingComma: true } }, + { printOptions: { quote: 'double', trailingComma: true } }, ); const expected = read('./test-cases/expected.js'); From b7972fdf3ef03a8d77217a66d1d00bb8d261b637 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 18:52:23 +0530 Subject: [PATCH 12/20] fix tests --- .../src/deprecations/pagination-item-classes/postcss-plugin.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js index bc14c8b16834a3..c2340582f3af1d 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js @@ -24,7 +24,8 @@ const plugin = () => { const { selector } = rule; classes.forEach(({ deprecatedClass, replacementSelector }) => { - const selectorRegex = new RegExp(` ${deprecatedClass}`); + const selectorRegex = new RegExp(`${deprecatedClass}`); + if (selector.match(selectorRegex)) { rule.selector = selector.replace(selectorRegex, replacementSelector); } From 8a635b9249b28f7d920edbda2054696b53f1aae7 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sat, 17 Feb 2024 19:06:33 +0530 Subject: [PATCH 13/20] fix tests --- .../deprecations/pagination-item-classes/test-cases/expected.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css index 819a8d7faefc1c..1637b3a8af34fd 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css @@ -13,4 +13,3 @@ .MuiPaginationItem-outlined.MuiPaginationItem-secondary { border: 1px solid green; } - From f0eecba200572d95428bc8e6acc240b6be8e4efb Mon Sep 17 00:00:00 2001 From: sai6855 Date: Sun, 18 Feb 2024 17:51:30 +0530 Subject: [PATCH 14/20] fix selector --- .../migrating-from-deprecated-apis.md | 16 +-- packages/mui-codemod/README.md | 113 +++--------------- .../pagination-item-classes.js | 12 +- .../pagination-item-classes/postcss-plugin.js | 16 +-- .../test-cases/actual.js | 49 ++++---- .../test-cases/expected.js | 49 ++++---- 6 files changed, 88 insertions(+), 167 deletions(-) diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 698ffcd2fe1832..09bf370a13c748 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -189,8 +189,8 @@ The PaginationItem's `.MuiPaginationItem-textPrimary` class was deprecated in fa MuiPaginationItem: { styleOverrides: { root: { -- [`& .${paginationItemClasses.textPrimary}`]: { -+ [`& .${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { +- [`&.${paginationItemClasses.textPrimary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { color: 'red', }, }, @@ -214,8 +214,8 @@ The PaginationItem's `.MuiPaginationItem-outlinedPrimary` class was deprecated i MuiPaginationItem: { styleOverrides: { root: { -- [`& .${paginationItemClasses.outlinedPrimary}`]: { -+ [`& .${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { +- [`&.${paginationItemClasses.outlinedPrimary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { color: 'red', }, }, @@ -239,8 +239,8 @@ The PaginationItem's `.MuiPaginationItem-textSecondary` class was deprecated in MuiPaginationItem: { styleOverrides: { root: { -- [`& .${paginationItemClasses.textSecondary}`]: { -+ [`& .${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { +- [`&.${paginationItemClasses.textSecondary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { color: 'red', }, }, @@ -264,8 +264,8 @@ The PaginationItem's `.MuiPaginationItem-outlinedSecondary` class was deprecated MuiPaginationItem: { styleOverrides: { root: { -- [`& .${paginationItemClasses.outlinedSecondary}`]: { -+ [`& .${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { +- [`&.${paginationItemClasses.outlinedSecondary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { color: 'red', }, }, diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 3c34d7926f376b..4b3c8651d988d2 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -201,105 +201,36 @@ JS transforms: MuiPaginationItem: { styleOverrides: { root: { -- [`& .${paginationItemClasses.textPrimary}`]: { -+ [`& .${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { +- [`&.${paginationItemClasses.textPrimary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { color: 'red', }, - }, - }, - }, -``` - -```diff - import { paginationItemClasses } from '@mui/material/PaginationItem'; - - MuiPaginationItem: { - styleOverrides: { - root: { -- [`& .${paginationItemClasses.textSecondary}`]: { -+ [`& .${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { +- [`&.${paginationItemClasses.textSecondary}`]: { ++ [`&.${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { color: 'red', }, - }, - }, - }, -``` - -```diff - import { paginationItemClasses } from '@mui/material/PaginationItem'; - - MuiPaginationItem: { - styleOverrides: { - root: { -- [`& .${paginationItemClasses.outlinedPrimary}`]: { -+ [`& .${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { +- [`&.${paginationItemClasses.outlinedPrimary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { color: 'red', }, - }, - }, - }, -``` - -```diff - import { paginationItemClasses } from '@mui/material/PaginationItem'; - - MuiPaginationItem: { - styleOverrides: { - root: { -- [`& .${paginationItemClasses.outlinedSecondary}`]: { -+ [`& .${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { +- [`&.${paginationItemClasses.outlinedSecondary}`]: { ++ [`&.${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { color: 'red', }, - }, - }, - }, -``` - -```diff - MuiPaginationItem: { - styleOverrides: { - root: { -- '& .MuiPaginationItem-textPrimary': { -+ '& .MuiPaginationItem-text.MuiPaginationItem-primary': { +- '&.MuiPaginationItem-textPrimary': { ++ '&.MuiPaginationItem-text.MuiPaginationItem-primary': { color: 'red', }, - }, - }, - }, -``` - -```diff - MuiPaginationItem: { - styleOverrides: { - root: { -- '& .MuiPaginationItem-textSecondary': { -+ '& .MuiPaginationItem-text.MuiPaginationItem-secondary': { +- '&.MuiPaginationItem-textSecondary': { ++ '&.MuiPaginationItem-text.MuiPaginationItem-secondary': { color: 'red', }, - }, - }, - }, -``` - -```diff - MuiPaginationItem: { - styleOverrides: { - root: { -- '& .MuiPaginationItem-outlinedPrimary': { -+ '& .MuiPaginationItem-outlined.MuiPaginationItem-primary': { +- '&.MuiPaginationItem-outlinedPrimary': { ++ '&.MuiPaginationItem-outlined.MuiPaginationItem-primary': { color: 'red', }, - }, - }, - }, -``` - -```diff - MuiPaginationItem: { - styleOverrides: { - root: { -- '& .MuiPaginationItem-outlinedSecondary': { -+ '& .MuiPaginationItem-outlined.MuiPaginationItem-secondary': { +- '&.MuiPaginationItem-outlinedSecondary': { ++ '&.MuiPaginationItem-outlined.MuiPaginationItem-secondary': { color: 'red', }, }, @@ -312,22 +243,10 @@ CSS transforms: ```diff -.MuiPaginationItem-textPrimary +.MuiPaginationItem-text.MuiPaginationItem-primary - /> -``` - -```diff -.MuiPaginationItem-textSecondary +.MuiPaginationItem-text.MuiPaginationItem-secondary - /> -``` - -```diff -.MuiPaginationItem-outlinedPrimary +.MuiPaginationItem-outlined.MuiPaginationItem-primary - /> -``` - -```diff -.MuiPaginationItem-outlinedSecondary +.MuiPaginationItem-outlined.MuiPaginationItem-secondary /> diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js index 7992a8074c1853..25ae3e10b78289 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -18,7 +18,7 @@ export default function transformer(file, api, options) { specifier.type === 'ImportSpecifier' && specifier.imported.name === 'paginationItemClasses' ) { - const deprecatedAtomicClass = deprecatedClass.replace('.MuiPaginationItem-', ''); + const deprecatedAtomicClass = deprecatedClass.replace('&.MuiPaginationItem-', ''); root .find(j.MemberExpression, { object: { name: specifier.local.name }, @@ -33,10 +33,11 @@ export default function transformer(file, api, options) { const precedingTemplateElement = parent.quasis[memberExpressionIndex]; const atomicClasses = replacementSelector .replaceAll('MuiPaginationItem-', '') + .replaceAll('&.', '') .split('.') .filter(Boolean); - if (precedingTemplateElement.value.raw.endsWith(' .')) { + if (precedingTemplateElement.value.raw.endsWith('&.')) { parent.expressions.splice( memberExpressionIndex, 1, @@ -68,16 +69,15 @@ export default function transformer(file, api, options) { }); }); - const selectorRegex = new RegExp(`^& ${deprecatedClass}`); + 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}`)), - ); + path.replace(j.literal(path.value.value.replace(selectorRegex, `${replacementSelector}`))); }); }); return root.toSource(printOptions); diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js index c2340582f3af1d..1b9195390b70a9 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js @@ -1,19 +1,19 @@ const classes = [ { - deprecatedClass: '.MuiPaginationItem-textPrimary', - replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-primary', + deprecatedClass: '&.MuiPaginationItem-textPrimary', + replacementSelector: '&.MuiPaginationItem-text.MuiPaginationItem-primary', }, { - deprecatedClass: '.MuiPaginationItem-textSecondary', - replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-secondary', + deprecatedClass: '&.MuiPaginationItem-textSecondary', + replacementSelector: '&.MuiPaginationItem-text.MuiPaginationItem-secondary', }, { - deprecatedClass: '.MuiPaginationItem-outlinedPrimary', - replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-primary', + deprecatedClass: '&.MuiPaginationItem-outlinedPrimary', + replacementSelector: '&.MuiPaginationItem-outlined.MuiPaginationItem-primary', }, { - deprecatedClass: '.MuiPaginationItem-outlinedSecondary', - replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-secondary', + deprecatedClass: '&.MuiPaginationItem-outlinedSecondary', + replacementSelector: '&.MuiPaginationItem-outlined.MuiPaginationItem-secondary', }, ]; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js index 5eb6237e827c35..9bc32724dbb132 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js @@ -4,7 +4,7 @@ fn({ MuiPaginationItem: { styleOverrides: { root: { - '& .MuiPaginationItem-textPrimary': { + '&.MuiPaginationItem-textPrimary': { color: 'red', }, }, @@ -12,11 +12,12 @@ fn({ }, }); + fn({ MuiPaginationItem: { styleOverrides: { root: { - [`& .${paginationItemClasses.textPrimary}`]: { + [`&.${paginationItemClasses.textPrimary}`]: { color: 'red', }, }, @@ -26,7 +27,7 @@ fn({ styled(Component)(() => { return { - '& .MuiPaginationItem-textPrimary': { + '&.MuiPaginationItem-textPrimary': { color: 'red', }, }; @@ -34,7 +35,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`& .${paginationItemClasses.textPrimary}`]: { + [`&.${paginationItemClasses.textPrimary}`]: { color: 'red', }, }; @@ -42,7 +43,7 @@ styled(Component)(() => { { { return { - '& .MuiPaginationItem-textSecondary': { + '&.MuiPaginationItem-textSecondary': { color: 'red', }, }; @@ -90,7 +91,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`& .${paginationItemClasses.textSecondary}`]: { + [`&.${paginationItemClasses.textSecondary}`]: { color: 'red', }, }; @@ -98,7 +99,7 @@ styled(Component)(() => { { { return { - '& .MuiPaginationItem-outlinedPrimary': { + '&.MuiPaginationItem-outlinedPrimary': { color: 'red', }, }; @@ -146,7 +147,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`& .${paginationItemClasses.outlinedPrimary}`]: { + [`&.${paginationItemClasses.outlinedPrimary}`]: { color: 'red', }, }; @@ -154,7 +155,7 @@ styled(Component)(() => { { { return { - '& .MuiPaginationItem-outlinedSecondary': { + '&.MuiPaginationItem-outlinedSecondary': { color: 'red', }, }; @@ -201,7 +202,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`& .${paginationItemClasses.outlinedSecondary}`]: { + [`&.${paginationItemClasses.outlinedSecondary}`]: { color: 'red', }, }; @@ -209,7 +210,7 @@ styled(Component)(() => { { { return { - "& .MuiPaginationItem-text.MuiPaginationItem-primary": { + "&.MuiPaginationItem-text.MuiPaginationItem-primary": { color: 'red', }, }; @@ -34,7 +35,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`& .${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { + [`&.${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { color: 'red', }, }; @@ -42,7 +43,7 @@ styled(Component)(() => { { { return { - "& .MuiPaginationItem-text.MuiPaginationItem-secondary": { + "&.MuiPaginationItem-text.MuiPaginationItem-secondary": { color: 'red', }, }; @@ -90,7 +91,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`& .${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { + [`&.${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { color: 'red', }, }; @@ -98,7 +99,7 @@ styled(Component)(() => { { { return { - "& .MuiPaginationItem-outlined.MuiPaginationItem-primary": { + "&.MuiPaginationItem-outlined.MuiPaginationItem-primary": { color: 'red', }, }; @@ -146,7 +147,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`& .${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { color: 'red', }, }; @@ -154,7 +155,7 @@ styled(Component)(() => { { { return { - "& .MuiPaginationItem-outlined.MuiPaginationItem-secondary": { + "&.MuiPaginationItem-outlined.MuiPaginationItem-secondary": { color: 'red', }, }; @@ -201,7 +202,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`& .${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { color: 'red', }, }; @@ -209,7 +210,7 @@ styled(Component)(() => { { Date: Sun, 18 Feb 2024 18:04:35 +0530 Subject: [PATCH 15/20] fix selector --- .../pagination-item-classes.js | 6 +-- .../pagination-item-classes/postcss-plugin.js | 16 +++---- .../test-cases/expected.css | 8 ++-- .../test-cases/expected.js | 48 +++++++++---------- 4 files changed, 39 insertions(+), 39 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js index 25ae3e10b78289..5bf5e6cdd23a3f 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/pagination-item-classes.js @@ -18,7 +18,7 @@ export default function transformer(file, api, options) { specifier.type === 'ImportSpecifier' && specifier.imported.name === 'paginationItemClasses' ) { - const deprecatedAtomicClass = deprecatedClass.replace('&.MuiPaginationItem-', ''); + const deprecatedAtomicClass = deprecatedClass.replace('.MuiPaginationItem-', ''); root .find(j.MemberExpression, { object: { name: specifier.local.name }, @@ -69,7 +69,7 @@ export default function transformer(file, api, options) { }); }); - const selectorRegex = new RegExp(`^${deprecatedClass}`); + const selectorRegex = new RegExp(`^&${deprecatedClass}`); root .find( @@ -77,7 +77,7 @@ export default function transformer(file, api, options) { (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), ) .forEach((path) => { - path.replace(j.literal(path.value.value.replace(selectorRegex, `${replacementSelector}`))); + path.replace(j.literal(path.value.value.replace(selectorRegex, `&${replacementSelector}`))); }); }); return root.toSource(printOptions); diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js index 1b9195390b70a9..c07b8d28264957 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/postcss-plugin.js @@ -1,19 +1,19 @@ const classes = [ { - deprecatedClass: '&.MuiPaginationItem-textPrimary', - replacementSelector: '&.MuiPaginationItem-text.MuiPaginationItem-primary', + deprecatedClass: '.MuiPaginationItem-textPrimary', + replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-colorPrimary', }, { - deprecatedClass: '&.MuiPaginationItem-textSecondary', - replacementSelector: '&.MuiPaginationItem-text.MuiPaginationItem-secondary', + deprecatedClass: '.MuiPaginationItem-textSecondary', + replacementSelector: '.MuiPaginationItem-text.MuiPaginationItem-colorSecondary', }, { - deprecatedClass: '&.MuiPaginationItem-outlinedPrimary', - replacementSelector: '&.MuiPaginationItem-outlined.MuiPaginationItem-primary', + deprecatedClass: '.MuiPaginationItem-outlinedPrimary', + replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary', }, { - deprecatedClass: '&.MuiPaginationItem-outlinedSecondary', - replacementSelector: '&.MuiPaginationItem-outlined.MuiPaginationItem-secondary', + deprecatedClass: '.MuiPaginationItem-outlinedSecondary', + replacementSelector: '.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary', }, ]; diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css index 1637b3a8af34fd..2446978a1256d6 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.css @@ -1,15 +1,15 @@ -.MuiPaginationItem-text.MuiPaginationItem-primary { +.MuiPaginationItem-text.MuiPaginationItem-colorPrimary { color: red; } -.MuiPaginationItem-text.MuiPaginationItem-secondary { +.MuiPaginationItem-text.MuiPaginationItem-colorSecondary { color: blue; } -.MuiPaginationItem-outlined.MuiPaginationItem-primary { +.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary { border: 1px solid black; } -.MuiPaginationItem-outlined.MuiPaginationItem-secondary { +.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary { border: 1px solid green; } diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js index 813ef8e3751cd3..a406d2c036d290 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/expected.js @@ -4,7 +4,7 @@ fn({ MuiPaginationItem: { styleOverrides: { root: { - "&.MuiPaginationItem-text.MuiPaginationItem-primary": { + "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": { color: 'red', }, }, @@ -17,7 +17,7 @@ fn({ MuiPaginationItem: { styleOverrides: { root: { - [`&.${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { color: 'red', }, }, @@ -27,7 +27,7 @@ fn({ styled(Component)(() => { return { - "&.MuiPaginationItem-text.MuiPaginationItem-primary": { + "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": { color: 'red', }, }; @@ -35,7 +35,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`&.${paginationItemClasses.text}.${paginationItemClasses.primary}`]: { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { color: 'red', }, }; @@ -43,7 +43,7 @@ styled(Component)(() => { { { return { - "&.MuiPaginationItem-text.MuiPaginationItem-secondary": { + "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": { color: 'red', }, }; @@ -91,7 +91,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`&.${paginationItemClasses.text}.${paginationItemClasses.secondary}`]: { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { color: 'red', }, }; @@ -99,7 +99,7 @@ styled(Component)(() => { { { return { - "&.MuiPaginationItem-outlined.MuiPaginationItem-primary": { + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": { color: 'red', }, }; @@ -147,7 +147,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`&.${paginationItemClasses.outlined}.${paginationItemClasses.primary}`]: { + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { color: 'red', }, }; @@ -155,7 +155,7 @@ styled(Component)(() => { { { return { - "&.MuiPaginationItem-outlined.MuiPaginationItem-secondary": { + "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": { color: 'red', }, }; @@ -202,7 +202,7 @@ styled(Component)(() => { styled(Component)(() => { return { - [`&.${paginationItemClasses.outlined}.${paginationItemClasses.secondary}`]: { + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { color: 'red', }, }; @@ -210,7 +210,7 @@ styled(Component)(() => { { Date: Sun, 18 Feb 2024 18:06:37 +0530 Subject: [PATCH 16/20] refactor --- .../test-cases/actual.js | 184 ++++-------------- .../test-cases/expected.js | 184 ++++-------------- 2 files changed, 70 insertions(+), 298 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js index 9bc32724dbb132..5959ac9142b25e 100644 --- a/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/pagination-item-classes/test-cases/actual.js @@ -7,12 +7,20 @@ fn({ '&.MuiPaginationItem-textPrimary': { color: 'red', }, + '&.MuiPaginationItem-textSecondary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedPrimary': { + color: 'red', + }, + '&.MuiPaginationItem-outlinedSecondary': { + color: 'red', + }, }, }, }, }); - fn({ MuiPaginationItem: { styleOverrides: { @@ -20,6 +28,15 @@ fn({ [`&.${paginationItemClasses.textPrimary}`]: { color: 'red', }, + [`&.${paginationItemClasses.textSecondary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedSecondary}`]: { + color: 'red', + }, }, }, }, @@ -30,132 +47,47 @@ styled(Component)(() => { '&.MuiPaginationItem-textPrimary': { color: 'red', }, - }; -}); - -styled(Component)(() => { - return { - [`&.${paginationItemClasses.textPrimary}`]: { + '&.MuiPaginationItem-textSecondary': { color: 'red', }, - }; -}); - -; - -; - -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - '&.MuiPaginationItem-textSecondary': { - color: 'red', - }, - }, - }, - }, -}); - -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - [`&.${paginationItemClasses.textSecondary}`]: { - color: 'red', - }, - }, - }, - }, + }; }); styled(Component)(() => { return { - '&.MuiPaginationItem-textSecondary': { + [`&.${paginationItemClasses.textPrimary}`]: { color: 'red', }, - }; -}); - -styled(Component)(() => { - return { [`&.${paginationItemClasses.textSecondary}`]: { color: 'red', }, + [`&.${paginationItemClasses.outlinedPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlinedSecondary}`]: { + color: 'red', + }, }; }); ; - -; - -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - '&.MuiPaginationItem-outlinedPrimary': { - color: 'red', - }, - }, - }, - }, -}); - -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - [`&.${paginationItemClasses.outlinedPrimary}`]: { - color: 'red', - }, - }, - }, - }, -}); - -styled(Component)(() => { - return { '&.MuiPaginationItem-outlinedPrimary': { color: 'red', }, - }; -}); - -styled(Component)(() => { - return { - [`&.${paginationItemClasses.outlinedPrimary}`]: { - color: 'red', - }, - }; -}); - - { ; -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - '&.MuiPaginationItem-outlinedSecondary': { - color: 'red', - }, - }, - }, - }, -}); - -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - [`&.${paginationItemClasses.outlinedSecondary}`]: { - color: 'red', - }, - }, - }, - }, -}); - -styled(Component)(() => { - return { - '&.MuiPaginationItem-outlinedSecondary': { + [`&.${paginationItemClasses.textPrimary}`]: { color: 'red', }, - }; -}); - -styled(Component)(() => { - return { - [`&.${paginationItemClasses.outlinedSecondary}`]: { + [`&.${paginationItemClasses.textSecondary}`]: { color: 'red', }, - }; -}); - -; - - { "&.MuiPaginationItem-text.MuiPaginationItem-colorPrimary": { color: 'red', }, - }; -}); - -styled(Component)(() => { - return { - [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { + "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": { color: 'red', }, - }; -}); - -; - -; - -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": { - color: 'red', - }, - }, - }, - }, -}); - -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { - color: 'red', - }, - }, - }, - }, + }; }); styled(Component)(() => { return { - "&.MuiPaginationItem-text.MuiPaginationItem-colorSecondary": { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { color: 'red', }, - }; -}); - -styled(Component)(() => { - return { [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { color: 'red', }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { + color: 'red', + }, + [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + color: 'red', + }, }; }); ; - -; - -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": { - color: 'red', - }, - }, - }, - }, -}); - -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { - color: 'red', - }, - }, - }, - }, -}); - -styled(Component)(() => { - return { "&.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary": { color: 'red', }, - }; -}); - -styled(Component)(() => { - return { - [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorPrimary}`]: { - color: 'red', - }, - }; -}); - - { ; -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": { - color: 'red', - }, - }, - }, - }, -}); - -fn({ - MuiPaginationItem: { - styleOverrides: { - root: { - [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { - color: 'red', - }, - }, - }, - }, -}); - -styled(Component)(() => { - return { - "&.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary": { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorPrimary}`]: { color: 'red', }, - }; -}); - -styled(Component)(() => { - return { - [`&.${paginationItemClasses.outlined}.${paginationItemClasses.colorSecondary}`]: { + [`&.${paginationItemClasses.text}.${paginationItemClasses.colorSecondary}`]: { color: 'red', }, - }; -}); - -; - - Date: Sun, 18 Feb 2024 18:12:40 +0530 Subject: [PATCH 17/20] update readme --- .../migrating-from-deprecated-apis.md | 24 +++++++++---------- packages/mui-codemod/README.md | 16 ++++++------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 09bf370a13c748..8a49e12616643f 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -175,11 +175,11 @@ npx @mui/codemod@latest deprecations/pagination-item-classes ### .MuiPaginationItem-textPrimary -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 /> ``` @@ -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', }, }, @@ -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 /> ``` @@ -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', }, }, @@ -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 /> ``` @@ -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', }, }, @@ -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 /> ``` @@ -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', }, }, diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 4b3c8651d988d2..007ab17d5ecc05 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -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', }, }, From e9656cef55992563e520e0c690c2ad3dae4771ea Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 20 Feb 2024 09:56:29 +0530 Subject: [PATCH 18/20] format migrating doc --- .../migrating-from-deprecated-apis.md | 80 ++++--------------- 1 file changed, 15 insertions(+), 65 deletions(-) diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 8a49e12616643f..1161b8d6919788 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -173,13 +173,26 @@ Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-code npx @mui/codemod@latest deprecations/pagination-item-classes ``` -### .MuiPaginationItem-textPrimary +### Composed CSS classes -The PaginationItem's `.MuiPaginationItem-textPrimary` class was deprecated in favor of the `.MuiPaginationItem-text` and `.MuiPaginationItem-colorPrimary` 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` +- `.MuiPaginationItem-textSecondary` deprecated in favor of `.MuiPaginationItem-text.MuiPaginationItem-colorSecondary` +- `.MuiPaginationItem-outlinedSecondary` deprecated in favor of `.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary` + +Here's an example on how to migrate: ```diff -.MuiPaginationItem-textPrimary +.MuiPaginationItem-text.MuiPaginationItem-colorPrimary +-.MuiPaginationItem-outlinedPrimary ++.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary +-.MuiPaginationItem-textSecondary ++.MuiPaginationItem-text.MuiPaginationItem-colorSecondary +-.MuiPaginationItem-outlinedSecondary ++.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary /> ``` @@ -193,77 +206,14 @@ The PaginationItem's `.MuiPaginationItem-textPrimary` class was deprecated in fa + [`&.${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', From 499e21d01884e02ac375634a02de4f04d0d1e1b2 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 20 Feb 2024 22:27:24 +0530 Subject: [PATCH 19/20] update migration guide --- .../migrating-from-deprecated-apis.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 1161b8d6919788..16d27341751ee1 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -175,14 +175,9 @@ npx @mui/codemod@latest deprecations/pagination-item-classes ### Composed CSS classes -The following CSS classes were deprecated: +The CSS classes that composed the `variant` and `color` prop values were removed. Here's how to migrate: -- `.MuiPaginationItem-textPrimary` deprecated in favor of `.MuiPaginationItem-text.MuiPaginationItem-colorPrimary` -- `.MuiPaginationItem-outlinedPrimary` deprecated in favor of `.MuiPaginationItem-outlined.MuiPaginationItem-colorPrimary` -- `.MuiPaginationItem-textSecondary` deprecated in favor of `.MuiPaginationItem-text.MuiPaginationItem-colorSecondary` -- `.MuiPaginationItem-outlinedSecondary` deprecated in favor of `.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary` - -Here's an example on how to migrate: +Here's how to migrate: ```diff -.MuiPaginationItem-textPrimary @@ -193,7 +188,6 @@ Here's an example on how to migrate: +.MuiPaginationItem-text.MuiPaginationItem-colorSecondary -.MuiPaginationItem-outlinedSecondary +.MuiPaginationItem-outlined.MuiPaginationItem-colorSecondary - /> ``` ```diff From 1969833a3b7539e02f92f36c734d332de796c6dd Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 20 Feb 2024 22:55:30 +0530 Subject: [PATCH 20/20] update migration guide --- .../migrating-from-deprecated-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 16d27341751ee1..8a74845a47060f 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -175,7 +175,7 @@ npx @mui/codemod@latest deprecations/pagination-item-classes ### Composed CSS classes -The CSS classes that composed the `variant` and `color` prop values were removed. Here's how to migrate: +The CSS classes that composed the `variant` and `color` prop values were removed. Here's how to migrate: