[docs] Selection control custom colors

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;
 });

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);

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;

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';

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';

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);

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

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>
   );