From 8fcc47f9ee6d301c975aba95f78a1572ed8e98de Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 30 Jul 2024 12:56:11 +0530
Subject: [PATCH] [docs][material-ui] Replace deprecated `<ListItem button/>`
 with `ListItemButton` 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>
---
 .../integrations/routing/ListRouter.js        | 29 ++++++++++++-------
 .../integrations/routing/ListRouter.tsx       | 29 ++++++++++++-------
 2 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/docs/data/material/integrations/routing/ListRouter.js b/docs/data/material/integrations/routing/ListRouter.js
index f503a9f39cf918..04567b05e8df20 100644
--- a/docs/data/material/integrations/routing/ListRouter.js
+++ b/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>
diff --git a/docs/data/material/integrations/routing/ListRouter.tsx b/docs/data/material/integrations/routing/ListRouter.tsx
index 1900b67cf2d582..bbd759bbfa8ae3 100644
--- a/docs/data/material/integrations/routing/ListRouter.tsx
+++ b/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>