Skip to content
This repository has been archived by the owner on Jul 28, 2024. It is now read-only.

Commit

Permalink
docs(woly/button-icon): specification – changes in 'Overview', 'Place…
Browse files Browse the repository at this point in the history
…ment' and 'Behaviors'
  • Loading branch information
Шараев Айнур Раильевич committed Jul 13, 2021
1 parent e217328 commit cb8d245
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions src/woly/atoms/button-icon/specification.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
**Recommended to use**

- to trigger an action on an item, for example, to delete, to change, or add an element within a group; often comes with another 2 or 3 adjacent `ButtonIcon`.
- to switch between two actions. One of the actions is always active, one is inactive ( e.g., "Like" icon-button).
- to switch between two actions. One of the actions is always active, one is inactive ( e.g., "Like" icon-button, 'Hamburger' menu button). Offten comes with transtion animation betweet active and inactive states.

**Not recommended using**

Expand All @@ -27,11 +27,11 @@ Recommendations for a hint text:

### Grouping

If `ButtonIcon`s share related actions, they’re good to be in a group. For example, in a list of items (users, products, blog posts), each item can have a group of `ButtonIcon`s with actions like `delete`, `edit`, `move`. In most cases, all buttons within a group should have the same priority, weight and size. But it does not limit you to make one particular button with the main action as `primary` and with weight `fill` then make other buttons as `secondary` and weight `outline`.
If `ButtonIcon`s share related actions, they’re good to be in a group. For example, in a list of items (users, products, blog posts), each item can have a group of `ButtonIcon`s with actions like `delete`, `edit`, `move`. Or app toolbars, containing a groups of button-icons with most offten used actions. In most cases, all buttons within a group should have the same priority, weight and size. But it does not limit you to make one particular button with the main action as `primary` and with weight `fill` then make other buttons as `secondary` and weight `outline`.

### Inside other components

`ButtonIcon` can be used as a part of a more complex component, like a hide/show toggle in the `InputPassword` component. Here, `ButtonIcon` should have the same `priority` and `weight` as its parent for consistency.
`ButtonIcon` can be used as a part of a more complex component, like a hide/show toggle in the `InputPassword` or remove button in `Chip`. Here, `ButtonIcon` should have the same `priority` as its parent for consistency.

## Behaviors

Expand All @@ -43,7 +43,7 @@ Users can trigger a button by clicking anywhere within the button container.

_Keyboard_

Users can trigger a button by pressing `Enter` or `Space`, while it has focus.
Users can trigger a button by pressing `Enter` or `Space`, while it has focus. If the `ButtonIcon` is located in the toolbar for quick access, you should provide a keyboard shortcut for even easier access.

## Accessibility

Expand Down

0 comments on commit cb8d245

Please sign in to comment.