diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-center.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-center.svg new file mode 100644 index 0000000000..ea4d8b1ebc --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-center.svg @@ -0,0 +1,205 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-destructive-text-input.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-destructive-text-input.svg new file mode 100644 index 0000000000..5e9694c49d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-destructive-text-input.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-destructive.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-destructive.svg new file mode 100644 index 0000000000..8d2b8bbbf9 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-destructive.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-edit-dialog.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-edit-dialog.svg new file mode 100644 index 0000000000..948a9c00d8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-edit-dialog.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-elements.svg new file mode 100644 index 0000000000..f2e8bd9b97 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-elements.svg @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-error-dialog.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-error-dialog.svg new file mode 100644 index 0000000000..6c6d720d21 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-error-dialog.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-non-destructive.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-non-destructive.svg new file mode 100644 index 0000000000..1d6125191b --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-non-destructive.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-passive-dialog.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-passive-dialog.svg new file mode 100644 index 0000000000..af96987bb3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-passive-dialog.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-spacing.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-spacing.svg new file mode 100644 index 0000000000..828ec99b88 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-spacing.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-top.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-top.svg new file mode 100644 index 0000000000..00e587487f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-top.svg @@ -0,0 +1,205 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-with-help.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-with-help.svg new file mode 100644 index 0000000000..9401c468a8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-with-help.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md index 6cf68d7325..997e189142 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md @@ -4,12 +4,16 @@ section: components related: ['Button'] --- +import '../components.css'; + import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; ## Elements -An example of a modal in context with call outs to highlight each listed element +
+![Elements of a modal.](./img/modal-elements.svg) +
1. **Backdrop** 2. **Modal box** @@ -55,13 +59,17 @@ Use a confirmation dialog to validate user decisions and communicate their conse #### Confirm a non-destructive action -A side-by-side comparison of unsuccessful and successful confirmaton dialogs for leaving a page without saving. The successful dialog explains the consequence of this action: All unsaved informaton will be lost +
+![A side-by-side comparison of unsuccessful and successful confirmaton dialogs for leaving a page without saving.](./img/modal-non-destructive.svg) +
When confirming a non-destructive action, provide specific context about what will happen once a user confirms it. #### Confirm a destructive action -A side-by-side comparison of unsuccessful and successful destructive confirmaton dialogs for deleting a record. The successful dialog explains the consequence of deleting this record: Record name, location, and notes will be lost +
+![A side-by-side comparison of unsuccessful and successful destructive confirmaton dialogs.](./img/modal-destructive.svg) +
Use a [primary button](/components/button/design-guidelines#primary-button) to confirm a destructive action. If the action carries serious consequences, then use a [danger button](/components/button/design-guidelines#danger-button) instead. @@ -71,7 +79,9 @@ If a destructive action has serious consequences, consider adding an additional When a text input field is added to a confirmation dialog, the danger button will only become enabled once a user enters the entire word or phrase. -A multi-step destructive confirmation dialog's button activates only after a user types DELETE into the input field +
+![Example of a destructive confirmation dialog that requires an input field be filled before continuing.](./img/modal-destructive-text-input.svg) +
### Edit dialogs @@ -79,13 +89,17 @@ Use an edit dialog for managing assets. Edit dialogs contain multiple actions wh For example, and edit dialogue might contain a "Save" button as the primary action, and a "Delete" button as a secondary action. If the secondary action is destructive, the button should be styled as a [secondary danger button](/components/button/#variant-examples). Additionally, it should be aligned to the right-side of the modal, directly across from the primary action and cancel buttons. -An edit dialogs with three action buttons: save, cancel and delete +
+![Example of an edit dialog.](./img/modal-edit-dialog.svg) +
When using destructive actions, ensure that the user is informed about the consequences of taking this action. Review the general guidelines for [danger button](/components/button/design-guidelines#danger-button) and destructive actions for additional guidance. ### Error dialogs -An example of a successful error dialog, with and without an optional error icon +
+![Example of an error dialog, with and without an optional error icon.](./img/modal-error-dialog.svg) +
Use an error dialog to inform users of problems that interrupt normal or expected behavior. Briefly contextualize the problem and why it happened, then provide actionable steps toward a solution. @@ -95,7 +109,9 @@ Error dialogs may use an error icon for visual emphasis. ### Passive dialogs -An example of a successful passive dialog, with and without an optional warning icon +
+![Example of a passive dialog, with and without an optional warning icon.](./img/modal-passive-dialog.svg) +
Use a passive dialog to communicate critical and immediately relevant information like the status of an application or an action’s result. Passive dialog content should require or lead to user action. @@ -109,7 +125,9 @@ Users may need to provide additional input to complete an action. To accomplish ### Modals with help -A modal with help uses a help icon to open a help popover when clicked +
+![Example of a modal with a help icon and popover.](./img/modal-with-help.svg) +
Use a [modal with help](/components/modal#with-help) to make complex tasks easier to understand within a modal. If needed, link to further documentation in the help popover. @@ -117,7 +135,9 @@ Help popovers at the modal level explain and provide documentation for an entire ## Spacing -A basic modal with 24px spacers between the modal box and content, and 16px spacers between the headline and content area, and between each button +
+![Example of the spacing used in a basic modal.](./img/modal-spacing.svg) +
Basic modals use a primary spacing of 24px to separate: @@ -134,7 +154,9 @@ A modal can be aligned at the center or top of a page. A [center-aligned modal](/components/modal/html-demos/basic/) appears horizontally and vertically centered on a page, and should be used by default for most use cases. -A modal pictured in center alignment on a page +
+![Example of a modal in center alignment on a page.](./img/modal-center.svg) +
### Top-aligned modal @@ -142,7 +164,9 @@ A [top-aligned modal](/components/modal/html-demos/top-aligned/) appears horizon Use a top-aligned modal when your modal contains expanding content or when you'd like to keep content behind the modal visible to the user. -A modal pictured in top alignment on a page +
+![Example of a modal in top alignment on a page.](./img/modal-top.svg) +
## Content considerations