diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index a20663b17fed66..2fa13df2e1d518 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -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 +``` + +### 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: diff --git a/docs/pages/material-ui/api/image-list-item-bar.json b/docs/pages/material-ui/api/image-list-item-bar.json index cea69779e61c23..f7449163555f75 100644 --- a/docs/pages/material-ui/api/image-list-item-bar.json +++ b/docs/pages/material-ui/api/image-list-item-bar.json @@ -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 }, { @@ -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, diff --git a/docs/translations/api-docs/image-list-item-bar/image-list-item-bar.json b/docs/translations/api-docs/image-list-item-bar/image-list-item-bar.json index de7a8574f036e0..6afd001653b3c7 100644 --- a/docs/translations/api-docs/image-list-item-bar/image-list-item-bar.json +++ b/docs/translations/api-docs/image-list-item-bar/image-list-item-bar.json @@ -22,8 +22,19 @@ "actionIconActionPosLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the actionIcon", + "conditions": "actionPosition=\"left\"", + "deprecationInfo": "Combine the .MuiImageListItemBar-actionIcon and .MuiImageListItemBar-actionPositionLeft classes instead. See Migrating from deprecated APIs for more details." + }, + "actionPositionLeft": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the action container element", "conditions": "actionPosition=\"left\"" }, + "actionPositionRight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the action container element", + "conditions": "actionPosition=\"right\"" + }, "positionBelow": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -55,17 +66,20 @@ "titleWrapActionPosLeft": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the container element", - "conditions": "actionPosition=\"left\"" + "conditions": "actionPosition=\"left\"", + "deprecationInfo": "Combine the .MuiImageListItemBar-titleWrap and .MuiImageListItemBar-actionPositionLeft classes instead. See Migrating from deprecated APIs for more details." }, "titleWrapActionPosRight": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the container element", - "conditions": "actionPosition=\"right\"" + "conditions": "actionPosition=\"right\"", + "deprecationInfo": "Combine the .MuiImageListItemBar-titleWrap and .MuiImageListItemBar-actionPositionRight classes instead. See Migrating from deprecated APIs for more details." }, "titleWrapBelow": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the title and subtitle container element", - "conditions": "position=\"below\"" + "conditions": "position=\"below\"", + "deprecationInfo": "Combine the .MuiImageListItemBar-titleWrap and .MuiImageListItemBar-positionBelow classes instead. See Migrating from deprecated APIs for more details." } } } diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index aab255add10428..e1a6766b0a0651 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -1117,6 +1117,63 @@ npx @mui/codemod@next deprecations/list-item-props npx @mui/codemod@next deprecations/grid-props ``` +#### `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 +``` + #### `input-base-props` ```diff diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index aff9ab5da72113..eef74aec86bcd4 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -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'; @@ -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); diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.js new file mode 100644 index 00000000000000..11988591e587d6 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.js @@ -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); +} diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.test.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.test.js new file mode 100644 index 00000000000000..e61f28f8dd175e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/image-list-item-bar-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './image-list-item-bar-classes'; +import { plugin as postcssPlugin } from './postcss-plugin'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +const postcssProcessor = postcss([postcssPlugin]); + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('image-list-item-bar-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'double', trailingComma: true } }, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('css-transform', () => { + it('transforms classes as needed', async () => { + const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', async () => { + const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('test-cases', () => { + it('should not be the same', () => { + const actualJS = read('./test-cases/actual.js'); + const expectedJS = read('./test-cases/expected.js'); + expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); + + const actualCSS = read('./test-cases/actual.css'); + const expectedCSS = read('./test-cases/expected.css'); + expect(actualCSS).not.to.equal( + expectedCSS, + 'The actual and expected should be different', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/index.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/index.js new file mode 100644 index 00000000000000..4bce2017601524 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/index.js @@ -0,0 +1 @@ +export { default } from './image-list-item-bar-classes'; diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/postcss-plugin.js new file mode 100644 index 00000000000000..34749449c77a9f --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/postcss-plugin.js @@ -0,0 +1,43 @@ +const classes = [ + { + deprecatedClass: ' .MuiImageListItemBar-titleWrapBelow', + replacementSelector: '.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap', + }, + { + deprecatedClass: ' .MuiImageListItemBar-titleWrapActionPosLeft', + replacementSelector: '.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap', + }, + { + deprecatedClass: ' .MuiImageListItemBar-titleWrapActionPosRight', + replacementSelector: + '.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap', + }, + { + deprecatedClass: ' .MuiImageListItemBar-actionIconActionPosLeft', + replacementSelector: + '.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deprecated ImageListItemBar classes with new classes`, + Rule(rule) { + const { selector } = rule; + + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const selectorRegex = new RegExp(`${deprecatedClass}$`); + + if (selector.match(selectorRegex)) { + rule.selector = selector.replace(selectorRegex, replacementSelector); + } + }); + }, + }; +}; +plugin.postcss = true; + +module.exports = { + plugin, + classes, +}; diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/actual.css new file mode 100644 index 00000000000000..8d3f489a0a85ac --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/actual.css @@ -0,0 +1,15 @@ +.MuiImageListItemBar-root .MuiImageListItemBar-titleWrapBelow { + color: red; +} + +.MuiImageListItemBar-root .MuiImageListItemBar-titleWrapActionPosLeft { + color: red; +} + +.MuiImageListItemBar-root .MuiImageListItemBar-titleWrapActionPosRight { + color: red; +} + +.MuiImageListItemBar-root .MuiImageListItemBar-actionIconActionPosLeft { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/actual.js new file mode 100644 index 00000000000000..a64f44e3d4ff1f --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/actual.js @@ -0,0 +1,11 @@ +import { imageListItemBarClasses } from '@mui/material/ImageListItemBar'; + +('& .MuiImageListItemBar-titleWrapBelow'); +('& .MuiImageListItemBar-titleWrapActionPosLeft'); +('& .MuiImageListItemBar-titleWrapActionPosRight'); +('& .MuiImageListItemBar-actionIconActionPosLeft'); + +`& .${imageListItemBarClasses.titleWrapBelow}`; +`& .${imageListItemBarClasses.titleWrapActionPosLeft}`; +`& .${imageListItemBarClasses.titleWrapActionPosRight}`; +`& .${imageListItemBarClasses.actionIconActionPosLeft}`; diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/expected.css new file mode 100644 index 00000000000000..06bc0ae10bf699 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/expected.css @@ -0,0 +1,15 @@ +.MuiImageListItemBar-root.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap { + color: red; +} + +.MuiImageListItemBar-root.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap { + color: red; +} + +.MuiImageListItemBar-root.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap { + color: red; +} + +.MuiImageListItemBar-root.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/expected.js new file mode 100644 index 00000000000000..801634ca0cd7e8 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/image-list-item-bar-classes/test-cases/expected.js @@ -0,0 +1,11 @@ +import { imageListItemBarClasses } from '@mui/material/ImageListItemBar'; + +("&.MuiImageListItemBar-positionBelow > .MuiImageListItemBar-titleWrap"); +("&.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-titleWrap"); +("&.MuiImageListItemBar-actionPositionRight > .MuiImageListItemBar-titleWrap"); +("&.MuiImageListItemBar-actionPositionLeft > .MuiImageListItemBar-actionIcon"); + +`&.${imageListItemBarClasses.positionBelow} > .${imageListItemBarClasses.titleWrap}`; +`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.titleWrap}`; +`&.${imageListItemBarClasses.actionPositionRight} > .${imageListItemBarClasses.titleWrap}`; +`&.${imageListItemBarClasses.actionPositionLeft} > .${imageListItemBarClasses.actionIcon}`; diff --git a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js index ec6cb966f1c046..da46c6ddd9cb86 100644 --- a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js +++ b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js @@ -12,7 +12,11 @@ const useUtilityClasses = (ownerState) => { const { classes, position, actionIcon, actionPosition } = ownerState; const slots = { - root: ['root', `position${capitalize(position)}`], + root: [ + 'root', + `position${capitalize(position)}`, + `actionPosition${capitalize(actionPosition)}`, + ], titleWrap: [ 'titleWrap', `titleWrap${capitalize(position)}`, diff --git a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.test.js b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.test.js index 5fb7e82f511af6..91fd0bb40dca1c 100644 --- a/packages/mui-material/src/ImageListItemBar/ImageListItemBar.test.js +++ b/packages/mui-material/src/ImageListItemBar/ImageListItemBar.test.js @@ -43,6 +43,22 @@ describe('', () => { }); }); + describe('prop:actionPosition', () => { + it('should render the actionPositionLeft class', () => { + const { container } = render(); + + expect(container.querySelector('div')).to.have.class(classes.root); + expect(container.querySelector('div')).to.have.class(classes.actionPositionLeft); + }); + + it('should render the actionPositionRight class', () => { + const { container } = render(); + + expect(container.querySelector('div')).to.have.class(classes.root); + expect(container.querySelector('div')).to.have.class(classes.actionPositionRight); + }); + }); + describe('prop: position', () => { describe('position="top"', () => { it('should render the positionTop class', () => { diff --git a/packages/mui-material/src/ImageListItemBar/imageListItemBarClasses.ts b/packages/mui-material/src/ImageListItemBar/imageListItemBarClasses.ts index ac7faeba4d782c..8f44d3ae86e2fb 100644 --- a/packages/mui-material/src/ImageListItemBar/imageListItemBarClasses.ts +++ b/packages/mui-material/src/ImageListItemBar/imageListItemBarClasses.ts @@ -10,13 +10,23 @@ export interface ImageListItemBarClasses { positionTop: string; /** Styles applied to the root element if `position="below"`. */ positionBelow: string; + /** Styles applied to the action container element if `actionPosition="left"`. */ + actionPositionLeft: string; + /** Styles applied to the action container element if `actionPosition="right"`. */ + actionPositionRight: string; /** Styles applied to the title and subtitle container element. */ titleWrap: string; - /** Styles applied to the title and subtitle container element if `position="below"`. */ + /** Styles applied to the title and subtitle container element if `position="below"`. + * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap) and [.MuiImageListItemBar-positionBelow](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-positionBelow) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ titleWrapBelow: string; - /** Styles applied to the container element if `actionPosition="left"`. */ + /** Styles applied to the container element if `actionPosition="left"`. + * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap) and [.MuiImageListItemBar-actionPositionLeft](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionLeft) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ titleWrapActionPosLeft: string; - /** Styles applied to the container element if `actionPosition="right"`. */ + /** Styles applied to the container element if `actionPosition="right"`. + * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-titleWrap) and [.MuiImageListItemBar-actionPositionRight](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionRight) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ titleWrapActionPosRight: string; /** Styles applied to the title container element. */ title: string; @@ -24,7 +34,9 @@ export interface ImageListItemBarClasses { subtitle: string; /** Styles applied to the actionIcon if supplied. */ actionIcon: string; - /** Styles applied to the actionIcon if `actionPosition="left"`. */ + /** Styles applied to the actionIcon if `actionPosition="left"`. + * @deprecated Combine the [.MuiImageListItemBar-actionIcon](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionIcon) and [.MuiImageListItemBar-actionPositionLeft](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-actionPositionLeft) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. + */ actionIconActionPosLeft: string; } @@ -41,6 +53,8 @@ const imageListItemBarClasses: ImageListItemBarClasses = generateUtilityClasses( 'positionBottom', 'positionTop', 'positionBelow', + 'actionPositionLeft', + 'actionPositionRight', 'titleWrap', 'titleWrapBottom', 'titleWrapTop',