From 1d7618ff1680e57afe4b4d65d046e943b8245409 Mon Sep 17 00:00:00 2001 From: gchaps Date: Thu, 22 Feb 2018 15:36:17 -0800 Subject: [PATCH] buttons, modals, and toasts --- src-docs/src/routes.js | 18 +- src-docs/src/views/guidelines/button.js | 72 ++-- src-docs/src/views/guidelines/modals.js | 418 ++++++++++++++++++++++++ src-docs/src/views/guidelines/toasts.js | 376 +++++++++++++++++++++ 4 files changed, 832 insertions(+), 52 deletions(-) create mode 100644 src-docs/src/views/guidelines/modals.js create mode 100644 src-docs/src/views/guidelines/toasts.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 2272f825ffa3..f5c8b93a6e5f 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -19,9 +19,15 @@ import { import ButtonGuidelines from './views/guidelines/button'; +import ModalGuidelines + from './views/guidelines/modals'; + import TextScales from './views/text_scaling/text_scaling_sandbox'; +import ToastGuidelines + from './views/guidelines/toasts'; + import WritingGuidelines from './views/guidelines/writing'; @@ -217,12 +223,18 @@ const navigation = [{ items: [{ name: 'Buttons', component: ButtonGuidelines, - items: [{ - name: 'Writing', - component: WritingGuidelines, + }, { + name: 'Modals', + component: ModalGuidelines, }, { name: 'Text scales', component: TextScales, + }, { + name: 'Toasts', + component: ToastGuidelines, + }, { + name: 'Writing', + component: WritingGuidelines, }], }, { name: 'Layout', diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js index ec6bc151b377..c3ce75a95089 100644 --- a/src-docs/src/views/guidelines/button.js +++ b/src-docs/src/views/guidelines/button.js @@ -3,6 +3,7 @@ import React from 'react'; import { GuidePage, GuideRule, + GuideRuleTitle, GuideRuleExample, } from '../../components'; @@ -33,18 +34,17 @@ export default () => ( Choosing a button type, style, and placement depends on the prominence of its action and the context in which the button appears.

- Go to code example + Go to code - - -

Button types

- - + + Button types + + @@ -135,16 +135,12 @@ export default () => ( + + Placement and order - - - -

Placement and order

- - @@ -158,7 +154,7 @@ export default () => (
( - - -

One primary button per container

- - + One primary button per container - + Easily recognized icons - -

Easily recognized icons

- - ( - - - -

Minimal color changes

- - + Minimal color changes - -

Using multiple buttons

+ Using multiple buttons - ( - - -

Action labels

+ Action labels - - + for example, Add dashboard. Keep labels to three words or less. + If your label requries more words, consider a text link instead." + /> - +

Text for buttons

@@ -658,7 +632,7 @@ export default () => ( - +

Words to Avoid

diff --git a/src-docs/src/views/guidelines/modals.js b/src-docs/src/views/guidelines/modals.js new file mode 100644 index 000000000000..c14bb7758cd7 --- /dev/null +++ b/src-docs/src/views/guidelines/modals.js @@ -0,0 +1,418 @@ +import React from 'react'; + +import { + GuidePage, + GuideRule, + GuideRuleExample, + GuideRuleTitle, +} from '../../components'; + +import { + EuiText, + EuiSpacer, + EuiFlexGroup, + EuiFlexItem, + EuiImage, + EuiLink, + EuiPanel +} from '../../../../src/components'; + +export default () => ( + + + +

Modals

+

+A modal says “pay attention to me and nothing else.” Modals work best for focusing users' attention on a short +amount of content and getting them to make a decision. +

+ + + + Go to code + + + + + + Anatomy + + + + + + +
+ +
+ + + + + + +

The header sets the context for the user

+

Short and sentence-case, it lets the user know the task that needs to get done.

+

The body supports a single task

+

This task should be critical to continuing the current process.

+

Buttons are right-aligned

+

The primary action is a filled button, and the secondary action is a link button. +

+

An overlay is optional

+

It lets the user know that the content behind the modal isn't active.

+ + + + + + + + + + + Usage + + + + + + + +

Use modals sparingly

+

Modals pull users out of their current context. + They are well-suited for asking users to confirm an action and for short, focused input. + Otherwise, it's better to show the content within the page. +

+ + + + + + + + +

Keep content clean & simple

+

A modal should be a short, direct conversation with the user. + If you’re trying to stuff a lot of content into your modal, then you should probably consider + a different solution, such as a  + + form + . +

+ + + + + + + +

Open on a user action

+

Don't just pop open a modal. Let a user action, such as clicking a button, trigger a modal.

+ + + + + + Content + + + + +
+ + +
+ + + +
+ + +
+ + + + Confirmation modal + + + + + +
+ + +
+ + + + + + + +
+ + +
+ + + + + + + + +
+ + +
+ + + +
+ + +
+ + + + + +
+ + +
+ + + +
+ + +
+ + + + + + + + + + Simple input modal + + + + + + +
+ + +
+ + + + + + + + + + + + + +
+ + +
+ + + + + + + Things to avoid + + + + + + + +

Scrolling

+

Modal content should fit in a single screen. + If your modal has numerous options or a long list of items, use scrolling only + if it's better than other design solutions, + such as keeping the content on the page. +

+ + + + + + + + +

Launching a modal from a modal

+

Using a modal on top of a modal typically means your workflow is too complex—users shouldn't have + to remember which modal they are in. Instead, use a component that supports multiple steps, such as a  + + form + +  or  + + steps + + . +

+ + + + + + + +

Opening a modal from a toolbar

+

Users don't expect a toolbar button to open a modal.

+ + + + + + + + + + + + + + + + + + + + +); diff --git a/src-docs/src/views/guidelines/toasts.js b/src-docs/src/views/guidelines/toasts.js new file mode 100644 index 000000000000..7e3f0694b138 --- /dev/null +++ b/src-docs/src/views/guidelines/toasts.js @@ -0,0 +1,376 @@ +import React from 'react'; + +import { + GuidePage, + GuideRule, + GuideRuleExample, + GuideRuleTitle, +} from '../../components'; + +import { + EuiText, + EuiButton, + EuiSpacer, + EuiFlexGroup, + EuiFlexItem, + EuiToast, + EuiPanel +} from '../../../../src/components'; + +export default () => ( + + + +

Toasts

+

+A toast is a short, timely message related to a user action. It appears on the bottom right and times out after a few seconds. + +

+ + + + + Use for brief feedback + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + Most often, its just a title + + + + +
+ + +
+ + + + +
+ + +

+ Username is a required field. +

+

+ Password must be at least 6 characters long. +

+

+ Email is a required field. +

+ +
+ + + + + + + At most, one action + + + + + + View + + + + + + + + + Learn more + + + + + + + Minimal text + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Things to avoid + + + + + + + + +

Too much detail

+

If you are trying to cram a lot of detail into your toast, + then its probably not right design solution. +

+ + + + + + +

Too often

+

Toasts are a popular design choice because they need not + fit in a layout and they don't disrupt the user. As such, they + are also commonly misued. Don't use toasts + for historical actions or show a toast when the user opens a page. + A toast message should not be a required read before leaving a page. +

+ + + + + + + + +

Stacking toasts

+

Open one toast at a time so users can take + in all the details before the next toast arrives. +

+ + + + + + + + + + + + + + + + + +);