[material-ui][LinearProgress] Deprecate composed classes

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -1375,6 +1375,70 @@ Here's how to migrate:
  },
 ```
 
+## LinearProgress
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#linear-progress-classes) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/linear-progress-classes <path>
+```
+
+### Composed CSS classes
+
+The CSS classes that composed the `variant` and `color` prop values were deprecated.
+
+Here's how to migrate:
+
+```diff
+-.MuiLinearProgress-bar1Buffer
++.MuiLinearProgress-buffer > .MuiLinearProgress-bar1
+-.MuiLinearProgress-bar1Determinate
++.MuiLinearProgress-determinate > .MuiLinearProgress-bar1
+-.MuiLinearProgress-bar1Indeterminate
++.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar1
+-.MuiLinearProgress-bar2Buffer
++.MuiLinearProgress-buffer > .MuiLinearProgress-bar2
+-.MuiLinearProgress-bar2Indeterminate
++.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar2
+-.MuiLinearProgress-barColorPrimary
++.MuiLinearProgress-colorPrimary > .MuiLinearProgress-bar
+-.MuiLinearProgress-barColorSecondary
++.MuiLinearProgress-colorSecondary > .MuiLinearProgress-bar
+-.MuiLinearProgress-dashedColorPrimary
++.MuiLinearProgress-colorPrimary > .MuiLinearProgress-dashed
+-.MuiLinearProgress-dashedColorSecondary
++.MuiLinearProgress-colorSecondary > .MuiLinearProgress-dashed
+```
+
+```diff
+ import { linearProgressClasses } from '@mui/material/LinearProgress';
+
+ MuiLinearProgress: {
+   styleOverrides: {
+     root: {
+-      [`&.${linearProgressClasses.bar1Buffer}`]: {},
++      [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar1}`]: {},
+-      [`&.${linearProgressClasses.bar1Determinate}`]: {},
++      [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1}`]: {},
+-      [`&.${linearProgressClasses.bar1Indeterminate}`]: {},
++      [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar1}`]: {},
+-      [`&.${linearProgressClasses.bar2Buffer}`]: {},
++      [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar2}`]: {},
+-      [`&.${linearProgressClasses.bar2Indeterminate}`]: {},
++      [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar2}`]: {},
+-      [`&.${linearProgressClasses.barColorPrimary}`]: {},
++      [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.bar}`]: {},
+-      [`&.${linearProgressClasses.barColorSecondary}`]: {},
++      [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.bar}`]: {},
+-      [`&.${linearProgressClasses.dashedColorPrimary}`]: {},
++      [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.dashed}`]: {},
+-      [`&.${linearProgressClasses.dashedColorSecondary}`]: {},
++      [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.dashed}`]: {},
+     },
+   },
+ }
+```
+
 ## Modal
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#modal-props) below to migrate the code as described in the following sections:

docs/pages/material-ui/api/linear-progress.json

@@ -41,43 +41,50 @@
       "key": "bar1Buffer",
       "className": "MuiLinearProgress-bar1Buffer",
       "description": "Styles applied to the bar1 element if `variant=\"buffer\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "bar1Determinate",
       "className": "MuiLinearProgress-bar1Determinate",
       "description": "Styles applied to the bar1 element if `variant=\"determinate\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "bar1Indeterminate",
       "className": "MuiLinearProgress-bar1Indeterminate",
       "description": "Styles applied to the bar1 element if `variant=\"indeterminate or query\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "bar2Buffer",
       "className": "MuiLinearProgress-bar2Buffer",
       "description": "Styles applied to the bar2 element if `variant=\"buffer\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "bar2Indeterminate",
       "className": "MuiLinearProgress-bar2Indeterminate",
       "description": "Styles applied to the bar2 element if `variant=\"indeterminate or query\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "barColorPrimary",
       "className": "MuiLinearProgress-barColorPrimary",
       "description": "Styles applied to the bar elements if `color=\"primary\"`; bar2 if `variant` not \"buffer\".",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "barColorSecondary",
       "className": "MuiLinearProgress-barColorSecondary",
       "description": "Styles applied to the bar elements if `color=\"secondary\"`; bar2 if `variant` not \"buffer\".",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "buffer",
@@ -107,13 +114,15 @@
       "key": "dashedColorPrimary",
       "className": "MuiLinearProgress-dashedColorPrimary",
       "description": "Styles applied to the additional bar element if `variant=\"buffer\"` and `color=\"primary\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "dashedColorSecondary",
       "className": "MuiLinearProgress-dashedColorSecondary",
       "description": "Styles applied to the additional bar element if `variant=\"buffer\"` and `color=\"secondary\"`.",
-      "isGlobal": false
+      "isGlobal": false,
+      "isDeprecated": true
     },
     {
       "key": "determinate",

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

@@ -24,37 +24,44 @@
     "bar1Buffer": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the bar1 element",
-      "conditions": "<code>variant=\"buffer\"</code>"
+      "conditions": "<code>variant=\"buffer\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-bar1\">.MuiLinearProgress-bar1</a> and <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-buffer\">.MuiLinearProgress-buffer</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "bar1Determinate": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the bar1 element",
-      "conditions": "<code>variant=\"determinate\"</code>"
+      "conditions": "<code>variant=\"determinate\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-bar1\">.MuiLinearProgress-bar1</a> and <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-determinate\">.MuiLinearProgress-determinate</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "bar1Indeterminate": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the bar1 element",
-      "conditions": "<code>variant=\"indeterminate or query\"</code>"
+      "conditions": "<code>variant=\"indeterminate or query\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-bar1\">.MuiLinearProgress-bar1</a> and <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-indeterminate\">.MuiLinearProgress-indeterminate</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "bar2Buffer": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the bar2 element",
-      "conditions": "<code>variant=\"buffer\"</code>"
+      "conditions": "<code>variant=\"buffer\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-bar2\">.MuiLinearProgress-bar2</a> and <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-buffer\">.MuiLinearProgress-buffer</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "bar2Indeterminate": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the bar2 element",
-      "conditions": "<code>variant=\"indeterminate or query\"</code>"
+      "conditions": "<code>variant=\"indeterminate or query\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-bar2\">.MuiLinearProgress-bar2</a> and <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-indeterminate\">.MuiLinearProgress-indeterminate</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "barColorPrimary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the bar elements",
-      "conditions": "<code>color=\"primary\"</code>; bar2 if <code>variant</code> not &quot;buffer&quot;"
+      "conditions": "<code>color=\"primary\"</code>; bar2 if <code>variant</code> not &quot;buffer&quot;",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-bar\">.MuiLinearProgress-bar</a> and <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-colorPrimary\">.MuiLinearProgress-colorPrimary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "barColorSecondary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the bar elements",
-      "conditions": "<code>color=\"secondary\"</code>; bar2 if <code>variant</code> not &quot;buffer&quot;"
+      "conditions": "<code>color=\"secondary\"</code>; bar2 if <code>variant</code> not &quot;buffer&quot;",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-bar\">.MuiLinearProgress-bar</a> and <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-colorSecondary\">.MuiLinearProgress-colorSecondary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "buffer": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -79,12 +86,14 @@
     "dashedColorPrimary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the additional bar element",
-      "conditions": "<code>variant=\"buffer\"</code> and <code>color=\"primary\"</code>"
+      "conditions": "<code>variant=\"buffer\"</code> and <code>color=\"primary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-dashed\">.MuiLinearProgress-dashed</a> and <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-colorPrimary\">.MuiLinearProgress-colorPrimary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "dashedColorSecondary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the additional bar element",
-      "conditions": "<code>variant=\"buffer\"</code> and <code>color=\"secondary\"</code>"
+      "conditions": "<code>variant=\"buffer\"</code> and <code>color=\"secondary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-dashed\">.MuiLinearProgress-dashed</a> and <a href=\"/material-ui/api/linear-progress/#linear-progress-classes-colorSecondary\">.MuiLinearProgress-colorSecondary</a> classes instead. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
     },
     "determinate": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",

packages/mui-codemod/README.md

@@ -1242,6 +1242,66 @@ npx @mui/codemod@latest deprecations/input-base-props <path>
 npx @mui/codemod@latest deprecations/input-props <path>
 ```
 
+#### `linear-progress-classes`
+
+JS transforms:
+
+```diff
+ import { linearProgressClasses } from '@mui/material/LinearProgress';
+
+ MuiLinearProgress: {
+   styleOverrides: {
+     root: {
+-      [`&.${linearProgressClasses.bar1Buffer}`]: {},
++      [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar1}`]: {},
+-      [`&.${linearProgressClasses.bar1Determinate}`]: {},
++      [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1}`]: {},
+-      [`&.${linearProgressClasses.bar1Indeterminate}`]: {},
++      [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar1}`]: {},
+-      [`&.${linearProgressClasses.bar2Buffer}`]: {},
++      [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar2}`]: {},
+-      [`&.${linearProgressClasses.bar2Indeterminate}`]: {},
++      [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar2}`]: {},
+-      [`&.${linearProgressClasses.barColorPrimary}`]: {},
++      [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.bar}`]: {},
+-      [`&.${linearProgressClasses.barColorSecondary}`]: {},
++      [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.bar}`]: {},
+-      [`&.${linearProgressClasses.dashedColorPrimary}`]: {},
++      [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.dashed}`]: {},
+-      [`&.${linearProgressClasses.dashedColorSecondary}`]: {},
++      [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.dashed}`]: {},
+     },
+   },
+  }
+```
+
+CSS transforms:
+
+```diff
+-.MuiLinearProgress-bar1Buffer
++.MuiLinearProgress-buffer > .MuiLinearProgress-bar1
+-.MuiLinearProgress-bar1Determinate
++.MuiLinearProgress-determinate > .MuiLinearProgress-bar1
+-.MuiLinearProgress-bar1Indeterminate
++.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar1
+-.MuiLinearProgress-bar2Buffer
++.MuiLinearProgress-buffer > .MuiLinearProgress-bar2
+-.MuiLinearProgress-bar2Indeterminate
++.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar2
+-.MuiLinearProgress-barColorPrimary
++.MuiLinearProgress-colorPrimary > .MuiLinearProgress-bar
+-.MuiLinearProgress-barColorSecondary
++.MuiLinearProgress-colorSecondary > .MuiLinearProgress-bar
+-.MuiLinearProgress-dashedColorPrimary
++.MuiLinearProgress-colorPrimary > .MuiLinearProgress-dashed
+-.MuiLinearProgress-dashedColorSecondary
++.MuiLinearProgress-colorSecondary > .MuiLinearProgress-dashed
+```
+
+```bash
+npx @mui/codemod@latest deprecations/linear-progress-classes <path>
+```
+
 #### `modal-props`
 
 ```diff

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -16,6 +16,7 @@ import transformImageListItemBarClasses from '../image-list-item-bar-classes';
 import transformInputBaseProps from '../input-base-props';
 import transformInputProps from '../input-props';
 import transformListItemTextProps from '../list-item-text-props';
+import transformLinearProgressClasses from '../linear-progress-classes';
 import transformModalProps from '../modal-props';
 import transformOutlinedInputProps from '../outlined-input-props';
 import transformPaginationItemClasses from '../pagination-item-classes';
@@ -54,6 +55,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformInputBaseProps(file, api, options);
   file.source = transformInputProps(file, api, options);
   file.source = transformListItemTextProps(file, api, options);
+  file.source = transformLinearProgressClasses(file, api, options);
   file.source = transformModalProps(file, api, options);
   file.source = transformOutlinedInputProps(file, api, options);
   file.source = transformPaginationItemClasses(file, api, options);

packages/mui-codemod/src/deprecations/all/postcss.config.js

@@ -15,6 +15,9 @@ const {
 const {
   plugin: circularProgressClassesPlugin,
 } = require('../circular-progress-classes/postcss-plugin');
+const {
+  plugin: linearProgressClassesPlugin,
+} = require('../linear-progress-classes/postcss-plugin');
 const { plugin: tabClassesPlugin } = require('../tab-classes/postcss-plugin');
 const {
   plugin: tableSortLabelClassesPlugin,
@@ -29,6 +32,7 @@ module.exports = {
     buttonGroupClassesPlugin,
     chipClassesPlugin,
     circularProgressClassesPlugin,
+    linearProgressClassesPlugin,
     paginationItemClassesPlugin,
     stepConnectorClassesPlugin,
     toggleButtonGroupClassesPlugin,

packages/mui-codemod/src/deprecations/linear-progress-classes/index.js

@@ -0,0 +1 @@
+export { default } from './linear-progress-classes';