From adabb944d7b499da9a011ee83f22d078d37fdda2 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 23 Jul 2017 12:07:36 +0200
Subject: [PATCH] [docs] Selection control custom colors

---
 docs/src/components/files.js                  |  2 +-
 .../selection-controls/Checkboxes.js          | 45 +++++++++++++++--
 .../selection-controls/RadioButtons.js        |  4 +-
 .../selection-controls/RadioButtonsGroup.js   |  2 +-
 .../selection-controls/SwitchLabels.js        |  2 +-
 .../selection-controls/Switches.js            | 49 ++++++++++++++++---
 .../selection-controls/selection-controls.md  |  2 +-
 src/Switch/Switch.js                          |  6 +--
 8 files changed, 91 insertions(+), 21 deletions(-)

diff --git a/docs/src/components/files.js b/docs/src/components/files.js
index 68486d2958f3d8..fe531582d671ed 100644
--- a/docs/src/components/files.js
+++ b/docs/src/components/files.js
@@ -46,7 +46,7 @@ export const demoComponentsTree = demos.map(demo => {
     return node;
   }
 
-  node.components = components[1].split(', ');
+  node.components = components[1].split(', ').sort();
 
   return node;
 });
diff --git a/docs/src/pages/component-demos/selection-controls/Checkboxes.js b/docs/src/pages/component-demos/selection-controls/Checkboxes.js
index 06a2522d9217b5..2f031e23ff98a1 100644
--- a/docs/src/pages/component-demos/selection-controls/Checkboxes.js
+++ b/docs/src/pages/component-demos/selection-controls/Checkboxes.js
@@ -1,23 +1,39 @@
-// @flow
+// @flow weak
 
 import React, { Component } from 'react';
-import Checkbox from 'material-ui/Checkbox';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import green from 'material-ui/colors/green';
 import { FormGroup, FormControlLabel } from 'material-ui/Form';
+import Checkbox from 'material-ui/Checkbox';
 
-export default class Checkboxes extends Component {
+const styleSheet = createStyleSheet('Checkboxes', {
+  checked: {
+    color: green[500],
+  },
+});
+
+class Checkboxes extends Component {
   state = {
     checkedA: true,
     checkedB: false,
+    checkedF: true,
+  };
+
+  handleChange = name => (event, checked) => {
+    this.setState({ [name]: checked });
   };
 
   render() {
+    const { classes } = this.props;
+
     return (
       <FormGroup row>
         <FormControlLabel
           control={
             <Checkbox
               checked={this.state.checkedA}
-              onChange={(event, checked) => this.setState({ checkedA: checked })}
+              onChange={this.handleChange('checkedA')}
               value="checkedA"
             />
           }
@@ -27,7 +43,7 @@ export default class Checkboxes extends Component {
           control={
             <Checkbox
               checked={this.state.checkedB}
-              onChange={(event, checked) => this.setState({ checkedB: checked })}
+              onChange={this.handleChange('checkedB')}
               value="checkedB"
             />
           }
@@ -45,7 +61,26 @@ export default class Checkboxes extends Component {
           control={<Checkbox checked value="checkedE" indeterminate />}
           label="Indeterminate"
         />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={this.state.checkedF}
+              onChange={this.handleChange('checkedF')}
+              classes={{
+                checked: classes.checked,
+              }}
+              value="checkedF"
+            />
+          }
+          label="Custom color"
+        />
       </FormGroup>
     );
   }
 }
+
+Checkboxes.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(Checkboxes);
diff --git a/docs/src/pages/component-demos/selection-controls/RadioButtons.js b/docs/src/pages/component-demos/selection-controls/RadioButtons.js
index 1efa87e47c5d0b..9995ca5e50ff66 100644
--- a/docs/src/pages/component-demos/selection-controls/RadioButtons.js
+++ b/docs/src/pages/component-demos/selection-controls/RadioButtons.js
@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 import Radio from 'material-ui/Radio';
 
-export default class RadioButtons extends Component {
+class RadioButtons extends Component {
   state = {
     selectedValue: undefined,
   };
@@ -40,3 +40,5 @@ export default class RadioButtons extends Component {
     );
   }
 }
+
+export default RadioButtons;
diff --git a/docs/src/pages/component-demos/selection-controls/RadioButtonsGroup.js b/docs/src/pages/component-demos/selection-controls/RadioButtonsGroup.js
index 18d39bdf38f02c..8ef909a8ccec17 100644
--- a/docs/src/pages/component-demos/selection-controls/RadioButtonsGroup.js
+++ b/docs/src/pages/component-demos/selection-controls/RadioButtonsGroup.js
@@ -1,4 +1,4 @@
-// @flow
+// @flow weak
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
diff --git a/docs/src/pages/component-demos/selection-controls/SwitchLabels.js b/docs/src/pages/component-demos/selection-controls/SwitchLabels.js
index be806afc5d53d5..244e745c72472f 100644
--- a/docs/src/pages/component-demos/selection-controls/SwitchLabels.js
+++ b/docs/src/pages/component-demos/selection-controls/SwitchLabels.js
@@ -1,4 +1,4 @@
-// @flow
+// @flow weak
 
 import React, { Component } from 'react';
 import { FormControlLabel } from 'material-ui/Form';
diff --git a/docs/src/pages/component-demos/selection-controls/Switches.js b/docs/src/pages/component-demos/selection-controls/Switches.js
index a09de567109615..b0c174919389f1 100644
--- a/docs/src/pages/component-demos/selection-controls/Switches.js
+++ b/docs/src/pages/component-demos/selection-controls/Switches.js
@@ -1,32 +1,65 @@
-// @flow
+// @flow weak
 
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import green from 'material-ui/colors/green';
 import Switch from 'material-ui/Switch';
 
-export default class Switches extends Component {
+const styleSheet = createStyleSheet('Switches', {
+  bar: {},
+  checked: {
+    color: green[500],
+    '& + $bar': {
+      backgroundColor: green[500],
+    },
+  },
+});
+
+class Switches extends Component {
   state = {
     checkedA: true,
     checkedB: false,
-    checkedC: false,
-    checkedD: true,
+    checkedE: true,
+  };
+
+  handleChange = name => (event, checked) => {
+    this.setState({ [name]: checked });
   };
 
   render() {
+    const { classes } = this.props;
+
     return (
       <div>
         <Switch
           checked={this.state.checkedA}
-          onChange={(event, checked) => this.setState({ checkedA: checked })}
+          onChange={this.handleChange('checkedA')}
           aria-label="checkedA"
         />
         <Switch
           checked={this.state.checkedB}
-          onChange={(event, checked) => this.setState({ checkedB: checked })}
+          onChange={this.handleChange('checkedB')}
           aria-label="checkedB"
         />
-        <Switch checked={this.state.checkedC} aria-label="checkedC" disabled />
-        <Switch checked={this.state.checkedD} aria-label="checkedD" disabled />
+        <Switch checked={false} aria-label="checkedC" disabled />
+        <Switch checked aria-label="checkedD" disabled />
+        <Switch
+          classes={{
+            checked: classes.checked,
+            bar: classes.bar,
+          }}
+          checked={this.state.checkedE}
+          onChange={this.handleChange('checkedE')}
+          aria-label="checkedD"
+        />
       </div>
     );
   }
 }
+
+Switches.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(Switches);
diff --git a/docs/src/pages/component-demos/selection-controls/selection-controls.md b/docs/src/pages/component-demos/selection-controls/selection-controls.md
index 1c7da2f6c3865c..3a0feaafc5779c 100644
--- a/docs/src/pages/component-demos/selection-controls/selection-controls.md
+++ b/docs/src/pages/component-demos/selection-controls/selection-controls.md
@@ -1,5 +1,5 @@
 ---
-components: FormControl, FormGroup, FormLabel, FormSwitchLabel, RadioGroup, Checkbox
+components: FormControl, FormGroup, FormLabel, FormControlLabel, RadioGroup, Checkbox, Radio, Switch
 ---
 
 # Selection Controls
diff --git a/src/Switch/Switch.js b/src/Switch/Switch.js
index 3783ba27eab66b..af19fdfbc4f9d8 100644
--- a/src/Switch/Switch.js
+++ b/src/Switch/Switch.js
@@ -64,13 +64,13 @@ export const styleSheet = createStyleSheet('MuiSwitch', theme => ({
 const SwitchBase = createSwitch({ styleSheet });
 
 function Switch(props) {
-  const { classes, className, ...other } = props;
+  const { classes: { root, ...classes }, className, ...other } = props;
 
   const icon = <div className={classes.icon} />;
 
   return (
-    <div className={classNames(classes.root, className)}>
-      <SwitchBase icon={icon} checkedIcon={icon} {...other} />
+    <div className={classNames(root, className)}>
+      <SwitchBase icon={icon} classes={classes} checkedIcon={icon} {...other} />
       <div className={classes.bar} />
     </div>
   );