Refactor switches, simplify code, fix related bugs.

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
     'no-console': 'error', // airbnb is using warn
     'no-param-reassign': 'off',
     'no-prototype-builtins': 'off',
+    'no-use-before-define': ['error', { 'functions': false }], // airbnb have functions: true, annoying
     'object-curly-spacing': 'off', // use babel plugin rule
     'operator-linebreak': ['error', 'after'], // aibnb is disabling this rule
     'babel/object-curly-spacing': ['error', 'always'],

docs/site/src/demos/dialogs/ConfirmationDialog.js

@@ -11,7 +11,7 @@ import {
   DialogActions,
   DialogTitle,
 } from 'material-ui/Dialog';
-import { Radio, RadioGroup } from 'material-ui/Radio';
+import { LabelRadio as Radio, RadioGroup } from 'material-ui/Radio';
 
 const options = [
   'None',
@@ -82,6 +82,7 @@ class ConfirmationDialog extends Component {
           <RadioGroup
             ref={(c) => { this.radioGroup = c; }}
             aria-label="Gender"
+            name="gender"
             selectedValue={this.state.selectedValue}
             onChange={this.handleChange}
           >

docs/site/src/demos/selection-controls/Checkboxes.js

@@ -1,7 +1,7 @@
 // @flow weak
 
 import React, { Component } from 'react';
-import Checkbox from 'material-ui/Checkbox';
+import { LabelCheckbox } from 'material-ui/Checkbox';
 import { FormGroup } from 'material-ui/Form';
 
 export default class Checkboxes extends Component {
@@ -13,28 +13,28 @@ export default class Checkboxes extends Component {
   render() {
     return (
       <FormGroup row>
-        <Checkbox
+        <LabelCheckbox
           checked={this.state.checkedA}
           onChange={(event, checked) => this.setState({ checkedA: checked })}
           label="Option A"
           value="checkedA"
         />
-        <Checkbox
+        <LabelCheckbox
           checked={this.state.checkedB}
           onChange={(event, checked) => this.setState({ checkedB: checked })}
           label="Option B"
           value="checkedB"
         />
-        <Checkbox
+        <LabelCheckbox
           label="Option C"
           value="checkedC"
         />
-        <Checkbox
+        <LabelCheckbox
           disabled
           label="Disabled"
           value="checkedD"
         />
-        <Checkbox
+        <LabelCheckbox
           checked
           disabled
           label="Disabled"

docs/site/src/demos/selection-controls/RadioButtonsGroup.js

@@ -2,7 +2,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import { createStyleSheet } from 'jss-theme-reactor';
-import { Radio, RadioGroup } from 'material-ui/Radio';
+import { LabelRadio, RadioGroup } from 'material-ui/Radio';
 import { FormLabel } from 'material-ui/Form';
 
 const styleSheet = createStyleSheet('RadioButtonsGroup', () => ({
@@ -32,14 +32,15 @@ export default class RadioButtonsGroup extends Component {
         <FormLabel required>Gender</FormLabel>
         <RadioGroup
           aria-label="Gender"
+          name="gender"
           className={classes.group}
           selectedValue={this.state.selectedValue}
           onChange={this.handleChange}
         >
-          <Radio label="Male" value="male" />
-          <Radio label="Female" value="female" />
-          <Radio label="Other" value="other" />
-          <Radio label="Disabled" value="disabled" disabled />
+          <LabelRadio label="Male" value="male" />
+          <LabelRadio label="Female" value="female" />
+          <LabelRadio label="Other" value="other" />
+          <LabelRadio label="Disabled" value="disabled" disabled />
         </RadioGroup>
       </div>
     );

docs/site/src/demos/selection-controls/SwitchLabels.js

@@ -1,7 +1,7 @@
 // @flow weak
 
 import React, { Component } from 'react';
-import Switch from 'material-ui/Switch';
+import { LabelSwitch } from 'material-ui/Switch';
 
 export default class SwitchLabels extends Component {
   state = {
@@ -12,18 +12,17 @@ export default class SwitchLabels extends Component {
   render() {
     return (
       <div>
-        <Switch
+        <LabelSwitch
           checked={this.state.checkedA}
           onChange={(event, checked) => this.setState({ checkedA: checked })}
           label="A"
-          labelReverse
         />
-        <Switch
+        <LabelSwitch
           checked={this.state.checkedB}
           onChange={(event, checked) => this.setState({ checkedB: checked })}
           label="B"
         />
-        <Switch label="C" disabled />
+        <LabelSwitch label="C" disabled />
       </div>
     );
   }

src/Checkbox/Checkbox.js

@@ -1,10 +1,8 @@
 // @flow weak
 
-import React, { PropTypes } from 'react';
 import { createStyleSheet } from 'jss-theme-reactor';
-import classNames from 'classnames';
-import SwitchBase from '../internal/SwitchBase';
-import SelectionLabel from '../internal/SelectionLabel';
+import { createSwitch } from '../internal/SwitchBase';
+import withSwitchLabel from '../internal/withSwitchLabel';
 
 export const styleSheet = createStyleSheet('Checkbox', (theme) => {
   return {
@@ -20,79 +18,12 @@ export const styleSheet = createStyleSheet('Checkbox', (theme) => {
   };
 });
 
-export default function Checkbox(props, context) {
-  const {
-    className,
-    checkedClassName,
-    disabled,
-    disabledClassName,
-    label,
-    labelClassName,
-    labelReverse,
-    ...other
-  } = props;
-  const classes = context.styleManager.render(styleSheet);
+const Checkbox = createSwitch({ styleSheet });
 
-  const switchProps = {
-    className: classNames(classes.default, className),
-    checkedClassName: classNames(classes.checked, checkedClassName),
-    disabled,
-    disabledClassName: classNames(classes.disabled, disabledClassName),
-    ...other,
-  };
-
-  if (label) {
-    return (
-      <SelectionLabel
-        label={label}
-        labelReverse={labelReverse}
-        className={labelClassName}
-        disabled={disabled}
-      >
-        <SwitchBase
-          aria-label={label}
-          {...switchProps}
-        />
-      </SelectionLabel>
-    );
-  }
-
-  return <SwitchBase {...switchProps} />;
-}
+Checkbox.displayName = 'Checkbox';
 
-Checkbox.propTypes = {
-  checkedClassName: PropTypes.string,
-  /**
-   * The CSS class name of the root element.
-   */
-  className: PropTypes.string,
-  /**
-   * If `true`, the control will be disabled.
-   */
-  disabled: PropTypes.bool,
-  /**
-   * The CSS class name of the switch element when disabled.
-   */
-  disabledClassName: PropTypes.string,
-  /**
-   * The text to be used in an enclosing label element.
-   */
-  label: PropTypes.node,
-  /**
-   * The className to be used in an enclosing label element.
-   */
-  labelClassName: PropTypes.string,
-  /**
-   * Will reverse the order of the element and the label.
-   */
-  labelReverse: PropTypes.bool,
-};
+export default Checkbox;
 
-Checkbox.defaultProps = {
-  disabled: false,
-  labelReverse: false,
-};
+const LabelCheckbox = withSwitchLabel(Checkbox);
 
-Checkbox.contextTypes = {
-  styleManager: PropTypes.object.isRequired,
-};
+export { LabelCheckbox };

src/Checkbox/Checkbox.spec.js

@@ -1,10 +1,9 @@
 // @flow weak
 /* eslint-env mocha */
 
-import React from 'react';
 import { assert } from 'chai';
 import { createShallowWithContext } from 'test/utils';
-import Checkbox, { styleSheet } from './Checkbox';
+import Checkbox, { LabelCheckbox, styleSheet } from './Checkbox';
 
 describe('<Checkbox />', () => {
   let shallow;
@@ -15,68 +14,25 @@ describe('<Checkbox />', () => {
     classes = shallow.context.styleManager.render(styleSheet);
   });
 
-  it('should render a SwitchBase when label not present', () => {
-    const wrapper = shallow(
-      <Checkbox />,
-    );
-    assert.strictEqual(wrapper.is('SwitchBase'), true, 'should be a SwitchBase');
-  });
-
-  it('should render a label', () => {
-    const wrapper = shallow(
-      <Checkbox label="Foo" />,
-    );
-    assert.strictEqual(wrapper.is('SelectionLabel'), true, 'should be a SelectionLabel');
-  });
-
-  it('should render with the default and checked classes', () => {
-    const wrapper = shallow(
-      <Checkbox
-        checked
-        label="Foo"
-        labelClassName="foo"
-        className="woof"
-        checkedClassName="meow"
-      />,
-    );
-    const switchBase = wrapper.find('SwitchBase');
-    assert.strictEqual(wrapper.hasClass('foo'), true, 'should have the "foo" class');
-    assert.strictEqual(switchBase.hasClass('woof'), true, 'should have the "woof" class');
-    assert.strictEqual(switchBase.hasClass(classes.default), true, 'should have the default class');
-    assert.strictEqual(
-      switchBase.prop('checkedClassName').indexOf('meow') !== -1,
-      true,
-      'should have the "meow" class',
-    );
-    assert.strictEqual(
-      switchBase.prop('checkedClassName').indexOf(classes.checked) !== -1,
-      true,
-      'should have the checked class',
-    );
-  });
-
-  it('should spread custom props on the switchBase node', () => {
-    const wrapper = shallow(<Checkbox label="Foo" data-my-prop="woof" />);
-    const switchBase = wrapper.find('SwitchBase');
-    assert.strictEqual(switchBase.prop('data-my-prop'), 'woof', 'custom prop should be woof');
+  describe('styleSheet', () => {
+    it('should have the classes required for SwitchBase', () => {
+      assert.strictEqual(typeof classes.default, 'string');
+      assert.strictEqual(typeof classes.checked, 'string');
+      assert.strictEqual(typeof classes.disabled, 'string');
+    });
   });
 
-  describe('prop: disabled', () => {
-    it('should disable the component', () => {
-      const wrapper = shallow(<Checkbox disabled />);
-      assert.strictEqual(wrapper.props().disabled, true, 'should pass the property down the tree');
+  describe('default Checkbox export', () => {
+    it('should be a SwitchBase with the displayName set for debugging', () => {
+      assert.strictEqual(Checkbox.name, 'SwitchBase');
+      assert.strictEqual(Checkbox.displayName, 'Checkbox');
     });
   });
 
-  describe('prop: disabledClassName', () => {
-    it('should provide the class', () => {
-      const className = 'foo';
-      const wrapper = shallow(<Checkbox disabledClassName={className} />);
-      assert.strictEqual(
-        wrapper.find('SwitchBase').props().disabledClassName.indexOf(className) !== -1,
-        true,
-        'should have the custom disabled class',
-      );
+  describe('named LabelCheckbox export', () => {
+    it('should be Checkbox wrapped with SwitchLabel', () => {
+      assert.strictEqual(LabelCheckbox.name, 'SwitchLabel');
+      assert.strictEqual(LabelCheckbox.displayName, 'withSwitchLabel(Checkbox)');
     });
   });
 });

src/Checkbox/index.js

@@ -1,4 +1,4 @@
 /* eslint-disable flowtype/require-valid-file-annotation */
 
 export default from './Checkbox';
-export Checkbox from './Checkbox';
+export Checkbox, { LabelCheckbox } from './Checkbox';

src/Form/FormGroup.js

@@ -21,14 +21,14 @@ export const styleSheet = createStyleSheet('FormGroup', () => {
  * awareness.  Upon focusing on one of the child controls, it will propagate `focused` to the label.
  */
 export default function FormGroup(props, context) {
-  const { className, children, row } = props;
+  const { className, children, row, ...other } = props;
   const classes = context.styleManager.render(styleSheet);
   const rootClassName = classNames(classes.root, {
     [classes.row]: row,
   }, className);
 
   return (
-    <div className={rootClassName}>
+    <div className={rootClassName} {...other}>
       {children}
     </div>
   );

src/IconButton/IconButton.js

@@ -62,6 +62,7 @@ export const styleSheet = createStyleSheet('IconButton', (theme) => {
 export default function IconButton(props, context) {
   const {
     accent,
+    buttonRef,
     children,
     className,
     contrast,
@@ -80,6 +81,7 @@ export default function IconButton(props, context) {
       centerRipple
       keyboardFocusedClassName={classes.keyboardFocused}
       disabled={disabled}
+      ref={buttonRef}
       {...other}
     >
       <span className={classNames(classes.label)}>
@@ -96,6 +98,10 @@ IconButton.propTypes = {
    * If true, will use the theme's accent color.
    */
   accent: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  buttonRef: PropTypes.func,
   /**
    * The icon element. If a string is passed,
    * it will be used as a material icon font ligature.