Skip to content

Commit

Permalink
[material-ui][ImageListItemBar] Deprecate composed classes (#42905)
Browse files Browse the repository at this point in the history
  • Loading branch information
sai6855 authored Jul 24, 2024
1 parent 4a64dae commit 61c4ccb
Show file tree
Hide file tree
Showing 17 changed files with 496 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -1144,6 +1144,62 @@ The Grid's `wrap` prop was deprecated in favor of `flexWrap` MUI System prop:
/>;
```

## ImageListItemBar

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:

```bash
npx @mui/codemod@next deprecations/image-list-item-bar-classes <path>
```

### Composed CSS classes

The CSS classes that composed the following props were deprecated:

- `position` prop and `titleWrap` class
- `actionPosition` prop and `titleWrap` class
- `actionPosition` prop and `actionIcon` class

Here's how to migrate:

```diff
- .MuiImageListItemBar-titleWrapBelow
+.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap
- .MuiImageListItemBar-titleWrapActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap
- .MuiImageListItemBar-titleWrapActionPosRight
+.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap
- .MuiImageListItemBar-actionIconActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon
```

```diff
import { imageListItemBarClasses } from '@mui/material/ImageListItemBar';

MuiImageListItemBar: {
styleOverrides: {
root: {
- [`& .${imageListItemBarClasses.titleWrapBelow}`]: {
+ [`&.${imageListItemBarClasses.positionBelow} > .${imageListItemBarClasses.titleWrap}`]: {
color: 'red',
},
- [`& .${imageListItemBarClasses.titleWrapActionPosLeft}`]: {
+ [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.titleWrap}`]: {
color: 'red',
},
- [`& .${imageListItemBarClasses.titleWrapActionPosRight}`]: {
+ [`&.${imageListItemBarClasses.actionPositionRight} > .${imageListItemBarClasses.titleWrap}`]: {
color: 'red',
},
- [`& .${imageListItemBarClasses.actionIconActionPosLeft}`]: {
+ [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.actionIcon}`]: {
color: 'red',
},
},
},
},
```

## 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:
Expand Down
22 changes: 19 additions & 3 deletions docs/pages/material-ui/api/image-list-item-bar.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,19 @@
"key": "actionIconActionPosLeft",
"className": "MuiImageListItemBar-actionIconActionPosLeft",
"description": "Styles applied to the actionIcon if `actionPosition=\"left\"`.",
"isGlobal": false,
"isDeprecated": true
},
{
"key": "actionPositionLeft",
"className": "MuiImageListItemBar-actionPositionLeft",
"description": "Styles applied to the action container element if `actionPosition=\"left\"`.",
"isGlobal": false
},
{
"key": "actionPositionRight",
"className": "MuiImageListItemBar-actionPositionRight",
"description": "Styles applied to the action container element if `actionPosition=\"right\"`.",
"isGlobal": false
},
{
Expand Down Expand Up @@ -87,19 +100,22 @@
"key": "titleWrapActionPosLeft",
"className": "MuiImageListItemBar-titleWrapActionPosLeft",
"description": "Styles applied to the container element if `actionPosition=\"left\"`.",
"isGlobal": false
"isGlobal": false,
"isDeprecated": true
},
{
"key": "titleWrapActionPosRight",
"className": "MuiImageListItemBar-titleWrapActionPosRight",
"description": "Styles applied to the container element if `actionPosition=\"right\"`.",
"isGlobal": false
"isGlobal": false,
"isDeprecated": true
},
{
"key": "titleWrapBelow",
"className": "MuiImageListItemBar-titleWrapBelow",
"description": "Styles applied to the title and subtitle container element if `position=\"below\"`.",
"isGlobal": false
"isGlobal": false,
"isDeprecated": true
}
],
"spread": true,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,19 @@
"actionIconActionPosLeft": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the actionIcon",
"conditions": "<code>actionPosition=\"left\"</code>",
"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."
},
"actionPositionLeft": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the action container element",
"conditions": "<code>actionPosition=\"left\"</code>"
},
"actionPositionRight": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the action container element",
"conditions": "<code>actionPosition=\"right\"</code>"
},
"positionBelow": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
Expand Down Expand Up @@ -55,17 +66,20 @@
"titleWrapActionPosLeft": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the container element",
"conditions": "<code>actionPosition=\"left\"</code>"
"conditions": "<code>actionPosition=\"left\"</code>",
"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."
},
"titleWrapActionPosRight": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the container element",
"conditions": "<code>actionPosition=\"right\"</code>"
"conditions": "<code>actionPosition=\"right\"</code>",
"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."
},
"titleWrapBelow": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the title and subtitle container element",
"conditions": "<code>position=\"below\"</code>"
"conditions": "<code>position=\"below\"</code>",
"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."
}
}
}
57 changes: 57 additions & 0 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1117,6 +1117,63 @@ npx @mui/codemod@next deprecations/list-item-props <path>
npx @mui/codemod@next deprecations/grid-props <path>
```

#### `image-list-item-bar-classes`

JS transforms:

```diff
import { imageListItemBarClasses } from '@mui/material/ImageListItemBar';

MuiImageListItemBar: {
styleOverrides: {
root: {
- [`& .${imageListItemBarClasses.titleWrapBelow}`]: {
+ [`&.${imageListItemBarClasses.positionBelow} > .${imageListItemBarClasses.titleWrap}`]: {
color: 'red',
},
- [`& .${imageListItemBarClasses.titleWrapActionPosLeft}`]: {
+ [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.titleWrap}`]: {
color: 'red',
},
- [`& .${imageListItemBarClasses.titleWrapActionPosRight}`]: {
+ [`&.${imageListItemBarClasses.actionPositionRight} > .${imageListItemBarClasses.titleWrap}`]: {
color: 'red',
},
- [`& .${imageListItemBarClasses.actionIconActionPosLeft}`]: {
+ [`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.actionIcon}`]: {
color: 'red',
},
},
},
},
```

CSS transforms:

```diff
- .MuiImageListItemBar-titleWrapBelow
+.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap
```

```diff
- .MuiImageListItemBar-titleWrapActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap
```

```diff
- .MuiImageListItemBar-titleWrapActionPosRight
+.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap
```

```diff
- .MuiImageListItemBar-actionIconActionPosLeft
+.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon
```

```bash
npx @mui/codemod@next deprecations/image-list-item-bar-classes <path>
```

#### `input-base-props`

```diff
Expand Down
2 changes: 2 additions & 0 deletions packages/mui-codemod/src/deprecations/all/deprecations-all.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import transformDividerProps from '../divider-props';
import transformFilledInputProps from '../filled-input-props';
import transformFormControlLabelProps from '../form-control-label-props';
import transformGridProps from '../grid-props';
import transformImageListItemBarClasses from '../image-list-item-bar-classes';
import transformInputBaseProps from '../input-base-props';
import transformInputProps from '../input-props';
import transformModalProps from '../modal-props';
Expand Down Expand Up @@ -41,6 +42,7 @@ export default function deprecationsAll(file, api, options) {
file.source = transformFilledInputProps(file, api, options);
file.source = transformFormControlLabelProps(file, api, options);
file.source = transformGridProps(file, api, options);
file.source = transformImageListItemBarClasses(file, api, options);
file.source = transformInputBaseProps(file, api, options);
file.source = transformInputProps(file, api, options);
file.source = transformModalProps(file, api, options);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
import { classes } from './postcss-plugin';

/**
* @param {import('jscodeshift').FileInfo} file
* @param {import('jscodeshift').API} api
*/
export default function transformer(file, api, options) {
const j = api.jscodeshift;
const root = j(file.source);
const printOptions = options.printOptions;
classes.forEach(({ deprecatedClass, replacementSelector }) => {
const replacementSelectorPrefix = '&';
root
.find(j.ImportDeclaration)
.filter((path) => path.node.source.value.match(/^@mui\/material\/ImageListItemBar$/))
.forEach((path) => {
path.node.specifiers.forEach((specifier) => {
if (
specifier.type === 'ImportSpecifier' &&
specifier.imported.name === 'imageListItemBarClasses'
) {
const deprecatedAtomicClass = deprecatedClass.replace(
`${deprecatedClass.split('-')[0]}-`,
'',
);
root
.find(j.MemberExpression, {
object: { name: specifier.local.name },
property: { name: deprecatedAtomicClass },
})
.forEach((memberExpression) => {
const parent = memberExpression.parentPath.parentPath.value;
if (parent.type === j.TemplateLiteral.name) {
const memberExpressionIndex = parent.expressions.findIndex(
(expression) => expression === memberExpression.value,
);
const precedingTemplateElement = parent.quasis[memberExpressionIndex];
const atomicClasses = replacementSelector
.replaceAll('MuiImageListItemBar-', '')
.replaceAll(replacementSelectorPrefix, '')
.replaceAll(' > ', '')
.split('.')
.filter(Boolean);

if (
precedingTemplateElement.value.raw.endsWith(
deprecatedClass.startsWith(' ')
? `${replacementSelectorPrefix} .`
: `${replacementSelectorPrefix}.`,
)
) {
const atomicClassesArgs = [
memberExpressionIndex,
1,
...atomicClasses.map((atomicClass) =>
j.memberExpression(
memberExpression.value.object,
j.identifier(atomicClass),
),
),
];
parent.expressions.splice(...atomicClassesArgs);

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(
memberExpressionIndex,
1,
j.templateElement(
{
raw: precedingTemplateElement.value.raw,
cooked: precedingTemplateElement.value.cooked,
},
false,
),

j.templateElement({ raw: '.', cooked: '.' }, false),
);
}
}
}
});
}
});
});

const selectorRegex = new RegExp(`${replacementSelectorPrefix}${deprecatedClass}$`);
root
.find(
j.Literal,
(literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex),
)
.forEach((path) => {
path.replace(
j.literal(
path.value.value.replace(
selectorRegex,
`${replacementSelectorPrefix}${replacementSelector}`,
),
),
);
});
});
return root.toSource(printOptions);
}
Loading

0 comments on commit 61c4ccb

Please sign in to comment.