Update page to match v5 approach

docs/src/pages/components/button-group/BasicButtonGroup.js

@@ -1,47 +1,13 @@
 import * as React from 'react';
 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: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
 
 export default function BasicButtonGroup() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <ButtonGroup color="primary" aria-label="outlined primary button group">
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
-      </ButtonGroup>
-      <ButtonGroup
-        variant="contained"
-        color="primary"
-        aria-label="contained primary button group"
-      >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
-      </ButtonGroup>
-      <ButtonGroup
-        variant="text"
-        color="primary"
-        aria-label="text primary button group"
-      >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
-      </ButtonGroup>
-    </div>
+    <ButtonGroup variant="contained" aria-label="outlined primary button group">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </ButtonGroup>
   );
 }

docs/src/pages/components/button-group/BasicButtonGroup.tsx

@@ -1,49 +1,13 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      '& > *': {
-        margin: theme.spacing(1),
-      },
-    },
-  }),
-);
 
 export default function BasicButtonGroup() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <ButtonGroup color="primary" aria-label="outlined primary button group">
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
-      </ButtonGroup>
-      <ButtonGroup
-        variant="contained"
-        color="primary"
-        aria-label="contained primary button group"
-      >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
-      </ButtonGroup>
-      <ButtonGroup
-        variant="text"
-        color="primary"
-        aria-label="text primary button group"
-      >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
-      </ButtonGroup>
-    </div>
+    <ButtonGroup variant="contained" aria-label="outlined primary button group">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </ButtonGroup>
   );
 }

docs/src/pages/components/button-group/DisableElevation.js

@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 
 export default function DisableElevation() {
   return (
-    <ButtonGroup disableElevation variant="contained" color="primary">
+    <ButtonGroup disableElevation variant="contained">
       <Button>One</Button>
       <Button>Two</Button>
     </ButtonGroup>

docs/src/pages/components/button-group/DisableElevation.tsx

@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 
 export default function DisableElevation() {
   return (
-    <ButtonGroup disableElevation variant="contained" color="primary">
+    <ButtonGroup disableElevation variant="contained">
       <Button>One</Button>
       <Button>Two</Button>
     </ButtonGroup>

docs/src/pages/components/button-group/GroupOrientation.js

@@ -1,51 +1,44 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
+const buttons = [
+  <Button key="one">One</Button>,
+  <Button key="two">Two</Button>,
+  <Button key="three">Three</Button>,
+];
 
 export default function GroupOrientation() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        '& > *': {
+          m: 1,
+        },
+      }}
+    >
       <ButtonGroup
         orientation="vertical"
-        color="primary"
-        aria-label="vertical outlined primary button group"
+        aria-label="vertical outlined button group"
       >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
+        {buttons}
       </ButtonGroup>
       <ButtonGroup
         orientation="vertical"
-        color="primary"
-        aria-label="vertical contained primary button group"
+        aria-label="vertical contained button group"
         variant="contained"
       >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
+        {buttons}
       </ButtonGroup>
       <ButtonGroup
         orientation="vertical"
-        color="primary"
-        aria-label="vertical contained primary button group"
+        aria-label="vertical contained button group"
         variant="text"
       >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
+        {buttons}
       </ButtonGroup>
-    </div>
+    </Box>
   );
 }

docs/src/pages/components/button-group/GroupOrientation.tsx

@@ -1,51 +1,44 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
+const buttons = [
+  <Button key="one">One</Button>,
+  <Button key="two">Two</Button>,
+  <Button key="three">Three</Button>,
+];
 
 export default function GroupOrientation() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        '& > *': {
+          m: 1,
+        },
+      }}
+    >
       <ButtonGroup
         orientation="vertical"
-        color="primary"
-        aria-label="vertical outlined primary button group"
+        aria-label="vertical outlined button group"
       >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
+        {buttons}
       </ButtonGroup>
       <ButtonGroup
         orientation="vertical"
-        color="primary"
-        aria-label="vertical contained primary button group"
+        aria-label="vertical contained button group"
         variant="contained"
       >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
+        {buttons}
       </ButtonGroup>
       <ButtonGroup
         orientation="vertical"
-        color="primary"
-        aria-label="vertical contained primary button group"
+        aria-label="vertical contained button group"
         variant="text"
       >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
+        {buttons}
       </ButtonGroup>
-    </div>
+    </Box>
   );
 }

docs/src/pages/components/button-group/GroupSizesColors.js

@@ -1,43 +1,35 @@
 import * as React from 'react';
 import Button from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
 import ButtonGroup from '@material-ui/core/ButtonGroup';
-import { makeStyles } from '@material-ui/core/styles';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-}));
+const buttons = [
+  <Button key="one">One</Button>,
+  <Button key="two">Two</Button>,
+  <Button key="three">Three</Button>,
+];
 
 export default function GroupSizesColors() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <ButtonGroup size="small" aria-label="small outlined button group">
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        '& > *': {
+          m: 1,
+        },
+      }}
+    >
+      <ButtonGroup size="small" aria-label="small button group">
+        {buttons}
       </ButtonGroup>
-      <ButtonGroup color="secondary" aria-label="outlined secondary button group">
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
+      <ButtonGroup color="secondary" aria-label="medium secondary button group">
+        {buttons}
       </ButtonGroup>
-      <ButtonGroup
-        size="large"
-        color="primary"
-        aria-label="large outlined primary button group"
-      >
-        <Button>One</Button>
-        <Button>Two</Button>
-        <Button>Three</Button>
+      <ButtonGroup size="large" aria-label="large button group">
+        {buttons}
       </ButtonGroup>
-    </div>
+    </Box>
   );
 }