From 1653c2ddd96ff33369e6dfcef4d386f7d26acba4 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 21 Dec 2018 12:41:27 -0500 Subject: [PATCH 1/2] Create icon-button readme Adding documentation to describe the use and functionality of the IconButton component. --- .../designers/icon-button.md | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 docs/designers-developers/designers/icon-button.md diff --git a/docs/designers-developers/designers/icon-button.md b/docs/designers-developers/designers/icon-button.md new file mode 100644 index 0000000000000..9637c3b046398 --- /dev/null +++ b/docs/designers-developers/designers/icon-button.md @@ -0,0 +1,50 @@ +# IconButton + +Icon buttons tell users what actions they can take and give them a way to interact with the interface. You’ll find them throughout a UI, particularly in places like: + +- Button groups +- Toolbars + +![IconButton component](https://wordpress.org/gutenberg/files/2018/12/s_1D98B71431B26D39301DAD9ADD4189EA9DDF0B98AC93C77E7DE58172FFC06323_1541793686578_IconButton.png) + +![Toolbar component composed of attached IconButtons](https://wordpress.org/gutenberg/files/2018/12/s_1D98B71431B26D39301DAD9ADD4189EA9DDF0B98AC93C77E7DE58172FFC06323_1541793628237_Toolbar.png) + +## Table of contents + +1. [Design guidelines](#design-guidelines) +2. [Development guidelines](#development-guidelines) +3. [Related components](#related-components) + +# Design guidelines + +## Best practices + +Icon buttons should: + +- **Choose a clear and accurate icon to represent the action.** +- **Clearly communicate that clicking or tapping will trigger an action.** +- **Use established colors appropriately.** For example, only use red buttons for actions that are difficult or impossible to undo. +- **Have consistent locations in the interface.** + +## Anatomy + +Icon buttons have low emphasis. They don’t stand out much on the page, so they’re used for less-important actions. What’s less important can vary based on context, but it’s usually a supplementary action to the main action we want someone to take. Icon buttons are also useful when you don’t want to distract from the content. + +# Development guidelines + +## Usage + +```jsx +import { IconButton } from '@wordpress/components'; + +const MyIconButton = () => ( + +); +``` + +# Related components + +- The `Toolbar` component is composed of `IconButton` components. From 1357c486cc2075ac167dac07f6e1cfe047f7e3d3 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 21 Dec 2018 14:36:27 -0500 Subject: [PATCH 2/2] Migrate changes over to the original icon-button readme file. --- .../designers/icon-button.md | 50 ------------------- packages/components/src/icon-button/README.md | 38 +++++++++++++- 2 files changed, 37 insertions(+), 51 deletions(-) delete mode 100644 docs/designers-developers/designers/icon-button.md diff --git a/docs/designers-developers/designers/icon-button.md b/docs/designers-developers/designers/icon-button.md deleted file mode 100644 index 9637c3b046398..0000000000000 --- a/docs/designers-developers/designers/icon-button.md +++ /dev/null @@ -1,50 +0,0 @@ -# IconButton - -Icon buttons tell users what actions they can take and give them a way to interact with the interface. You’ll find them throughout a UI, particularly in places like: - -- Button groups -- Toolbars - -![IconButton component](https://wordpress.org/gutenberg/files/2018/12/s_1D98B71431B26D39301DAD9ADD4189EA9DDF0B98AC93C77E7DE58172FFC06323_1541793686578_IconButton.png) - -![Toolbar component composed of attached IconButtons](https://wordpress.org/gutenberg/files/2018/12/s_1D98B71431B26D39301DAD9ADD4189EA9DDF0B98AC93C77E7DE58172FFC06323_1541793628237_Toolbar.png) - -## Table of contents - -1. [Design guidelines](#design-guidelines) -2. [Development guidelines](#development-guidelines) -3. [Related components](#related-components) - -# Design guidelines - -## Best practices - -Icon buttons should: - -- **Choose a clear and accurate icon to represent the action.** -- **Clearly communicate that clicking or tapping will trigger an action.** -- **Use established colors appropriately.** For example, only use red buttons for actions that are difficult or impossible to undo. -- **Have consistent locations in the interface.** - -## Anatomy - -Icon buttons have low emphasis. They don’t stand out much on the page, so they’re used for less-important actions. What’s less important can vary based on context, but it’s usually a supplementary action to the main action we want someone to take. Icon buttons are also useful when you don’t want to distract from the content. - -# Development guidelines - -## Usage - -```jsx -import { IconButton } from '@wordpress/components'; - -const MyIconButton = () => ( - -); -``` - -# Related components - -- The `Toolbar` component is composed of `IconButton` components. diff --git a/packages/components/src/icon-button/README.md b/packages/components/src/icon-button/README.md index 2d47a5bf3a203..9637c3b046398 100644 --- a/packages/components/src/icon-button/README.md +++ b/packages/components/src/icon-button/README.md @@ -1,6 +1,38 @@ # IconButton -## Usage +Icon buttons tell users what actions they can take and give them a way to interact with the interface. You’ll find them throughout a UI, particularly in places like: + +- Button groups +- Toolbars + +![IconButton component](https://wordpress.org/gutenberg/files/2018/12/s_1D98B71431B26D39301DAD9ADD4189EA9DDF0B98AC93C77E7DE58172FFC06323_1541793686578_IconButton.png) + +![Toolbar component composed of attached IconButtons](https://wordpress.org/gutenberg/files/2018/12/s_1D98B71431B26D39301DAD9ADD4189EA9DDF0B98AC93C77E7DE58172FFC06323_1541793628237_Toolbar.png) + +## Table of contents + +1. [Design guidelines](#design-guidelines) +2. [Development guidelines](#development-guidelines) +3. [Related components](#related-components) + +# Design guidelines + +## Best practices + +Icon buttons should: + +- **Choose a clear and accurate icon to represent the action.** +- **Clearly communicate that clicking or tapping will trigger an action.** +- **Use established colors appropriately.** For example, only use red buttons for actions that are difficult or impossible to undo. +- **Have consistent locations in the interface.** + +## Anatomy + +Icon buttons have low emphasis. They don’t stand out much on the page, so they’re used for less-important actions. What’s less important can vary based on context, but it’s usually a supplementary action to the main action we want someone to take. Icon buttons are also useful when you don’t want to distract from the content. + +# Development guidelines + +## Usage ```jsx import { IconButton } from '@wordpress/components'; @@ -12,3 +44,7 @@ const MyIconButton = () => ( /> ); ``` + +# Related components + +- The `Toolbar` component is composed of `IconButton` components.