From eee5762506fe27ea604f6d73d0a93f510e866c06 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 19 May 2019 16:04:28 -0400
Subject: [PATCH] Fix TypeScript fail

---
 .../components/buttons/GroupedButtons.js      | 31 +++++------------
 .../components/buttons/GroupedButtons.tsx     | 33 +++++--------------
 2 files changed, 18 insertions(+), 46 deletions(-)

diff --git a/docs/src/pages/components/buttons/GroupedButtons.js b/docs/src/pages/components/buttons/GroupedButtons.js
index 249ad324e0e477..d0c7d608f4effc 100644
--- a/docs/src/pages/components/buttons/GroupedButtons.js
+++ b/docs/src/pages/components/buttons/GroupedButtons.js
@@ -2,39 +2,26 @@ import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    width: '100%',
-    display: 'flex',
-  },
-  item: {
-    padding: theme.spacing(1),
-  },
-}));
 
 export default function GroupedButtons() {
-  const classes = useStyles();
-
   return (
-    <Grid container className={classes.root}>
-      <Grid item container>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+    <div>
+      <Grid container direction="column" alignItems="center" spacing={2}>
+        <Grid item xs={12}>
           <ButtonGroup size="small" aria-label="Small outlined button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup color="primary" aria-label="Outlined primary button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             color="secondary"
             size="large"
@@ -45,14 +32,14 @@ export default function GroupedButtons() {
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup variant="contained" size="small" aria-label="Small contained button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             variant="contained"
             color="primary"
@@ -64,7 +51,7 @@ export default function GroupedButtons() {
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             variant="contained"
             color="secondary"
@@ -77,6 +64,6 @@ export default function GroupedButtons() {
           </ButtonGroup>
         </Grid>
       </Grid>
-    </Grid>
+    </div>
   );
 }
diff --git a/docs/src/pages/components/buttons/GroupedButtons.tsx b/docs/src/pages/components/buttons/GroupedButtons.tsx
index f57591872beda4..d0c7d608f4effc 100644
--- a/docs/src/pages/components/buttons/GroupedButtons.tsx
+++ b/docs/src/pages/components/buttons/GroupedButtons.tsx
@@ -2,41 +2,26 @@ import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      display: 'flex',
-    },
-    item: {
-      padding: theme.spacing(1),
-    },
-  }),
-);
 
 export default function GroupedButtons() {
-  const classes = useStyles();
-
   return (
-    <Grid container className={classes.root}>
-      <Grid item container>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+    <div>
+      <Grid container direction="column" alignItems="center" spacing={2}>
+        <Grid item xs={12}>
           <ButtonGroup size="small" aria-label="Small outlined button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup color="primary" aria-label="Outlined primary button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             color="secondary"
             size="large"
@@ -47,14 +32,14 @@ export default function GroupedButtons() {
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup variant="contained" size="small" aria-label="Small contained button group">
             <Button>One</Button>
             <Button>Two</Button>
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             variant="contained"
             color="primary"
@@ -66,7 +51,7 @@ export default function GroupedButtons() {
             <Button>Three</Button>
           </ButtonGroup>
         </Grid>
-        <Grid item xs={12} md={6} lg={4} align="center" className={classes.item}>
+        <Grid item xs={12}>
           <ButtonGroup
             variant="contained"
             color="secondary"
@@ -79,6 +64,6 @@ export default function GroupedButtons() {
           </ButtonGroup>
         </Grid>
       </Grid>
-    </Grid>
+    </div>
   );
 }