From bbc23e1296ff00984d50b6b96d675deccb65844a Mon Sep 17 00:00:00 2001
From: mickaelaustoni <mickael.austoni@gmail.com>
Date: Wed, 17 Aug 2022 21:46:40 +0200
Subject: [PATCH 1/2] fix simple dialog deprecated attribute

---
 docs/data/material/components/dialogs/SimpleDialog.js  | 10 +++++-----
 docs/data/material/components/dialogs/SimpleDialog.tsx | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/data/material/components/dialogs/SimpleDialog.js b/docs/data/material/components/dialogs/SimpleDialog.js
index e9a56e8f42494f..6ec8076ef7490c 100644
--- a/docs/data/material/components/dialogs/SimpleDialog.js
+++ b/docs/data/material/components/dialogs/SimpleDialog.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import DialogTitle from '@mui/material/DialogTitle';
 import Dialog from '@mui/material/Dialog';
@@ -31,24 +31,24 @@ function SimpleDialog(props) {
       <DialogTitle>Set backup account</DialogTitle>
       <List sx={{ pt: 0 }}>
         {emails.map((email) => (
-          <ListItem button onClick={() => handleListItemClick(email)} key={email}>
+          <ListItemButton onClick={() => handleListItemClick(email)} key={email}>
             <ListItemAvatar>
               <Avatar sx={{ bgcolor: blue[100], color: blue[600] }}>
                 <PersonIcon />
               </Avatar>
             </ListItemAvatar>
             <ListItemText primary={email} />
-          </ListItem>
+          </ListItemButton>
         ))}
 
-        <ListItem autoFocus button onClick={() => handleListItemClick('addAccount')}>
+        <ListItemButton autoFocus onClick={() => handleListItemClick('addAccount')}>
           <ListItemAvatar>
             <Avatar>
               <AddIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary="Add account" />
-        </ListItem>
+        </ListItemButton>
       </List>
     </Dialog>
   );
diff --git a/docs/data/material/components/dialogs/SimpleDialog.tsx b/docs/data/material/components/dialogs/SimpleDialog.tsx
index b536e59dca2fe7..9d455a18d68f7b 100644
--- a/docs/data/material/components/dialogs/SimpleDialog.tsx
+++ b/docs/data/material/components/dialogs/SimpleDialog.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import DialogTitle from '@mui/material/DialogTitle';
 import Dialog from '@mui/material/Dialog';
@@ -36,23 +36,23 @@ function SimpleDialog(props: SimpleDialogProps) {
       <DialogTitle>Set backup account</DialogTitle>
       <List sx={{ pt: 0 }}>
         {emails.map((email) => (
-          <ListItem button onClick={() => handleListItemClick(email)} key={email}>
+          <ListItemButton onClick={() => handleListItemClick(email)} key={email}>
             <ListItemAvatar>
               <Avatar sx={{ bgcolor: blue[100], color: blue[600] }}>
                 <PersonIcon />
               </Avatar>
             </ListItemAvatar>
             <ListItemText primary={email} />
-          </ListItem>
+          </ListItemButton>
         ))}
-        <ListItem autoFocus button onClick={() => handleListItemClick('addAccount')}>
+        <ListItemButton autoFocus onClick={() => handleListItemClick('addAccount')}>
           <ListItemAvatar>
             <Avatar>
               <AddIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary="Add account" />
-        </ListItem>
+        </ListItemButton>
       </List>
     </Dialog>
   );

From e563617a3dd90ef2a017824a387dc865b9009de5 Mon Sep 17 00:00:00 2001
From: Marija Najdova <mnajdova@gmail.com>
Date: Wed, 21 Dec 2022 15:10:52 +0100
Subject: [PATCH 2/2] Improve the DOM structure

---
 .../components/dialogs/SimpleDialog.js        | 36 +++++++++++--------
 .../components/dialogs/SimpleDialog.tsx       | 34 +++++++++++-------
 2 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/docs/data/material/components/dialogs/SimpleDialog.js b/docs/data/material/components/dialogs/SimpleDialog.js
index 6ec8076ef7490c..0d3e0baafb7937 100644
--- a/docs/data/material/components/dialogs/SimpleDialog.js
+++ b/docs/data/material/components/dialogs/SimpleDialog.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
@@ -31,24 +32,31 @@ function SimpleDialog(props) {
       <DialogTitle>Set backup account</DialogTitle>
       <List sx={{ pt: 0 }}>
         {emails.map((email) => (
-          <ListItemButton onClick={() => handleListItemClick(email)} key={email}>
+          <ListItem disableGutters>
+            <ListItemButton onClick={() => handleListItemClick(email)} key={email}>
+              <ListItemAvatar>
+                <Avatar sx={{ bgcolor: blue[100], color: blue[600] }}>
+                  <PersonIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={email} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+
+        <ListItem disableGutters>
+          <ListItemButton
+            autoFocus
+            onClick={() => handleListItemClick('addAccount')}
+          >
             <ListItemAvatar>
-              <Avatar sx={{ bgcolor: blue[100], color: blue[600] }}>
-                <PersonIcon />
+              <Avatar>
+                <AddIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary={email} />
+            <ListItemText primary="Add account" />
           </ListItemButton>
-        ))}
-
-        <ListItemButton autoFocus onClick={() => handleListItemClick('addAccount')}>
-          <ListItemAvatar>
-            <Avatar>
-              <AddIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary="Add account" />
-        </ListItemButton>
+        </ListItem>
       </List>
     </Dialog>
   );
diff --git a/docs/data/material/components/dialogs/SimpleDialog.tsx b/docs/data/material/components/dialogs/SimpleDialog.tsx
index 9d455a18d68f7b..7d850e55bf6cb8 100644
--- a/docs/data/material/components/dialogs/SimpleDialog.tsx
+++ b/docs/data/material/components/dialogs/SimpleDialog.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
 import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
@@ -36,23 +37,30 @@ function SimpleDialog(props: SimpleDialogProps) {
       <DialogTitle>Set backup account</DialogTitle>
       <List sx={{ pt: 0 }}>
         {emails.map((email) => (
-          <ListItemButton onClick={() => handleListItemClick(email)} key={email}>
+          <ListItem disableGutters>
+            <ListItemButton onClick={() => handleListItemClick(email)} key={email}>
+              <ListItemAvatar>
+                <Avatar sx={{ bgcolor: blue[100], color: blue[600] }}>
+                  <PersonIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={email} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+        <ListItem disableGutters>
+          <ListItemButton
+            autoFocus
+            onClick={() => handleListItemClick('addAccount')}
+          >
             <ListItemAvatar>
-              <Avatar sx={{ bgcolor: blue[100], color: blue[600] }}>
-                <PersonIcon />
+              <Avatar>
+                <AddIcon />
               </Avatar>
             </ListItemAvatar>
-            <ListItemText primary={email} />
+            <ListItemText primary="Add account" />
           </ListItemButton>
-        ))}
-        <ListItemButton autoFocus onClick={() => handleListItemClick('addAccount')}>
-          <ListItemAvatar>
-            <Avatar>
-              <AddIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary="Add account" />
-        </ListItemButton>
+        </ListItem>
       </List>
     </Dialog>
   );