From 8daea9c80cb2aee295e89c6d5a52e3a2a4a2ad37 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Tue, 27 Aug 2019 00:38:17 +0200
Subject: [PATCH] alternative proposal

---
 docs/pages/api/toggle-button-group.md         |  6 +-
 .../toggle-button/StandaloneToggleButton.js   | 22 +++++++
 .../components/toggle-button/ToggleButton.js  | 35 -----------
 .../toggle-button/ToggleButtonSizes.js        | 63 +++----------------
 .../components/toggle-button/toggle-button.md | 14 ++---
 .../ToggleButtonGroup/ToggleButtonGroup.js    | 14 ++---
 .../ToggleButtonGroup.test.js                 | 31 ---------
 7 files changed, 45 insertions(+), 140 deletions(-)
 create mode 100644 docs/src/pages/components/toggle-button/StandaloneToggleButton.js
 delete mode 100644 docs/src/pages/components/toggle-button/ToggleButton.js

diff --git a/docs/pages/api/toggle-button-group.md b/docs/pages/api/toggle-button-group.md
index ab7565f9e06781..e9443da5af8fca 100644
--- a/docs/pages/api/toggle-button-group.md
+++ b/docs/pages/api/toggle-button-group.md
@@ -43,9 +43,9 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">MuiToggleButtonGroup-root</span> | Styles applied to the root element.
-| <span class="prop-name">groupedChild</span> | <span class="prop-name">MuiToggleButtonGroup-groupedChild</span> | Styles applied to the children.
-| <span class="prop-name">sizeSmallChild</span> | <span class="prop-name">MuiToggleButtonGroup-sizeSmallChild</span> | Styles applied to the children if `size="small"`.
-| <span class="prop-name">sizeLargeChild</span> | <span class="prop-name">MuiToggleButtonGroup-sizeLargeChild</span> | Styles applied to the children if `size="large"`.
+| <span class="prop-name">grouped</span> | <span class="prop-name">MuiToggleButtonGroup-grouped</span> | Styles applied to the children.
+| <span class="prop-name">groupedSizeSmall</span> | <span class="prop-name">MuiToggleButtonGroup-groupedSizeSmall</span> | Styles applied to the children if `size="small"`.
+| <span class="prop-name">groupedSizeLarge</span> | <span class="prop-name">MuiToggleButtonGroup-groupedSizeLarge</span> | Styles applied to the children if `size="large"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/docs/src/pages/components/toggle-button/StandaloneToggleButton.js b/docs/src/pages/components/toggle-button/StandaloneToggleButton.js
new file mode 100644
index 00000000000000..fdee1c095d3a48
--- /dev/null
+++ b/docs/src/pages/components/toggle-button/StandaloneToggleButton.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import CheckIcon from '@material-ui/icons/Check';
+import Box from '@material-ui/core/Box';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+
+export default function StandaloneToggleButton() {
+  const [selected, setSelected] = React.useState(false);
+
+  return (
+    <Box bgcolor="white" borderRadius={4}>
+      <ToggleButton
+        value="check"
+        selected={selected}
+        onChange={() => {
+          setSelected(!selected);
+        }}
+      >
+        <CheckIcon />
+      </ToggleButton>
+    </Box>
+  );
+}
diff --git a/docs/src/pages/components/toggle-button/ToggleButton.js b/docs/src/pages/components/toggle-button/ToggleButton.js
deleted file mode 100644
index 441a1f85187f25..00000000000000
--- a/docs/src/pages/components/toggle-button/ToggleButton.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import CheckIcon from '@material-ui/icons/Check';
-import Box from '@material-ui/core/Box';
-import Grid from '@material-ui/core/Grid';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-
-const useStyles = makeStyles(theme => ({
-  toggleContainer: {
-    margin: theme.spacing(2, 0),
-  },
-}));
-
-export default function ToggleButtonDemo() {
-  const [selected, setSelected] = React.useState(false);
-
-  const toggleSelected = () => {
-    setSelected(!selected);
-  };
-
-  const classes = useStyles();
-
-  return (
-    <Grid container spacing={2} direction="column" alignItems="center">
-      <Grid item>
-        <div className={classes.toggleContainer}>
-          <ToggleButton selected={selected} onChange={toggleSelected}>
-            <CheckIcon />
-            <Box ml={1}>Toggle</Box>
-          </ToggleButton>
-        </div>
-      </Grid>
-    </Grid>
-  );
-}
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonSizes.js b/docs/src/pages/components/toggle-button/ToggleButtonSizes.js
index b02933b62b37a1..0aa9c8ba778a7b 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtonSizes.js
+++ b/docs/src/pages/components/toggle-button/ToggleButtonSizes.js
@@ -1,28 +1,20 @@
 import React from 'react';
-import CheckIcon from '@material-ui/icons/Check';
 import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft';
 import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter';
 import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight';
 import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify';
-import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
 import ToggleButton from '@material-ui/lab/ToggleButton';
 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 
 export default function ToggleButtonSizes() {
-  const [selected, setSelected] = React.useState(false);
   const [alignment, setAlignment] = React.useState('left');
 
-  const toggleSelected = () => {
-    setSelected(!selected);
-  };
-
-  const handleChangeAlignment = (event, newAlignment) => {
+  const handleChange = (event, newAlignment) => {
     setAlignment(newAlignment);
   };
 
-  const groupChildren = [
+  const children = [
     <ToggleButton key={1} value="left">
       <FormatAlignLeftIcon />
     </ToggleButton>,
@@ -40,57 +32,18 @@ export default function ToggleButtonSizes() {
   return (
     <Grid container spacing={2} direction="column" alignItems="center">
       <Grid item>
-        <Typography gutterBottom>Size a standalone toggle button:</Typography>
-      </Grid>
-      <Grid item>
-        <ToggleButton size="small" selected={selected} onChange={toggleSelected}>
-          <CheckIcon />
-          <Box ml={1}>Toggle</Box>
-        </ToggleButton>
-      </Grid>
-      <Grid item>
-        <ToggleButton size="medium" selected={selected} onChange={toggleSelected}>
-          <CheckIcon />
-          <Box ml={1}>Toggle</Box>
-        </ToggleButton>
-      </Grid>
-      <Grid item>
-        <ToggleButton size="large" selected={selected} onChange={toggleSelected}>
-          <CheckIcon />
-          <Box ml={1}>Toggle</Box>
-        </ToggleButton>
-      </Grid>
-      <Grid item>
-        <Typography gutterBottom>Size an entire group of toggle buttons:</Typography>
-      </Grid>
-      <Grid item>
-        <ToggleButtonGroup
-          size="small"
-          value={alignment}
-          exclusive
-          onChange={handleChangeAlignment}
-        >
-          {groupChildren}
+        <ToggleButtonGroup size="small" value={alignment} exclusive onChange={handleChange}>
+          {children}
         </ToggleButtonGroup>
       </Grid>
       <Grid item>
-        <ToggleButtonGroup
-          size="medium"
-          value={alignment}
-          exclusive
-          onChange={handleChangeAlignment}
-        >
-          {groupChildren}
+        <ToggleButtonGroup size="medium" value={alignment} exclusive onChange={handleChange}>
+          {children}
         </ToggleButtonGroup>
       </Grid>
       <Grid item>
-        <ToggleButtonGroup
-          size="large"
-          value={alignment}
-          exclusive
-          onChange={handleChangeAlignment}
-        >
-          {groupChildren}
+        <ToggleButtonGroup size="large" value={alignment} exclusive onChange={handleChange}>
+          {children}
         </ToggleButtonGroup>
       </Grid>
     </Grid>
diff --git a/docs/src/pages/components/toggle-button/toggle-button.md b/docs/src/pages/components/toggle-button/toggle-button.md
index 0af9f4df22cde0..16e70d3ab75ea6 100644
--- a/docs/src/pages/components/toggle-button/toggle-button.md
+++ b/docs/src/pages/components/toggle-button/toggle-button.md
@@ -5,15 +5,7 @@ components: ToggleButton, ToggleButtonGroup
 
 # Toggle Buttons
 
-<p class="description">Toggle buttons can be used standalone or as a group.</p>
-
-## Standalone Toggle Button
-
-To implement a standalone Toggle button:
-
-{{"demo": "pages/components/toggle-button/ToggleButton.js"}}
-
-## Toggle Button Group
+<p class="description">Toggle buttons can be used to group related options.</p>
 
 To emphasize groups of related [Toggle buttons](https://material.io/design/components/buttons.html#toggle-button),
 a group should share a common container.
@@ -28,3 +20,7 @@ given its own `value` prop.
 Fancy larger or smaller buttons? Use the `size` property.
 
 {{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
+
+## Standalone toggle button
+
+{{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
index 9e8219216cf950..aa5e964d73f389 100644
--- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -10,11 +10,11 @@ export const styles = theme => ({
   /* Styles applied to the root element. */
   root: {
     backgroundColor: theme.palette.background.paper,
-    borderRadius: 2,
+    borderRadius: theme.shape.borderRadius,
     display: 'inline-flex',
   },
   /* Styles applied to the children. */
-  groupedChild: {
+  grouped: {
     padding: '0px 11px 0px 12px',
     '&:not(:first-child)': {
       marginLeft: -1,
@@ -28,11 +28,11 @@ export const styles = theme => ({
     },
   },
   /* Styles applied to the children if `size="small"`. */
-  sizeSmallChild: {
+  groupedSizeSmall: {
     padding: '0px 7px 0px 8px',
   },
   /* Styles applied to the children if `size="large"`. */
-  sizeLargeChild: {
+  groupedSizeLarge: {
     padding: '0px 15px 0px 16px',
   },
 });
@@ -40,8 +40,8 @@ export const styles = theme => ({
 const ToggleButtonGroup = React.forwardRef(function ToggleButton(props, ref) {
   const {
     children,
-    className,
     classes,
+    className,
     exclusive = false,
     onChange,
     size = 'medium',
@@ -96,9 +96,9 @@ const ToggleButtonGroup = React.forwardRef(function ToggleButton(props, ref) {
 
         return React.cloneElement(child, {
           className: clsx(
-            classes.groupedChild,
+            classes.grouped,
             {
-              [classes[`size${capitalize(size)}Child`]]: size !== 'medium',
+              [classes[`groupedSize${capitalize(size)}`]]: size !== 'medium',
             },
             child.props.className,
           ),
diff --git a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
index 6a1b2d0bd428f9..ad6dedd782810d 100644
--- a/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
+++ b/packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js
@@ -59,37 +59,6 @@ describe('<ToggleButtonGroup />', () => {
     assert.strictEqual(root.hasClass(classes.root), true);
   });
 
-  it('should apply the groupedChild className to children', () => {
-    const wrapper = mount(
-      <ToggleButtonGroup>
-        <ToggleButton value="hello">hello</ToggleButton>
-      </ToggleButtonGroup>,
-    );
-    assert.strictEqual(findToggleButton(wrapper, 'hello').hasClass(classes.groupedChild), true);
-  });
-
-  it('should render small children', () => {
-    const wrapper = mount(
-      <ToggleButtonGroup size="small">
-        <ToggleButton value="hello">hello</ToggleButton>
-      </ToggleButtonGroup>,
-    );
-    const child = findToggleButton(wrapper, 'hello');
-    assert.strictEqual(child.hasClass(classes.sizeSmallChild), true);
-    assert.strictEqual(child.hasClass(classes.sizeLargeChild), false);
-  });
-
-  it('should render large children', () => {
-    const wrapper = mount(
-      <ToggleButtonGroup size="large">
-        <ToggleButton value="hello">hello</ToggleButton>
-      </ToggleButtonGroup>,
-    );
-    const child = findToggleButton(wrapper, 'hello');
-    assert.strictEqual(child.hasClass(classes.sizeSmallChild), false);
-    assert.strictEqual(child.hasClass(classes.sizeLargeChild), true);
-  });
-
   describe('exclusive', () => {
     it('should render a selected ToggleButton if value is selected', () => {
       const wrapper = mount(