Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
6bdf76b
[ListItem, ListItemText] Remove deprecated props
siriwatknp Mar 20, 2026
7228ffa
[ListItemSecondaryAction] Remove deprecated component from public API
siriwatknp Mar 20, 2026
59ea8a6
fix isMuiElement test: use SpeedDialIcon instead of ListItemText
siriwatknp Mar 20, 2026
a85bf68
update migration guide: ListItemSecondaryAction removed
siriwatknp Mar 20, 2026
e4adf0b
remove secondaryAction class from root element
siriwatknp Mar 20, 2026
186edd3
revert isMuiElement test: use internal import for ListItemSecondaryAc…
siriwatknp Mar 20, 2026
90f189a
restore all spec tests, replace deprecated props with slotProps
siriwatknp Mar 20, 2026
6586b25
revert ListItemSecondaryAction removal, only remove @deprecated annot…
siriwatknp Mar 20, 2026
84d1b01
add component prop to ListItemSecondaryAction
siriwatknp Mar 20, 2026
878b75b
refactor ListItem to use useSlot for root and styled secondaryAction
siriwatknp Mar 20, 2026
b76177c
enable slotProps conformance tests for ListItem
siriwatknp Mar 20, 2026
098e37f
type ListItemText primary/secondary slotProps with TypographyProps
siriwatknp Mar 20, 2026
bbce63b
fix ListItemSecondaryAction tests: add missing data-testid, skip them…
siriwatknp Mar 20, 2026
ba1ca31
prettier
siriwatknp Mar 20, 2026
f397c1d
Merge remote-tracking branch 'upstream/master' into remove-deprecated…
siriwatknp Mar 20, 2026
efc2230
[ListItem, ListItemText] Remove deprecated props
siriwatknp Mar 20, 2026
a2c0f71
[ListItemSecondaryAction] Remove deprecated component from public API
siriwatknp Mar 20, 2026
b98c8c0
fix isMuiElement test: use SpeedDialIcon instead of ListItemText
siriwatknp Mar 20, 2026
d1f08ef
update migration guide: ListItemSecondaryAction removed
siriwatknp Mar 20, 2026
66e8f32
remove secondaryAction class from root element
siriwatknp Mar 20, 2026
099aace
revert isMuiElement test: use internal import for ListItemSecondaryAc…
siriwatknp Mar 20, 2026
84d6fa8
restore all spec tests, replace deprecated props with slotProps
siriwatknp Mar 20, 2026
69578de
revert ListItemSecondaryAction removal, only remove @deprecated annot…
siriwatknp Mar 20, 2026
0019d89
add component prop to ListItemSecondaryAction
siriwatknp Mar 20, 2026
a4fb8d6
refactor ListItem to use useSlot for root and styled secondaryAction
siriwatknp Mar 20, 2026
73c83e0
enable slotProps conformance tests for ListItem
siriwatknp Mar 20, 2026
ab63be1
type ListItemText primary/secondary slotProps with TypographyProps
siriwatknp Mar 20, 2026
461b2fc
prettier
siriwatknp Mar 20, 2026
52943de
migration guide: secondaryAction styleOverrides targets slot directly
siriwatknp Mar 20, 2026
5f517e3
Apply suggestions from code review
siriwatknp Mar 20, 2026
7e047c7
restore MobileStepper section in migration guide
siriwatknp Mar 20, 2026
441fee4
restore PaginationItem section in migration guide
siriwatknp Mar 20, 2026
a564abf
move PaginationItem section to alphabetical order
siriwatknp Mar 20, 2026
60bab7d
[ListItem] Remove unused useForkRef, pass ref directly to useSlot
siriwatknp Mar 23, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 26 additions & 20 deletions docs/data/material/components/lists/CustomizedList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Comment on lines +72 to +74
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will need to fix this in a separate PR to replace system props with sx prop

},
}}
/>
</ListItemButton>
Expand All @@ -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>
Expand Down Expand Up @@ -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 }}
/>
Expand Down Expand Up @@ -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>
))}
Expand Down
46 changes: 26 additions & 20 deletions docs/data/material/components/lists/CustomizedList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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 }}
/>
Expand Down Expand Up @@ -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>
))}
Expand Down
69 changes: 69 additions & 0 deletions docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
Original file line number Diff line number Diff line change
Expand Up @@ -784,6 +784,75 @@ 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' } }}
/>
```

The theming `styleOverrides` key `secondaryAction` now targets the `secondaryAction` slot instead of the root slot.

```diff
const theme = createTheme({
components: {
MuiListItem: {
styleOverrides: {
- secondaryAction: {
- [`& .${listItemClasses.secondaryAction}`]: {
- // styles
- },
- },
+ secondaryAction: {
+ // styles applied directly to the secondaryAction slot
+ },
},
},
},
});
```

#### 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' },
+ }}
/>
```

#### PaginationItem deprecated props removed

Use the [pagination-item-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#pagination-item-props) below to migrate the code as described in the following section:
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/material-ui/api/list-item-secondary-action.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"props": {
"children": { "type": { "name": "node" } },
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"component": { "type": { "name": "elementType" } },
"sx": {
"type": {
"name": "union",
Expand Down Expand Up @@ -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
}
10 changes: 0 additions & 10 deletions docs/pages/material-ui/api/list-item-text.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
36 changes: 3 additions & 33 deletions docs/pages/material-ui/api/list-item.json
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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
}
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down
Original file line number Diff line number Diff line change
@@ -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."
}
Expand Down
6 changes: 0 additions & 6 deletions docs/translations/api-docs/list-item-text/list-item-text.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
Loading
Loading