diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index fa090d329fd589..43c7dd258a1c6a 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -707,6 +707,46 @@ If you were using these deprecated class names as `styleOverrides` keys in your }); ``` +#### CircularProgress deprecated CSS classes removed + +Use the [circular-progress-classes 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 section: + +```bash +npx @mui/codemod@latest deprecations/circular-progress-classes +``` + +The following deprecated `CircularProgress` CSS classes have been removed: + +- `circleDeterminate` → use `.MuiCircularProgress-determinate .MuiCircularProgress-circle` +- `circleIndeterminate` → use `.MuiCircularProgress-indeterminate .MuiCircularProgress-circle` + +If you were using these deprecated class names as `styleOverrides` keys in your theme, use the `variants` array in the `circle` override instead: + +```diff + const theme = createTheme({ + components: { + MuiCircularProgress: { + styleOverrides: { +- circleDeterminate: { strokeDashoffset: '10px' }, +- circleIndeterminate: { animationDuration: '1.4s' }, ++ circle: { ++ variants: [ ++ { ++ props: { variant: 'determinate' }, ++ style: { strokeDashoffset: '10px' }, ++ }, ++ { ++ props: { variant: 'indeterminate' }, ++ style: { animationDuration: '1.4s' }, ++ }, ++ ], ++ }, + }, + }, + }, + }); +``` + #### Divider deprecated props removed 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/docs/pages/material-ui/api/circular-progress.json b/docs/pages/material-ui/api/circular-progress.json index 1b4ba112bcfa02..f63f73040a471b 100644 --- a/docs/pages/material-ui/api/circular-progress.json +++ b/docs/pages/material-ui/api/circular-progress.json @@ -40,26 +40,12 @@ "description": "Styles applied to the `circle` svg path.", "isGlobal": false }, - { - "key": "circleDeterminate", - "className": "MuiCircularProgress-circleDeterminate", - "description": "Styles applied to the `circle` svg path if `variant=\"determinate\"`.", - "isGlobal": false, - "isDeprecated": true - }, { "key": "circleDisableShrink", "className": "MuiCircularProgress-circleDisableShrink", "description": "Styles applied to the `circle` svg path if `disableShrink={true}`.", "isGlobal": false }, - { - "key": "circleIndeterminate", - "className": "MuiCircularProgress-circleIndeterminate", - "description": "Styles applied to the `circle` svg path if `variant=\"indeterminate\"`.", - "isGlobal": false, - "isDeprecated": true - }, { "key": "colorPrimary", "className": "MuiCircularProgress-colorPrimary", diff --git a/docs/translations/api-docs/circular-progress/circular-progress.json b/docs/translations/api-docs/circular-progress/circular-progress.json index e1f38f3e4c181f..d8c41375452659 100644 --- a/docs/translations/api-docs/circular-progress/circular-progress.json +++ b/docs/translations/api-docs/circular-progress/circular-progress.json @@ -30,23 +30,11 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the circle svg path" }, - "circleDeterminate": { - "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. See Migrating from deprecated APIs for more details." - }, "circleDisableShrink": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the circle svg path", "conditions": "disableShrink={true}" }, - "circleIndeterminate": { - "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. See Migrating from deprecated APIs for more details." - }, "colorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index f1f5512c6b8a01..0fe637fd6ebe70 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1092,11 +1092,11 @@ JS transforms: styleOverrides: { root: { - [`& .${circularProgressClasses.circleDeterminate}`]: { -+ [`&.${circularProgressClasses.determinate} > .${circularProgressClasses.circle}`]: { ++ [`&.${circularProgressClasses.determinate} .${circularProgressClasses.circle}`]: { color: 'red', }, - [`& .${circularProgressClasses.circleIndeterminate}`]: { -+ [`&.${circularProgressClasses.indeterminate} > .${circularProgressClasses.circle}`]: { ++ [`&.${circularProgressClasses.indeterminate} .${circularProgressClasses.circle}`]: { color: 'red', }, }, @@ -1108,12 +1108,12 @@ CSS transforms: ```diff -.MuiCircularProgress-circleDeterminate -+.MuiCircularProgress-determinate > .MuiCircularProgress-circle ++.MuiCircularProgress-determinate .MuiCircularProgress-circle ``` ```diff -.MuiCircularProgress-circleIndeterminate -+.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle ++.MuiCircularProgress-indeterminate .MuiCircularProgress-circle ``` ```bash 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 index 4dfb7061dea38c..9624ad9ad79d49 100644 --- 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 @@ -43,6 +43,7 @@ export default function transformer(file, api, options) { .replaceAll('MuiCircularProgress-', '') .replaceAll(replacementSelectorPrefix, '') .replaceAll(' > ', '') + .replaceAll(' ', '') .split('.') .filter(Boolean); @@ -87,6 +88,29 @@ export default function transformer(file, api, options) { ); } + parent.quasis.splice(...quasisArgs); + } else 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( 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 1b2e5f882aaf8c..25275a4d1da5a1 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 @@ -1,11 +1,11 @@ const classes = [ { deprecatedClass: ' .MuiCircularProgress-circleDeterminate', - replacementSelector: '.MuiCircularProgress-determinate > .MuiCircularProgress-circle', + replacementSelector: '.MuiCircularProgress-determinate .MuiCircularProgress-circle', }, { deprecatedClass: ' .MuiCircularProgress-circleIndeterminate', - replacementSelector: '.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle', + replacementSelector: '.MuiCircularProgress-indeterminate .MuiCircularProgress-circle', }, ]; 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 index 45fe6624b3d9ca..eaffffe4df3418 100644 --- 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 @@ -1,7 +1,7 @@ -.MuiCircularProgress-root.MuiCircularProgress-determinate > .MuiCircularProgress-circle { +.MuiCircularProgress-root.MuiCircularProgress-determinate .MuiCircularProgress-circle { color: red; } -.MuiCircularProgress-root.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle { +.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 index e9cf3628eda855..76ed8ca82e0159 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'; -("&.MuiCircularProgress-determinate > .MuiCircularProgress-circle"); -("&.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle"); -`&.${circularProgressClasses.determinate} > .${circularProgressClasses.circle}`; -`&.${circularProgressClasses.indeterminate} > .${circularProgressClasses.circle}`; +("&.MuiCircularProgress-determinate .MuiCircularProgress-circle"); +("&.MuiCircularProgress-indeterminate .MuiCircularProgress-circle"); +`&.${circularProgressClasses.determinate} .${circularProgressClasses.circle}`; +`&.${circularProgressClasses.indeterminate} .${circularProgressClasses.circle}`; diff --git a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/package.expected.js b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/package.expected.js index 27f3db241da386..61509968c700ad 100644 --- a/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/package.expected.js +++ b/packages/mui-codemod/src/deprecations/circular-progress-classes/test-cases/package.expected.js @@ -1,6 +1,6 @@ import { circularProgressClasses } from '@org/ui/material/CircularProgress'; -("&.MuiCircularProgress-determinate > .MuiCircularProgress-circle"); -("&.MuiCircularProgress-indeterminate > .MuiCircularProgress-circle"); -`&.${circularProgressClasses.determinate} > .${circularProgressClasses.circle}`; -`&.${circularProgressClasses.indeterminate} > .${circularProgressClasses.circle}`; +("&.MuiCircularProgress-determinate .MuiCircularProgress-circle"); +("&.MuiCircularProgress-indeterminate .MuiCircularProgress-circle"); +`&.${circularProgressClasses.determinate} .${circularProgressClasses.circle}`; +`&.${circularProgressClasses.indeterminate} .${circularProgressClasses.circle}`; diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.js b/packages/mui-material/src/CircularProgress/CircularProgress.js index 307246658bfcfb..0686fade4245c8 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.js @@ -64,7 +64,7 @@ const useUtilityClasses = (ownerState) => { root: ['root', variant, `color${capitalize(color)}`], svg: ['svg'], track: ['track'], - circle: ['circle', `circle${capitalize(variant)}`, disableShrink && 'circleDisableShrink'], + circle: ['circle', disableShrink && 'circleDisableShrink'], }; return composeClasses(slots, getCircularProgressUtilityClass, classes); @@ -127,11 +127,7 @@ const CircularProgressCircle = styled('circle', { overridesResolver: (props, styles) => { const { ownerState } = props; - return [ - styles.circle, - styles[`circle${capitalize(ownerState.variant)}`], - ownerState.disableShrink && styles.circleDisableShrink, - ]; + return [styles.circle, ownerState.disableShrink && styles.circleDisableShrink]; }, })( memoTheme(({ theme }) => ({ diff --git a/packages/mui-material/src/CircularProgress/CircularProgress.test.js b/packages/mui-material/src/CircularProgress/CircularProgress.test.js index b7697b55444c68..9e93733c97ece9 100644 --- a/packages/mui-material/src/CircularProgress/CircularProgress.test.js +++ b/packages/mui-material/src/CircularProgress/CircularProgress.test.js @@ -52,10 +52,11 @@ describe('', () => { const circularProgress = container.firstChild; expect(circularProgress).to.have.class(classes.root); const svg = circularProgress.firstChild; - expect(svg.firstChild).to.have.class( - classes.circleIndeterminate, - 'should have the circleIndeterminate class', + expect(circularProgress).to.have.class( + classes.indeterminate, + 'should have the indeterminate class', ); + expect(svg.firstChild).to.have.class(classes.circle, 'should have the circle class'); }); it('should render with a different size', () => { diff --git a/packages/mui-material/src/CircularProgress/circularProgressClasses.ts b/packages/mui-material/src/CircularProgress/circularProgressClasses.ts index ebf5c82778402f..6494e236cdd150 100644 --- a/packages/mui-material/src/CircularProgress/circularProgressClasses.ts +++ b/packages/mui-material/src/CircularProgress/circularProgressClasses.ts @@ -18,14 +18,6 @@ export interface CircularProgressClasses { track: string; /** 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-MuiCircularProgress-circle) and [.MuiCircularProgress-determinate](/material-ui/api/circular-progress/#circular-progress-classes-MuiCircularProgress-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-MuiCircularProgress-circle) and [.MuiCircularProgress-indeterminate](/material-ui/api/circular-progress/#circular-progress-classes-MuiCircularProgress-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}`. */ circleDisableShrink: string; } @@ -47,8 +39,6 @@ const circularProgressClasses: CircularProgressClasses = generateUtilityClasses( 'svg', 'track', 'circle', - 'circleDeterminate', - 'circleIndeterminate', 'circleDisableShrink', ], );