-
Notifications
You must be signed in to change notification settings - Fork 842
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(website): add missing guidelines pages
- Loading branch information
1 parent
1ea74d9
commit 2bc584d
Showing
47 changed files
with
3,626 additions
and
19 deletions.
There are no files selected for viewing
101 changes: 101 additions & 0 deletions
101
packages/website/docs/components/display/empty_prompt/guidelines.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| --- | ||
| slug: /display/empty-prompt/guidelines | ||
| id: display_empty_prompt_guidelines | ||
| title: Empty prompt guidelines | ||
| sidebar_label: Guidelines | ||
| --- | ||
|
|
||
| import { EuiFlexGroup } from '@elastic/eui'; | ||
|
|
||
| ## Anatomy | ||
|
|
||
| A useful empty state will let the user know what's happening, why it's happening, and what to do about it. It can contribute to a more compelling user experience and add more value to the business if done right. | ||
|
|
||
| To make the empty state clear, follow this pattern: | ||
|
|
||
| import { EuiAspectRatio } from '@elastic/eui'; | ||
|
|
||
| <EuiAspectRatio width={16} height={9}> | ||
| <iframe | ||
| title="Anatomy of an empty state" | ||
| width="1200" | ||
| height="550" | ||
| src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FRzfYLj2xmH9K7gQtbSKygn%2FElastic-UI%3Fnode-id%3D22764%253A276515" | ||
| /> | ||
| </EuiAspectRatio> | ||
|
|
||
| 1. **Icon or illustration (optional):** A meaningful representation of the the solution or context. | ||
| 2. **Title:** Answers the question "What's happening?". Is it an error? Is it loading? | ||
| 3. **Description:** Why is it happening? Explain why the space is empty and guide the users through the required actions. | ||
| 4. **Action(s):** Your call to actions should answer the question "What will solve the issue?". Lead the users to take action or guide them about the next steps. | ||
| 5. **Footer (optional):** Use this section to reference documentation or link to an area where users can learn more about the issue they are facing. | ||
|
|
||
| ## Empty state types, goals, and recommendations | ||
|
|
||
| The following scenarios detail the most common empty states use cases and provide recommendations for use with **EuiPageTemplate**. | ||
|
|
||
| import { TypesOfEmptyStates } from './types_of_empty_states'; | ||
|
|
||
| <TypesOfEmptyStates /> | ||
|
|
||
| ## Design | ||
|
|
||
| ### Vertical vs. horizontal | ||
|
|
||
| The vertical layout is perfect when the content is small — a title and two paragraphs at most. You can use this layout with an icon, an illustration, or no icons at all. | ||
|
|
||
| Use the horizontal layout when you have a long description, multiple calls to action, and a footer. For this type of layout, an illustration is required. | ||
|
|
||
| <EuiFlexGroup gutterSize="m"> | ||
| <Guideline text="Use the vertical layout when the text is 1 to 2 sentences."> | ||
|  | ||
| </Guideline> | ||
| <Guideline text="Use the horizontal layout when you have a long description, and you can provide an illustration."> | ||
|  | ||
| </Guideline> | ||
| </EuiFlexGroup> | ||
|
|
||
| ### Icons and illustrations | ||
|
|
||
| Icons and illustrations must first and foremost communicate meaning. They are also an opportunity to delight users and show our Elastic brand. | ||
|
|
||
| When using an illustration, bear in mind that they stand out a lot. Use one illustration per page. Having multiple illustrations might make the page too crowded. | ||
|
|
||
| <EuiFlexGroup gutterSize="m"> | ||
| <Guideline type="do" text="An illustration works better in a horizontal layout."> | ||
|  | ||
| </Guideline> | ||
| <Guideline type="dont" text="Avoid using icons and illustrations that don't mean anything and are not related to the content."> | ||
|  | ||
| </Guideline> | ||
| </EuiFlexGroup> | ||
|
|
||
| ### Learn more links | ||
|
|
||
| "Learn more" links are optional. You can use them in your empty prompt to link to documentation where users can get more detailed help. | ||
|
|
||
| Include the link after the description when the empty prompt doesn't contain a call to action. If there is a call to action, include the link in the footer. | ||
|
|
||
| <EuiFlexGroup gutterSize="m"> | ||
| <Guideline text={`Add the "Learn more" link after the description when the empty prompt doesn't contain a call to action.`}> | ||
|  | ||
| </Guideline> | ||
| <Guideline text={`Add the "Learn more" link in the footer when the empty prompt contains a call to action.`}> | ||
|  | ||
| </Guideline> | ||
| </EuiFlexGroup> | ||
|
|
||
| ### Multiple empty states | ||
|
|
||
| When a page has multiple empty states, avoid using multiple primary actions and multiple icons or illustrations. | ||
|
|
||
| Use secondary actions and no icons or illustrations. This way, the visual noise will be reduced. Consider using an illustration or a primary action if you want to make one of the empty states stand out. | ||
|
|
||
| <EuiFlexGroup gutterSize="m"> | ||
| <Guideline type="do" text="Use secondary actions and no icons or illustrations when displaying multiple empty states."> | ||
|  | ||
| </Guideline> | ||
| <Guideline type="dont" text="Avoid mixing different types of empty states. Be consistent."> | ||
|  | ||
| </Guideline> | ||
| </EuiFlexGroup> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
packages/website/docs/components/display/empty_prompt/types_of_empty_states/colors.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { EuiCode } from '@elastic/eui'; | ||
|
|
||
| export const TYPES_OF_PANEL_COLORS = { | ||
| sidebar: { | ||
| id: 'sidebar', | ||
| text: ( | ||
| <> | ||
| <p> | ||
| Set <EuiCode>{'color="subdued"'}</EuiCode> to make users not getting | ||
| distracted and focus on the content. | ||
| </p> | ||
| <p> | ||
| Consider the transparent color if the empty prompt is contained in | ||
| another component. | ||
| </p> | ||
| </> | ||
| ), | ||
| props: { color: 'subdued' }, | ||
| }, | ||
| empty: { | ||
| id: 'empty', | ||
| text: ( | ||
| <> | ||
| <p> | ||
| Set <EuiCode>{'color="plain”'}</EuiCode> to make users getting focus | ||
| on the content | ||
| </p> | ||
| <p> | ||
| Consider the transparent color if the empty prompt is contained in | ||
| another component. | ||
| </p> | ||
| </> | ||
| ), | ||
| props: { color: 'plain' }, | ||
| }, | ||
| multiple: { | ||
| id: 'multiple', | ||
| text: ( | ||
| <> | ||
| <p> | ||
| Set <EuiCode>{'color="plain” and hasBorder={true}'}</EuiCode> when you | ||
| have multiple panels on the page. The other panels should also have | ||
| borders to ensure consistency. | ||
| </p> | ||
| <p> | ||
| Consider the transparent color if the empty prompt is contained in | ||
| another component. | ||
| </p> | ||
| </> | ||
| ), | ||
| }, | ||
| error: { | ||
| id: 'error', | ||
| text: ( | ||
| <p> | ||
| Set <EuiCode>{'color="danger"'}</EuiCode> to emphasize that an error | ||
| happened. | ||
| </p> | ||
| ), | ||
| }, | ||
| } as const; |
Oops, something went wrong.