Skip to content

Commit 9900fcb

Browse files
headironcheadironc
authored
[material-ui][LinearProgress] Deprecate composed classes (#44933)
1 parent 1d38c20 commit 9900fcb

File tree

18 files changed

+603
-26
lines changed

18 files changed

+603
-26
lines changed

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1375,6 +1375,70 @@ Here's how to migrate:
13751375
},
13761376
```
13771377

1378+
## LinearProgress
1379+
1380+
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:
1381+
1382+
```bash
1383+
npx @mui/codemod@latest deprecations/linear-progress-classes <path>
1384+
```
1385+
1386+
### Composed CSS classes
1387+
1388+
The CSS classes that composed the `variant` and `color` prop values were deprecated.
1389+
1390+
Here's how to migrate:
1391+
1392+
```diff
1393+
-.MuiLinearProgress-bar1Buffer
1394+
+.MuiLinearProgress-buffer > .MuiLinearProgress-bar1
1395+
-.MuiLinearProgress-bar1Determinate
1396+
+.MuiLinearProgress-determinate > .MuiLinearProgress-bar1
1397+
-.MuiLinearProgress-bar1Indeterminate
1398+
+.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar1
1399+
-.MuiLinearProgress-bar2Buffer
1400+
+.MuiLinearProgress-buffer > .MuiLinearProgress-bar2
1401+
-.MuiLinearProgress-bar2Indeterminate
1402+
+.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar2
1403+
-.MuiLinearProgress-barColorPrimary
1404+
+.MuiLinearProgress-colorPrimary > .MuiLinearProgress-bar
1405+
-.MuiLinearProgress-barColorSecondary
1406+
+.MuiLinearProgress-colorSecondary > .MuiLinearProgress-bar
1407+
-.MuiLinearProgress-dashedColorPrimary
1408+
+.MuiLinearProgress-colorPrimary > .MuiLinearProgress-dashed
1409+
-.MuiLinearProgress-dashedColorSecondary
1410+
+.MuiLinearProgress-colorSecondary > .MuiLinearProgress-dashed
1411+
```
1412+
1413+
```diff
1414+
import { linearProgressClasses } from '@mui/material/LinearProgress';
1415+
1416+
MuiLinearProgress: {
1417+
styleOverrides: {
1418+
root: {
1419+
- [`&.${linearProgressClasses.bar1Buffer}`]: {},
1420+
+ [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar1}`]: {},
1421+
- [`&.${linearProgressClasses.bar1Determinate}`]: {},
1422+
+ [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1}`]: {},
1423+
- [`&.${linearProgressClasses.bar1Indeterminate}`]: {},
1424+
+ [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar1}`]: {},
1425+
- [`&.${linearProgressClasses.bar2Buffer}`]: {},
1426+
+ [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar2}`]: {},
1427+
- [`&.${linearProgressClasses.bar2Indeterminate}`]: {},
1428+
+ [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar2}`]: {},
1429+
- [`&.${linearProgressClasses.barColorPrimary}`]: {},
1430+
+ [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.bar}`]: {},
1431+
- [`&.${linearProgressClasses.barColorSecondary}`]: {},
1432+
+ [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.bar}`]: {},
1433+
- [`&.${linearProgressClasses.dashedColorPrimary}`]: {},
1434+
+ [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.dashed}`]: {},
1435+
- [`&.${linearProgressClasses.dashedColorSecondary}`]: {},
1436+
+ [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.dashed}`]: {},
1437+
},
1438+
},
1439+
}
1440+
```
1441+
13781442
## Modal
13791443

13801444
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

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,47 +37,66 @@
3737
"description": "Styles applied to the layered bar1 and bar2 elements.",
3838
"isGlobal": false
3939
},
40+
{
41+
"key": "bar1",
42+
"className": "MuiLinearProgress-bar1",
43+
"description": "Styles applied to the bar1 element.",
44+
"isGlobal": false
45+
},
4046
{
4147
"key": "bar1Buffer",
4248
"className": "MuiLinearProgress-bar1Buffer",
4349
"description": "Styles applied to the bar1 element if `variant=\"buffer\"`.",
44-
"isGlobal": false
50+
"isGlobal": false,
51+
"isDeprecated": true
4552
},
4653
{
4754
"key": "bar1Determinate",
4855
"className": "MuiLinearProgress-bar1Determinate",
4956
"description": "Styles applied to the bar1 element if `variant=\"determinate\"`.",
50-
"isGlobal": false
57+
"isGlobal": false,
58+
"isDeprecated": true
5159
},
5260
{
5361
"key": "bar1Indeterminate",
5462
"className": "MuiLinearProgress-bar1Indeterminate",
5563
"description": "Styles applied to the bar1 element if `variant=\"indeterminate or query\"`.",
64+
"isGlobal": false,
65+
"isDeprecated": true
66+
},
67+
{
68+
"key": "bar2",
69+
"className": "MuiLinearProgress-bar2",
70+
"description": "Styles applied to the bar2 element.",
5671
"isGlobal": false
5772
},
5873
{
5974
"key": "bar2Buffer",
6075
"className": "MuiLinearProgress-bar2Buffer",
6176
"description": "Styles applied to the bar2 element if `variant=\"buffer\"`.",
62-
"isGlobal": false
77+
"isGlobal": false,
78+
"isDeprecated": true
6379
},
6480
{
6581
"key": "bar2Indeterminate",
6682
"className": "MuiLinearProgress-bar2Indeterminate",
6783
"description": "Styles applied to the bar2 element if `variant=\"indeterminate or query\"`.",
68-
"isGlobal": false
84+
"isGlobal": false,
85+
"isDeprecated": true
6986
},
7087
{
7188
"key": "barColorPrimary",
7289
"className": "MuiLinearProgress-barColorPrimary",
7390
"description": "Styles applied to the bar elements if `color=\"primary\"`; bar2 if `variant` not \"buffer\".",
74-
"isGlobal": false
91+
"isGlobal": false,
92+
"isDeprecated": true
7593
},
7694
{
7795
"key": "barColorSecondary",
7896
"className": "MuiLinearProgress-barColorSecondary",
7997
"description": "Styles applied to the bar elements if `color=\"secondary\"`; bar2 if `variant` not \"buffer\".",
80-
"isGlobal": false
98+
"isGlobal": false,
99+
"isDeprecated": true
81100
},
82101
{
83102
"key": "buffer",
@@ -107,13 +126,15 @@
107126
"key": "dashedColorPrimary",
108127
"className": "MuiLinearProgress-dashedColorPrimary",
109128
"description": "Styles applied to the additional bar element if `variant=\"buffer\"` and `color=\"primary\"`.",
110-
"isGlobal": false
129+
"isGlobal": false,
130+
"isDeprecated": true
111131
},
112132
{
113133
"key": "dashedColorSecondary",
114134
"className": "MuiLinearProgress-dashedColorSecondary",
115135
"description": "Styles applied to the additional bar element if `variant=\"buffer\"` and `color=\"secondary\"`.",
116-
"isGlobal": false
136+
"isGlobal": false,
137+
"isDeprecated": true
117138
},
118139
{
119140
"key": "determinate",

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

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,40 +21,49 @@
2121
"description": "Styles applied to {{nodeName}}.",
2222
"nodeName": "the layered bar1 and bar2 elements"
2323
},
24+
"bar1": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the bar1 element" },
2425
"bar1Buffer": {
2526
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
2627
"nodeName": "the bar1 element",
27-
"conditions": "<code>variant=\"buffer\"</code>"
28+
"conditions": "<code>variant=\"buffer\"</code>",
29+
"deprecationInfo": "Use 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>"
2830
},
2931
"bar1Determinate": {
3032
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
3133
"nodeName": "the bar1 element",
32-
"conditions": "<code>variant=\"determinate\"</code>"
34+
"conditions": "<code>variant=\"determinate\"</code>",
35+
"deprecationInfo": "Use 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>"
3336
},
3437
"bar1Indeterminate": {
3538
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
3639
"nodeName": "the bar1 element",
37-
"conditions": "<code>variant=\"indeterminate or query\"</code>"
40+
"conditions": "<code>variant=\"indeterminate or query\"</code>",
41+
"deprecationInfo": "Use 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>"
3842
},
43+
"bar2": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the bar2 element" },
3944
"bar2Buffer": {
4045
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
4146
"nodeName": "the bar2 element",
42-
"conditions": "<code>variant=\"buffer\"</code>"
47+
"conditions": "<code>variant=\"buffer\"</code>",
48+
"deprecationInfo": "Use 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>"
4349
},
4450
"bar2Indeterminate": {
4551
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
4652
"nodeName": "the bar2 element",
47-
"conditions": "<code>variant=\"indeterminate or query\"</code>"
53+
"conditions": "<code>variant=\"indeterminate or query\"</code>",
54+
"deprecationInfo": "Use 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>"
4855
},
4956
"barColorPrimary": {
5057
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
5158
"nodeName": "the bar elements",
52-
"conditions": "<code>color=\"primary\"</code>; bar2 if <code>variant</code> not &quot;buffer&quot;"
59+
"conditions": "<code>color=\"primary\"</code>; bar2 if <code>variant</code> not &quot;buffer&quot;",
60+
"deprecationInfo": "Use 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>"
5361
},
5462
"barColorSecondary": {
5563
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
5664
"nodeName": "the bar elements",
57-
"conditions": "<code>color=\"secondary\"</code>; bar2 if <code>variant</code> not &quot;buffer&quot;"
65+
"conditions": "<code>color=\"secondary\"</code>; bar2 if <code>variant</code> not &quot;buffer&quot;",
66+
"deprecationInfo": "Use 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>"
5867
},
5968
"buffer": {
6069
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -79,12 +88,14 @@
7988
"dashedColorPrimary": {
8089
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
8190
"nodeName": "the additional bar element",
82-
"conditions": "<code>variant=\"buffer\"</code> and <code>color=\"primary\"</code>"
91+
"conditions": "<code>variant=\"buffer\"</code> and <code>color=\"primary\"</code>",
92+
"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>"
8393
},
8494
"dashedColorSecondary": {
8595
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
8696
"nodeName": "the additional bar element",
87-
"conditions": "<code>variant=\"buffer\"</code> and <code>color=\"secondary\"</code>"
97+
"conditions": "<code>variant=\"buffer\"</code> and <code>color=\"secondary\"</code>",
98+
"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>"
8899
},
89100
"determinate": {
90101
"description": "Styles applied to {{nodeName}} if {{conditions}}.",

‎packages/mui-codemod/README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1242,6 +1242,66 @@ npx @mui/codemod@latest deprecations/input-base-props <path>
12421242
npx @mui/codemod@latest deprecations/input-props <path>
12431243
```
12441244

1245+
#### `linear-progress-classes`
1246+
1247+
JS transforms:
1248+
1249+
```diff
1250+
import { linearProgressClasses } from '@mui/material/LinearProgress';
1251+
1252+
MuiLinearProgress: {
1253+
styleOverrides: {
1254+
root: {
1255+
- [`&.${linearProgressClasses.bar1Buffer}`]: {},
1256+
+ [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar1}`]: {},
1257+
- [`&.${linearProgressClasses.bar1Determinate}`]: {},
1258+
+ [`&.${linearProgressClasses.determinate} > .${linearProgressClasses.bar1}`]: {},
1259+
- [`&.${linearProgressClasses.bar1Indeterminate}`]: {},
1260+
+ [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar1}`]: {},
1261+
- [`&.${linearProgressClasses.bar2Buffer}`]: {},
1262+
+ [`&.${linearProgressClasses.buffer} > .${linearProgressClasses.bar2}`]: {},
1263+
- [`&.${linearProgressClasses.bar2Indeterminate}`]: {},
1264+
+ [`&.${linearProgressClasses.indeterminate} > .${linearProgressClasses.bar2}`]: {},
1265+
- [`&.${linearProgressClasses.barColorPrimary}`]: {},
1266+
+ [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.bar}`]: {},
1267+
- [`&.${linearProgressClasses.barColorSecondary}`]: {},
1268+
+ [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.bar}`]: {},
1269+
- [`&.${linearProgressClasses.dashedColorPrimary}`]: {},
1270+
+ [`&.${linearProgressClasses.colorPrimary} > .${linearProgressClasses.dashed}`]: {},
1271+
- [`&.${linearProgressClasses.dashedColorSecondary}`]: {},
1272+
+ [`&.${linearProgressClasses.colorSecondary} > .${linearProgressClasses.dashed}`]: {},
1273+
},
1274+
},
1275+
}
1276+
```
1277+
1278+
CSS transforms:
1279+
1280+
```diff
1281+
-.MuiLinearProgress-bar1Buffer
1282+
+.MuiLinearProgress-buffer > .MuiLinearProgress-bar1
1283+
-.MuiLinearProgress-bar1Determinate
1284+
+.MuiLinearProgress-determinate > .MuiLinearProgress-bar1
1285+
-.MuiLinearProgress-bar1Indeterminate
1286+
+.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar1
1287+
-.MuiLinearProgress-bar2Buffer
1288+
+.MuiLinearProgress-buffer > .MuiLinearProgress-bar2
1289+
-.MuiLinearProgress-bar2Indeterminate
1290+
+.MuiLinearProgress-indeterminate > .MuiLinearProgress-bar2
1291+
-.MuiLinearProgress-barColorPrimary
1292+
+.MuiLinearProgress-colorPrimary > .MuiLinearProgress-bar
1293+
-.MuiLinearProgress-barColorSecondary
1294+
+.MuiLinearProgress-colorSecondary > .MuiLinearProgress-bar
1295+
-.MuiLinearProgress-dashedColorPrimary
1296+
+.MuiLinearProgress-colorPrimary > .MuiLinearProgress-dashed
1297+
-.MuiLinearProgress-dashedColorSecondary
1298+
+.MuiLinearProgress-colorSecondary > .MuiLinearProgress-dashed
1299+
```
1300+
1301+
```bash
1302+
npx @mui/codemod@latest deprecations/linear-progress-classes <path>
1303+
```
1304+
12451305
#### `modal-props`
12461306

12471307
```diff

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import transformImageListItemBarClasses from '../image-list-item-bar-classes';
1616
import transformInputBaseProps from '../input-base-props';
1717
import transformInputProps from '../input-props';
1818
import transformListItemTextProps from '../list-item-text-props';
19+
import transformLinearProgressClasses from '../linear-progress-classes';
1920
import transformModalProps from '../modal-props';
2021
import transformOutlinedInputProps from '../outlined-input-props';
2122
import transformPaginationItemClasses from '../pagination-item-classes';
@@ -54,6 +55,7 @@ export default function deprecationsAll(file, api, options) {
5455
file.source = transformInputBaseProps(file, api, options);
5556
file.source = transformInputProps(file, api, options);
5657
file.source = transformListItemTextProps(file, api, options);
58+
file.source = transformLinearProgressClasses(file, api, options);
5759
file.source = transformModalProps(file, api, options);
5860
file.source = transformOutlinedInputProps(file, api, options);
5961
file.source = transformPaginationItemClasses(file, api, options);

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ const {
1515
const {
1616
plugin: circularProgressClassesPlugin,
1717
} = require('../circular-progress-classes/postcss-plugin');
18+
const {
19+
plugin: linearProgressClassesPlugin,
20+
} = require('../linear-progress-classes/postcss-plugin');
1821
const { plugin: tabClassesPlugin } = require('../tab-classes/postcss-plugin');
1922
const {
2023
plugin: tableSortLabelClassesPlugin,
@@ -29,6 +32,7 @@ module.exports = {
2932
buttonGroupClassesPlugin,
3033
chipClassesPlugin,
3134
circularProgressClassesPlugin,
35+
linearProgressClassesPlugin,
3236
paginationItemClassesPlugin,
3337
stepConnectorClassesPlugin,
3438
toggleButtonGroupClassesPlugin,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './linear-progress-classes';

0 commit comments

Comments
 (0)