From 8786832152cab10cc79d999f7c795e2d54eb8026 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Wed, 1 May 2024 11:37:34 +0530 Subject: [PATCH 1/9] add codemod --- .../src/deprecations/all/deprecations-all.js | 2 + .../circular-progress-classes.js | 127 ++++++++++++++++++ .../circular-progress-classes.test.js | 78 +++++++++++ .../circular-progress-classes/index.js | 1 + .../postcss-plugin.js | 33 +++++ .../postcss.config.js | 5 + .../test-cases/actual.css | 7 + .../test-cases/actual.js | 6 + .../test-cases/expected.css | 7 + .../test-cases/expected.js | 6 + .../circularProgressClasses.ts | 8 +- 11 files changed, 278 insertions(+), 2 deletions(-) create mode 100644 packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.js create mode 100644 packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.test.js create mode 100644 packages/mui-codemod/src/deprecations/circular-progress-classes/index.js create mode 100644 packages/mui-codemod/src/deprecations/circular-progress-classes/postcss-plugin.js create mode 100644 packages/mui-codemod/src/deprecations/circular-progress-classes/postcss.config.js create mode 100644 packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.css create mode 100644 packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.css create mode 100644 packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.js diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index 3bddd0595b93e3..18173c093ccba5 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -12,6 +12,7 @@ import transformToggleButtonGroupClasses from '../toggle-button-group-classes'; import transformStepLabelProps from '../step-label-props'; import transformBackdropProps from '../backdrop-props'; import transformStepConnectorClasses from '../step-connector-classes'; +import transformCircularProgressClasses from '../circular-progress-classes'; /** * @param {import('jscodeshift').FileInfo} file @@ -32,6 +33,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformStepLabelProps(file, api, options); file.source = transformBackdropProps(file, api, options); file.source = transformStepConnectorClasses(file, api, options); + file.source = transformCircularProgressClasses(file, api, options); return file.source; } diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.js new file mode 100644 index 00000000000000..15d60cbfc338cb --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.js @@ -0,0 +1,127 @@ +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\/CircularProgress$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported.name === 'circularProgressClasses' + ) { + 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 = replacementSelector + .replaceAll('MuiCircularProgress-', '') + .replaceAll(replacementSelectorPrefix, '') + .replaceAll(' > ', '') + .split('.') + .filter(Boolean); + + 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); + + if (replacementSelector.includes(' > ')) { + const quasisArgs = [ + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + false, + ), + j.templateElement({ raw: ' > .', cooked: ' > .' }, false), + ]; + + if (atomicClasses.length === 3) { + quasisArgs.splice( + 3, + 0, + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + + parent.quasis.splice(...quasisArgs); + } else { + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`${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); +} diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.test.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-classes.test.js new file mode 100644 index 00000000000000..92711388f3428c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/circular-progress-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 './circular-progress-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('circular-progress-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', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/index.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/index.js new file mode 100644 index 00000000000000..f962f9f367a7f4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/index.js @@ -0,0 +1 @@ +export { default } from './circular-progress-classes'; diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/postcss-plugin.js new file mode 100644 index 00000000000000..3e76db37cf280e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/postcss-plugin.js @@ -0,0 +1,33 @@ +const classes = [ + { + deprecatedClass: ' .MuiCircularProgress-circleDeterminate', + replacementSelector: '.MuiCircularProgress-determinate > .MuiCircularProgress-circle', + }, + { + deprecatedClass: ' .MuiCircularProgress-circleIndeterminate', + replacementSelector: '.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated CircularProgress 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/circular-progress-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.css new file mode 100644 index 00000000000000..23b0541e10646a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.css @@ -0,0 +1,7 @@ +.MuiCircularProgress-root .MuiCircularProgress-circleDeterminate { + color: red; +} + +.MuiCircularProgress-root .MuiCircularProgress-circleIndeterminate { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.js new file mode 100644 index 00000000000000..cffbd44502ebf3 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.js @@ -0,0 +1,6 @@ +import { circularProgressClasses } from '@mui/material/CircularProgress'; + +('& .CircularProgress-circleDeterminate'); +('& .CircularProgress-circleIndeterminate'); +`& .${circularProgressClasses.circleDeterminate}`; +`& .${circularProgressClasses.circleIndeterminate}`; diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.css new file mode 100644 index 00000000000000..45fe6624b3d9ca --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.css @@ -0,0 +1,7 @@ +.MuiCircularProgress-root.MuiCircularProgress-determinate > .MuiCircularProgress-circle { + color: red; +} + +.MuiCircularProgress-root.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.js new file mode 100644 index 00000000000000..c2b47ca6fc0c2d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.js @@ -0,0 +1,6 @@ +import { circularProgressClasses } from '@mui/material/CircularProgress'; + +('& .CircularProgress-circleDeterminate'); +('& .CircularProgress-circleIndeterminate'); +`&.${circularProgressClasses.determinate} > .${circularProgressClasses.circle}`; +`&.${circularProgressClasses.indeterminate} > .${circularProgressClasses.circle}`; diff --git a/packages/mui-material/src/CircularProgress/circularProgressClasses.ts b/packages/mui-material/src/CircularProgress/circularProgressClasses.ts index 4b8517bb34cad9..91c547639e247c 100644 --- a/packages/mui-material/src/CircularProgress/circularProgressClasses.ts +++ b/packages/mui-material/src/CircularProgress/circularProgressClasses.ts @@ -16,9 +16,13 @@ export interface CircularProgressClasses { svg: string; /** Styles applied to the `circle` svg path. */ circle: string; - /** Styles applied to the `circle` svg path if `variant="determinate"`. */ + /** Styles applied to the `circle` svg path if `variant="determinate"`. + * @deprecated Combine the [.MuiCircularProgress-circle](/material-ui/api/circular-progress/#circular-progress-classes-circle) and [.MuiCircularProgress-determinate](/material-ui/api/circular-progress/#circular-progress-classes-determinate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ circleDeterminate: string; - /** Styles applied to the `circle` svg path if `variant="indeterminate"`. */ + /** Styles applied to the `circle` svg path if `variant="indeterminate"`. + * @deprecated Combine the [.MuiCircularProgress-circle](/material-ui/api/circular-progress/#circular-progress-classes-circle) and [.MuiCircularProgress-indeterminate](/material-ui/api/circular-progress/#circular-progress-classes-indeterminate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ circleIndeterminate: string; /** Styles applied to the `circle` svg path if `disableShrink={true}`. */ circleDisableShrink: string; From bb86b1f9890a52c8add4a6affbbab497ac55bbc7 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Wed, 1 May 2024 11:46:17 +0530 Subject: [PATCH 2/9] add read me --- .../migrating-from-deprecated-apis.md | 40 +++++++++++++++++++ packages/mui-codemod/README.md | 36 +++++++++++++++++ 2 files changed, 76 insertions(+) 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 40e3b9d2f1ac53..7fe6aa4f40dc16 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 @@ -853,6 +853,46 @@ Here's how to migrate: ``` +## CircularProgress + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#circular-progress-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@next deprecations/circular-progress-classes +``` + +### Composed CSS classes + +The CSS classes that composed the `circle` CSS class and `determinate` prop values were removed. + +Here's how to migrate: + +```diff +- .MuiCircularProgress-circleDeterminate ++.MuiCircularProgress-determinate > .MuiCircularProgress-circle +- .MuiCircularProgress-circleIndeterminate ++.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle +``` + +```diff + import { circularProgressClasses } from '@mui/material/CircularProgress'; + + MuiCircularProgress: { + styleOverrides: { + root: { +- [`& .${circularProgressClasses.circleDeterminate}`]: { ++ [`&.${circularProgressClasses.determinate} > .${circularProgressClasses.circle}`]: { + color: 'red', + }, +- [`& .${circularProgressClasses.circleIndeterminate}`]: { ++ [`&.${circularProgressClasses.indeterminate} > .${circularProgressClasses.circle}`]: { + color: 'red', + }, + }, + }, + }, +``` + ## Divider Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props) below to migrate the code as described in the following sections: diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 46c86981bd51b8..eda8219e892d23 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -845,6 +845,42 @@ CSS transforms: npx @mui/codemod@next deprecations/chip-classes ``` +#### `circular-progress-classes` + +JS transforms: + +```diff + import { circularProgressClasses } from '@mui/material/CircularProgress'; + + MuiCircularProgress: { + styleOverrides: { + root: { +- [`& .${circularProgressClasses.circleDeterminate}`]: { ++ [`&.${circularProgressClasses.determinate} > .${circularProgressClasses.circle}`]: { + color: 'red', + }, +- [`& .${circularProgressClasses.circleIndeterminate}`]: { ++ [`&.${circularProgressClasses.indeterminate} > .${circularProgressClasses.circle}`]: { + color: 'red', + }, + }, + }, + }, +``` + +CSS transforms: + +```diff +- .MuiCircularProgress-circleDeterminate ++.MuiCircularProgress-determinate > .MuiCircularProgress-circle +- .MuiCircularProgress-circleIndeterminate ++.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle +``` + +```bash +npx @mui/codemod@next deprecations/circular-progress-classes +``` + #### `divider-props` ```diff From c67c40ee5e630f7aa2f97e78cb5a286b48c74769 Mon Sep 17 00:00:00 2001 From: sai6855 <60743144+sai6855@users.noreply.github.com> Date: Wed, 1 May 2024 11:51:18 +0530 Subject: [PATCH 3/9] docs:api --- docs/pages/material-ui/api/circular-progress.json | 6 ++++-- .../api-docs/circular-progress/circular-progress.json | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/pages/material-ui/api/circular-progress.json b/docs/pages/material-ui/api/circular-progress.json index f0c7cb6b50316f..88daab7531bad5 100644 --- a/docs/pages/material-ui/api/circular-progress.json +++ b/docs/pages/material-ui/api/circular-progress.json @@ -43,7 +43,8 @@ "key": "circleDeterminate", "className": "MuiCircularProgress-circleDeterminate", "description": "Styles applied to the `circle` svg path if `variant=\"determinate\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "circleDisableShrink", @@ -55,7 +56,8 @@ "key": "circleIndeterminate", "className": "MuiCircularProgress-circleIndeterminate", "description": "Styles applied to the `circle` svg path if `variant=\"indeterminate\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "colorPrimary", diff --git a/docs/translations/api-docs/circular-progress/circular-progress.json b/docs/translations/api-docs/circular-progress/circular-progress.json index 396bcdc6e441a5..fd2d2f0ee09439 100644 --- a/docs/translations/api-docs/circular-progress/circular-progress.json +++ b/docs/translations/api-docs/circular-progress/circular-progress.json @@ -30,7 +30,8 @@ "circleDeterminate": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the circle svg path", - "conditions": "variant=\"determinate\"" + "conditions": "variant=\"determinate\"", + "deprecationInfo": "Combine the .MuiCircularProgress-circle and .MuiCircularProgress-determinate classes instead. How to migrate" }, "circleDisableShrink": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -40,7 +41,8 @@ "circleIndeterminate": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the circle svg path", - "conditions": "variant=\"indeterminate\"" + "conditions": "variant=\"indeterminate\"", + "deprecationInfo": "Combine the .MuiCircularProgress-circle and .MuiCircularProgress-indeterminate classes instead. How to migrate" }, "colorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", From 37d126d0aca31b8bc58967928b14687445d5c41f Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Wed, 1 May 2024 13:30:31 +0530 Subject: [PATCH 4/9] Update migrating-from-deprecated-apis.md --- .../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 7fe6aa4f40dc16..c0e23540d58d64 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 @@ -863,7 +863,7 @@ npx @mui/codemod@next deprecations/circular-progress-classes ### Composed CSS classes -The CSS classes that composed the `circle` CSS class and `determinate` prop values were removed. +The CSS classes that composed the `circle` CSS class and `variant` prop values were removed. Here's how to migrate: From 09373c9ac0fdd7fdafb7a5a04f33fe9d0febe8c2 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 6 May 2024 16:12:03 +0530 Subject: [PATCH 5/9] trigger From e2aa95f85e2bff2a607b92e00c3105fe1fa8c421 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 6 May 2024 16:15:12 +0530 Subject: [PATCH 6/9] fix deprecated typo --- .../deprecations/circular-progress-classes/postcss-plugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/postcss-plugin.js index 3e76db37cf280e..1b2e5f882aaf8c 100644 --- a/packages/mui-codemod/src/deprecations/circular-progress-classes/postcss-plugin.js +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/postcss-plugin.js @@ -11,7 +11,7 @@ const classes = [ const plugin = () => { return { - postcssPlugin: `Replace deperecated CircularProgress classes with new classes`, + postcssPlugin: `Replace deprecated CircularProgress classes with new classes`, Rule(rule) { const { selector } = rule; From b709f7c90b5b908a2f69bc9a805154e7af79b6d4 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 6 May 2024 16:24:56 +0530 Subject: [PATCH 7/9] fix codemod --- .../circular-progress-classes/test-cases/actual.js | 4 ++-- .../circular-progress-classes/test-cases/expected.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.js index cffbd44502ebf3..c9eb397e640c13 100644 --- a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/actual.js @@ -1,6 +1,6 @@ import { circularProgressClasses } from '@mui/material/CircularProgress'; -('& .CircularProgress-circleDeterminate'); -('& .CircularProgress-circleIndeterminate'); +('& .MuiCircularProgress-circleDeterminate'); +('& .MuiCircularProgress-circleIndeterminate'); `& .${circularProgressClasses.circleDeterminate}`; `& .${circularProgressClasses.circleIndeterminate}`; diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.js index c2b47ca6fc0c2d..e9cf3628eda855 100644 --- a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/expected.js @@ -1,6 +1,6 @@ import { circularProgressClasses } from '@mui/material/CircularProgress'; -('& .CircularProgress-circleDeterminate'); -('& .CircularProgress-circleIndeterminate'); +("&.MuiCircularProgress-determinate > .MuiCircularProgress-circle"); +("&.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle"); `&.${circularProgressClasses.determinate} > .${circularProgressClasses.circle}`; `&.${circularProgressClasses.indeterminate} > .${circularProgressClasses.circle}`; From 21e3a9c3622c6103d11fe72b6f74a1cbc90aa417 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 7 May 2024 22:02:43 +0530 Subject: [PATCH 8/9] change-deprecated-message --- .../api-docs/circular-progress/circular-progress.json | 4 ++-- .../src/CircularProgress/circularProgressClasses.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/translations/api-docs/circular-progress/circular-progress.json b/docs/translations/api-docs/circular-progress/circular-progress.json index fd2d2f0ee09439..1de949a50122e2 100644 --- a/docs/translations/api-docs/circular-progress/circular-progress.json +++ b/docs/translations/api-docs/circular-progress/circular-progress.json @@ -31,7 +31,7 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the circle svg path", "conditions": "variant=\"determinate\"", - "deprecationInfo": "Combine the .MuiCircularProgress-circle and .MuiCircularProgress-determinate classes instead. How to migrate" + "deprecationInfo": "Combine the .MuiCircularProgress-circle and .MuiCircularProgress-determinate classes instead. See Migrating from deprecated APIs for more details." }, "circleDisableShrink": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -42,7 +42,7 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the circle svg path", "conditions": "variant=\"indeterminate\"", - "deprecationInfo": "Combine the .MuiCircularProgress-circle and .MuiCircularProgress-indeterminate classes instead. How to migrate" + "deprecationInfo": "Combine the .MuiCircularProgress-circle and .MuiCircularProgress-indeterminate classes instead. See Migrating from deprecated APIs for more details." }, "colorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", diff --git a/packages/mui-material/src/CircularProgress/circularProgressClasses.ts b/packages/mui-material/src/CircularProgress/circularProgressClasses.ts index 91c547639e247c..589f93afd62023 100644 --- a/packages/mui-material/src/CircularProgress/circularProgressClasses.ts +++ b/packages/mui-material/src/CircularProgress/circularProgressClasses.ts @@ -17,11 +17,11 @@ export interface CircularProgressClasses { /** Styles applied to the `circle` svg path. */ circle: string; /** Styles applied to the `circle` svg path if `variant="determinate"`. - * @deprecated Combine the [.MuiCircularProgress-circle](/material-ui/api/circular-progress/#circular-progress-classes-circle) and [.MuiCircularProgress-determinate](/material-ui/api/circular-progress/#circular-progress-classes-determinate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + * @deprecated Combine the [.MuiCircularProgress-circle](/material-ui/api/circular-progress/#circular-progress-classes-circle) and [.MuiCircularProgress-determinate](/material-ui/api/circular-progress/#circular-progress-classes-determinate) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ circleDeterminate: string; /** Styles applied to the `circle` svg path if `variant="indeterminate"`. - * @deprecated Combine the [.MuiCircularProgress-circle](/material-ui/api/circular-progress/#circular-progress-classes-circle) and [.MuiCircularProgress-indeterminate](/material-ui/api/circular-progress/#circular-progress-classes-indeterminate) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + * @deprecated Combine the [.MuiCircularProgress-circle](/material-ui/api/circular-progress/#circular-progress-classes-circle) and [.MuiCircularProgress-indeterminate](/material-ui/api/circular-progress/#circular-progress-classes-indeterminate) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ circleIndeterminate: string; /** Styles applied to the `circle` svg path if `disableShrink={true}`. */ From 860db311b1c2dd89c15eae0447873d246d370c11 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Thu, 9 May 2024 00:14:56 +0530 Subject: [PATCH 9/9] add-plugin-in-deprecations-all --- packages/mui-codemod/src/deprecations/all/postcss.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index 8e72e2f8b9b462..6d6e4477e75161 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -12,6 +12,9 @@ const { plugin: stepConnectorClassesPlugin } = require('../step-connector-classe const { plugin: toggleButtonGroupClassesPlugin, } = require('../toggle-button-group-classes/postcss-plugin'); +const { + plugin: circularProgressClassesPlugin, +} = require('../circular-progress-classes/postcss-plugin'); module.exports = { plugins: [ @@ -20,6 +23,7 @@ module.exports = { buttonClassesPlugin, buttonGroupClassesPlugin, chipClassesPlugin, + circularProgressClassesPlugin, paginationItemClassesPlugin, stepConnectorClassesPlugin, toggleButtonGroupClassesPlugin,