Toggle button specs

packages/material-ui-lab/src/ToggleButton/ToggleButton.js

@@ -85,7 +85,7 @@ export const styles = theme => ({
 
 class ToggleButton extends React.Component {
   handleChange = event => {
-    const { onChange, value, onClick } = this.props;
+    const { onChange, onClick, value } = this.props;
 
     if (onClick) {
       onClick(event);
@@ -124,7 +124,6 @@ class ToggleButton extends React.Component {
         className={className}
         disabled={disabled}
         focusRipple={!disableFocusRipple}
-        keyboardFocusedClassName={classes.keyboardFocused}
         onClick={this.handleChange}
         {...other}
       >

packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js

@@ -0,0 +1,71 @@
+// import React from 'react';
+// import { assert } from 'chai';
+// import { createShallow, createRender, getClasses } from '../test-utils';
+// import ToggleButton from './ToggleButton';
+// import ButtonBase from '../ButtonBase';
+//
+// describe('<ToggleButton />', () => {
+//   let shallow;
+//   let render;
+//   let classes;
+//
+//   before(() => {
+//     shallow = createShallow({ dive: true });
+//     render = createRender();
+//     classes = getClasses(<ToggleButton>Hello World</ToggleButton>);
+//   });
+//
+//   it('should render a <ButtonBase> element', () => {
+//     const wrapper = shallow(<ToggleButton>Hello World</ToggleButton>);
+//     assert.strictEqual(wrapper.type(), ButtonBase);
+//     assert.strictEqual(
+//       wrapper.props().type,
+//       'button',
+//       'should render with the button type attribute',
+//     );
+//   });
+//
+//   it('should render the custom className and the root class', () => {
+//     const wrapper = shallow(<ToggleButton className="test-class-name">Hello World</ToggleButton>);
+//     assert.strictEqual(wrapper.is('.test-class-name'), true, 'should pass the test className');
+//     assert.strictEqual(wrapper.hasClass(classes.root), true);
+//   });
+//
+//   it('should render a selected button', () => {
+//     const wrapper = shallow(<ToggleButton selected>Hello World</ToggleButton>);
+//     assert.strictEqual(wrapper.hasClass(classes.root), true);
+//     assert.strictEqual(wrapper.hasClass(classes.selected), true, 'should have the selected class');
+//   });
+//
+//   it('should have a ripple by default', () => {
+//     const wrapper = shallow(<ToggleButton>Hello World</ToggleButton>);
+//     assert.strictEqual(wrapper.props().disableRipple, false);
+//   });
+//
+//   it('should pass disableRipple to ButtonBase', () => {
+//     const wrapper = shallow(<ToggleButton disableRipple>Hello World</ToggleButton>);
+//     assert.strictEqual(wrapper.props().disableRipple, true);
+//   });
+//
+//   it('should have a focusRipple by default', () => {
+//     const wrapper = shallow(<ToggleButton>Hello World</ToggleButton>);
+//     assert.strictEqual(wrapper.props().focusRipple, true, 'should set focusRipple to true');
+//   });
+//
+//   it('should pass disableFocusRipple to ButtonBase', () => {
+//     const wrapper = shallow(<ToggleButton disableFocusRipple>Hello World</ToggleButton>);
+//     assert.strictEqual(wrapper.props().focusRipple, false, 'should set focusRipple to false');
+//   });
+//
+//   describe('server side', () => {
+//     // Only run the test on node.
+//     if (!/jsdom/.test(window.navigator.userAgent)) {
+//       return;
+//     }
+//
+//     it('should server side render', () => {
+//       const markup = render(<ToggleButton>Hello World</ToggleButton>);
+//       assert.strictEqual(markup.text(), 'Hello World');
+//     });
+//   });
+// });

packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js

@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from 'material-ui/styles/withStyles';
 
+import hasValue from './hasValue';
+import isValueSelected from './isValueSelected';
+
 export const styles = theme => ({
   root: {
     transition: theme.transitions.create('background,box-shadow'),
@@ -17,18 +20,6 @@ export const styles = theme => ({
   },
 });
 
-function isValueSelected(value, candidate) {
-  if (candidate === undefined || value === undefined) {
-    return false;
-  }
-
-  if (Array.isArray(candidate)) {
-    return candidate.indexOf(value) >= 0;
-  }
-
-  return value === candidate;
-}
-
 class ToggleButtonGroup extends React.Component {
   handleChange = (e, buttonValue) => {
     const { onChange, value } = this.props;
@@ -71,7 +62,6 @@ class ToggleButtonGroup extends React.Component {
       selected: selectedProp,
       ...other
     } = this.props;
-    let groupSelected = selectedProp;
 
     const children = React.Children.map(childrenProp, child => {
       if (!React.isValidElement(child)) {
@@ -83,16 +73,13 @@ class ToggleButtonGroup extends React.Component {
       const selected =
         buttonSelected === undefined ? isValueSelected(buttonValue, value) : buttonSelected;
 
-      if (selectedProp === undefined) {
-        groupSelected = groupSelected || selected;
-      }
-
       return React.cloneElement(child, {
         selected,
         onChange: exclusive ? this.handleExclusiveChange : this.handleChange,
       });
     });
 
+    const groupSelected = selectedProp === 'auto' ? hasValue(value) : selectedProp;
     const className = classNames(
       classes.root,
       {
@@ -130,14 +117,15 @@ ToggleButtonGroup.propTypes = {
    * Callback fired when the value changes.
    *
    * @param {object} event The event source of the callback
-   * @param {number} value of the selected buttons
+   * @param {object} value of the selected buttons. When `exclusive` is true
+   * this is a single value; when false an array of selected values.
    */
   onChange: PropTypes.func,
   /**
    * If `true` render the group in a selected state. If `auto` render in a
-   * selected state if any of the child ToggleButtons are selected.
+   * selected state if `value` is not empty.
    */
-  selected: PropTypes.bool,
+  selected: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['auto'])]),
   /**
    * The currently selected value within the group or an array of selected
    * values when `exclusive` is false.
@@ -147,6 +135,7 @@ ToggleButtonGroup.propTypes = {
 
 ToggleButtonGroup.defaultProps = {
   exclusive: false,
+  selected: 'auto',
 };
 
 export default withStyles(styles, { name: 'MuiToggleButtonGroup' })(ToggleButtonGroup);