diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/multi-stepper-card.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/multi-stepper-card.svg new file mode 100644 index 0000000000..e5cfc42e65 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/multi-stepper-card.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-basic.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-basic.svg new file mode 100644 index 0000000000..99d764cd05 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-basic.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-card.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-card.svg new file mode 100644 index 0000000000..b7ed36227f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-card.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-compact.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-compact.svg new file mode 100644 index 0000000000..f0a90c5fff --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-compact.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-custom-icons.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-custom-icons.svg new file mode 100644 index 0000000000..ba02528c1d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-custom-icons.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-elements.svg new file mode 100644 index 0000000000..6a5b312c81 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-elements.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-help-popover.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-help-popover.svg new file mode 100644 index 0000000000..c5d60d4752 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-help-popover.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-popover.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-popover.svg new file mode 100644 index 0000000000..08ec2b490f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-popover.svg @@ -0,0 +1,139 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-table.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-table.svg new file mode 100644 index 0000000000..a3488a3083 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-table.svg @@ -0,0 +1,166 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-vertical.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-vertical.svg new file mode 100644 index 0000000000..974a44e51b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-vertical.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-with-descriptions.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-with-descriptions.svg new file mode 100644 index 0000000000..4494f04338 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/img/stepper-with-descriptions.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/progress-stepper.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/progress-stepper.md index 39415b7503..df2a127207 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/progress-stepper.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/progress-stepper.md @@ -3,10 +3,14 @@ id: Progress stepper section: components --- +import '../components.css'; + A **progress stepper** displays progress through a sequence of linear steps and highlights what step the user is currently on. ## Elements -Image showing the different elements that can be contained in a progress stepper. +
+![Elements of a progress stepper.](./img/stepper-elements.svg) +
1. **Progress title:** Describes the task or process underway. 2. **Progress description (optional):** Provides additional information on the task or process @@ -22,17 +26,25 @@ Use a progress stepper to convey to a user how many steps are required to comple ### When to use * A user is completing a multi-step process in a card -Image showing example of progress stepper in a card view. +
+![Example of a progress stepper in a card.](./img/multi-stepper-card.svg) +
* A user is showing progression through a workflow in a table or card -Image showing example of progress stepper in a table view. +
+![Example of a progress stepper in a table.](./img/stepper-table.svg) +
-Image showing example of progress stepper in a card view. +
+![Example of a progress stepper in a card.](./img/stepper-card.svg) +
* A user is checking the status of the installation process in a popover -Image showing example of progress stepper in a table view with a popover. +
+![Example of a progress stepper in a popover.](./img/stepper-popover.svg) +
### When to use progress stepper vs. wizard @@ -50,32 +62,44 @@ There are a few variations of the progress stepper that can be used for differen ### Basic progress stepper The basic progress stepper can be used when just the title of the step is enough to inform the user. -Image showing example of a basic progress stepper. +
+![Example of a basic progress stepper.](./img/stepper-basic.svg) +
### Basic with descriptions If more description is needed, a basic progress stepper with descriptions can be used which allows for more context for each step. -Image showing examples of a basic progress stepper with descriptions. +
+![Example of a progress stepper with descriptions.](./img/stepper-with-descriptions.svg) +
### Vertical progress stepper The vertical alignment can be used in pages with a split view where one side houses the progress stepper and the other side houses each step’s content. These can also be used to display progress in a popover. -Image showing examples of a vertical progress stepper. +
+![Example of a vertical progress stepper.](./img/stepper-vertical.svg) +
### Compact progress stepper In areas with less real estate such as table rows, the compact progress stepper can be used. The component will not display as much information such as each step’s title and/or description and will be smaller in size. The compact progress stepper also accounts for the alignment variations. -Image showing examples of a compact progress stepper. +
+![Example of a compact progress stepper.](./img/stepper-compact.svg) +
### Progress stepper with icons Custom icons can also be used for each step of the progress stepper based on the use case and the product’s need. -Image showing example of a progress stepper with custom icons. +
+![Example of a progress stepper with custom icons.](./img/stepper-custom-icons.svg) +
### Progress stepper with help popover If additional help information or help text is needed and there is not enough real estate for a description, a popover on each step’s title can be used. -Image showing example of a progress stepper with help popver. +
+![Example of a progress stepper with a help popover.](./img/stepper-help-popover.svg) +
## Content considerations Progress steppers should be self-explanatory and therefore include minimal written content: A title and an optional description. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/card-dashboard.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/card-dashboard.svg new file mode 100644 index 0000000000..929c785913 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/card-dashboard.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/error.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/error.svg new file mode 100644 index 0000000000..49fef6f6c5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/error.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/in-progress.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/in-progress.svg new file mode 100644 index 0000000000..2092c2008d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/in-progress.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-elements.svg new file mode 100644 index 0000000000..72ac6c659d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-elements.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-file-download.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-file-download.svg new file mode 100644 index 0000000000..6cf6c31ffe --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-file-download.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-number-above.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-number-above.svg new file mode 100644 index 0000000000..9b775fe31e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-number-above.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-number-outside.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-number-outside.svg new file mode 100644 index 0000000000..2092c2008d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-number-outside.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-placement.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-placement.svg new file mode 100644 index 0000000000..d1a19ae074 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-placement.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-table.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-table.svg new file mode 100644 index 0000000000..cf82fa8a9d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-table.svg @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-wizard.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-wizard.svg new file mode 100644 index 0000000000..a3f8581f6a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/progress-wizard.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/success.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/success.svg new file mode 100644 index 0000000000..0fd4ad8ad5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/img/success.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/progress.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/progress.md index f9a24b0136..e4fcfcbc56 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/progress.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress/progress.md @@ -3,8 +3,12 @@ id: Progress section: components --- +import '../components.css'; + ## Elements -A progress bar with arrows pointing to each of its four elements: Its title, track, progress value, and indicator. +
+![Elements of a progress bar.](./img/progress-elements.svg) +
1. **Title:** Describes the task or process underway. 2. **Track:** Illustrates the path from task start (empty) to task completion (full). @@ -25,7 +29,6 @@ Depending on your use case, you might choose between 2 types of loading indicato Default to progress bars for processes that take longer than 4 seconds or require more specific information about process completion. If a process takes less than four seconds, use a [spinner](/components/spinner) instead. ## Variations -An animated progress bar demonstrates how a progress track fills and progress value increases as a process moves toward completion. ### Determinate progress bar @@ -46,19 +49,25 @@ Follow these general style guidelines when designing your progress bars. For inf A blue progress bar represents a process that is currently underway. -An example of a progress bar in an 'in progress' state, with a blue track and a title that indicates its status: 'Validating account credentials.' +
+![Example of a progress bar in the "in progress" state.](./img/in-progress.svg) +
### Error state or failure A red progress bar represents a process that has failed. Accompany a failed progress bar with a [red danger icon](/design-foundations/icons/#all-icons) to demonstrate that an error occurred in the process. -An example of a progress bar in an error or failed state, with a red track, optional danger icon, and a title that indicates its status: 'Could not validate account credentials.' +
+![Example of a progress bar in the error or failed state.](./img/error.svg) +
### Complete or success A green progress bar represents the successful completion of a process. Accompany a complete progress bar with a [green check-circle icon](/design-foundations/icons/#all-icons) to demonstrate that the process has finished with no errors. -An example of a progress bar in a complete or successful state, with a green track, optional check-circle icon, and a title that indicates its status: 'Validated account credentials.' +
+![Example of a progress bar in the complete or successful state.](./img/success.svg) +
### In a table @@ -68,20 +77,25 @@ Place a progress bar into a table just as you would other table content. If a pr If your table includes multiple progress bars, designate a “Status” or “Progress” column for each one. - -A visual example of how to successfully place progress bars in a table. +
+![Example of progress bars in a table.](./img/progress-table.svg) +
### In a dashboard view Use a progress bar in a dashboard view to track the progress trends within each card component on a page. -A visual example of how to successfully place progress bars in dashboard views. +
+![Example of a progress bar in a card on a dashboard.](./img/card-dashboard.svg) +
### During a file download Use a [toast notification](/components/alert/design-guidelines/#using-toast-alerts) and a progress bar to demonstrate progress during a file download. -A visual example of how to successfully place progress bars in toast alerts to communicate progress during a file download. +
+![Example of a progress bar in a toast alert to communicate progress during a file download.](./img/progress-file-download.svg) +
### In a wizard @@ -89,7 +103,9 @@ Use a [toast notification](/components/alert/design-guidelines/#using-toast-aler Only use a progress bar in a wizard if its final validation process will take more than a few seconds. As users wait for their changes to be processed, display a progress screen that includes a progress title, progress bar, and an optional 1-2 sentence description to provide more details about the validation step or give users a better idea of how long this process might take. -A visual example of how to successfully place a progress bar in a wizard to express a final validation process. +
+![Example of a progress bar in a wizard.](./img/progress-wizard.svg) +
To learn more about using progress bars in wizard validation progress screens, see our [wizard guidelines](/components/wizard/design-guidelines). @@ -97,17 +113,23 @@ To learn more about using progress bars in wizard validation progress screens, s Right-align progress value text when it’s placed above the progress track, in line with the title. -A visual example of a progress bar with right-aligned progress value text above the progress track. +
+![Example of a progress bar with right-aligned value text above the progress track.](./img/progress-number-above.svg) +
Left-align progress value text when it’s placed to the right of the track. -A visual example of a progress bar with left-aligned progress value text in line with the progress track. +
+![Example of a progress bar with left-aligned value text in line with the progress track.](./img/progress-number-outside.svg) +
Always set an “outside fixed width measure” for determinate progress bars. This fixed spacing should solve alignment use cases in which stacked progress bar values vary in length. ## Placement -A visual example of how to successfully place a progress bar in your designs, side by side with an example of unsuccessful placement. Never isolate a progress bar above, below, or outside of its corresponding content view — always align it with its relevant content. +
+![Examples of dos and don'ts for placing a progress bar in your designs.](./img/progress-placement.svg) +
Always place progress bars in alignment with their relevant context, such as the feature, function, or task they reflect. Keep progress bars within the user’s line of sight: Never isolate a progress bar at the top or bottom of a page, or outside of its relevant content view.