Notification Drawer Updates

pattern-library/application-framework/masthead/design/design.md

@@ -12,7 +12,7 @@ The masthead contains the following items from left to right:
      * Some products may have additional requirements for the masthead, such as the shopping cart icon shown in the example above.
      * All icons that require badge updates should be grouped together in the masthead.
   5. **Notifications Icon** (optional):
-     * If notifications or messages are being used, the bell icon should be placed to the left of the Application Launcher icon. The bell icon is used for opening and closing the notification drawer. Jump to the [Notification Drawer](https://www.patternfly.org/pattern-library/communication/notification-drawer/#/api) pattern for additional details.
+     * If notifications or messages are being used, the "fa-bell" icon should be placed to the left of the Application Launcher icon. The bell icon is used for opening and closing the notification drawer. Jump to the [Notification Drawer](https://www.patternfly.org/pattern-library/communication/notification-drawer/#/api) pattern for additional details.
   6. **Application Launcher Icon** (optional):
      * If additional interfaces are available via an app selection panel, the "fa-th" icon from the Font Awesome icon library should be placed to the left of the help icon. Jump to the [Launcher](http://www.patternfly.org/pattern-library/application-framework/launcher/#/api) pattern for additional details.
   7. **Help Icon:**
@@ -30,12 +30,20 @@ The masthead contains the following items from left to right:
 ## General Considerations
 
 * **Badges:**
-  In some cases, badges may be used with the icons in the masthead to provide the user with additional information. Badges should be blue with white text inside and should be placed to the top right corner of the icon it is associated with. Some examples include the number of new notifications available, or the number of items currently in a shopping cart.
+  - In some cases, badges may be used with the icons in the masthead to provide the user with additional information.
+  - Badges should be blue with white text inside and should be placed to the top right corner of the icon it is associated with.
+  - Some examples include showing new notifications are available, or showing the number of items currently in a shopping cart.
+  - In responsive states, most masthead icons will be collapsed into the responsive state, but any icons that use badges should remain in the masthead for easier access.
+
 
 * **Hamburger Menu:**
-  In smaller viewport sizes, the hamburger menu should list all primary navigation items, followed by all items from the masthead. Masthead items should be listed based on their order in the masthead from left to right. For instance, based on the example images, the hamburger menu would be the following from top to bottom: Category 1, Category 2, Category 3, Shopping Cart, Notifications, Help, User. Any masthead options that have a dropdown should be displayed consistently with standard secondary navigation items.
+  - In smaller viewport sizes, the hamburger menu should list all primary navigation items, followed by the items from the masthead (except for badged items like notifications and shopping cart which should remain in the masthead if possible).
+  - Masthead items should be listed based on their order in the masthead from left to right. For instance, based on the example images, the hamburger menu would be the following from top to bottom: Category 1, Category 2, Category 3, Help, User.
+  - Any masthead options that have a dropdown should be displayed consistently with standard secondary navigation items.
+
 
 * **Masthead Icons:**
-  The expand caret should be visible to the right side of an icon that has multiple options displayed in a list. It should be visually indicated when a user hovers or selects an icon from the Masthead.
+  - The expand caret should be visible to the right side of an icon that has multiple options displayed in a list.
+  - It should be visually indicated when a user hovers or selects an icon from the Masthead.
 
 ![Image of masthead with dropdown options](img/masthead_dropdowns.png)

pattern-library/communication/notification-drawer/design/design.md

@@ -7,17 +7,28 @@ Jump to [Toast Notification](#toast-notification), [Notification Drawer](#notifi
 1. **Toast Notification:** The drawer should utilize the current [Toast Notification](https://www.patternfly.org/pattern-library/communication/toast-notifications/#/api). The notification shows the title and an optional content-relevant icon.
 
 ## Notification Drawer
-![Image of standard Notification Drawer](img/tray.png)
+![Image of standard Notification Drawer](img/PF-ND-01.png)
 
-1. **Icon:** Displays visual differentiator when new or unread notifications are present. Clicking on the icon will slide out a drawer and dismiss the toast notification. Clicking on the icon again will close the drawer.
+1. **Icon:**
+  - The fa-bell icon should be used to represent the notification drawer.
+  - Clicking on the icon will slide out a drawer and dismiss the toast notification.
+  - Clicking on the icon again will close the drawer.
 2. **Drawer Title:** Title of Drawer.
 3. **Accordion:** Only one notification tab may be opened at a given time -maximizing drawer space. Italicized text will indicate number of new events. Clicking on the title will expand accordion.
-4. **Row:** Example content shows relevant icon creating a visual differentiator between content severity or object type. New/unread notifications are shown in bold.
+4. **Row:**
+  - Example content shows relevant icon creating a visual differentiator between content severity or object type.
+  - New/unread notifications are shown in bold.
+  - Clicking on a row will remove the bold text and the item will be marked as "read."
 5. **Row Hover State:** Example of hover state.
-6. **Mark All Read:** Clicking “Mark All Read” changes all visible unread rows (bold row type) to read (regular row type).
-7. **Icon Empty:** The empty state shows no new events.
-8. **Row Actions:** Clicking on the [Kabob](https://www.patternfly.org/pattern-library/widgets/#kebabs) menu will reveal a drop down containing actions for that item.
-9. **Infinite Scroll:** Infinite scroll reduces need to identify time range on accordion tab. Allows for free-range historical search of notifications.
+6. **Mark All Read** (Optional): Clicking “Mark All Read” changes all visible unread rows (bold row type) to read (regular row type).
+7. **Clear All** (Optional): Clicking “Clear All” removes all visible rows from the drawer.
+  - Note: This option may be used differently across products.
+  - Some rows may not be eligible for clearing and should be determined on a case by case basis.
+  - This link may be hidden as needed.
+8. **Badge:** A blue badge will appear in the top right corner of the bell icon when new/unread notifications are present.
+9. **Close:** A close icon should be shown in the top right corner of the drawer, providing another method for closing the drawer.
+10. **Row Actions:** Clicking on the [Kabob](https://www.patternfly.org/pattern-library/widgets/#kebabs) menu will reveal a drop down containing actions for that item.
+11. **Infinite Scroll:** Infinite scroll reduces need to identify time range on accordion tab. Allows for free-range historical search of notifications.
 
 ## Expand Behavior | Optional
 The notification drawer has the ability to expand in order to view additional details regarding an event. The expand drawer functionality is optional. Use of this feature will depend on the amount of information available.
@@ -26,17 +37,17 @@ The notification drawer has the ability to expand in order to view additional de
 2. **Expanded Drawer:** Individual rows may include additional information when in the expanded state. The collapse icon is in the top left corner of the notification drawer and is shown as a link. All other notification drawer features should remain the same as the collapsed view.
 
 ### Collapsed Drawer
-![Image of Collapsed Notification Drawer](img/collapsed.png)
+![Image of Collapsed Notification Drawer](img/PF-ND-02.png)
 
 ### Expanded Drawer
-![Image of Expanded Notification Drawer](img/expanded.png)
+![Image of Expanded Notification Drawer](img/PF-ND-03.png)
 
 ## Notification Drawer | Responsive State
 This is how the notification drawer looks on small screens. The icon of notification drawer is exposed on the navigation bar and the drawer will take over the whole screen width.
-![navigation-vertical-notifications-responsive-callout](img/navigation-drawer-responsive-callout.png)
+![navigation-vertical-notifications-responsive-callout](img/PF-ND-07.png)
 1. **Bell Icon:** The bell remains in the banner, allowing the user to toggle the visibility of the notification drawer.
 2. **Hamburger Icon:** Since navigation is hidden under “hamburger” icon, clicking on the hamburger menu should first collapse the notification drawer (if visible), and then display the navigation menu.
 3. **Accordion:** When there are no new notifications, all the accordions are default to be collapsed.
 4. **Complex Events:** Individual rows may include additional information in complex events. User can tap on the event and full contents will show. If the event was unread, it will be marked as read at the same time. Tapping on the event again will collapse it. Tapping on another event will also lead to collapse it because only one event may be expanded at a given time.
-5. **Mark All Read:** After clicking “Mark All Read”, the button will be hidden.
+5. **Mark All Read:** After clicking “Mark All Read”, the link will be hidden until new unread notifications are available for reading.
 6. **Loading More:** User can scroll up and down within an accordion to view more events. It will load 10 events at a time by default. When scrolling to the bottom of the list, user can pull up to load more events.

pattern-library/communication/notification-drawer/design/overview.md

@@ -5,7 +5,7 @@ The Notification Drawer is a content delivery system such as events, tasks, and
 Jump to [Vertical Navigation](#vertical-navigation) or [Horizontal Navigation](#horizontal-navigation).
 
 ## Vertical Navigation
-![Image of Vertical Nav Notification Drawer](img/notification-drawer-example.jpg)
+![Image of Vertical Nav Notification Drawer](img/PF-ND-05.png)
 
 ## Horizontal Navigation
-![Image of Horizontal Nav Notification Drawer](img/notification-drawer-example-horizontal.jpg)
+![Image of Horizontal Nav Notification Drawer](img/PF-ND-04.png)