Skip to content

Commit

Permalink
Update docs for new requirements
Browse files Browse the repository at this point in the history
  • Loading branch information
mbrookes committed Jul 4, 2018
1 parent 919213b commit b02145d
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 11 deletions.
1 change: 1 addition & 0 deletions docs/src/pages/lab/toggle-button/ToggleButtons.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ class ToggleButtons extends React.Component {
};

handleFormat = formats => this.setState({ formats });

handleAlignment = alignment => this.setState({ alignment });

render() {
Expand Down
7 changes: 5 additions & 2 deletions docs/src/pages/lab/toggle-button/toggle-button.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
---
title: Toggle Button React component
components: ToggleButton, ToggleButtonGroup
---

# 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.
<p class="description">Toggle buttons can be used to group related options.</p>

To emphasize groups of related [Toggle buttons](https://material.io/design/components/buttons.html#toggle-button),
a group should share a common container.

The `ToggleButtonGroup` will control the selected of its child buttons when
given its own `value` prop.

{{"demo": "pages/lab/toggle-button/ToggleButtons.js"}}

11 changes: 7 additions & 4 deletions pages/lab/api/toggle-button-group.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,28 @@
---
filename: /packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js
title: ToggleButtonGroup API
---

<!--- This documentation is automatically generated, do not try to edit it. -->

# ToggleButtonGroup

<p class="description">The API documentation of the ToggleButtonGroup React component.</p>



## Props

| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| <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 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. |
| <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. |

Any other properties supplied will be [spread to the root element](/guides/api#spread).
Any other properties supplied will be spread to the root element (native element).

## CSS API

Expand Down
14 changes: 9 additions & 5 deletions pages/lab/api/toggle-button.md
Original file line number Diff line number Diff line change
@@ -1,26 +1,29 @@
---
filename: /packages/material-ui-lab/src/ToggleButton/ToggleButton.js
title: ToggleButton API
---

<!--- This documentation is automatically generated, do not try to edit it. -->

# ToggleButton

<p class="description">The API documentation of the ToggleButton React component.</p>



## Props

| Name | Type | Default | Description |
|:-----|:-----|:--------|:------------|
| <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 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">disabled</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the button will be disabled. |
| <span class="prop-name">disableFocusRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the keyboard focus ripple will be disabled. `disableRipple` must also be true. |
| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripple effect will be disabled. |
| <span class="prop-name">selected</span> | <span class="prop-type">bool | | If `true`, the button will be rendered in an active state. |
| <span class="prop-name required">value *</span> | <span class="prop-type">any | | The value to associate with the button when selected in a ToggleButtonGroup. |
| <span class="prop-name">selected</span> | <span class="prop-type">bool |   | If `true`, the button will be rendered in an active state. |
| <span class="prop-name required">value *</span> | <span class="prop-type">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).
Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base)).

## CSS API

Expand All @@ -42,6 +45,7 @@ you need to use the following style sheet name: `MuiToggleButton`.
## Inheritance

The properties of the [ButtonBase](/api/button-base) component are also available.
You can take advantage of this behavior to [target nested components](/guides/api#spread).

## Demos

Expand Down

0 comments on commit b02145d

Please sign in to comment.