[Toggle Button] Implemented new component for v1-beta (Issue #2863)

docs/src/pages/component-demos/toggle-button/ExclusiveToggleButton.js

@@ -0,0 +1,75 @@
+// @flow
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import ToggleButton, { Option } from 'material-ui/ToggleButton';
+import Icon from 'material-ui/Icon';
+import Paper from 'material-ui/Paper';
+import Typography from 'material-ui/Typography';
+
+const styleSheet = createStyleSheet('ExclusiveToggleButton', {
+  root: {
+    width: '100%',
+  },
+  paper: {
+    padding: 30,
+  },
+});
+
+function ExclusiveToggleButton(props) {
+  const classes = props.classes;
+
+  function alignRight() {
+    document.getElementById('dummyDiv2').style.textAlign = 'right';
+  }
+
+  function alignCenter() {
+    document.getElementById('dummyDiv2').style.textAlign = 'center';
+  }
+
+  function alignLeft() {
+    document.getElementById('dummyDiv2').style.textAlign = 'left';
+  }
+
+  function alignReset() {
+    document.getElementById('dummyDiv2').style.textAlign = 'initial';
+  }
+
+  return (
+    <div className={classes.root}>
+      <ToggleButton exclusive className="toggle">
+        <Option
+          icon={<Icon className="material-icons">format_align_left</Icon>}
+          value="1"
+          onSelect={alignLeft}
+          onDeselect={alignReset}
+        />
+        <Option
+          icon={<Icon className="material-icons">format_align_center</Icon>}
+          value="2"
+          onSelect={alignCenter}
+          onDeselect={alignReset}
+        />
+        <Option
+          icon={<Icon className="material-icons">format_align_right</Icon>}
+          value="3"
+          onSelect={alignRight}
+          onDeselect={alignReset}
+        />
+      </ToggleButton>
+
+      <Paper id="dummyDiv2" className={classes.paper} elevation={4}>
+        <Typography type="headline" component="h3">
+          This text is gonna move.
+        </Typography>
+      </Paper>
+    </div>
+  );
+}
+
+ExclusiveToggleButton.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(ExclusiveToggleButton);

docs/src/pages/component-demos/toggle-button/NormalToggleButton.js

@@ -0,0 +1,106 @@
+// @flow
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import ToggleButton, { Option } from 'material-ui/ToggleButton';
+import Icon from 'material-ui/Icon';
+import { MenuItem } from 'material-ui/Menu';
+import Paper from 'material-ui/Paper';
+import Typography from 'material-ui/Typography';
+
+const styleSheet = createStyleSheet('NormalToggleButton', {
+  root: {
+    width: '100%',
+  },
+  paper: {
+    padding: 30,
+  },
+});
+
+function NormalToggleButton(props) {
+  const classes = props.classes;
+
+  function changeColor(value) {
+    const div = document.getElementById('dummyDiv').style;
+    if (value === 4) {
+      div.background = '#F44336';
+    } else if (value === 5) {
+      div.background = '#2196F3';
+    } else if (value === 6) {
+      div.background = '#009688';
+    }
+  }
+
+  function colorReset() {
+    document.getElementById('dummyDiv').style.background = 'white';
+  }
+
+  function changeText(value) {
+    const text = document.getElementById('dummyText').style;
+    if (value === 1) {
+      text.fontWeight = 800;
+    } else if (value === 2) {
+      text.fontStyle = 'italic';
+    } else if (value === 3) {
+      text.textDecoration = 'underline';
+    }
+  }
+
+  function resetText(value) {
+    const text = document.getElementById('dummyText').style;
+    if (value === 1) {
+      text.fontWeight = 'normal';
+    } else if (value === 2) {
+      text.fontStyle = 'normal';
+    } else if (value === 3) {
+      text.textDecoration = 'none';
+    }
+  }
+
+  return (
+    <div className={classes.root}>
+      <ToggleButton>
+        <Option
+          icon={<Icon className="material-icons">format_bold</Icon>}
+          value={1}
+          onSelect={changeText}
+          onDeselect={resetText}
+        />
+        <Option
+          icon={<Icon className="material-icons">format_italic</Icon>}
+          value={2}
+          onSelect={changeText}
+          onDeselect={resetText}
+        />
+        <Option
+          icon={<Icon className="material-icons">format_underline</Icon>}
+          value={3}
+          onSelect={changeText}
+          onDeselect={resetText}
+        />
+        <Option
+          icon={<Icon className="material-icons">format_color_fill</Icon>}
+          onSelect={changeColor}
+          onDeselect={colorReset}
+        >
+          <MenuItem value={4}>Red</MenuItem>
+          <MenuItem value={5}>Blue</MenuItem>
+          <MenuItem value={6}>Green</MenuItem>
+        </Option>
+      </ToggleButton>
+
+      <Paper id="dummyDiv" className={classes.paper} elevation={4}>
+        <Typography id="dummyText" type="headline" component="h3">
+          Text to be edited.
+        </Typography>
+      </Paper>
+    </div>
+  );
+}
+
+NormalToggleButton.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(NormalToggleButton);

docs/src/pages/component-demos/toggle-button/ToggleIcons.js

@@ -0,0 +1,33 @@
+// @flow
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+import ToggleButton, { Option } from 'material-ui/ToggleButton';
+import Icon from 'material-ui/Icon';
+
+const styleSheet = createStyleSheet('NormalToggleButton', {
+  root: {
+    width: '100%',
+  },
+});
+
+function ToggleIcon(props) {
+  const classes = props.classes;
+
+  return (
+    <div className={classes.root}>
+      <ToggleButton toggleIcons>
+        <Option icon={<Icon className="material-icons">mood</Icon>} value="1" />
+        <Option icon={<Icon className="material-icons">mood_bad</Icon>} value="1" />
+        <Option icon={<Icon className="material-icons">whatshot</Icon>} value="3" />
+      </ToggleButton>
+    </div>
+  );
+}
+
+ToggleIcon.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styleSheet)(ToggleIcon);

docs/src/pages/component-demos/toggle-button/toggle-button.md

@@ -0,0 +1,27 @@
+---
+components: Option, ToggleButton
+---
+
+# Toggle Buttons
+
+[Toggle Buttons](https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons) may be used to group related options. 
+Each option may be toggled on or off upon a user's click.
+
+## Toggle Buttons Examples
+
+Normal toggle button declared with no additional properties.
+
+{{demo='pages/component-demos/toggle-button/NormalToggleButton.js'}}
+
+Exclusive toggle button allowing only one option to be selected at a time.
+
+{{demo='pages/component-demos/toggle-button/ExclusiveToggleButton.js'}}
+
+## Toggle Icons
+
+Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.
+
+{{demo='pages/component-demos/toggle-button/ToggleIcons.js'}}
+
+
+