From 2c4a1f3699e42fb2b62995b61d05a789b4fa4078 Mon Sep 17 00:00:00 2001
From: Arman <mail@arman.io>
Date: Tue, 6 Dec 2022 18:00:21 +0100
Subject: [PATCH 1/2] [docs] Refactor ToggleGroupSizes example

Signed-off-by: Arman <mail@arman.io>
---
 .../components/toggle-button/ToggleButtonSizes.js  | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.js b/docs/data/material/components/toggle-button/ToggleButtonSizes.js
index 53182613d564be..ee2d788159a550 100644
--- a/docs/data/material/components/toggle-button/ToggleButtonSizes.js
+++ b/docs/data/material/components/toggle-button/ToggleButtonSizes.js
@@ -3,9 +3,9 @@ import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
-import Box from '@mui/material/Box';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Stack from '@mui/material/Stack';
 
 export default function ToggleButtonSizes() {
   const [alignment, setAlignment] = React.useState('left');
@@ -36,15 +36,7 @@ export default function ToggleButtonSizes() {
   };
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        // TODO Replace with Stack
-        '& > :not(style) + :not(style)': { mt: 2 },
-      }}
-    >
+    <Stack spacing={2} alignItems="center">
       <ToggleButtonGroup size="small" {...control} aria-label="Small sizes">
         {children}
       </ToggleButtonGroup>
@@ -54,6 +46,6 @@ export default function ToggleButtonSizes() {
       <ToggleButtonGroup size="large" {...control} aria-label="Large sizes">
         {children}
       </ToggleButtonGroup>
-    </Box>
+    </Stack>
   );
 }

From 7e2344a0922e1b8c16a584bf5f21774467c41c0f Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Thu, 8 Dec 2022 10:11:12 +0530
Subject: [PATCH 2/2] yarn docs:typescript:formatted

---
 .../components/toggle-button/ToggleButtonSizes.js  |  2 +-
 .../components/toggle-button/ToggleButtonSizes.tsx | 14 +++-----------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.js b/docs/data/material/components/toggle-button/ToggleButtonSizes.js
index ee2d788159a550..764e2f006f4444 100644
--- a/docs/data/material/components/toggle-button/ToggleButtonSizes.js
+++ b/docs/data/material/components/toggle-button/ToggleButtonSizes.js
@@ -3,9 +3,9 @@ import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
+import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
-import Stack from '@mui/material/Stack';
 
 export default function ToggleButtonSizes() {
   const [alignment, setAlignment] = React.useState('left');
diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx b/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx
index 2bd6ce21788c87..63e2c5627799c9 100644
--- a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx
+++ b/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx
@@ -3,7 +3,7 @@ import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
@@ -39,15 +39,7 @@ export default function ToggleButtonSizes() {
   };
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        // TODO Replace with Stack
-        '& > :not(style) + :not(style)': { mt: 2 },
-      }}
-    >
+    <Stack spacing={2} alignItems="center">
       <ToggleButtonGroup size="small" {...control} aria-label="Small sizes">
         {children}
       </ToggleButtonGroup>
@@ -57,6 +49,6 @@ export default function ToggleButtonSizes() {
       <ToggleButtonGroup size="large" {...control} aria-label="Large sizes">
         {children}
       </ToggleButtonGroup>
-    </Box>
+    </Stack>
   );
 }