Skip to content

Commit

Permalink
Update Toolbar component readme (WordPress#13316)
Browse files Browse the repository at this point in the history
* UpdateToolbar component readme

Adding documentation to describe the use and functionality of the Toolbar component.

Thanks @cburton4 and @alexislloyd for drafting this.

* Update heading levels

There should only be one H1: the page title. Adjusting the rest of the levels to match.

* Switch from bold text to headings.
  • Loading branch information
kjellr authored Jan 16, 2019
1 parent b8890a4 commit cda45ef
Showing 1 changed file with 40 additions and 1 deletion.
41 changes: 40 additions & 1 deletion packages/components/src/toolbar/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,45 @@
# Toolbar

## Usage
Toolbar can be used to group related options. To emphasize groups of related icon buttons, a toolbar should share a common container.

![Toolbar component above an image block](https://wordpress.org/gutenberg/files/2019/01/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541782974545_ButtonGroup.png)

## Table of contents

1. [Design guidelines](#design-guidelines)
2. [Development guidelines](#development-guidelines)

## Design guidelines

### Usage

#### Selected action

Only one option in a toolbar can be selected and active at a time. Selecting one option deselects any other.

### Best practices

Toolbars should:

- **Clearly communicate that clicking or tapping will trigger an action.**
- **Use established colors appropriately.** For example, only use red for actions that are difficult or impossible to undo.
- When used with a block, have a consistent location above the block. **Otherwise, have a consistent location in the interface.**

![A toolbar attached to the top left side of a block. (1. Toolbar, 2. Block)](https://wordpress.org/gutenberg/files/2019/01/s_D8D19E5A314C2D056B8CCC92B2DB5E27164936A0C5ED98A4C2DFDA650BE2A771_1542388042335_toolbar-block.png)

### States

#### Active and available toolbars
A toolbar’s state makes it clear which icon button is active. Hover and focus states express the available selection options for icon buttons in a toolbar.

![Toolbar component](https://wordpress.org/gutenberg/files/2019/01/s_96EC471FE9C9D91A996770229947AAB54A03351BDE98F444FD3C1BF0CED365EA_1541784539545_ButtonGroup.png)

#### Disabled toolbars
Toolbars that cannot be selected can either be given a disabled state, or be hidden.

## Development guidelines

### Usage

```jsx
import { Toolbar } from '@wordpress/components';
Expand Down

0 comments on commit cda45ef

Please sign in to comment.