[ImageListItemBar] Remove deprecated CSS classes (#48064)

Author: siriwatknp

docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md

@@ -1016,6 +1016,21 @@ Use `sx={{ opacity : "0.6" }}` (or any opacity):
  />
 ```
 
+#### ImageListItemBar deprecated CSS classes removed
+
+Use the [image-list-item-bar-classes 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 section:
+
+```bash
+npx @mui/codemod@latest deprecations/image-list-item-bar-classes <path>
+```
+
+The following deprecated `ImageListItemBar` CSS classes have been removed:
+
+- `titleWrapBelow` → use `.MuiImageListItemBar-titleWrap` with `.MuiImageListItemBar-positionBelow` on the root
+- `titleWrapActionPosLeft` → use `.MuiImageListItemBar-titleWrap` with `.MuiImageListItemBar-actionPositionLeft` on the root
+- `titleWrapActionPosRight` → use `.MuiImageListItemBar-titleWrap` with `.MuiImageListItemBar-actionPositionRight` on the root
+- `actionIconActionPosLeft` → use `.MuiImageListItemBar-actionIcon` with `.MuiImageListItemBar-actionPositionLeft` on the root
+
 #### FormControlLabel deprecated props removed
 
 Use the [form-control-label-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#form-control-label-props) below to migrate the code as described in the following section:

docs/pages/material-ui/api/image-list-item-bar.json

@@ -35,13 +35,6 @@
       "description": "Styles applied to the actionIcon if supplied.",
       "isGlobal": false
     },
-    {
-      "key": "actionIconActionPosLeft",
-      "className": "MuiImageListItemBar-actionIconActionPosLeft",
-      "description": "Styles applied to the actionIcon if `actionPosition=\"left\"`.",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
     {
       "key": "actionPositionLeft",
       "className": "MuiImageListItemBar-actionPositionLeft",
@@ -95,27 +88,6 @@
       "className": "MuiImageListItemBar-titleWrap",
       "description": "Styles applied to the title and subtitle container element.",
       "isGlobal": false
-    },
-    {
-      "key": "titleWrapActionPosLeft",
-      "className": "MuiImageListItemBar-titleWrapActionPosLeft",
-      "description": "Styles applied to the container element if `actionPosition=\"left\"`.",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
-    {
-      "key": "titleWrapActionPosRight",
-      "className": "MuiImageListItemBar-titleWrapActionPosRight",
-      "description": "Styles applied to the container element if `actionPosition=\"right\"`.",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
-    {
-      "key": "titleWrapBelow",
-      "className": "MuiImageListItemBar-titleWrapBelow",
-      "description": "Styles applied to the title and subtitle container element if `position=\"below\"`.",
-      "isGlobal": false,
-      "isDeprecated": true
     }
   ],
   "spread": true,

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

@@ -19,12 +19,6 @@
       "nodeName": "the actionIcon",
       "conditions": "supplied"
     },
-    "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-MuiImageListItemBar-actionIcon\">.MuiImageListItemBar-actionIcon</a> and <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-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",
@@ -62,24 +56,6 @@
     "titleWrap": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the title and subtitle container element"
-    },
-    "titleWrapActionPosLeft": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the container element",
-      "conditions": "<code>actionPosition=\"left\"</code>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-titleWrap\">.MuiImageListItemBar-titleWrap</a> and <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-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>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-titleWrap\">.MuiImageListItemBar-titleWrap</a> and <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-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>",
-      "deprecationInfo": "Combine the <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-titleWrap\">.MuiImageListItemBar-titleWrap</a> and <a href=\"/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-positionBelow\">.MuiImageListItemBar-positionBelow</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
     }
   }
 }

packages/mui-material/src/ImageListItemBar/ImageListItemBar.js

@@ -10,22 +10,18 @@ import capitalize from '../utils/capitalize';
 import { getImageListItemBarUtilityClass } from './imageListItemBarClasses';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, position, actionIcon, actionPosition } = ownerState;
+  const { classes, position, actionPosition } = ownerState;
 
   const slots = {
     root: [
       'root',
       `position${capitalize(position)}`,
       `actionPosition${capitalize(actionPosition)}`,
     ],
-    titleWrap: [
-      'titleWrap',
-      `titleWrap${capitalize(position)}`,
-      actionIcon && `titleWrapActionPos${capitalize(actionPosition)}`,
-    ],
+    titleWrap: ['titleWrap'],
     title: ['title'],
     subtitle: ['subtitle'],
-    actionIcon: ['actionIcon', `actionIconActionPos${capitalize(actionPosition)}`],
+    actionIcon: ['actionIcon'],
   };
 
   return composeClasses(slots, getImageListItemBarUtilityClass, classes);
@@ -85,13 +81,7 @@ const ImageListItemBarTitleWrap = styled('div', {
   name: 'MuiImageListItemBar',
   slot: 'TitleWrap',
   overridesResolver: (props, styles) => {
-    const { ownerState } = props;
-
-    return [
-      styles.titleWrap,
-      styles[`titleWrap${capitalize(ownerState.position)}`],
-      ownerState.actionIcon && styles[`titleWrapActionPos${capitalize(ownerState.actionPosition)}`],
-    ];
+    return [styles.titleWrap];
   },
 })(
   memoTheme(({ theme }) => {
@@ -161,12 +151,7 @@ const ImageListItemBarActionIcon = styled('div', {
   name: 'MuiImageListItemBar',
   slot: 'ActionIcon',
   overridesResolver: (props, styles) => {
-    const { ownerState } = props;
-
-    return [
-      styles.actionIcon,
-      styles[`actionIconActionPos${capitalize(ownerState.actionPosition)}`],
-    ];
+    return [styles.actionIcon];
   },
 })({
   variants: [

packages/mui-material/src/ImageListItemBar/ImageListItemBar.test.js

@@ -76,25 +76,23 @@ describe('<ImageListItemBar />', () => {
           expect(container.querySelector('div')).to.have.class(classes.positionBelow);
         });
 
-        it('should render a child div with the titleWrapBelow class', () => {
+        it('should render the titleWrap class and positionBelow on the root', () => {
           const { container } = render(<ImageListItemBar title="text" position="below" />);
 
+          expect(container.querySelector('div')).to.have.class(classes.positionBelow);
           expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrap);
-          expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrapBelow);
         });
       });
     });
 
     describe('prop: actionPosition', () => {
-      it('should render a child div with the titleWrapActionPosLeft class', () => {
+      it('should render the titleWrap class and actionPositionLeft on the root', () => {
         const { container } = render(
           <ImageListItemBar title="text" actionIcon={<div />} actionPosition="left" />,
         );
 
+        expect(container.querySelector('div')).to.have.class(classes.actionPositionLeft);
         expect(container.firstChild.querySelector('div')).to.have.class(classes.titleWrap);
-        expect(container.firstChild.querySelector('div')).to.have.class(
-          classes.titleWrapActionPosLeft,
-        );
       });
     });
   });

packages/mui-material/src/ImageListItemBar/imageListItemBarClasses.ts

@@ -16,28 +16,12 @@ export interface ImageListItemBarClasses {
   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"`.
-   * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-titleWrap) and [.MuiImageListItemBar-positionBelow](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-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"`.
-   * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-titleWrap) and [.MuiImageListItemBar-actionPositionLeft](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-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"`.
-   * @deprecated Combine the [.MuiImageListItemBar-titleWrap](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-titleWrap) and [.MuiImageListItemBar-actionPositionRight](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-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;
   /** Styles applied to the subtitle container element. */
   subtitle: string;
   /** Styles applied to the actionIcon if supplied. */
   actionIcon: string;
-  /** 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-MuiImageListItemBar-actionIcon) and [.MuiImageListItemBar-actionPositionLeft](/material-ui/api/image-list-item-bar/#image-list-item-bar-classes-MuiImageListItemBar-actionPositionLeft) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  actionIconActionPosLeft: string;
 }
 
 export type ImageListItemBarClassKey = keyof ImageListItemBarClasses;
@@ -56,16 +40,9 @@ const imageListItemBarClasses: ImageListItemBarClasses = generateUtilityClasses(
     'actionPositionLeft',
     'actionPositionRight',
     'titleWrap',
-    'titleWrapBottom',
-    'titleWrapTop',
-    'titleWrapBelow',
-    'titleWrapActionPosLeft',
-    'titleWrapActionPosRight',
     'title',
     'subtitle',
     'actionIcon',
-    'actionIconActionPosLeft',
-    'actionIconActionPosRight',
   ],
 );