[ToggleButtons]: Add toggle buttons

docs/src/pages/demos/buttons/ToggleButtons.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import FormatAlignLeft from 'material-ui-icons/FormatAlignLeft';
+import FormatAlignCenter from 'material-ui-icons/FormatAlignCenter';
+import FormatAlignRight from 'material-ui-icons/FormatAlignRight';
+import FormatAlignJustify from 'material-ui-icons/FormatAlignJustify';
+import FormatBold from 'material-ui-icons/FormatBold';
+import FormatItalic from 'material-ui-icons/FormatItalic';
+import FormatUnderlined from 'material-ui-icons/FormatUnderlined';
+import FormatColorFill from 'material-ui-icons/FormatColorFill';
+import ArrowDropDownIcon from 'material-ui-icons/ArrowDropDown';
+import Typography from 'material-ui/Typography';
+import Grid from 'material-ui/Grid';
+import ToggleButton, { ToggleButtonGroup } from 'material-ui/ToggleButton';
+
+const styles = theme => ({
+  toggleContainer: {
+    height: 56,
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    margin: `${theme.spacing.unit}px 0`,
+    background: theme.palette.background.default,
+  },
+});
+
+class ToggleButtons extends React.Component {
+  state = {
+    alignment: 'left',
+    formats: ['bold'],
+  };
+
+  handleFormat = (e, formats) => this.setState({ formats });
+  handleAlignment = (e, alignment) => this.setState({ alignment });
+
+  render() {
+    const { classes } = this.props;
+    const { alignment, formats } = this.state;
+
+    return (
+      <Grid container>
+        <Grid item xs={12} sm={6}>
+          <div className={classes.toggleContainer}>
+            <ToggleButtonGroup value={alignment} exclusive onChange={this.handleAlignment}>
+              <ToggleButton value="left">
+                <FormatAlignLeft />
+              </ToggleButton>
+              <ToggleButton value="center">
+                <FormatAlignCenter />
+              </ToggleButton>
+              <ToggleButton value="right">
+                <FormatAlignRight />
+              </ToggleButton>
+              <ToggleButton value="justify" disabled>
+                <FormatAlignJustify />
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </div>
+          <Typography type="caption" gutterBottom>
+            Exclusive Selection
+          </Typography>
+          <Typography type="caption">
+            Text justification toggle buttons present options for left, right, center, full, and
+            justified text with only one item available for selection at a time. Selecting one
+            option deselects any other.
+          </Typography>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          <div className={classes.toggleContainer}>
+            <ToggleButtonGroup value={formats} onChange={this.handleFormat}>
+              <ToggleButton value="bold">
+                <FormatBold />
+              </ToggleButton>
+              <ToggleButton value="italic">
+                <FormatItalic />
+              </ToggleButton>
+              <ToggleButton value="underlined">
+                <FormatUnderlined />
+              </ToggleButton>
+              <ToggleButton disabled>
+                <FormatColorFill />
+                <ArrowDropDownIcon />
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </div>
+          <Typography type="caption" gutterBottom>
+            Multiple Selection
+          </Typography>
+          <Typography type="caption">
+            Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to
+            be selected.
+          </Typography>
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+ToggleButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ToggleButtons);

docs/src/pages/demos/buttons/buttons.md

@@ -1,5 +1,5 @@
 ---
-components: Button, IconButton, ButtonBase, Zoom
+components: Button, IconButton, ButtonBase, Zoom, ToggleButton, ToggleButtonGroup
 ---
 
 # Buttons
@@ -66,6 +66,15 @@ Sometimes you might want to have icons for certain button to enhance the UX of t
 
 {{"demo": "pages/demos/buttons/IconLabelButtons.js"}}
 
+## Toggle Buttons
+
+[Toggle buttons](https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons) may be used to group related options. Arrange layout and spacing to convey that certain toggle buttons are part of a group.
+
+The `ToggleButtonGroup` will control the selected of its child buttons when
+given its own `value` prop.
+
+{{"demo": "pages/demos/buttons/ToggleButtons.js"}}
+
 ## Complex Buttons
 
 The Flat Buttons, Raised Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`.

pages/api/toggle-button-group.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './toggle-button-group.md';
+
+function Page() {
+  return <MarkdownDocs markdown={markdown} />;
+}
+
+export default withRoot(Page);

pages/api/toggle-button-group.md

@@ -0,0 +1,42 @@
+---
+filename: /src/ToggleButton/ToggleButtonGroup.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# ToggleButtonGroup
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span style="color: #31a148">children *</span> | node |  | The content of the button. |
+| classes | object |  | Useful to extend the style applied to components. |
+| exclusive | bool | false | If `true` only allow one of the child ToggleButton values to be selected. |
+| onChange | func |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: number) => void`<br>*event:* The event source of the callback<br>*value:* of the selected buttons |
+| selected | bool |  | If `true` render the group in a selected state. If `auto` render in a selected state if any of the child ToggleButtons are selected. |
+| value | any |  | The currently selected value within the group or an array of selected values when `exclusive` is false. |
+
+Any other properties supplied will be [spread to the root element](/guides/api#spread).
+
+## CSS API
+
+You can override all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+- `selected`
+
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
+and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/ToggleButton/ToggleButtonGroup.js)
+for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiToggleButtonGroup`.
+
+## Demos
+
+- [Buttons](/demos/buttons)
+

pages/api/toggle-button.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './toggle-button.md';
+
+function Page() {
+  return <MarkdownDocs markdown={markdown} />;
+}
+
+export default withRoot(Page);

pages/api/toggle-button.md

@@ -0,0 +1,50 @@
+---
+filename: /src/ToggleButton/ToggleButton.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# ToggleButton
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span style="color: #31a148">children *</span> | node |  | The content of the button. |
+| classes | object |  | Useful to extend the style applied to components. |
+| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
+| disabled | bool | false | If `true`, the button will be disabled. |
+| disableFocusRipple | bool | false | If `true`, the  keyboard focus ripple will be disabled. `disableRipple` must also be true. |
+| disableRipple | bool | false | If `true`, the ripple effect will be disabled. |
+| selected | bool |  | If `true`, the button will be rendered in an active state. |
+| value | any |  | The value to associate with the button when selected in a ToggleButtonGroup. |
+
+Any other properties supplied will be [spread to the root element](/guides/api#spread).
+
+## CSS API
+
+You can override all the class names injected by Material-UI thanks to the `classes` property.
+This property accepts the following keys:
+- `root`
+- `label`
+- `disabled`
+- `selected`
+
+Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
+and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/ToggleButton/ToggleButton.js)
+for more detail.
+
+If using the `overrides` key of the theme as documented
+[here](/customization/themes#customizing-all-instances-of-a-component-type),
+you need to use the following style sheet name: `MuiToggleButton`.
+
+## Inheritance
+
+The properties of the [&lt;ButtonBase /&gt;](/api/button-base) component are also available.
+
+## Demos
+
+- [Buttons](/demos/buttons)
+

pages/demos/buttons.js

@@ -55,6 +55,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/buttons/IconLabelButtons'), 'utf8')
+`,
+        },
+        'pages/demos/buttons/ToggleButtons.js': {
+          js: require('docs/src/pages/demos/buttons/ToggleButtons').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/buttons/ToggleButtons'), 'utf8')
 `,
         },
         'pages/demos/buttons/ButtonBases.js': {

src/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { StandardProps, PropTypes } from '..';
+import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase';
+
+export interface ToggleButtonProps
+  extends StandardProps<ButtonBaseProps, ToggleButtonClassKey, 'component'> {
+  component?: React.ReactType<ToggleButtonProps>;
+  disabled?: boolean;
+  disableFocusRipple?: boolean;
+  disableRipple?: boolean;
+  selected?: boolean;
+  type?: string;
+  value?: any;
+}
+
+export type ToggleButtonClassKey = ButtonBaseClassKey | 'label' | 'selected';
+
+declare const ToggleButton: React.ComponentType<ToggleButtonProps>;
+
+export default ToggleButton;