[docs][material-ui] Replace deprecated <ListItem button/> with `Lis…

…tItemButton` component in routing libraries list example (@aliharis99) (#43114)

Co-authored-by: Haris Ali <87179963+aliharis99@users.noreply.github.com>
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>

docs/data/material/integrations/routing/ListRouter.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import List from '@mui/material/List';
-import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
+import Box from '@mui/material/Box';
+import ListItemButton from '@mui/material/ListItemButton';
 import Paper from '@mui/material/Paper';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -44,12 +45,10 @@ function ListItemLink(props) {
   const { icon, primary, to } = props;
 
   return (
-    <li>
-      <ListItem button component={Link} to={to}>
-        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
-        <ListItemText primary={primary} />
-      </ListItem>
-    </li>
+    <ListItemButton component={Link} to={to}>
+      {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+      <ListItemText primary={primary} />
+    </ListItemButton>
   );
 }
 
@@ -78,13 +77,21 @@ export default function ListRouter() {
 
         <Paper elevation={0}>
           <List aria-label="main mailbox folders">
-            <ListItemLink to="/inbox" primary="Inbox" icon={<InboxIcon />} />
-            <ListItemLink to="/drafts" primary="Drafts" icon={<DraftsIcon />} />
+            <ListItem disablePadding>
+              <ListItemLink to="/inbox" primary="Inbox" icon={<InboxIcon />} />
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemLink to="/drafts" primary="Drafts" icon={<DraftsIcon />} />
+            </ListItem>
           </List>
           <Divider />
           <List aria-label="secondary mailbox folders">
-            <ListItemLink to="/trash" primary="Trash" />
-            <ListItemLink to="/spam" primary="Spam" />
+            <ListItem disablePadding>
+              <ListItemLink to="/trash" primary="Trash" />
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemLink to="/spam" primary="Spam" />
+            </ListItem>
           </List>
         </Paper>
       </Box>

docs/data/material/integrations/routing/ListRouter.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import List from '@mui/material/List';
-import Box from '@mui/material/Box';
 import ListItem from '@mui/material/ListItem';
+import Box from '@mui/material/Box';
+import ListItemButton from '@mui/material/ListItemButton';
 import Paper from '@mui/material/Paper';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
@@ -48,12 +49,10 @@ function ListItemLink(props: ListItemLinkProps) {
   const { icon, primary, to } = props;
 
   return (
-    <li>
-      <ListItem button component={Link} to={to}>
-        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
-        <ListItemText primary={primary} />
-      </ListItem>
-    </li>
+    <ListItemButton component={Link} to={to}>
+      {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
+      <ListItemText primary={primary} />
+    </ListItemButton>
   );
 }
 
@@ -76,13 +75,21 @@ export default function ListRouter() {
 
         <Paper elevation={0}>
           <List aria-label="main mailbox folders">
-            <ListItemLink to="/inbox" primary="Inbox" icon={<InboxIcon />} />
-            <ListItemLink to="/drafts" primary="Drafts" icon={<DraftsIcon />} />
+            <ListItem disablePadding>
+              <ListItemLink to="/inbox" primary="Inbox" icon={<InboxIcon />} />
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemLink to="/drafts" primary="Drafts" icon={<DraftsIcon />} />
+            </ListItem>
           </List>
           <Divider />
           <List aria-label="secondary mailbox folders">
-            <ListItemLink to="/trash" primary="Trash" />
-            <ListItemLink to="/spam" primary="Spam" />
+            <ListItem disablePadding>
+              <ListItemLink to="/trash" primary="Trash" />
+            </ListItem>
+            <ListItem disablePadding>
+              <ListItemLink to="/spam" primary="Spam" />
+            </ListItem>
           </List>
         </Paper>
       </Box>