[ToggleButtons] normalize onChange api

This is a breaking change.

Previously only the value was passed to
the onChange callback despite the documentation mentioning
the event as the first arg. Since every other on* callback in the core
passes the event as the first argument we use the same approach here.

Author: eps1lon

docs/src/pages/lab/toggle-button/ToggleButtons.js

@@ -33,9 +33,9 @@ class ToggleButtons extends React.Component {
     formats: ['bold'],
   };
 
-  handleFormat = formats => this.setState({ formats });
+  handleFormat = (event, formats) => this.setState({ formats });
 
-  handleAlignment = alignment => this.setState({ alignment });
+  handleAlignment = (event, alignment) => this.setState({ alignment });
 
   render() {
     const { classes } = this.props;

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

@@ -89,14 +89,14 @@ class ToggleButton extends React.Component {
     const { onChange, onClick, value } = this.props;
 
     if (onClick) {
-      onClick(event);
+      onClick(event, value);
       if (event.isDefaultPrevented()) {
         return;
       }
     }
 
     if (onChange) {
-      onChange(value);
+      onChange(event, value);
     }
   };
 

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

@@ -78,7 +78,7 @@ describe('<ToggleButton />', () => {
       wrapper.simulate('click', event);
 
       assert.strictEqual(handleChange.callCount, 1);
-      assert.strictEqual(handleChange.args[0][0], 'one');
+      assert.strictEqual(handleChange.args[0][1], 'one');
     });
 
     it('should not be called if the click is prevented', () => {

packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -3,9 +3,14 @@ import * as React from 'react';
 import { StandardProps } from '@material-ui/core';
 
 export interface ToggleButtonGroupProps
-  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ToggleButtonGroupClassKey> {
+  extends StandardProps<
+      React.HTMLAttributes<HTMLDivElement>,
+      ToggleButtonGroupClassKey,
+      'onChange'
+    > {
   selected?: boolean;
   exclusive?: boolean;
+  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
   value?: any;
 }
 

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

@@ -21,7 +21,7 @@ export const styles = theme => ({
 });
 
 class ToggleButtonGroup extends React.Component {
-  handleChange = buttonValue => {
+  handleChange = (event, buttonValue) => {
     const { onChange, value } = this.props;
 
     if (!onChange) {
@@ -39,17 +39,17 @@ class ToggleButtonGroup extends React.Component {
       newValue = value ? [...value, buttonValue] : [buttonValue];
     }
 
-    onChange(newValue);
+    onChange(event, newValue);
   };
 
-  handleExclusiveChange = buttonValue => {
+  handleExclusiveChange = (event, buttonValue) => {
     const { onChange, value } = this.props;
 
     if (!onChange) {
       return;
     }
 
-    onChange(value === buttonValue ? null : buttonValue);
+    onChange(event, value === buttonValue ? null : buttonValue);
   };
 
   render() {
@@ -119,7 +119,8 @@ ToggleButtonGroup.propTypes = {
    *
    * @param {object} event The event source of the callback
    * @param {object} value of the selected buttons. When `exclusive` is true
-   * this is a single value; when false an array of selected values.
+   * this is a single value; when false an array of selected values. If no value
+   * is selected the value is null.
    */
   onChange: PropTypes.func,
   /**

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

@@ -143,7 +143,7 @@ describe('<ToggleButtonGroup />', () => {
           .simulate('click');
 
         assert.strictEqual(handleChange.callCount, 1);
-        assert.strictEqual(handleChange.args[0][0], null);
+        assert.strictEqual(handleChange.args[0][1], null);
       });
 
       it('should be a single value when value is toggled on', () => {
@@ -161,7 +161,7 @@ describe('<ToggleButtonGroup />', () => {
           .simulate('click');
 
         assert.strictEqual(handleChange.callCount, 1);
-        assert.strictEqual(handleChange.args[0][0], 'one');
+        assert.strictEqual(handleChange.args[0][1], 'one');
       });
 
       it('should be a single value when a new value is toggled on', () => {
@@ -179,7 +179,7 @@ describe('<ToggleButtonGroup />', () => {
           .simulate('click');
 
         assert.strictEqual(handleChange.callCount, 1);
-        assert.strictEqual(handleChange.args[0][0], 'two');
+        assert.strictEqual(handleChange.args[0][1], 'two');
       });
     });
 
@@ -199,7 +199,7 @@ describe('<ToggleButtonGroup />', () => {
           .simulate('click');
 
         assert.strictEqual(handleChange.callCount, 1);
-        assert.strictEqual(handleChange.args[0][0], null);
+        assert.strictEqual(handleChange.args[0][1], null);
       });
 
       it('should be an array with a single value when value is toggled on', () => {
@@ -217,7 +217,7 @@ describe('<ToggleButtonGroup />', () => {
           .simulate('click');
 
         assert.strictEqual(handleChange.callCount, 1);
-        assert.deepEqual(handleChange.args[0][0], ['one']);
+        assert.deepEqual(handleChange.args[0][1], ['one']);
       });
 
       it('should be an array with a single value when a secondary value is toggled off', () => {
@@ -235,7 +235,7 @@ describe('<ToggleButtonGroup />', () => {
           .simulate('click');
 
         assert.strictEqual(handleChange.callCount, 1);
-        assert.deepEqual(handleChange.args[0][0], ['two']);
+        assert.deepEqual(handleChange.args[0][1], ['two']);
       });
 
       it('should be an array of all selected values when a second value is toggled on', () => {
@@ -253,7 +253,7 @@ describe('<ToggleButtonGroup />', () => {
           .simulate('click');
 
         assert.strictEqual(handleChange.callCount, 1);
-        assert.deepEqual(handleChange.args[0][0], ['one', 'two']);
+        assert.deepEqual(handleChange.args[0][1], ['one', 'two']);
       });
     });
   });

pages/lab/api/toggle-button-group.md

@@ -22,7 +22,7 @@ import ToggleButtonGroup from '@material-ui/lab/ToggleButton/ToggleButtonGroup';
 | <span class="prop-name required">children *</span> | <span class="prop-type">node |   | The content of the button. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Useful to extend the style applied to components. |
 | <span class="prop-name">exclusive</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, only allow one of the child ToggleButton values to be selected. |
-| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: object) => void`<br>*event:* The event source of the callback<br>*value:* of the selected buttons. When `exclusive` is true this is a single value; when false an array of selected values. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: object) => void`<br>*event:* The event source of the callback<br>*value:* of the selected buttons. When `exclusive` is true this is a single value; when false an array of selected values. If no value is selected the value is null. |
 | <span class="prop-name">selected</span> | <span class="prop-type">union:&nbsp;bool&nbsp;&#124;<br>&nbsp;enum:&nbsp;'auto'<br><br> | <span class="prop-default">'auto'</span> | If `true`, render the group in a selected state. If `auto` (the default) render in a selected state if `value` is not empty. |
 | <span class="prop-name">value</span> | <span class="prop-type">any | <span class="prop-default">null</span> | The currently selected value within the group or an array of selected values when `exclusive` is false. |