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

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

@@ -0,0 +1,80 @@
+// @flow
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import ToggleButton, { ToggleButtonOption } from 'material-ui/ToggleButton';
+import Icon from 'material-ui/Icon';
+import Paper from 'material-ui/Paper';
+import Typography from 'material-ui/Typography';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+  },
+  paper: {
+    padding: theme.spacing.unit * 4,
+    'margin-top': theme.spacing.unit,
+  },
+});
+
+function alterText(value, selected) {
+  const div = document.getElementById('dummyDiv2');
+  if (selected && div !== null) {
+    switch (value) {
+      case '1':
+        div.style.textAlign = 'left';
+        break;
+      case '2':
+        div.style.textAlign = 'center';
+        break;
+      case '3':
+        div.style.textAlign = 'right';
+        break;
+      default:
+        break;
+    }
+  } else if (div !== null) {
+    div.style.textAlign = 'initial';
+  }
+}
+
+function ExclusiveToggleButton(props) {
+  const classes = props.classes;
+
+  return (
+    <div className={classes.root}>
+      <ToggleButton exclusive className="toggle">
+        <ToggleButtonOption
+          key="1"
+          icon={<Icon className="material-icons">format_align_left</Icon>}
+          value="1"
+          onChange={alterText}
+        />
+        <ToggleButtonOption
+          key="2"
+          icon={<Icon className="material-icons">format_align_center</Icon>}
+          value="2"
+          onChange={alterText}
+        />
+        <ToggleButtonOption
+          key="3"
+          icon={<Icon className="material-icons">format_align_right</Icon>}
+          value="3"
+          onChange={alterText}
+        />
+      </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(styles)(ExclusiveToggleButton);

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

@@ -0,0 +1,123 @@
+// @flow
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import ToggleButton, { ToggleButtonOption } 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 styles = theme => ({
+  root: {
+    width: '100%',
+  },
+  paper: {
+    padding: theme.spacing.unit * 4,
+    'margin-top': theme.spacing.unit,
+  },
+});
+
+function alterText(value, selected) {
+  const text = document.getElementById('dummyText');
+  if (selected && text !== null) {
+    switch (value) {
+      case 1:
+        text.style.fontWeight = '800';
+        break;
+      case 2:
+        text.style.fontStyle = 'italic';
+        break;
+      case 3:
+        text.style.textDecoration = 'underline';
+        break;
+      default:
+        break;
+    }
+  } else if (text !== null) {
+    switch (value) {
+      case 1:
+        text.style.fontWeight = 'normal';
+        break;
+      case 2:
+        text.style.fontStyle = 'normal';
+        break;
+      case 3:
+        text.style.textDecoration = 'none';
+        break;
+      default:
+        break;
+    }
+  }
+}
+
+function alterColor(value, selected) {
+  const div = document.getElementById('dummyDiv');
+  if (selected && div !== null) {
+    if (value === 4) {
+      div.style.background = '#F44336';
+    } else if (value === 5) {
+      div.style.background = '#2196F3';
+    } else if (value === 6) {
+      div.style.background = '#009688';
+    }
+  } else if (div !== null) {
+    div.style.background = 'white';
+  }
+}
+
+function NormalToggleButton(props) {
+  const classes = props.classes;
+
+  return (
+    <div className={classes.root}>
+      <ToggleButton>
+        <ToggleButtonOption
+          key="1"
+          icon={<Icon className="material-icons">format_bold</Icon>}
+          value={1}
+          onChange={alterText}
+        />
+        <ToggleButtonOption
+          key="2"
+          icon={<Icon className="material-icons">format_italic</Icon>}
+          value={2}
+          onChange={alterText}
+        />
+        <ToggleButtonOption
+          key="3"
+          icon={<Icon className="material-icons">format_underline</Icon>}
+          value={3}
+          onChange={alterText}
+        />
+        <ToggleButtonOption
+          key="4"
+          icon={<Icon className="material-icons">format_color_fill</Icon>}
+          onChange={alterColor}
+        >
+          <MenuItem key="1" value={4}>
+            Red
+          </MenuItem>
+          <MenuItem key="2" value={5}>
+            Blue
+          </MenuItem>
+          <MenuItem key="3cl" value={6}>
+            Green
+          </MenuItem>
+        </ToggleButtonOption>
+      </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(styles)(NormalToggleButton);

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

@@ -0,0 +1,56 @@
+// @flow
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import ToggleButton, { ToggleButtonOption } from 'material-ui/ToggleButton';
+import Icon from 'material-ui/Icon';
+
+const styles = {
+  root: {
+    background: 'lightgrey',
+    padding: 20,
+  },
+};
+
+function ToggleIcon(props) {
+  const classes = props.classes;
+
+  return (
+    <div className={classes.root}>
+      <ToggleButton toggleIcons>
+        <ToggleButtonOption key="1" icon={<Icon className="material-icons">mood</Icon>} value="1" />
+        <ToggleButtonOption
+          key="2"
+          icon={<Icon className="material-icons">mood_bad</Icon>}
+          value="1"
+          color="primary"
+        />
+        <ToggleButtonOption
+          key="3"
+          icon={<Icon className="material-icons">whatshot</Icon>}
+          value="3"
+          color="contrast"
+        />
+        <ToggleButtonOption
+          key="4"
+          icon={<Icon className="material-icons">favorite</Icon>}
+          value="4"
+          color="accent"
+        />
+        <ToggleButtonOption
+          key="5"
+          icon={<Icon className="material-icons">grade</Icon>}
+          value="5"
+          disabled
+        />
+      </ToggleButton>
+    </div>
+  );
+}
+
+ToggleIcon.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ToggleIcon);

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

@@ -0,0 +1,24 @@
+---
+components: ToggleButtonOption, 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/demos/toggle-button/NormalToggleButton.js'}}
+
+Exclusive toggle button allowing only one option to be selected at a time.
+
+{{demo='pages/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/demos/toggle-button/ToggleIcons.js'}}

pages/api/app-bar.md

@@ -7,7 +7,7 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| children | Element |  | The content of the component. |
+| children | Node |  | The content of the component. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | color | union:&nbsp;'inherit'<br>&nbsp;'primary'<br>&nbsp;'accent'<br>&nbsp;'default'<br> | 'primary' | The color of the component. It's using the theme palette when that makes sense. |
 | position | union:&nbsp;'static'<br>&nbsp;'fixed'<br>&nbsp;'absolute'<br> | 'fixed' | The positioning type. |
@@ -37,7 +37,3 @@ you need to use the following style sheet name: `MuiAppBar`.
 
 The properties of the [&lt;Paper /&gt;](/api/paper) component are also available.
 
-## Demos
-
-- [App Bar](/demos/app-bar)
-

pages/api/avatar.md

@@ -10,7 +10,7 @@
 | alt | string |  | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
 | children | Element |  | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.<br>This can be an element, or just a string. |
 | classes | Object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string<br>&nbsp;Function<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
+| component | union:&nbsp;string<br>&nbsp;ComponentType<*><br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | imgProps | Object |  | Properties applied to the `img` element when the component is used to display an image. |
 | sizes | string |  | The `sizes` attribute for the `img` element. |
 | src | string |  | The `src` attribute for the `img` element. |
@@ -33,7 +33,3 @@ 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: `MuiAvatar`.
 
-## Demos
-
-- [Avatars](/demos/avatars)
-

pages/api/badge.md

@@ -30,7 +30,3 @@ 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: `MuiBadge`.
 
-## Demos
-
-- [Badges](/demos/badges)
-

pages/api/bottom-navigation-button.md

@@ -7,11 +7,6 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| icon | node |  | The icon element. If a string is provided, it will be used as a font ligature. |
-| label | node |  | The label element. |
-| showLabel | bool |  | If `true`, the BottomNavigationButton will show its label. |
-| value | any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
 
 Any other properties supplied will be spread to the root element.
 
@@ -38,7 +33,3 @@ you need to use the following style sheet name: `MuiBottomNavigationButton`.
 
 The properties of the [<ButtonBase />](/api/button-base) component are also available.
 
-## Demos
-
-- [Bottom Navigation](/demos/bottom-navigation)
-

pages/api/bottom-navigation.md

@@ -28,7 +28,3 @@ 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: `MuiBottomNavigation`.
 
-## Demos
-
-- [Bottom Navigation](/demos/bottom-navigation)
-

pages/api/button-base.md

@@ -7,15 +7,13 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| centerRipple | boolean | false | If `true`, the ripples will be centered. They won't start at the cursor interaction position. |
-| children | Element |  | The content of the component. |
-| classes | Object | {} | Useful to extend the style applied to components. |
-| component | union:&nbsp;string<br>&nbsp;Function<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`. |
-| disableRipple | boolean | false | If `true`, the ripple effect will be disabled. |
-| disabled | boolean |  | If `true`, the base button will be disabled. |
-| focusRipple | boolean | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. |
-| keyboardFocusedClassName | string |  | The CSS class applied while the component is keyboard focused. |
-| onKeyboardFocus | Function |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too.<br><br>**Signature:**<br>`function(event: object) => void`<br>*event:* The event source of the callback |
+| centerRipple |  | false |  |
+| classes |  | {} |  |
+| disableRipple |  | false |  |
+| focusRipple |  | false |  |
+| <span style="color: #31a148">keyboardFocused *</span> | boolean |  |  |
+| tabIndex |  | '0' |  |
+| type |  | 'button' |  |
 
 Any other properties supplied will be spread to the root element.
 
@@ -33,7 +31,3 @@ 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: `MuiButtonBase`.
 
-## Demos
-
-- [Buttons](/demos/buttons)
-