From 7172d71b38e10f3e993814d3060e7da8a7906b23 Mon Sep 17 00:00:00 2001
From: Robert Donigian <donigianrp@gmail.com>
Date: Sun, 7 Apr 2019 10:52:06 -0400
Subject: [PATCH 1/3] Add TypeScript to Checkbox Labels

---
 .../selection-controls/CheckboxLabels.js      |   6 +-
 .../selection-controls/CheckboxLabels.tsx     | 104 ++++++++++++++++++
 2 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/pages/demos/selection-controls/CheckboxLabels.tsx

diff --git a/docs/src/pages/demos/selection-controls/CheckboxLabels.js b/docs/src/pages/demos/selection-controls/CheckboxLabels.js
index 09596491168381..4d91d81ce11a42 100644
--- a/docs/src/pages/demos/selection-controls/CheckboxLabels.js
+++ b/docs/src/pages/demos/selection-controls/CheckboxLabels.js
@@ -9,7 +9,7 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import Favorite from '@material-ui/icons/Favorite';
 import FavoriteBorder from '@material-ui/icons/FavoriteBorder';
 
-const GreenCheckbox = withStyles({
+const styles = () => ({
   root: {
     '&:not($checked)': {
       color: green[400],
@@ -19,7 +19,9 @@ const GreenCheckbox = withStyles({
     },
   },
   checked: {},
-})(props => <Checkbox color="default" {...props} />);
+});
+
+const GreenCheckbox = withStyles(styles)(props => <Checkbox color="default" {...props} />);
 
 function CheckboxLabels() {
   const [state, setState] = React.useState({
diff --git a/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx b/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx
new file mode 100644
index 00000000000000..697db176f8f29f
--- /dev/null
+++ b/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
+import green from '@material-ui/core/colors/green';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import Favorite from '@material-ui/icons/Favorite';
+import FavoriteBorder from '@material-ui/icons/FavoriteBorder';
+
+const styles = () =>
+  createStyles({
+    root: {
+      '&:not($checked)': {
+        color: green[400],
+      },
+      '&$checked': {
+        color: green[600],
+      },
+    },
+    checked: {},
+  });
+
+interface Props extends WithStyles<typeof styles> {}
+
+const GreenCheckbox: React.ComponentType<CheckboxProps> = withStyles(styles)((props: Props) => (
+  <Checkbox color="default" {...props} />
+));
+
+function CheckboxLabels() {
+  const [state, setState] = React.useState({
+    checkedA: true,
+    checkedB: true,
+    checkedF: true,
+    checkedG: true,
+  });
+
+  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [name]: event.target.checked });
+  };
+
+  return (
+    <FormGroup row>
+      <FormControlLabel
+        control={
+          <Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
+        }
+        label="Secondary"
+      />
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={state.checkedB}
+            onChange={handleChange('checkedB')}
+            value="checkedB"
+            color="primary"
+          />
+        }
+        label="Primary"
+      />
+      <FormControlLabel control={<Checkbox value="checkedC" />} label="Uncontrolled" />
+      <FormControlLabel disabled control={<Checkbox value="checkedD" />} label="Disabled" />
+      <FormControlLabel disabled control={<Checkbox checked value="checkedE" />} label="Disabled" />
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={state.checkedF}
+            onChange={handleChange('checkedF')}
+            value="checkedF"
+            indeterminate
+          />
+        }
+        label="Indeterminate"
+      />
+      <FormControlLabel
+        control={
+          <GreenCheckbox
+            checked={state.checkedG}
+            onChange={handleChange('checkedG')}
+            value="checkedG"
+          />
+        }
+        label="Custom color"
+      />
+      <FormControlLabel
+        control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} value="checkedH" />}
+        label="Custom icon"
+      />
+      <FormControlLabel
+        control={
+          <Checkbox
+            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
+            checkedIcon={<CheckBoxIcon fontSize="small" />}
+            value="checkedI"
+          />
+        }
+        label="Custom size"
+      />
+    </FormGroup>
+  );
+}
+
+export default CheckboxLabels;

From adbba36852b243d41c5b900c1739d8c2cdf569dc Mon Sep 17 00:00:00 2001
From: Robert Donigian <donigianrp@gmail.com>
Date: Sun, 7 Apr 2019 18:10:55 -0400
Subject: [PATCH 2/3] restore CheckboxLabels.js to original, remove styles
 variable from CheckboxLabel.tsx

---
 .../selection-controls/CheckboxLabels.js      |  6 ++--
 .../selection-controls/CheckboxLabels.tsx     | 29 +++++++------------
 2 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/docs/src/pages/demos/selection-controls/CheckboxLabels.js b/docs/src/pages/demos/selection-controls/CheckboxLabels.js
index 4d91d81ce11a42..09596491168381 100644
--- a/docs/src/pages/demos/selection-controls/CheckboxLabels.js
+++ b/docs/src/pages/demos/selection-controls/CheckboxLabels.js
@@ -9,7 +9,7 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import Favorite from '@material-ui/icons/Favorite';
 import FavoriteBorder from '@material-ui/icons/FavoriteBorder';
 
-const styles = () => ({
+const GreenCheckbox = withStyles({
   root: {
     '&:not($checked)': {
       color: green[400],
@@ -19,9 +19,7 @@ const styles = () => ({
     },
   },
   checked: {},
-});
-
-const GreenCheckbox = withStyles(styles)(props => <Checkbox color="default" {...props} />);
+})(props => <Checkbox color="default" {...props} />);
 
 function CheckboxLabels() {
   const [state, setState] = React.useState({
diff --git a/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx b/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx
index 697db176f8f29f..41caa21e28c53c 100644
--- a/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx
+++ b/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/core/styles';
 import green from '@material-ui/core/colors/green';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -9,24 +9,17 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import Favorite from '@material-ui/icons/Favorite';
 import FavoriteBorder from '@material-ui/icons/FavoriteBorder';
 
-const styles = () =>
-  createStyles({
-    root: {
-      '&:not($checked)': {
-        color: green[400],
-      },
-      '&$checked': {
-        color: green[600],
-      },
+const GreenCheckbox: React.ComponentType<CheckboxProps> = withStyles({
+  root: {
+    '&:not($checked)': {
+      color: green[400],
     },
-    checked: {},
-  });
-
-interface Props extends WithStyles<typeof styles> {}
-
-const GreenCheckbox: React.ComponentType<CheckboxProps> = withStyles(styles)((props: Props) => (
-  <Checkbox color="default" {...props} />
-));
+    '&$checked': {
+      color: green[600],
+    },
+  },
+  checked: {},
+})(props => <Checkbox color="default" {...props} />);
 
 function CheckboxLabels() {
   const [state, setState] = React.useState({

From 922b5175ee7e422b29ec103f2721d5355a7da640 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 8 Apr 2019 11:10:23 +0200
Subject: [PATCH 3/3] [docs] Use less react helper types

---
 docs/src/pages/demos/selection-controls/CheckboxLabels.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx b/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx
index 41caa21e28c53c..47a434d0131f08 100644
--- a/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx
+++ b/docs/src/pages/demos/selection-controls/CheckboxLabels.tsx
@@ -9,7 +9,7 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import Favorite from '@material-ui/icons/Favorite';
 import FavoriteBorder from '@material-ui/icons/FavoriteBorder';
 
-const GreenCheckbox: React.ComponentType<CheckboxProps> = withStyles({
+const GreenCheckbox = withStyles({
   root: {
     '&:not($checked)': {
       color: green[400],
@@ -19,7 +19,7 @@ const GreenCheckbox: React.ComponentType<CheckboxProps> = withStyles({
     },
   },
   checked: {},
-})(props => <Checkbox color="default" {...props} />);
+})((props: CheckboxProps) => <Checkbox color="default" {...props} />);
 
 function CheckboxLabels() {
   const [state, setState] = React.useState({