[material-ui][docs] Update <ListItem button/> to ListItemButton in demos

docs/data/material/components/app-bar/BottomAppBar.js

@@ -9,7 +9,7 @@ import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
 import Fab from '@mui/material/Fab';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemText from '@mui/material/ListItemText';
 import ListSubheader from '@mui/material/ListSubheader';
@@ -100,12 +100,12 @@ export default function BottomAppBar() {
                 </ListSubheader>
               )}
 
-              <ListItem button>
+              <ListItemButton>
                 <ListItemAvatar>
                   <Avatar alt="Profile Picture" src={person} />
                 </ListItemAvatar>
                 <ListItemText primary={primary} secondary={secondary} />
-              </ListItem>
+              </ListItemButton>
             </React.Fragment>
           ))}
         </List>

docs/data/material/components/app-bar/BottomAppBar.tsx

@@ -9,7 +9,7 @@ import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
 import Fab from '@mui/material/Fab';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemText from '@mui/material/ListItemText';
 import ListSubheader from '@mui/material/ListSubheader';
@@ -98,12 +98,12 @@ export default function BottomAppBar() {
                   Yesterday
                 </ListSubheader>
               )}
-              <ListItem button>
+              <ListItemButton>
                 <ListItemAvatar>
                   <Avatar alt="Profile Picture" src={person} />
                 </ListItemAvatar>
                 <ListItemText primary={primary} secondary={secondary} />
-              </ListItem>
+              </ListItemButton>
             </React.Fragment>
           ))}
         </List>

docs/data/material/components/bottom-navigation/FixedBottomNavigation.js

@@ -8,7 +8,7 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import Paper from '@mui/material/Paper';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemText from '@mui/material/ListItemText';
 import Avatar from '@mui/material/Avatar';
@@ -36,12 +36,12 @@ export default function FixedBottomNavigation() {
       <CssBaseline />
       <List>
         {messages.map(({ primary, secondary, person }, index) => (
-          <ListItem button key={index + person}>
+          <ListItemButton key={index + person}>
             <ListItemAvatar>
               <Avatar alt="Profile Picture" src={person} />
             </ListItemAvatar>
             <ListItemText primary={primary} secondary={secondary} />
-          </ListItem>
+          </ListItemButton>
         ))}
       </List>
       <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>

docs/data/material/components/bottom-navigation/FixedBottomNavigation.tsx

@@ -8,7 +8,7 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
 import ArchiveIcon from '@mui/icons-material/Archive';
 import Paper from '@mui/material/Paper';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemText from '@mui/material/ListItemText';
 import Avatar from '@mui/material/Avatar';
@@ -36,12 +36,12 @@ export default function FixedBottomNavigation() {
       <CssBaseline />
       <List>
         {messages.map(({ primary, secondary, person }, index) => (
-          <ListItem button key={index + person}>
+          <ListItemButton key={index + person}>
             <ListItemAvatar>
               <Avatar alt="Profile Picture" src={person} />
             </ListItemAvatar>
             <ListItemText primary={primary} secondary={secondary} />
-          </ListItem>
+          </ListItemButton>
         ))}
       </List>
       <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>

docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import List from '@mui/material/List';
 import Link from '@mui/material/Link';
-import ListItem from '@mui/material/ListItem';
+
+import ListItemButton from '@mui/material/ListItemButton';
 import Collapse from '@mui/material/Collapse';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
@@ -37,10 +38,10 @@ function ListItemLink(props) {
 
   return (
     <li>
-      <ListItem button component={RouterLink} to={to} {...other}>
+      <ListItemButton component={RouterLink} to={to} {...other}>
         <ListItemText primary={primary} />
         {icon}
-      </ListItem>
+      </ListItemButton>
     </li>
   );
 }

docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import List from '@mui/material/List';
 import Link, { LinkProps } from '@mui/material/Link';
-import ListItem, { ListItemProps } from '@mui/material/ListItem';
+import { ListItemProps } from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import Collapse from '@mui/material/Collapse';
 import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
@@ -41,10 +42,10 @@ function ListItemLink(props: ListItemLinkProps) {
 
   return (
     <li>
-      <ListItem button component={RouterLink as any} to={to} {...other}>
+      <ListItemButton component={RouterLink as any} to={to} {...other}>
         <ListItemText primary={primary} />
         {icon}
-      </ListItem>
+      </ListItemButton>
     </li>
   );
 }

docs/data/material/components/dialogs/FullScreenDialog.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import ListItemText from '@mui/material/ListItemText';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
 import AppBar from '@mui/material/AppBar';
@@ -57,16 +57,16 @@ export default function FullScreenDialog() {
           </Toolbar>
         </AppBar>
         <List>
-          <ListItem button>
+          <ListItemButton>
             <ListItemText primary="Phone ringtone" secondary="Titania" />
-          </ListItem>
+          </ListItemButton>
           <Divider />
-          <ListItem button>
+          <ListItemButton>
             <ListItemText
               primary="Default notification ringtone"
               secondary="Tethys"
             />
-          </ListItem>
+          </ListItemButton>
         </List>
       </Dialog>
     </React.Fragment>

docs/data/material/components/dialogs/FullScreenDialog.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import ListItemText from '@mui/material/ListItemText';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import List from '@mui/material/List';
 import Divider from '@mui/material/Divider';
 import AppBar from '@mui/material/AppBar';
@@ -63,16 +63,16 @@ export default function FullScreenDialog() {
           </Toolbar>
         </AppBar>
         <List>
-          <ListItem button>
+          <ListItemButton>
             <ListItemText primary="Phone ringtone" secondary="Titania" />
-          </ListItem>
+          </ListItemButton>
           <Divider />
-          <ListItem button>
+          <ListItemButton>
             <ListItemText
               primary="Default notification ringtone"
               secondary="Tethys"
             />
-          </ListItem>
+          </ListItemButton>
         </List>
       </Dialog>
     </React.Fragment>

docs/data/material/components/menus/SimpleListMenu.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
@@ -36,8 +36,7 @@ export default function SimpleListMenu() {
         aria-label="Device settings"
         sx={{ bgcolor: 'background.paper' }}
       >
-        <ListItem
-          button
+        <ListItemButton
           id="lock-button"
           aria-haspopup="listbox"
           aria-controls="lock-menu"
@@ -49,7 +48,7 @@ export default function SimpleListMenu() {
             primary="When device is locked"
             secondary={options[selectedIndex]}
           />
-        </ListItem>
+        </ListItemButton>
       </List>
       <Menu
         id="lock-menu"

docs/data/material/components/menus/SimpleListMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
@@ -39,8 +39,7 @@ export default function SimpleListMenu() {
         aria-label="Device settings"
         sx={{ bgcolor: 'background.paper' }}
       >
-        <ListItem
-          button
+        <ListItemButton
           id="lock-button"
           aria-haspopup="listbox"
           aria-controls="lock-menu"
@@ -52,7 +51,7 @@ export default function SimpleListMenu() {
             primary="When device is locked"
             secondary={options[selectedIndex]}
           />
-        </ListItem>
+        </ListItemButton>
       </List>
       <Menu
         id="lock-menu"

docs/data/material/components/transfer-list/SelectAllTransferList.js

@@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Checkbox from '@mui/material/Checkbox';
@@ -101,10 +101,9 @@ export default function SelectAllTransferList() {
           const labelId = `transfer-list-all-item-${value}-label`;
 
           return (
-            <ListItem
+            <ListItemButton
               key={value}
               role="listitem"
-              button
               onClick={handleToggle(value)}
             >
               <ListItemIcon>
@@ -118,7 +117,7 @@ export default function SelectAllTransferList() {
                 />
               </ListItemIcon>
               <ListItemText id={labelId} primary={`List item ${value + 1}`} />
-            </ListItem>
+            </ListItemButton>
           );
         })}
       </List>

docs/data/material/components/transfer-list/SelectAllTransferList.tsx

@@ -3,7 +3,7 @@ import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Checkbox from '@mui/material/Checkbox';
@@ -102,10 +102,9 @@ export default function SelectAllTransferList() {
           const labelId = `transfer-list-all-item-${value}-label`;
 
           return (
-            <ListItem
+            <ListItemButton
               key={value}
               role="listitem"
-              button
               onClick={handleToggle(value)}
             >
               <ListItemIcon>
@@ -119,7 +118,7 @@ export default function SelectAllTransferList() {
                 />
               </ListItemIcon>
               <ListItemText id={labelId} primary={`List item ${value + 1}`} />
-            </ListItem>
+            </ListItemButton>
           );
         })}
       </List>

docs/data/material/components/transfer-list/TransferList.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Checkbox from '@mui/material/Checkbox';
@@ -66,10 +66,9 @@ export default function TransferList() {
           const labelId = `transfer-list-item-${value}-label`;
 
           return (
-            <ListItem
+            <ListItemButton
               key={value}
               role="listitem"
-              button
               onClick={handleToggle(value)}
             >
               <ListItemIcon>
@@ -83,7 +82,7 @@ export default function TransferList() {
                 />
               </ListItemIcon>
               <ListItemText id={labelId} primary={`List item ${value + 1}`} />
-            </ListItem>
+            </ListItemButton>
           );
         })}
       </List>

docs/data/material/components/transfer-list/TransferList.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Grid from '@mui/material/Grid';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Checkbox from '@mui/material/Checkbox';
@@ -66,10 +66,9 @@ export default function TransferList() {
           const labelId = `transfer-list-item-${value}-label`;
 
           return (
-            <ListItem
+            <ListItemButton
               key={value}
               role="listitem"
-              button
               onClick={handleToggle(value)}
             >
               <ListItemIcon>
@@ -83,7 +82,7 @@ export default function TransferList() {
                 />
               </ListItemIcon>
               <ListItemText id={labelId} primary={`List item ${value + 1}`} />
-            </ListItem>
+            </ListItemButton>
           );
         })}
       </List>