From 3b978c00258e7fd3e29659374a803d4ef9e8b485 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Tue, 20 May 2025 09:47:01 -0400 Subject: [PATCH 1/2] docs(notification badge and drawer): Updates images for v6. --- .../notification-badge/img/badge-elements.svg | 70 ++++++++ .../notification-badge/notification-badge.md | 8 +- .../img/drawer-elements.svg | 138 ++++++++++++++++ .../img/drawer-placement.svg | 118 ++++++++++++++ .../img/grouped-drawer-elements.svg | 152 ++++++++++++++++++ .../notification-drawer.md | 15 +- 6 files changed, 495 insertions(+), 6 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/img/badge-elements.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/img/badge-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/img/badge-elements.svg new file mode 100644 index 0000000000..b09e2ad57f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/img/badge-elements.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/notification-badge.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/notification-badge.md index b3fea7400f..8b1f7ce9a8 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/notification-badge.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-badge/notification-badge.md @@ -4,13 +4,17 @@ section: components related: ['Notification drawer', 'Page'] --- +import '../components.css'; + ## Elements -basic notification drawer +
+![Elements of a notification badge.](./img/badge-elements.svg) +
1. **Icon:** The notification badge will be located in the masthead and display the 'fa-bell' icon in it's default state. Clicking the icon (or anywhere within the badge) will toggle the notification drawer open and closed. -2. **Background:** In the default state, the background will change color to indicate that the notification drawer is opened. Optionally the background color can also convey status. +2. **Border:** In the default state, the border will change color to indicate that the notification drawer is opened. 3. **Unread status (optional):** Setting the background color to blue will indicate that one or more unread notifications are present in the drawer. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg new file mode 100644 index 0000000000..c5a90635e9 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg new file mode 100644 index 0000000000..74162f7162 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg new file mode 100644 index 0000000000..d16912b136 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg @@ -0,0 +1,152 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/notification-drawer.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/notification-drawer.md index 53fad81d5a..2d0cbc332b 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/notification-drawer.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/notification-drawer.md @@ -4,11 +4,15 @@ section: components related: ['Notification drawer', 'Notification badge', 'Drawer'] --- +import '../components.css'; + ## Elements ### Basic notification drawer -basic notification drawer +
+![Elements of a basic notification drawer.](./img/drawer-elements.svg) +
1. **Header:** The header contains the title of the drawer (default to “Notifications”). @@ -32,7 +36,9 @@ related: ['Notification drawer', 'Notification badge', 'Drawer'] ### Grouped notification drawer If you want to sort notifications by category, collapsible headers may be used to group content. The grouped notification drawer utilizes an accordion pattern where only one category will be opened at a time. By default, the first category will be opened, although if the drawer is closed and reopened, the prior state should persist. -grouped notification drawer +
+![Elements of a grouped notification drawer.](./img/grouped-drawer-elements.svg) +
1. **Notification group:** Notifications can be grouped by category. You may have any number of categories, however more than 3-4 categories is not recommended. Each category header will have a name. Clicking on the header will expand the category (and collapse the current category). @@ -79,8 +85,9 @@ In cases where it makes sense to immediately notify the user about a change in s ## Placement -grouped notification drawer - +
+![Example showing the placement of a notification drawer.](./img/drawer-placement.svg) +
1. **Notification badge:** Whenever the notification drawer is used, a [notification badge](/components/notification-badge) must be placed in the masthead. Clicking on the badge will toggle the drawer open or closed. Depending on options supported in the application, the badge can also be used to display the number of notifications in the drawer and whether there are unread or critical notifications needing attention. See the [notification badge](/components/notification-badge) usage guidelines for more information about these options. From 2272a85b525cf749e9b6394d05b0ac22d459afaf Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Tue, 20 May 2025 10:20:11 -0400 Subject: [PATCH 2/2] Updating image heights for better readability. --- .../img/drawer-elements.svg | 30 ++------ .../img/drawer-placement.svg | 48 ++++-------- .../img/grouped-drawer-elements.svg | 77 +++++++------------ 3 files changed, 47 insertions(+), 108 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg index c5a90635e9..1dd0357f56 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-elements.svg @@ -1,6 +1,6 @@ - + - + @@ -33,26 +33,6 @@ - - - - - - - - - - - - - - - - - - - - @@ -69,11 +49,11 @@ - + - + @@ -126,7 +106,7 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg index 74162f7162..4117b8d2e1 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/drawer-placement.svg @@ -1,6 +1,6 @@ - + - + @@ -8,60 +8,40 @@ - + - + - + - + - + - - - - - - - - - - - - - - - - - - - - - + - - + + - + @@ -69,11 +49,11 @@ - + - + @@ -109,7 +89,7 @@ - + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg index d16912b136..ee9a149aa7 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/notification-drawer/img/grouped-drawer-elements.svg @@ -1,112 +1,91 @@ - + - + - - - - - - - - - + - - + + - - + + - - + + - - + + - - + + - - + + - - - - - - - - - - - - - - - + + - + - + - - + + - + - + - + - + - + @@ -115,7 +94,7 @@ - + @@ -140,7 +119,7 @@ - +