From 267a1b818045c8c1b5ca2ef69d93de6569e66582 Mon Sep 17 00:00:00 2001
From: Lorenz Henk <lorenz.henk@cybertec.at>
Date: Thu, 6 Feb 2020 10:57:40 +0100
Subject: [PATCH 1/3] Add toggle button enforce value documentation

---
 .../toggle-button/ToggleButtonNotEmpty.js     | 80 +++++++++++++++++++
 .../toggle-button/ToggleButtonNotEmpty.tsx    | 80 +++++++++++++++++++
 .../components/toggle-button/toggle-button.md | 21 +++++
 3 files changed, 181 insertions(+)
 create mode 100644 docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
 create mode 100644 docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx

diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
new file mode 100644
index 00000000000000..7b06c641fe382e
--- /dev/null
+++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+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 LaptopIcon from '@material-ui/icons/Laptop';
+import TvIcon from '@material-ui/icons/Tv';
+import PhoneAndroidIcon from '@material-ui/icons/PhoneAndroid';
+import Grid from '@material-ui/core/Grid';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+
+const useStyles = makeStyles(theme => ({
+  toggleContainer: {
+    margin: theme.spacing(2, 0),
+  },
+}));
+
+export default function ToggleButtons() {
+  const [alignment, setAlignment] = React.useState('left');
+  const [formats, setFormats] = React.useState(() => ['phone']);
+
+  const handleFormat = (event, newFormats) => {
+    if (newFormats.length) {
+      setFormats(newFormats);
+    }
+  };
+
+  const handleAlignment = (event, newAlignment) => {
+    if (newAlignment !== null) {
+      setAlignment(newAlignment);
+    }
+  };
+
+  const classes = useStyles();
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item sm={12} md={6}>
+        <div className={classes.toggleContainer}>
+          <ToggleButtonGroup
+            value={alignment}
+            exclusive
+            onChange={handleAlignment}
+            aria-label="text alignment"
+          >
+            <ToggleButton value="left" aria-label="left aligned">
+              <FormatAlignLeftIcon />
+            </ToggleButton>
+            <ToggleButton value="center" aria-label="centered">
+              <FormatAlignCenterIcon />
+            </ToggleButton>
+            <ToggleButton value="right" aria-label="right aligned">
+              <FormatAlignRightIcon />
+            </ToggleButton>
+            <ToggleButton value="justify" aria-label="justified" disabled>
+              <FormatAlignJustifyIcon />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+      </Grid>
+      <Grid item sm={12} md={6}>
+        <div className={classes.toggleContainer}>
+          <ToggleButtonGroup value={formats} onChange={handleFormat} aria-label="device">
+            <ToggleButton value="laptop" aria-label="laptop">
+              <LaptopIcon />
+            </ToggleButton>
+            <ToggleButton value="tv" aria-label="tv">
+              <TvIcon />
+            </ToggleButton>
+            <ToggleButton value="phone" aria-label="phone">
+              <PhoneAndroidIcon />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
new file mode 100644
index 00000000000000..0d095e444058a5
--- /dev/null
+++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+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 LaptopIcon from '@material-ui/icons/Laptop';
+import TvIcon from '@material-ui/icons/Tv';
+import PhoneAndroidIcon from '@material-ui/icons/PhoneAndroid';
+import Grid from '@material-ui/core/Grid';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+
+const useStyles = makeStyles(theme => ({
+  toggleContainer: {
+    margin: theme.spacing(2, 0),
+  },
+}));
+
+export default function ToggleButtons() {
+  const [alignment, setAlignment] = React.useState('left');
+  const [formats, setFormats] = React.useState(() => ['phone']);
+
+  const handleFormat = (event: React.MouseEvent<HTMLElement>, newFormats: string[]) => {
+    if (newFormats.length) {
+      setFormats(newFormats);
+    }
+  };
+
+  const handleAlignment = (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {
+    if (newAlignment !== null) {
+      setAlignment(newAlignment);
+    }
+  };
+
+  const classes = useStyles();
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item sm={12} md={6}>
+        <div className={classes.toggleContainer}>
+          <ToggleButtonGroup
+            value={alignment}
+            exclusive
+            onChange={handleAlignment}
+            aria-label="text alignment"
+          >
+            <ToggleButton value="left" aria-label="left aligned">
+              <FormatAlignLeftIcon />
+            </ToggleButton>
+            <ToggleButton value="center" aria-label="centered">
+              <FormatAlignCenterIcon />
+            </ToggleButton>
+            <ToggleButton value="right" aria-label="right aligned">
+              <FormatAlignRightIcon />
+            </ToggleButton>
+            <ToggleButton value="justify" aria-label="justified" disabled>
+              <FormatAlignJustifyIcon />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+      </Grid>
+      <Grid item sm={12} md={6}>
+        <div className={classes.toggleContainer}>
+          <ToggleButtonGroup value={formats} onChange={handleFormat} aria-label="device">
+            <ToggleButton value="laptop" aria-label="laptop">
+              <LaptopIcon />
+            </ToggleButton>
+            <ToggleButton value="tv" aria-label="tv">
+              <TvIcon />
+            </ToggleButton>
+            <ToggleButton value="phone" aria-label="phone">
+              <PhoneAndroidIcon />
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </div>
+      </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 669b1ad9635a0e..264f54a44b8e34 100644
--- a/docs/src/pages/components/toggle-button/toggle-button.md
+++ b/docs/src/pages/components/toggle-button/toggle-button.md
@@ -21,6 +21,27 @@ Fancy larger or smaller buttons? Use the `size` property.
 
 {{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
 
+## Enforce value set
+
+If you want to enforce at least one button to be active, you can adapt your handleChange
+function.
+
+```jsx
+const handleFormat = (event, newFormats) => {
+  if (newFormats.length) {
+    setFormats(newFormats);
+  }
+};
+
+const handleAlignment = (event, newAlignment) => {
+  if (newAlignment !== null) {
+    setAlignment(newAlignment);
+  }
+};
+```
+
+{{"demo": "pages/components/toggle-button/ToggleButtonNotEmpty.js"}}
+
 ## Standalone toggle button
 
 {{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}}

From 444190b31fd697c6216e32a8632c24560f98c842 Mon Sep 17 00:00:00 2001
From: Lorenz Henk <lorenz.henk@cybertec.at>
Date: Thu, 6 Feb 2020 10:59:52 +0100
Subject: [PATCH 2/3] Explicitly add null as allowed value to handler

---
 docs/src/pages/components/toggle-button/ToggleButtons.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/toggle-button/ToggleButtons.tsx b/docs/src/pages/components/toggle-button/ToggleButtons.tsx
index 7aac56329b171c..909552f11abd2b 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtons.tsx
+++ b/docs/src/pages/components/toggle-button/ToggleButtons.tsx
@@ -21,14 +21,14 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function ToggleButtons() {
-  const [alignment, setAlignment] = React.useState('left');
+  const [alignment, setAlignment] = React.useState<string | null>('left');
   const [formats, setFormats] = React.useState(() => ['bold']);
 
   const handleFormat = (event: React.MouseEvent<HTMLElement>, newFormats: string[]) => {
     setFormats(newFormats);
   };
 
-  const handleAlignment = (event: React.MouseEvent<HTMLElement>, newAlignment: string) => {
+  const handleAlignment = (event: React.MouseEvent<HTMLElement>, newAlignment: string | null) => {
     setAlignment(newAlignment);
   };
 

From 4c6cf36ee7fc93d497530fd79c8dc96a33a950a5 Mon Sep 17 00:00:00 2001
From: Lorenz Henk <lorenz.henk@cybertec.at>
Date: Thu, 6 Feb 2020 11:23:08 +0100
Subject: [PATCH 3/3] Sync demo component name with filename

---
 docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js | 2 +-
 .../src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
index 7b06c641fe382e..2e89be3feb47d1 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
+++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.js
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export default function ToggleButtons() {
+export default function ToggleButtonNotEmpty() {
   const [alignment, setAlignment] = React.useState('left');
   const [formats, setFormats] = React.useState(() => ['phone']);
 
diff --git a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
index 0d095e444058a5..84d4f742cfef01 100644
--- a/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
+++ b/docs/src/pages/components/toggle-button/ToggleButtonNotEmpty.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-export default function ToggleButtons() {
+export default function ToggleButtonNotEmpty() {
   const [alignment, setAlignment] = React.useState('left');
   const [formats, setFormats] = React.useState(() => ['phone']);