[circularprogress] Remove deprecated classes

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 <path>
+```
+
+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:

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",

docs/translations/api-docs/circular-progress/circular-progress.json

@@ -30,23 +30,11 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the <code>circle</code> svg path"
     },
-    "circleDeterminate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the <code>circle</code> svg path",
-      "conditions": "<code>variant=\"determinate\"</code>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/circular-progress/#circular-progress-classes-MuiCircularProgress-circle\">.MuiCircularProgress-circle</a> and <a href=\"/material-ui/api/circular-progress/#circular-progress-classes-MuiCircularProgress-determinate\">.MuiCircularProgress-determinate</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "circleDisableShrink": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the <code>circle</code> svg path",
       "conditions": "<code>disableShrink={true}</code>"
     },
-    "circleIndeterminate": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the <code>circle</code> svg path",
-      "conditions": "<code>variant=\"indeterminate\"</code>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/circular-progress/#circular-progress-classes-MuiCircularProgress-circle\">.MuiCircularProgress-circle</a> and <a href=\"/material-ui/api/circular-progress/#circular-progress-classes-MuiCircularProgress-indeterminate\">.MuiCircularProgress-indeterminate</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "colorPrimary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

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

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(

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',
   },
 ];
 

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;
 }

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}`;

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}`;

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 }) => ({

packages/mui-material/src/CircularProgress/CircularProgress.test.js

@@ -52,10 +52,11 @@ describe('<CircularProgress />', () => {
     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', () => {

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',
   ],
 );