Skip to content

Commit 61c4ccb

Browse files
sai6855sai6855
authored
[material-ui][ImageListItemBar] Deprecate composed classes (#42905)
1 parent 4a64dae commit 61c4ccb

File tree

17 files changed

+496
-11
lines changed

17 files changed

+496
-11
lines changed

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1144,6 +1144,62 @@ The Grid's `wrap` prop was deprecated in favor of `flexWrap` MUI System prop:
11441144
/>;
11451145
```
11461146

1147+
## ImageListItemBar
1148+
1149+
Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#image-list-item-bar-classes) below to migrate the code as described in the following sections:
1150+
1151+
```bash
1152+
npx @mui/codemod@next deprecations/image-list-item-bar-classes <path>
1153+
```
1154+
1155+
### Composed CSS classes
1156+
1157+
The CSS classes that composed the following props were deprecated:
1158+
1159+
- `position` prop and `titleWrap` class
1160+
- `actionPosition` prop and `titleWrap` class
1161+
- `actionPosition` prop and `actionIcon` class
1162+
1163+
Here's how to migrate:
1164+
1165+
```diff
1166+
- .MuiImageListItemBar-titleWrapBelow
1167+
+.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap
1168+
- .MuiImageListItemBar-titleWrapActionPosLeft
1169+
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap
1170+
- .MuiImageListItemBar-titleWrapActionPosRight
1171+
+.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap
1172+
- .MuiImageListItemBar-actionIconActionPosLeft
1173+
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon
1174+
```
1175+
1176+
```diff
1177+
import { imageListItemBarClasses } from '@mui/material/ImageListItemBar';
1178+
1179+
MuiImageListItemBar: {
1180+
styleOverrides: {
1181+
root: {
1182+
- [`& .${imageListItemBarClasses.titleWrapBelow}`]: {
1183+
+ [`&.${imageListItemBarClasses.positionBelow} > .${imageListItemBarClasses.titleWrap}`]: {
1184+
color: 'red',
1185+
},
1186+
- [`& .${imageListItemBarClasses.titleWrapActionPosLeft}`]: {
1187+
+ [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.titleWrap}`]: {
1188+
color: 'red',
1189+
},
1190+
- [`& .${imageListItemBarClasses.titleWrapActionPosRight}`]: {
1191+
+ [`&.${imageListItemBarClasses.actionPositionRight} > .${imageListItemBarClasses.titleWrap}`]: {
1192+
color: 'red',
1193+
},
1194+
- [`& .${imageListItemBarClasses.actionIconActionPosLeft}`]: {
1195+
+ [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.actionIcon}`]: {
1196+
color: 'red',
1197+
},
1198+
},
1199+
},
1200+
},
1201+
```
1202+
11471203
## Modal
11481204

11491205
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/image-list-item-bar.json

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,19 @@
3939
"key": "actionIconActionPosLeft",
4040
"className": "MuiImageListItemBar-actionIconActionPosLeft",
4141
"description": "Styles applied to the actionIcon if `actionPosition=\"left\"`.",
42+
"isGlobal": false,
43+
"isDeprecated": true
44+
},
45+
{
46+
"key": "actionPositionLeft",
47+
"className": "MuiImageListItemBar-actionPositionLeft",
48+
"description": "Styles applied to the action container element if `actionPosition=\"left\"`.",
49+
"isGlobal": false
50+
},
51+
{
52+
"key": "actionPositionRight",
53+
"className": "MuiImageListItemBar-actionPositionRight",
54+
"description": "Styles applied to the action container element if `actionPosition=\"right\"`.",
4255
"isGlobal": false
4356
},
4457
{
@@ -87,19 +100,22 @@
87100
"key": "titleWrapActionPosLeft",
88101
"className": "MuiImageListItemBar-titleWrapActionPosLeft",
89102
"description": "Styles applied to the container element if `actionPosition=\"left\"`.",
90-
"isGlobal": false
103+
"isGlobal": false,
104+
"isDeprecated": true
91105
},
92106
{
93107
"key": "titleWrapActionPosRight",
94108
"className": "MuiImageListItemBar-titleWrapActionPosRight",
95109
"description": "Styles applied to the container element if `actionPosition=\"right\"`.",
96-
"isGlobal": false
110+
"isGlobal": false,
111+
"isDeprecated": true
97112
},
98113
{
99114
"key": "titleWrapBelow",
100115
"className": "MuiImageListItemBar-titleWrapBelow",
101116
"description": "Styles applied to the title and subtitle container element if `position=\"below\"`.",
102-
"isGlobal": false
117+
"isGlobal": false,
118+
"isDeprecated": true
103119
}
104120
],
105121
"spread": true,

‎docs/translations/api-docs/image-list-item-bar/image-list-item-bar.json

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,19 @@
2222
"actionIconActionPosLeft": {
2323
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
2424
"nodeName": "the actionIcon",
25+
"conditions": "<code>actionPosition=\"left\"</code>",
26+
"deprecationInfo": "Combine the <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionIcon\">.MuiImageListItemBar-actionIcon</a> and <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionLeft\">.MuiImageListItemBar-actionPositionLeft</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
27+
},
28+
"actionPositionLeft": {
29+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
30+
"nodeName": "the action container element",
2531
"conditions": "<code>actionPosition=\"left\"</code>"
2632
},
33+
"actionPositionRight": {
34+
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
35+
"nodeName": "the action container element",
36+
"conditions": "<code>actionPosition=\"right\"</code>"
37+
},
2738
"positionBelow": {
2839
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
2940
"nodeName": "the root element",
@@ -55,17 +66,20 @@
5566
"titleWrapActionPosLeft": {
5667
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
5768
"nodeName": "the container element",
58-
"conditions": "<code>actionPosition=\"left\"</code>"
69+
"conditions": "<code>actionPosition=\"left\"</code>",
70+
"deprecationInfo": "Combine the <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap\">.MuiImageListItemBar-titleWrap</a> and <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionLeft\">.MuiImageListItemBar-actionPositionLeft</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
5971
},
6072
"titleWrapActionPosRight": {
6173
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
6274
"nodeName": "the container element",
63-
"conditions": "<code>actionPosition=\"right\"</code>"
75+
"conditions": "<code>actionPosition=\"right\"</code>",
76+
"deprecationInfo": "Combine the <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap\">.MuiImageListItemBar-titleWrap</a> and <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionRight\">.MuiImageListItemBar-actionPositionRight</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
6477
},
6578
"titleWrapBelow": {
6679
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
6780
"nodeName": "the title and subtitle container element",
68-
"conditions": "<code>position=\"below\"</code>"
81+
"conditions": "<code>position=\"below\"</code>",
82+
"deprecationInfo": "Combine the <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap\">.MuiImageListItemBar-titleWrap</a> and <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-positionBelow\">.MuiImageListItemBar-positionBelow</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
6983
}
7084
}
7185
}

‎packages/mui-codemod/README.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1117,6 +1117,63 @@ npx @mui/codemod@next deprecations/list-item-props <path>
11171117
npx @mui/codemod@next deprecations/grid-props <path>
11181118
```
11191119

1120+
#### `image-list-item-bar-classes`
1121+
1122+
JS transforms:
1123+
1124+
```diff
1125+
import { imageListItemBarClasses } from '@mui/material/ImageListItemBar';
1126+
1127+
MuiImageListItemBar: {
1128+
styleOverrides: {
1129+
root: {
1130+
- [`& .${imageListItemBarClasses.titleWrapBelow}`]: {
1131+
+ [`&.${imageListItemBarClasses.positionBelow} > .${imageListItemBarClasses.titleWrap}`]: {
1132+
color: 'red',
1133+
},
1134+
- [`& .${imageListItemBarClasses.titleWrapActionPosLeft}`]: {
1135+
+ [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.titleWrap}`]: {
1136+
color: 'red',
1137+
},
1138+
- [`& .${imageListItemBarClasses.titleWrapActionPosRight}`]: {
1139+
+ [`&.${imageListItemBarClasses.actionPositionRight} > .${imageListItemBarClasses.titleWrap}`]: {
1140+
color: 'red',
1141+
},
1142+
- [`& .${imageListItemBarClasses.actionIconActionPosLeft}`]: {
1143+
+ [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.actionIcon}`]: {
1144+
color: 'red',
1145+
},
1146+
},
1147+
},
1148+
},
1149+
```
1150+
1151+
CSS transforms:
1152+
1153+
```diff
1154+
- .MuiImageListItemBar-titleWrapBelow
1155+
+.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap
1156+
```
1157+
1158+
```diff
1159+
- .MuiImageListItemBar-titleWrapActionPosLeft
1160+
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap
1161+
```
1162+
1163+
```diff
1164+
- .MuiImageListItemBar-titleWrapActionPosRight
1165+
+.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap
1166+
```
1167+
1168+
```diff
1169+
- .MuiImageListItemBar-actionIconActionPosLeft
1170+
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon
1171+
```
1172+
1173+
```bash
1174+
npx @mui/codemod@next deprecations/image-list-item-bar-classes <path>
1175+
```
1176+
11201177
#### `input-base-props`
11211178

11221179
```diff

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import transformDividerProps from '../divider-props';
1111
import transformFilledInputProps from '../filled-input-props';
1212
import transformFormControlLabelProps from '../form-control-label-props';
1313
import transformGridProps from '../grid-props';
14+
import transformImageListItemBarClasses from '../image-list-item-bar-classes';
1415
import transformInputBaseProps from '../input-base-props';
1516
import transformInputProps from '../input-props';
1617
import transformModalProps from '../modal-props';
@@ -41,6 +42,7 @@ export default function deprecationsAll(file, api, options) {
4142
file.source = transformFilledInputProps(file, api, options);
4243
file.source = transformFormControlLabelProps(file, api, options);
4344
file.source = transformGridProps(file, api, options);
45+
file.source = transformImageListItemBarClasses(file, api, options);
4446
file.source = transformInputBaseProps(file, api, options);
4547
file.source = transformInputProps(file, api, options);
4648
file.source = transformModalProps(file, api, options);

‎packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.js

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import { classes } from './postcss-plugin';
2+
3+
/**
4+
* @param {import('jscodeshift').FileInfo} file
5+
* @param {import('jscodeshift').API} api
6+
*/
7+
export default function transformer(file, api, options) {
8+
const j = api.jscodeshift;
9+
const root = j(file.source);
10+
const printOptions = options.printOptions;
11+
classes.forEach(({ deprecatedClass, replacementSelector }) => {
12+
const replacementSelectorPrefix = '&';
13+
root
14+
.find(j.ImportDeclaration)
15+
.filter((path) => path.node.source.value.match(/^@mui\/material\/ImageListItemBar$/))
16+
.forEach((path) => {
17+
path.node.specifiers.forEach((specifier) => {
18+
if (
19+
specifier.type === 'ImportSpecifier' &&
20+
specifier.imported.name === 'imageListItemBarClasses'
21+
) {
22+
const deprecatedAtomicClass = deprecatedClass.replace(
23+
`${deprecatedClass.split('-')[0]}-`,
24+
'',
25+
);
26+
root
27+
.find(j.MemberExpression, {
28+
object: { name: specifier.local.name },
29+
property: { name: deprecatedAtomicClass },
30+
})
31+
.forEach((memberExpression) => {
32+
const parent = memberExpression.parentPath.parentPath.value;
33+
if (parent.type === j.TemplateLiteral.name) {
34+
const memberExpressionIndex = parent.expressions.findIndex(
35+
(expression) => expression === memberExpression.value,
36+
);
37+
const precedingTemplateElement = parent.quasis[memberExpressionIndex];
38+
const atomicClasses = replacementSelector
39+
.replaceAll('MuiImageListItemBar-', '')
40+
.replaceAll(replacementSelectorPrefix, '')
41+
.replaceAll(' > ', '')
42+
.split('.')
43+
.filter(Boolean);
44+
45+
if (
46+
precedingTemplateElement.value.raw.endsWith(
47+
deprecatedClass.startsWith(' ')
48+
? `${replacementSelectorPrefix} .`
49+
: `${replacementSelectorPrefix}.`,
50+
)
51+
) {
52+
const atomicClassesArgs = [
53+
memberExpressionIndex,
54+
1,
55+
...atomicClasses.map((atomicClass) =>
56+
j.memberExpression(
57+
memberExpression.value.object,
58+
j.identifier(atomicClass),
59+
),
60+
),
61+
];
62+
parent.expressions.splice(...atomicClassesArgs);
63+
64+
if (replacementSelector.includes(' > ')) {
65+
const quasisArgs = [
66+
memberExpressionIndex,
67+
1,
68+
j.templateElement(
69+
{
70+
raw: precedingTemplateElement.value.raw.replace(' ', ''),
71+
cooked: precedingTemplateElement.value.cooked.replace(' ', ''),
72+
},
73+
false,
74+
),
75+
j.templateElement({ raw: ' > .', cooked: ' > .' }, false),
76+
];
77+
78+
if (atomicClasses.length === 3) {
79+
quasisArgs.splice(
80+
3,
81+
0,
82+
j.templateElement({ raw: '.', cooked: '.' }, false),
83+
);
84+
}
85+
86+
parent.quasis.splice(...quasisArgs);
87+
} else {
88+
parent.quasis.splice(
89+
memberExpressionIndex,
90+
1,
91+
j.templateElement(
92+
{
93+
raw: precedingTemplateElement.value.raw,
94+
cooked: precedingTemplateElement.value.cooked,
95+
},
96+
false,
97+
),
98+
99+
j.templateElement({ raw: '.', cooked: '.' }, false),
100+
);
101+
}
102+
}
103+
}
104+
});
105+
}
106+
});
107+
});
108+
109+
const selectorRegex = new RegExp(`${replacementSelectorPrefix}${deprecatedClass}$`);
110+
root
111+
.find(
112+
j.Literal,
113+
(literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex),
114+
)
115+
.forEach((path) => {
116+
path.replace(
117+
j.literal(
118+
path.value.value.replace(
119+
selectorRegex,
120+
`${replacementSelectorPrefix}${replacementSelector}`,
121+
),
122+
),
123+
);
124+
});
125+
});
126+
return root.toSource(printOptions);
127+
}

0 commit comments

Comments
 (0)