[ListItem, ListItemText] Remove deprecated props

docs/data/material/components/lists/CustomizedList.js

@@ -67,10 +67,12 @@ export default function CustomizedList() {
               <ListItemText
                 sx={{ my: 0 }}
                 primary="Firebash"
-                primaryTypographyProps={{
-                  fontSize: 20,
-                  fontWeight: 'medium',
-                  letterSpacing: 0,
+                slotProps={{
+                  primary: {
+                    fontSize: 20,
+                    fontWeight: 'medium',
+                    letterSpacing: 0,
+                  },
                 }}
               />
             </ListItemButton>
@@ -82,10 +84,12 @@ export default function CustomizedList() {
                 </ListItemIcon>
                 <ListItemText
                   primary="Project Overview"
-                  primaryTypographyProps={{
-                    color: 'primary',
-                    fontWeight: 'medium',
-                    variant: 'body2',
+                  slotProps={{
+                    primary: {
+                      color: 'primary',
+                      fontWeight: 'medium',
+                      variant: 'body2',
+                    },
                   }}
                 />
               </ListItemButton>
@@ -177,18 +181,20 @@ export default function CustomizedList() {
               >
                 <ListItemText
                   primary="Build"
-                  primaryTypographyProps={{
-                    fontSize: 15,
-                    fontWeight: 'medium',
-                    lineHeight: '20px',
-                    mb: '2px',
-                  }}
                   secondary="Authentication, Firestore Database, Realtime Database, Storage, Hosting, Functions, and Machine Learning"
-                  secondaryTypographyProps={{
-                    noWrap: true,
-                    fontSize: 12,
-                    lineHeight: '16px',
-                    color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)',
+                  slotProps={{
+                    primary: {
+                      fontSize: 15,
+                      fontWeight: 'medium',
+                      lineHeight: '20px',
+                      mb: '2px',
+                    },
+                    secondary: {
+                      noWrap: true,
+                      fontSize: 12,
+                      lineHeight: '16px',
+                      color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)',
+                    },
                   }}
                   sx={{ my: 0 }}
                 />
@@ -220,7 +226,7 @@ export default function CustomizedList() {
                     </ListItemIcon>
                     <ListItemText
                       primary={item.label}
-                      primaryTypographyProps={{ fontSize: 14, fontWeight: 'medium' }}
+                      slotProps={{ primary: { fontSize: 14, fontWeight: 'medium' } }}
                     />
                   </ListItemButton>
                 ))}

docs/data/material/components/lists/CustomizedList.tsx

@@ -67,10 +67,12 @@ export default function CustomizedList() {
               <ListItemText
                 sx={{ my: 0 }}
                 primary="Firebash"
-                primaryTypographyProps={{
-                  fontSize: 20,
-                  fontWeight: 'medium',
-                  letterSpacing: 0,
+                slotProps={{
+                  primary: {
+                    fontSize: 20,
+                    fontWeight: 'medium',
+                    letterSpacing: 0,
+                  },
                 }}
               />
             </ListItemButton>
@@ -82,10 +84,12 @@ export default function CustomizedList() {
                 </ListItemIcon>
                 <ListItemText
                   primary="Project Overview"
-                  primaryTypographyProps={{
-                    color: 'primary',
-                    fontWeight: 'medium',
-                    variant: 'body2',
+                  slotProps={{
+                    primary: {
+                      color: 'primary',
+                      fontWeight: 'medium',
+                      variant: 'body2',
+                    },
                   }}
                 />
               </ListItemButton>
@@ -177,18 +181,20 @@ export default function CustomizedList() {
               >
                 <ListItemText
                   primary="Build"
-                  primaryTypographyProps={{
-                    fontSize: 15,
-                    fontWeight: 'medium',
-                    lineHeight: '20px',
-                    mb: '2px',
-                  }}
                   secondary="Authentication, Firestore Database, Realtime Database, Storage, Hosting, Functions, and Machine Learning"
-                  secondaryTypographyProps={{
-                    noWrap: true,
-                    fontSize: 12,
-                    lineHeight: '16px',
-                    color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)',
+                  slotProps={{
+                    primary: {
+                      fontSize: 15,
+                      fontWeight: 'medium',
+                      lineHeight: '20px',
+                      mb: '2px',
+                    },
+                    secondary: {
+                      noWrap: true,
+                      fontSize: 12,
+                      lineHeight: '16px',
+                      color: open ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0.5)',
+                    },
                   }}
                   sx={{ my: 0 }}
                 />
@@ -220,7 +226,7 @@ export default function CustomizedList() {
                     </ListItemIcon>
                     <ListItemText
                       primary={item.label}
-                      primaryTypographyProps={{ fontSize: 14, fontWeight: 'medium' }}
+                      slotProps={{ primary: { fontSize: 14, fontWeight: 'medium' } }}
                     />
                   </ListItemButton>
                 ))}

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

@@ -784,6 +784,54 @@ The following deprecated prop has been removed:
  />
 ```
 
+#### ListItem deprecated props removed
+
+Use the [list-item-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#list-item-props) below to migrate the code as described in the following section:
+
+```bash
+npx @mui/codemod@latest deprecations/list-item-props <path>
+```
+
+The following deprecated props have been removed:
+
+- `components` — use `slots` instead
+- `componentsProps` — use `slotProps` instead
+- `ContainerComponent` — use `component` or `slots.root` instead
+- `ContainerProps` — use `slotProps.root` instead
+
+```diff
+ <ListItem
+-  components={{ Root: CustomRoot }}
+-  componentsProps={{ root: { className: 'custom' } }}
++  slots={{ root: CustomRoot }}
++  slotProps={{ root: { className: 'custom' } }}
+ />
+```
+
+#### ListItemText deprecated props removed
+
+Use the [list-item-text-props 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 section:
+
+```bash
+npx @mui/codemod@latest deprecations/list-item-text-props <path>
+```
+
+The following deprecated props have been removed:
+
+- `primaryTypographyProps` — use `slotProps.primary` instead
+- `secondaryTypographyProps` — use `slotProps.secondary` instead
+
+```diff
+ <ListItemText
+-  primaryTypographyProps={{ variant: 'h6' }}
+-  secondaryTypographyProps={{ color: 'textSecondary' }}
++  slotProps={{
++    primary: { variant: 'h6' },
++    secondary: { color: 'textSecondary' },
++  }}
+ />
+```
+
 #### Popper deprecated props removed
 
 Use the [popper-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#popper-props) below to migrate the code as described in the following section:

docs/pages/material-ui/api/list-item-secondary-action.json

@@ -2,6 +2,7 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "component": { "type": { "name": "elementType" } },
     "sx": {
       "type": {
         "name": "union",
@@ -36,6 +37,5 @@
   "filename": "/packages/mui-material/src/ListItemSecondaryAction/ListItemSecondaryAction.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/material-ui/react-list/\">Lists</a></li></ul>",
-  "cssComponent": false,
-  "deprecated": true
+  "cssComponent": false
 }

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

@@ -5,17 +5,7 @@
     "disableTypography": { "type": { "name": "bool" }, "default": "false" },
     "inset": { "type": { "name": "bool" }, "default": "false" },
     "primary": { "type": { "name": "node" } },
-    "primaryTypographyProps": {
-      "type": { "name": "object" },
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slotProps.primary</code> instead. This prop will be removed in a future major release. 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" },
-      "deprecated": true,
-      "deprecationInfo": "Use <code>slotProps.secondary</code> instead. This prop will be removed in a future major release. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "slotProps": {
       "type": {
         "name": "shape",

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

@@ -4,33 +4,9 @@
       "type": { "name": "enum", "description": "'center'<br>&#124;&nbsp;'flex-start'" },
       "default": "'center'"
     },
-    "children": { "type": { "name": "custom", "description": "node" } },
+    "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
-    "components": {
-      "type": { "name": "shape", "description": "{ Root?: elementType }" },
-      "default": "{}",
-      "deprecated": true,
-      "deprecationInfo": "Use the <code>slots</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "componentsProps": {
-      "type": { "name": "shape", "description": "{ root?: object }" },
-      "default": "{}",
-      "deprecated": true,
-      "deprecationInfo": "Use the <code>slotProps</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "ContainerComponent": {
-      "type": { "name": "custom", "description": "element type" },
-      "default": "'li'",
-      "deprecated": true,
-      "deprecationInfo": "Use the <code>component</code> or <code>slots.root</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "ContainerProps": {
-      "type": { "name": "object" },
-      "default": "{}",
-      "deprecated": true,
-      "deprecationInfo": "Use the <code>slotProps.root</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "dense": { "type": { "name": "bool" }, "default": "false" },
     "disableGutters": { "type": { "name": "bool" }, "default": "false" },
     "disablePadding": { "type": { "name": "bool" }, "default": "false" },
@@ -70,12 +46,6 @@
       "description": "Styles applied to the component element if `alignItems=\"flex-start\"`.",
       "isGlobal": false
     },
-    {
-      "key": "container",
-      "className": "MuiListItem-container",
-      "description": "Styles applied to the container element if `children` includes `ListItemSecondaryAction`.",
-      "isGlobal": false
-    },
     {
       "key": "dense",
       "className": "MuiListItem-dense",
@@ -103,13 +73,13 @@
     {
       "key": "root",
       "className": "MuiListItem-root",
-      "description": "Styles applied to the (normally root) `component` element. May be wrapped by a `container`.",
+      "description": "Styles applied to the root element.",
       "isGlobal": false
     },
     {
       "key": "secondaryAction",
       "className": "MuiListItem-secondaryAction",
-      "description": "Styles applied to the component element if `children` includes `ListItemSecondaryAction`.",
+      "description": "Styles applied to the secondary action element.",
       "isGlobal": false
     }
   ],

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

@@ -5,9 +5,7 @@
     "autoFocus": {
       "description": "If <code>true</code>, the list item is focused during the first mount. Focus will also be triggered if the value changes from false to true."
     },
-    "children": {
-      "description": "The content of the component if a <code>ListItemSecondaryAction</code> is used it must be the last child."
-    },
+    "children": { "description": "The content of the component." },
     "classes": { "description": "Override or extend the styles applied to the component." },
     "component": {
       "description": "The component used for the root node. Either a string to use a HTML element or a component."

docs/translations/api-docs/list-item-secondary-action/list-item-secondary-action.json

@@ -1,11 +1,13 @@
 {
   "componentDescription": "Must be used as the last child of ListItem to function properly.",
-  "deprecationInfo": "Use the <code>secondaryAction</code> prop in the <code>ListItem</code> component instead. This component will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details.",
   "propDescriptions": {
     "children": {
       "description": "The content of the component, normally an <code>IconButton</code> or selection control."
     },
     "classes": { "description": "Override or extend the styles applied to the component." },
+    "component": {
+      "description": "The component used for the root node. Either a string to use a HTML element or a component."
+    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     }

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

@@ -10,13 +10,7 @@
       "description": "If <code>true</code>, the children are indented. This should be used if there is no left avatar or left icon."
     },
     "primary": { "description": "The main content element." },
-    "primaryTypographyProps": {
-      "description": "These props will be forwarded to the primary typography component (as long as disableTypography is not <code>true</code>)."
-    },
     "secondary": { "description": "The secondary content element." },
-    "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": {

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

@@ -1,23 +1,12 @@
 {
-  "componentDescription": "Uses an additional container component if `ListItemSecondaryAction` is the last child.",
+  "componentDescription": "",
   "propDescriptions": {
     "alignItems": { "description": "Defines the <code>align-items</code> style property." },
-    "children": {
-      "description": "The content of the component if a <code>ListItemSecondaryAction</code> is used it must be the last child."
-    },
+    "children": { "description": "The content of the component." },
     "classes": { "description": "Override or extend the styles applied to the component." },
     "component": {
       "description": "The component used for the root node. Either a string to use a HTML element or a component."
     },
-    "components": { "description": "The components used for each slot inside." },
-    "componentsProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones."
-    },
-    "ContainerComponent": {
-      "description": "The container component used when a <code>ListItemSecondaryAction</code> is the last child.",
-      "requiresRef": true
-    },
-    "ContainerProps": { "description": "Props applied to the container component if used." },
     "dense": {
       "description": "If <code>true</code>, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component."
     },
@@ -43,11 +32,6 @@
       "nodeName": "the component element",
       "conditions": "<code>alignItems=\"flex-start\"</code>"
     },
-    "container": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the container element",
-      "conditions": "<code>children</code> includes <code>ListItemSecondaryAction</code>"
-    },
     "dense": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the component element",
@@ -68,14 +52,10 @@
       "nodeName": "the root element",
       "conditions": "<code>disablePadding={true}</code>"
     },
-    "root": {
-      "description": "Styles applied to {{nodeName}}. May be wrapped by a <code>container</code>.",
-      "nodeName": "the (normally root) <code>component</code> element"
-    },
+    "root": { "description": "Styles applied to the root element." },
     "secondaryAction": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the component element",
-      "conditions": "<code>children</code> includes <code>ListItemSecondaryAction</code>"
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the secondary action element"
     }
   }
 }