From 30405db81405dce494c6161791e692ad52338755 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Fri, 13 Jun 2025 11:05:42 -0400 Subject: [PATCH 1/9] docs(modal): Updates images for v6. --- .../components/modal/img/modal-center.svg | 207 ++++++++++++++++++ .../img/modal-destructive-text-input.svg | 61 ++++++ .../modal/img/modal-destructive.svg | 51 +++++ .../modal/img/modal-edit-dialog.svg | 43 ++++ .../components/modal/img/modal-elements.svg | 112 ++++++++++ .../modal/img/modal-error-dialog.svg | 44 ++++ .../modal/img/modal-non-destructive.svg | 45 ++++ .../modal/img/modal-passive-dialog.svg | 49 +++++ .../components/modal/img/modal-spacing.svg | 44 ++++ .../components/modal/img/modal-top.svg | 207 ++++++++++++++++++ .../components/modal/img/modal-with-help.svg | 77 +++++++ .../components/modal/modal.md | 46 +++- 12 files changed, 975 insertions(+), 11 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-center.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-destructive-text-input.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-destructive.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-edit-dialog.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-elements.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-error-dialog.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-non-destructive.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-passive-dialog.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-spacing.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-top.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-with-help.svg 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..c58ae02c12 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-center.svg @@ -0,0 +1,207 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..c085230038 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/img/modal-top.svg @@ -0,0 +1,207 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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..74c6aad20e 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 From 590460bfff7886a31d4f4e26d6b67d58f7f82f41 Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Mon, 16 Jun 2025 10:17:54 -0400 Subject: [PATCH 2/9] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/modal/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 74c6aad20e..ddb4a34e9a 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 @@ -59,7 +59,7 @@ 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.](./img/modal-non-destructive.svg)
From 2d7d5ac95b8e2c431158e4793c245a9cd4456a02 Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Mon, 16 Jun 2025 10:18:05 -0400 Subject: [PATCH 3/9] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/modal/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ddb4a34e9a..5d0641b056 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 @@ -67,7 +67,7 @@ When confirming a non-destructive action, provide specific context about what wi #### Confirm a destructive action -
+
![A side-by-side comparison of unsuccessful and successful destructive confirmaton dialogs.](./img/modal-destructive.svg)
From 754b809511a9f520881886e23ea943e5b668653c Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Mon, 16 Jun 2025 10:18:21 -0400 Subject: [PATCH 4/9] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/modal/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5d0641b056..74ef3c45e5 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 @@ -79,7 +79,7 @@ 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. -
+
![Example of a destructive confirmation dialog that requires an input field be filled before continuing.](./img/modal-destructive-text-input.svg)
From f4e1bc266a469462cbde8962b9153ca54f39d24c Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Mon, 16 Jun 2025 10:18:27 -0400 Subject: [PATCH 5/9] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/modal/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 74ef3c45e5..bf716814f5 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 @@ -109,7 +109,7 @@ Error dialogs may use an error icon for visual emphasis. ### Passive dialogs -
+
![Example of a passive dialog, with and without an optional warning icon.](./img/modal-passive-dialog.svg)
From 1b249a60fd2345bed469442dfe0f86e08fa83f46 Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Mon, 16 Jun 2025 10:18:36 -0400 Subject: [PATCH 6/9] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/modal/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 bf716814f5..c40f718ef0 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 @@ -125,7 +125,7 @@ Users may need to provide additional input to complete an action. To accomplish ### Modals with help -
+
![Example of a modal with a help icon and popover.](./img/modal-with-help.svg)
From cfcf391d24e30aa5a42704b00964fed8bc8ea5ed Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Mon, 16 Jun 2025 10:26:46 -0400 Subject: [PATCH 7/9] Updating image context. --- .../components/modal/img/modal-center.svg | 320 +++++++++--------- .../components/modal/img/modal-top.svg | 320 +++++++++--------- 2 files changed, 318 insertions(+), 322 deletions(-) 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 index c58ae02c12..ea4d8b1ebc 100644 --- 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 @@ -1,55 +1,77 @@ - - - - - + + + + + + + + - - - - - + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -63,145 +85,121 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + - - - - - + + + + + - - - - - - - - - - - - - - + + + + + + + + + + - - - - - + + + + + - - - - - - - - - - - + + + + + + + + - - - - - - - - - + + + + + + + + + - + - - + + - + - + - - + + + + + + + + + + + + + + - - + + 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 index c085230038..00e587487f 100644 --- 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 @@ -1,55 +1,77 @@ - - - - - + + + + + + + + - - - - - + + + + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -63,145 +85,121 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - + + + + + - - - - - + + + + + - - - - - - - - - - - - - - + + + + + + + + + + - - - - - + + + + + - - - - - - - - - - - + + + + + + + + - - - - - - - - - + + + + + + + + + - + - - + + - + - + - - + + + + + + + + + + + + + + - - + + From 12901d3ee99e8c306bf0beaf978d5f4081f89aee Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Mon, 16 Jun 2025 10:49:28 -0400 Subject: [PATCH 8/9] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/modal/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 c40f718ef0..5064907782 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 @@ -59,7 +59,7 @@ 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.](./img/modal-non-destructive.svg)
From 20c17faaa70792a1de7d6cc6c9f2aada1a80c0ee Mon Sep 17 00:00:00 2001 From: Bekah Stephens <54444091+bekah-stephens@users.noreply.github.com> Date: Mon, 16 Jun 2025 12:34:34 -0400 Subject: [PATCH 9/9] Update packages/documentation-site/patternfly-docs/content/design-guidelines/components/modal/modal.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../content/design-guidelines/components/modal/modal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5064907782..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 @@ -97,7 +97,7 @@ When using destructive actions, ensure that the user is informed about the conse ### Error dialogs -
+
![Example of an error dialog, with and without an optional error icon.](./img/modal-error-dialog.svg)