[Selection Control] Symmetry between the demos (#10279)

mui · Feb 14, 2018 · 02081e2 · 02081e2
1 parent 9ad0049
commit 02081e2
Show file tree

Hide file tree

Showing 10 changed files with 286 additions and 134 deletions.
diff --git a/docs/src/pages/demos/selection-controls/CheckboxLabels.js b/docs/src/pages/demos/selection-controls/CheckboxLabels.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import green from 'material-ui/colors/green';
+import { FormGroup, FormControlLabel } from 'material-ui/Form';
+import Checkbox from 'material-ui/Checkbox';
+
+const styles = {
+  checked: {
+    color: green[500],
+  },
+};
+
+class CheckboxLabels extends React.Component {
+  state = {
+    checkedA: true,
+    checkedB: true,
+    checkedF: true,
+    checkedG: true,
+  };
+
+  handleChange = name => event => {
+    this.setState({ [name]: event.target.checked });
+  };
+
+  render() {
+    const { classes } = this.props;
+
+    return (
+      <FormGroup row>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={this.state.checkedA}
+              onChange={this.handleChange('checkedA')}
+              value="checkedA"
+            />
+          }
+          label="Secondary"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={this.state.checkedB}
+              onChange={this.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={this.state.checkedF}
+              onChange={this.handleChange('checkedF')}
+              value="checkedF"
+              indeterminate
+            />
+          }
+          label="Indeterminate"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={this.state.checkedG}
+              onChange={this.handleChange('checkedG')}
+              value="checkedG"
+              classes={{
+                checked: classes.checked,
+              }}
+            />
+          }
+          label="Custom color"
+        />
+      </FormGroup>
+    );
+  }
+}
+
+CheckboxLabels.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(CheckboxLabels);
diff --git a/docs/src/pages/demos/selection-controls/Checkboxes.js b/docs/src/pages/demos/selection-controls/Checkboxes.js
@@ -1,92 +1,43 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
-import green from 'material-ui/colors/green';
-import { FormGroup, FormControlLabel } from 'material-ui/Form';
 import Checkbox from 'material-ui/Checkbox';
 
-const styles = {
-  checked: {
-    color: green[500],
-  },
-};
-
 class Checkboxes extends React.Component {
   state = {
     checkedA: true,
     checkedB: true,
     checkedF: true,
-    checkedG: true,
   };
 
   handleChange = name => event => {
     this.setState({ [name]: event.target.checked });
   };
 
   render() {
-    const { classes } = this.props;
-
     return (
-      <FormGroup row>
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={this.state.checkedA}
-              onChange={this.handleChange('checkedA')}
-              value="checkedA"
-            />
-          }
-          label="Option A"
-        />
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={this.state.checkedB}
-              onChange={this.handleChange('checkedB')}
-              value="checkedB"
-              color="primary"
-            />
-          }
-          label="Option B"
+      <div>
+        <Checkbox
+          checked={this.state.checkedA}
+          onChange={this.handleChange('checkedA')}
+          value="checkedA"
         />
-        <FormControlLabel control={<Checkbox value="checkedC" />} label="Option C" />
-        <FormControlLabel disabled control={<Checkbox value="checkedD" />} label="Disabled" />
-        <FormControlLabel
-          disabled
-          control={<Checkbox checked value="checkedE" />}
-          label="Disabled"
+        <Checkbox
+          checked={this.state.checkedB}
+          onChange={this.handleChange('checkedB')}
+          value="checkedB"
+          color="primary"
         />
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={this.state.checkedF}
-              onChange={this.handleChange('checkedF')}
-              value="checkedF"
-              indeterminate
-            />
-          }
-          label="Indeterminate"
+        <Checkbox value="checkedC" />
+        <Checkbox disabled value="checkedD" />
+        <Checkbox disabled checked value="checkedE" />
+        <Checkbox
+          checked={this.state.checkedF}
+          onChange={this.handleChange('checkedF')}
+          value="checkedF"
+          indeterminate
         />
-        <FormControlLabel
-          control={
-            <Checkbox
-              checked={this.state.checkedG}
-              onChange={this.handleChange('checkedG')}
-              classes={{
-                checked: classes.checked,
-              }}
-              value="checkedG"
-            />
-          }
-          label="Custom color"
-        />
-      </FormGroup>
+      </div>
     );
   }
 }
 
-Checkboxes.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(Checkboxes);
+export default Checkboxes;
diff --git a/docs/src/pages/demos/selection-controls/CheckboxesGroup.js b/docs/src/pages/demos/selection-controls/CheckboxesGroup.js
@@ -1,6 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
 import {
   FormLabel,
   FormControl,
@@ -10,8 +8,6 @@ import {
 } from 'material-ui/Form';
 import Checkbox from 'material-ui/Checkbox';
 
-const styles = {};
-
 class CheckboxesGroup extends React.Component {
   state = {
     gilad: true,
@@ -65,8 +61,4 @@ class CheckboxesGroup extends React.Component {
   }
 }
 
-CheckboxesGroup.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CheckboxesGroup);
+export default CheckboxesGroup;
diff --git a/docs/src/pages/demos/selection-controls/RadioButtons.js b/docs/src/pages/demos/selection-controls/RadioButtons.js
@@ -1,6 +1,15 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import green from 'material-ui/colors/green';
 import Radio from 'material-ui/Radio';
 
+const styles = {
+  checked: {
+    color: green[500],
+  },
+};
+
 class RadioButtons extends React.Component {
   state = {
     selectedValue: 'a',
@@ -11,32 +20,41 @@ class RadioButtons extends React.Component {
   };
 
   render() {
+    const { classes } = this.props;
+
     return (
       <div>
         <Radio
           checked={this.state.selectedValue === 'a'}
           onChange={this.handleChange}
           value="a"
-          name="radio button demo"
+          name="radio-button-demo"
           aria-label="A"
         />
         <Radio
           checked={this.state.selectedValue === 'b'}
           onChange={this.handleChange}
           value="b"
-          name="radio button demo"
+          name="radio-button-demo"
           aria-label="B"
         />
         <Radio
           checked={this.state.selectedValue === 'c'}
           onChange={this.handleChange}
           value="c"
-          name="radio button demo"
+          name="radio-button-demo"
           aria-label="C"
+          classes={{
+            checked: classes.checked,
+          }}
         />
       </div>
     );
   }
 }
 
-export default RadioButtons;
+RadioButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(RadioButtons);
diff --git a/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js b/docs/src/pages/demos/selection-controls/RadioButtonsGroup.js
@@ -59,8 +59,8 @@ class RadioButtonsGroup extends React.Component {
             value={this.state.value}
             onChange={this.handleChange}
           >
-            <FormControlLabel value="female" control={<Radio color="primary" />} label="Female" />
             <FormControlLabel value="male" control={<Radio color="primary" />} label="Male" />
+            <FormControlLabel value="female" control={<Radio color="primary" />} label="Female" />
             <FormControlLabel value="other" control={<Radio color="primary" />} label="Other" />
             <FormControlLabel
               value="disabled"

diff --git a/docs/src/pages/demos/selection-controls/SwitchLabels.js b/docs/src/pages/demos/selection-controls/SwitchLabels.js
@@ -1,38 +1,81 @@
 import React from 'react';
-import { FormControlLabel, FormGroup } from 'material-ui/Form';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import green from 'material-ui/colors/green';
+import { FormGroup, FormControlLabel } from 'material-ui/Form';
 import Switch from 'material-ui/Switch';
 
+const styles = {
+  checked: {
+    color: green[500],
+    '& + $bar': {
+      backgroundColor: green[500],
+    },
+  },
+  bar: {},
+};
+
 class SwitchLabels extends React.Component {
   state = {
     checkedA: true,
-    checkedB: false,
+    checkedB: true,
+    checkedF: true,
+  };
+
+  handleChange = name => event => {
+    this.setState({ [name]: event.target.checked });
   };
 
   render() {
+    const { classes } = this.props;
+
     return (
-      <FormGroup>
+      <FormGroup row>
         <FormControlLabel
           control={
             <Switch
               checked={this.state.checkedA}
-              onChange={(event, checked) => this.setState({ checkedA: checked })}
+              onChange={this.handleChange('checkedA')}
+              value="checkedA"
             />
           }
-          label="A"
+          label="Secondary"
         />
         <FormControlLabel
           control={
             <Switch
               checked={this.state.checkedB}
-              onChange={(event, checked) => this.setState({ checkedB: checked })}
+              onChange={this.handleChange('checkedB')}
+              value="checkedB"
+              color="primary"
             />
           }
-          label="B"
+          label="Primary"
+        />
+        <FormControlLabel control={<Switch value="checkedC" />} label="Uncontrolled" />
+        <FormControlLabel disabled control={<Switch value="checkedD" />} label="Disabled" />
+        <FormControlLabel disabled control={<Switch checked value="checkedE" />} label="Disabled" />
+        <FormControlLabel
+          control={
+            <Switch
+              checked={this.state.checkedF}
+              onChange={this.handleChange('checkedF')}
+              value="checkedF"
+              classes={{
+                checked: classes.checked,
+                bar: classes.bar,
+              }}
+            />
+          }
+          label="Custom color"
         />
-        <FormControlLabel control={<Switch />} disabled label="C" />
       </FormGroup>
     );
   }
 }
 
-export default SwitchLabels;
+SwitchLabels.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SwitchLabels);