[material-ui][ListItemText] Add slots and slotProps (mui#44571)

Co-authored-by: siriwatknp <siriwatkunaporn@gmail.com>

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

@@ -1289,6 +1289,36 @@ The ListItemSecondaryAction component was deprecated in favor of the `secondaryA
  </ListItem>
 ```
 
+## ListItemText
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#list-item-text-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/list-item-text-props <path>
+```
+
+### primaryTypographyProps
+
+The ListItemText's `primaryTypographyProps` props were deprecated in favor of `slotProps.primary`:
+
+```diff
+ <ListItemText
+-  primaryTypographyProps={primaryTypographyProps}
++  slotProps={{ primary: primaryTypographyProps }}
+ />
+```
+
+### secondaryTypographyProps
+
+The ListItemText's `secondaryTypographyProps` props were deprecated in favor of `slotProps.secondary`:
+
+```diff
+ <ListItemText
+-  secondaryTypographyProps={secondaryTypographyProps}
++  slotProps={{ secondary: secondaryTypographyProps }}
+ />
+```
+
 ## 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:

docs/pages/material-ui/api/list-item-text.json

@@ -5,9 +5,31 @@
     "disableTypography": { "type": { "name": "bool" }, "default": "false" },
     "inset": { "type": { "name": "bool" }, "default": "false" },
     "primary": { "type": { "name": "node" } },
-    "primaryTypographyProps": { "type": { "name": "object" } },
+    "primaryTypographyProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.primary</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "secondary": { "type": { "name": "node" } },
-    "secondaryTypographyProps": { "type": { "name": "object" } },
+    "secondaryTypographyProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.secondary</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ primary?: func<br>&#124;&nbsp;object, secondary?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ primary?: elementType, secondary?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -21,6 +43,20 @@
     "import ListItemText from '@mui/material/ListItemText';",
     "import { ListItemText } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "primary",
+      "description": "The component that renders the primary slot.",
+      "default": "Typography",
+      "class": "MuiListItemText-primary"
+    },
+    {
+      "name": "secondary",
+      "description": "The component that renders the secondary slot.",
+      "default": "Typography",
+      "class": "MuiListItemText-secondary"
+    }
+  ],
   "classes": [
     {
       "key": "dense",
@@ -40,23 +76,11 @@
       "description": "Styles applied to the Typography component if primary and secondary are set.",
       "isGlobal": false
     },
-    {
-      "key": "primary",
-      "className": "MuiListItemText-primary",
-      "description": "Styles applied to the primary `Typography` component.",
-      "isGlobal": false
-    },
     {
       "key": "root",
       "className": "MuiListItemText-root",
       "description": "Styles applied to the root element.",
       "isGlobal": false
-    },
-    {
-      "key": "secondary",
-      "className": "MuiListItemText-secondary",
-      "description": "Styles applied to the secondary `Typography` component.",
-      "isGlobal": false
     }
   ],
   "spread": true,

docs/translations/api-docs/list-item-text/list-item-text.json

@@ -17,6 +17,8 @@
     "secondaryTypographyProps": {
       "description": "These props will be forwarded to the secondary typography component (as long as disableTypography is not <code>true</code>)."
     },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     }
@@ -37,14 +39,10 @@
       "nodeName": "the Typography component",
       "conditions": "primary and secondary are set"
     },
-    "primary": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the primary <code>Typography</code> component"
-    },
-    "root": { "description": "Styles applied to the root element." },
-    "secondary": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the secondary <code>Typography</code> component"
-    }
+    "root": { "description": "Styles applied to the root element." }
+  },
+  "slotDescriptions": {
+    "primary": "The component that renders the primary slot.",
+    "secondary": "The component that renders the secondary slot."
   }
 }

packages/mui-codemod/README.md

@@ -1107,6 +1107,32 @@ npx @mui/codemod@latest deprecations/form-control-label-props <path>
 npx @mui/codemod@latest deprecations/list-item-props <path>
 ```
 
+#### `list-item-text-props`
+
+```diff
+ <ListItemText
+-  primaryTypographyProps={primaryTypographyProps}
++  slotProps={{ primary: primaryTypographyProps }}
+-  secondaryTypographyProps={secondaryTypographyProps}
++  slotProps={{ secondary: secondaryTypographyProps }}
+ />
+```
+
+```diff
+ MuiListItemText: {
+   defaultProps: {
+-  primaryTypographyProps:primaryTypographyProps
++  slotProps:{ primary: primaryTypographyProps }
+-  secondaryTypographyProps:secondaryTypographyProps
++  slotProps:{ secondary: secondaryTypographyProps }
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@latest deprecations/list-item-text-props <path>
+```
+
 #### `image-list-item-bar-classes`
 
 JS transforms:

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

@@ -15,6 +15,7 @@ import transformFormControlLabelProps from '../form-control-label-props';
 import transformImageListItemBarClasses from '../image-list-item-bar-classes';
 import transformInputBaseProps from '../input-base-props';
 import transformInputProps from '../input-props';
+import transformListItemTextProps from '../list-item-text-props';
 import transformModalProps from '../modal-props';
 import transformOutlinedInputProps from '../outlined-input-props';
 import transformPaginationItemClasses from '../pagination-item-classes';
@@ -49,6 +50,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformImageListItemBarClasses(file, api, options);
   file.source = transformInputBaseProps(file, api, options);
   file.source = transformInputProps(file, api, options);
+  file.source = transformListItemTextProps(file, api, options);
   file.source = transformModalProps(file, api, options);
   file.source = transformOutlinedInputProps(file, api, options);
   file.source = transformPaginationItemClasses(file, api, options);

packages/mui-codemod/src/deprecations/list-item-text-props/index.js

@@ -0,0 +1 @@
+export { default } from './list-item-text-props';

packages/mui-codemod/src/deprecations/list-item-text-props/list-item-text-props.js

@@ -0,0 +1,30 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @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;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'ListItemText' });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'ListItemText',
+    propName: 'primaryTypographyProps',
+    slotName: 'primary',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'ListItemText',
+    propName: 'secondaryTypographyProps',
+    slotName: 'secondary',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/list-item-text-props/list-item-text-props.test.js

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './list-item-text-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('list-item-text-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ 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('[theme] list-item-text-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          { printOptions: { trailingComma: false } },
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/list-item-text-props/test-cases/actual.js

@@ -0,0 +1,12 @@
+import ListItemText from '@mui/material/ListItemText';
+
+<ListItemText secondaryTypographyProps={secondaryTypographyProps} />;
+<ListItemText primaryTypographyProps={primaryTypographyProps} />;
+<ListItemText
+  primaryTypographyProps={primaryTypographyProps}
+  secondaryTypographyProps={secondaryTypographyProps}
+/>;
+<ListItemText
+  slotProps={{ primary: primarySlotProps }}
+  secondaryTypographyProps={secondaryTypographyProps}
+/>;

packages/mui-codemod/src/deprecations/list-item-text-props/test-cases/expected.js

@@ -0,0 +1,18 @@
+import ListItemText from '@mui/material/ListItemText';
+
+<ListItemText slotProps={{
+  secondary: secondaryTypographyProps
+}} />;
+<ListItemText slotProps={{
+  primary: primaryTypographyProps
+}} />;
+<ListItemText
+  slotProps={{
+    primary: primaryTypographyProps,
+    secondary: secondaryTypographyProps
+  }} />;
+<ListItemText
+  slotProps={{
+    primary: primarySlotProps,
+    secondary: secondaryTypographyProps
+  }} />;

packages/mui-codemod/src/deprecations/list-item-text-props/test-cases/theme.actual.js

@@ -0,0 +1,32 @@
+fn({
+  MuiListItemText: {
+    defaultProps: {
+      primaryTypographyProps: primaryTypographyProps,
+    },
+  },
+});
+
+fn({
+  MuiListItemText: {
+    defaultProps: {
+      secondaryTypographyProps: secondaryTypographyProps,
+    },
+  },
+});
+fn({
+  MuiListItemText: {
+    defaultProps: {
+      primaryTypographyProps: primaryTypographyProps,
+      secondaryTypographyProps: secondaryTypographyProps,
+    },
+  },
+});
+
+fn({
+  MuiListItemText: {
+    defaultProps: {
+      slotProps: { primary: primarySlotProps },
+      secondaryTypographyProps: secondaryTypographyProps,
+    },
+  },
+});

packages/mui-codemod/src/deprecations/list-item-text-props/test-cases/theme.expected.js

@@ -0,0 +1,40 @@
+fn({
+  MuiListItemText: {
+    defaultProps: {
+      slotProps: {
+        primary: primaryTypographyProps
+      },
+    },
+  },
+});
+
+fn({
+  MuiListItemText: {
+    defaultProps: {
+      slotProps: {
+        secondary: secondaryTypographyProps
+      },
+    },
+  },
+});
+fn({
+  MuiListItemText: {
+    defaultProps: {
+      slotProps: {
+        primary: primaryTypographyProps,
+        secondary: secondaryTypographyProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiListItemText: {
+    defaultProps: {
+      slotProps: {
+        primary: primarySlotProps,
+        secondary: secondaryTypographyProps
+      }
+    },
+  },
+});