diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/empty-state.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/empty-state.md index fe7369587c..2cfa1905ec 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/empty-state.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/empty-state.md @@ -3,10 +3,14 @@ id: Empty state section: components --- +import '../components.css'; + ## Elements This is an example of a large, full-page empty state with all empty state elements. Other empty state variations contain the same elements and differ only in spacing and text sizes. -large empty state example with all elements +
+![Example of a large empty state with all elements.](./img/elements.svg) +
1. **Icon**: The icon presents a visual component for easier recognition of the empty state’s message. 2. **Heading**: The title provides a concise description of the empty state’s purpose. @@ -23,7 +27,9 @@ Getting started empty states appear when features haven’t been used yet. In yo Use the [extra large empty state](#extra-large-empty-state) variation for getting started empty states. -extra large empty state with welcome message +
+![Example of an extra large Getting Started empty state.](./img/es-getting-started.svg) +
**Heading**: Welcome the user to the product. Keep in mind that the user might be a bit nervous, so avoid exclamation points or other writing mechanics that make your tone sound excited. @@ -62,7 +68,9 @@ In your empty state, explain that nothing was found and give the user a next ste Use the [small empty state](#small-empty-state) variation for no results empty states. -empty state showing no search results +
+![Example of an empty state with no search results.](./img/es-no-results.svg) +
**Heading**: Briefly state that no results were found. @@ -89,7 +97,9 @@ Required configuration empty states appear when the user needs to configure, con Use the [large empty state](#large-empty-state) variation for required configuration empty states. -empty state with system configuration information +
+![Example of an empty state with system configuration information.](./img/es-required-config.svg) +
**Heading**: State what needs to be done instead of what hasn’t been done yet. @@ -126,7 +136,9 @@ No access empty states appear when the user doesn’t have the entitlements or a Use the [large empty state](#large-empty-state) variation for no access empty states. -empty state with information about access permissions +
+![Example of an empty state with information about access permissions.](./img/es-no-access.svg) +
**Heading**: State what the user needs to access the page instead of what they don’t have or can’t do. @@ -163,7 +175,9 @@ Back-end failure empty states appear when an error occurs that prevents the syst Use the [large empty state](#large-empty-state) variation for back-end failure empty states. -empty state with information about a connection error +
+![Example of an empty state with information about a connection error.](./img/es-failure.svg) +
**Heading**: State what the error is in plain language so that the user can easily understand what the error means. @@ -190,11 +204,15 @@ Success empty states appear when the user successfully completes a process, such Use the standard empty state variation for success empty states in a table or wizard. -empty state confirming that a project was created +
+![Example of a success empty state in a wizard.](./img/es-success-wizard.svg) +
Use the [extra large empty state](#extra-large-empty-state) variation for success empty states in a full page. -empty state confirming registration +
+![Example of a full page success empty state.](./img/es-success-page.svg) +
**Heading**: Confirm the action is completed. Because this is a success message, it’s OK to congratulate the user and show some excitement. Avoid extraneous terms like “success” and “successfully.” @@ -231,7 +249,9 @@ Creation empty states appear when the user needs to add or create something to v Use the [large empty state](#large-empty-state) variation for creation empty states. -empty state with no accounts yet +
+![Example of an empty state with no accounts yet.](./img/es-creation.svg) +
**Heading**: State what hasn’t been created or added yet. Avoid saying that something hasn’t been found because the user might interpret that as a system error. @@ -265,9 +285,13 @@ Use the [large empty state](#large-empty-state) variation for creation empty sta **Secondary button**: Give the user the ability to access additional resources that can help them through the creation process, such as a tour. +### Card + You can also use the extra small empty state variation inside of a card to present the user with another way to add a new card to their view. Place the empty state card where a new card would be added, such as the first (or last) card in the view. Be sure to also include a primary button in the toolbar so that the user can still perform the action even if the empty state is out of view. -empty state inside of a card +
+![Example of an empty state in a card.](./img/es-card.svg) +
## Variations @@ -312,14 +336,18 @@ Regardless of empty state variation and type, all empty states should have a spe ### Level of detail State what isn't there, and then give the user a next step. Empty states should not describe in detail how to use the page—the design should be intuitive enough without extensive written explanation. -do and don’t examples for level of detail +
+![Do and don't examples for level of detail in an empty state.](./img/es-details.svg) +
### Capitalization and punctuation Use [sentence case](/ux-writing/capitalization) in your empty states: Capitalize only the first letter of the first word in the heading, body, buttons, or links. However, be sure to capitalize the first letter in all proper nouns, product names, acronyms, and initialisms, regardless of where they appear in the heading, body, buttons, or links. Add a period at the end of full sentences in the body, but do not add a period at the end of headings or buttons. -do and don’t examples for capitalization +
+![Do and don't examples for capitalization in an empty state.](./img/es-capitalization.svg) +
### Voice and tone Pay close attention to the [voice and tone](/ux-writing/brand-voice-and-tone) in your empty state. Your voice should align with your company’s unique brand voice. Your tone, on the other hand, should adjust depending on the context—consider the user’s emotions and adjust your approach accordingly. @@ -334,41 +362,57 @@ If you have one primary call to action, you can present it as a primary button o **Example: Call to action as a primary button** -empty state with one primary button +
+![Example of an empty state with one primary button.](./img/es-button-action.svg) +
**Example: Call to action as a link in the body text** -empty state with one hyperlink +
+![Example of an empty state with a hyperlink.](./img/es-link-action.svg) +
### Multiple calls to action If your primary call to action is presented as a primary button, your secondary call to action can be presented as a secondary button beneath the primary button. **Example: Secondary call to action as a secondary button beneath the primary button** -empty state with two buttons +
+![Example of an empty state with two action buttons.](./img/es-multi-action.svg) +
If your primary call to action is presented as a link in the body text, your secondary call to action can be presented as a secondary button beneath the body text. **Example: Secondary call to action as a secondary button beneath the body text** -empty state with two hyperlinks +
+![Example of an empty state with a hyperlink and secondary action button.](./img/es-secondary-action-multi.svg) +
### One secondary call to action For a filtering or search situation, you can use a stand-alone secondary button (with nothing linked in the body). -empty state with one hyperlink +
+![Example of an empty state with a secondary action button.](./img/es-secondary-action.svg) +
### Alignment Empty states can be a full page, or they can be included inside of other components on the page. ### Full-page empty states -On a desktop, a full-page empty state should be 64px away from the top and horizontally centered with a minimum padding of 24px on all remaining sides. +On a desktop, a full-page empty state should contain a 3xl spacer at the top and should be horizontally centered, with a lg spacer (or larger) on all remaining sides. -full-page empty state with padding on desktop +
+![Example of the spacing tokens used on a full-page empty state.](./img/es-full-page-spacing.svg) +
-On a mobile device, a full-page empty state should be 48px away from the top with a minimum of 16px padding on all remaining sides. +On a mobile device, a full-page empty state should contain a 2xl spacer at the top, with a md spacer (or larger) on all remaining sides. -full-page empty state with padding on mobile +
+![Example of the spacing tokens used on a mobile empty state.](./img/es-mobile-spacing.svg) +
### Empty states inside tables, cards, or wizards -Empty states inside a table, card, or wizard should always be horizontally and vertically centered on their background. Outside padding on all remaining sides should be 24px. +Empty states inside a table, card, or wizard should always be horizontally and vertically centered on their background. There should be a lg spacer of outside padding on all remaining sides. -empty state inside card with padding +
+![Example of the spacing tokens used on a table.](./img/es-table-spacing.svg) +
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/elements.svg new file mode 100644 index 0000000000..585d19e036 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/elements.svg @@ -0,0 +1,158 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-button-action.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-button-action.svg new file mode 100644 index 0000000000..be2da7dddd --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-button-action.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-capitalization.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-capitalization.svg new file mode 100644 index 0000000000..b3871c3f8c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-capitalization.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-card.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-card.svg new file mode 100644 index 0000000000..56640dedb3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-card.svg @@ -0,0 +1,264 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-creation.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-creation.svg new file mode 100644 index 0000000000..5133ecbe46 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-creation.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-details.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-details.svg new file mode 100644 index 0000000000..fc124a11fb --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-details.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-elements.svg new file mode 100644 index 0000000000..8f956b701f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-elements.svg @@ -0,0 +1,158 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-failure.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-failure.svg new file mode 100644 index 0000000000..0074546d75 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-failure.svg @@ -0,0 +1,109 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-full-page-spacing.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-full-page-spacing.svg new file mode 100644 index 0000000000..77f71a497f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-full-page-spacing.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-getting-started.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-getting-started.svg new file mode 100644 index 0000000000..7fa0b8d409 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-getting-started.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-link-action.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-link-action.svg new file mode 100644 index 0000000000..12921b32f8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-link-action.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-mobile-spacing.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-mobile-spacing.svg new file mode 100644 index 0000000000..ecc8fcd9df --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-mobile-spacing.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-multi-action.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-multi-action.svg new file mode 100644 index 0000000000..a9485e8a73 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-multi-action.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-no-access.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-no-access.svg new file mode 100644 index 0000000000..a3ebe5eebc --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-no-access.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-no-results.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-no-results.svg new file mode 100644 index 0000000000..c8edb223ce --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-no-results.svg @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-required-config.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-required-config.svg new file mode 100644 index 0000000000..ad9f2c1bb2 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-required-config.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-secondary-action-multi.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-secondary-action-multi.svg new file mode 100644 index 0000000000..4adc1a09b3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-secondary-action-multi.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-secondary-action.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-secondary-action.svg new file mode 100644 index 0000000000..cd8fe65d54 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-secondary-action.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-success-page.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-success-page.svg new file mode 100644 index 0000000000..e0e9bb6042 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-success-page.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-success-wizard.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-success-wizard.svg new file mode 100644 index 0000000000..8af20c9f8e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-success-wizard.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-table-spacing.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-table-spacing.svg new file mode 100644 index 0000000000..47afb8e5a6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/empty-state/img/es-table-spacing.svg @@ -0,0 +1,167 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +