diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/completion-screen.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/completion-screen.svg new file mode 100644 index 0000000000..508ea9217a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/completion-screen.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/in-page-wizard.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/in-page-wizard.svg new file mode 100644 index 0000000000..86b031f69b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/in-page-wizard.svg @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/mobile-wizard.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/mobile-wizard.svg new file mode 100644 index 0000000000..934ce71b45 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/mobile-wizard.svg @@ -0,0 +1,208 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/modal-wizard.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/modal-wizard.svg new file mode 100644 index 0000000000..e22befa454 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/modal-wizard.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/simple-wizard.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/simple-wizard.svg new file mode 100644 index 0000000000..be59f13257 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/simple-wizard.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-config.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-config.svg new file mode 100644 index 0000000000..abbc43f58a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-config.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-drawer-closed.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-drawer-closed.svg new file mode 100644 index 0000000000..7b1571af19 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-drawer-closed.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-drawer-open.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-drawer-open.svg new file mode 100644 index 0000000000..1b01d972b2 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-drawer-open.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-optional.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-optional.svg new file mode 100644 index 0000000000..b1667e9994 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-optional.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-progressive-step1.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-progressive-step1.svg new file mode 100644 index 0000000000..0ece9c7904 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-progressive-step1.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-progressive-step2.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-progressive-step2.svg new file mode 100644 index 0000000000..401e487dc6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-progressive-step2.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-progressive-step3.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-progressive-step3.svg new file mode 100644 index 0000000000..fe5e058cad --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-progressive-step3.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-review.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-review.svg new file mode 100644 index 0000000000..3ce16d2683 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-review.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-substeps.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-substeps.svg new file mode 100644 index 0000000000..72ae60073c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/img/wizard-substeps.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/wizard.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/wizard.md index e22dd37883..00b2cee595 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/wizard.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/wizard/wizard.md @@ -3,10 +3,14 @@ id: Wizard section: components --- +import '../components.css'; + ## Elements Except where noted, modal and in-page wizards have the same elements and behaviors. For the sake of simplicity, all screens here show the modal wizard. -Simple wizard +
+![Example of a simple wizard.](./img/simple-wizard.svg) +
1. **Header (modal wizard only):** Modal wizards always have a header area that minimally contains the wizard title and a close button. The title should be action oriented and reflect the intended outcome of the wizard, such as "Create resource." You may optionally also include a description below the wizard title. 2. **Steps sidebar:** Enumerated steps are displayed in the sidebar. Steps can be fixed or updated as the user proceeds through the process (see progressive wizard). @@ -38,7 +42,9 @@ In a standard wizard the user moves through the wizard sequentially, a step at a ### Mobile considerations When viewing a wizard on a mobile device, the steps sidebar will be hidden and collapse into a drop down menu panel as shown below. -Mobile wizard +
+![Example of a wizard on mobile.](./img/mobile-wizard.svg) +
## Variations Wizards can be modal or placed within the content area of a page. Behavior may change depending on variation. @@ -52,7 +58,9 @@ Wizards can be modal or placed within the content area of a page. Behavior may c ### In-page wizard A wizard may be embedded in a page as shown below. -In-page wizard +
+![Example of an in-page wizard.](./img/in-page-wizard.svg) +
Wizards can also be added to the content area of a page. This will allow greater flexibility in navigating to other locations in your application while within a wizard flow, but it also places greater responsibility on the system to manage state. @@ -70,30 +78,37 @@ A progressive wizard takes the same form as the standard wizard or wizard with s A walk-through of a progressive wizard might look like this: -Wizard progressive step 1 - +
+![Example of the first step in a progressive wizard.](./img/wizard-progressive-step1.svg) +
**Step 1**: The user is presented with a Get started screen where they can specify what they want to do. -Wizard progressive step 2 - +
+![Example of the second step in a progressive wizard.](./img/wizard-progressive-step2.svg) +
**Step 2**: Based on their choice to create a new object, a user is presented with a second set of options. But the remaining steps are still unknown. -Wizard progressive step 3 - +
+![Example of the third step in a progressive wizard.](./img/wizard-progressive-step3.svg) +
**Step 3**: After the user chooses “Quick create” and clicks "Next," they can now be presented with a full set of steps. It should be possible to revisit either of the first two steps making different choices and steps shown should update accordingly. ### Modal wizards -Modal wizard +
+![Example of a wizard in a modal.](./img/modal-wizard.svg) +
The modal wizard lives in a modal dialog. If necessary, the default width and height of the modal can be overridden to increase that available content area. In most cases, the modal wizard is recommended as it will keep users focused on the task at hand. Users must either complete all of the steps of the wizard or cancel before navigating elsewhere within an application. ### Wizard with sub-steps Sub-steps can be added to the sidebar. Use sub-steps when there is a hierarchical relationship between a group of steps, if a primary step contains too much content to be displayed on one page, or when there is a set of optional settings that make sense to group together where the user need not visit each page. -Wizard with substeps +
+![Example of a wizard with sub-steps.](./img/wizard-substeps.svg) +
1. **Sub-steps:** Sub-steps are always nested inside of a major step. 2. **Expansion (optional):** Sub-steps may be shown or hidden using the caret next to the parent step. @@ -111,8 +126,9 @@ Sub-steps can be added to the sidebar. Use sub-steps when there is a hierarchica ### Wizard with optional steps Optional steps can be added to the wizard. Make steps optional when they do not need to be filled out to complete the wizard. -Wizard with optional steps - +
+![Example of a wizard with optional steps.](./img/wizard-optional.svg) +
1. **Optional steps:** It's recommended to group all optional steps under one parent step. 2. **Tooltip (optional):** This tooltip is optional, but recommended. It would help explain that the following steps in the wizard are not required and would give more context to the new "Review and finish" button. @@ -127,8 +143,12 @@ Optional steps can be added to the wizard. Make steps optional when they do not The drawer inside a wizard is useful in situations where you need to show more information while keeping the user in the context of the wizard. When opened, the drawer overlays the data, rather than pushing it to the side. There are two types of drawers: dismissable and non-dismissible. For opening and closing a drawer, use a link button or a link button with an icon. -Wizard with a closed drawer -Wizard with a open drawer +
+![Example of a wizard with a closed drawer.](./img/wizard-drawer-closed.svg) +
+
+![Example of a wizard with an open drawer.](./img/wizard-drawer-open.svg) +
#### Use drawer when: @@ -139,14 +159,18 @@ The drawer inside a wizard is useful in situations where you need to show more i ### Review and completion The last step in a wizard should always be a review step. This step should include a summary of what the user has input so the user may confirm them before committing their changes. -Review screen +
+![Example of a review screen.](./img/wizard-review.svg) +
1. **Review step** 2. **Finish button:** On the last step of the wizard, the Next button is labeled Finish by default. This is a configurable choice and should be replaced by a more specific verb or verb-object word pair like “Create” or “Configure networks,” when possible. If it will take a long time (more than a few seconds) for changes to be applied, a progress screen is recommended. This can be constructed from a variation of the [empty state](/components/empty-state/design-guidelines) pattern by embedding a progress bar and appropriate messaging within the body of the wizard. -Progress screen +
+![Example of a progress screen.](./img/wizard-config.svg) +
1. **Progress message:** Include a progress bar with appropriate messaging using an empty state pattern. 2. **Cancel button (optional):** Include a cancel button only if the operation can be terminated once it is started. Cancel should back out all changes and leave the system in the state that existed before the user launched the wizard. @@ -155,8 +179,9 @@ Note that once changes have been committed, the steps sidebar is hidden and the Once the changes initiated by the wizard are completed, a final confirmation screen should be displayed. Again, this can leverage an empty state pattern to present a success (or failure) message to users. -Completion screen - +
+![Example of a completion screen.](./img/completion-screen.svg) +
1. **Completion message:** Provide appropriate messaging to inform the user about the outcome of the wizard.