feat(notification-badge): added expanded state

src/patternfly/components/Button/button.hbs

@@ -6,7 +6,7 @@
   {{else}}
     type="button"
   {{/if}}
-  {{#if button--IsExpanded}}
+  {{#if (concat button--IsExpanded button--IsAriaExpanded)}}
     aria-expanded="true"
   {{/if}}
   {{#if button--IsInlineLinkSpan}}

src/patternfly/components/Masthead/masthead.scss

@@ -245,7 +245,7 @@ $pf-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   }
 
   .pf-c-button.pf-m-plain {
-    @include pf-t-dark(--pf-global--Color--200); // for all plain buttons, especially inside other components (.pf-c-input-group), for dark mode
+    @include pf-t-dark(--pf-c-button--m-plain--Color); // for all plain buttons, especially inside other components (.pf-c-input-group), for dark mode
   }
 }
 

src/patternfly/components/NotificationBadge/examples/NotificationBadge.md

@@ -12,108 +12,68 @@ import './NotificationBadge.css'
 
 ```hbs
 <div class="pf-t-dark">
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Notifications"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-read"}}
-    <i class="pf-icon-bell" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
-
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Unread notifications"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-unread"}}
-    <i class="pf-icon-bell" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
-
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Attention notifications"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-attention"}}
-    <i class="pf-icon-attention-bell" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
-
-<br><br>
-
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Tasks"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-read"}}
-    <i class="pf-icon-task" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
-
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Unread tasks"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-unread"}}
-    <i class="pf-icon-task" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
-
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Attention tasks"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-attention"}}
-    <i class="pf-icon-task" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
+  {{> notification-badge notification-badge--aria-label="Notifications"}}
+  {{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label="Unread notifications"}}
+  {{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label="Attention notifications"}}
+  <br><br>
+  {{#> wrapper notification-badge--IsTask="true"}}
+    {{> notification-badge notification-badge--aria-label="Tasks"}}
+    {{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label="Unread tasks"}}
+    {{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label="Attention tasks"}}
+  {{/wrapper}}
 </div>
 ```
 
 ### With count
 
 ```hbs
 <div class="pf-t-dark">
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Notifications"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-read" notification-badge--count="24"}}
-    <i class="pf-icon-bell" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
-
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Unread notifications"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-unread" notification-badge--count="25"}}
-    <i class="pf-icon-bell" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
-
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Attention notifications"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-attention" notification-badge--count="26"}}
-    <i class="pf-icon-attention-bell" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
-
-<br><br>
-
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Tasks"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-read" notification-badge--count="24"}}
-    <i class="pf-icon-task" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
+  {{#> wrapper notification-badge--count="24"}}
+    {{> notification-badge notification-badge--aria-label=(concat notification-badge--count " notifications")}}
+    {{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label=(concat notification-badge--count " unread notifications")}}
+    {{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label=(concat notification-badge--count " attention notifications")}}
+    <br><br>
+    {{#> wrapper notification-badge--IsTask="true"}}
+      {{> notification-badge notification-badge--aria-label=(concat notification-badge--count " tasks")}}
+      {{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label=(concat notification-badge--count " unread tasks")}}
+      {{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label=(concat notification-badge--count " attention tasks")}}
+    {{/wrapper}}
+  {{/wrapper}}
+</div>
+```
 
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Unread tasks"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-unread" notification-badge--count="25"}}
-    <i class="pf-icon-task" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
+### Expanded
 
-{{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Attention tasks"'}}
-  {{#> notification-badge notification-badge--modifier="pf-m-attention" notification-badge--count="26"}}
-    <i class="pf-icon-task" aria-hidden="true"></i>
-  {{/notification-badge}}
-{{/button}}
+```hbs
+<div class="pf-t-dark">
+  {{#> wrapper notification-badge--IsExpanded="true"}}
+    {{> notification-badge notification-badge--aria-label="Notifications"}}
+    {{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label="Unread notifications"}}
+    {{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label="Attention notifications"}}
+    <br><br>
+    {{#> wrapper notification-badge--IsTask="true"}}
+      {{> notification-badge notification-badge--aria-label="Tasks"}}
+      {{> notification-badge notification-badge--IsUnread="true" notification-badge--aria-label="Unread tasks"}}
+      {{> notification-badge notification-badge--IsAttention="true" notification-badge--aria-label="Attention tasks"}}
+    {{/wrapper}}
+  {{/wrapper}}
 </div>
 ```
 
 ## Documentation
 
 ### Overview
-
-Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
-
-Note: The [page component](/components/page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
+Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](/components/masthead).
 
 ### Accessibility
-
 Be sure that the component associated with this indicator handles screen reader text indicating read or unread notifications.
 
 ### Usage
-
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-c-notification-badge` | `<div>` |  Initiates a notification badge. **Always use it with a modifier class.** |
 | `.pf-c-notification-badge__count` | `<span>` |  Initiates a notification badge count. |
 | `.pf-m-read` | `.pf-c-notification-badge` |  Applies read notification badge styling. |
 | `.pf-m-unread` | `.pf-c-notification-badge` |  Applies unread notification badge styling. |
 | `.pf-m-attention` | `.pf-c-notification-badge` |  Applies attention notification badge styling. |
+| `.pf-m-expanded` | `.pf-c-notification-badge` |  Applies expanded notification badge styling. |

src/patternfly/components/NotificationBadge/notification-badge.hbs

@@ -1,9 +1,32 @@
-<span class="pf-c-notification-badge{{#if notification-badge--modifier}} {{notification-badge--modifier}}{{/if}}"
-  {{#if notification-badge--attribute}}
-    {{{notification-badge--attribute}}}
-  {{/if}}>
-  {{> @partial-block}}
-  {{#if notification-badge--count}}
-    <span class="pf-c-notification-badge__count">{{{notification-badge--count}}}</span>
-  {{/if}}
-</span>
+{{#> button
+  button--IsAriaExpanded=notification-badge--IsExpanded
+  button--modifier="pf-m-plain"
+  button--attribute=(concat 'aria-label="' notification-badge--aria-label '"')}}
+  <span class="pf-c-notification-badge
+    {{~#if notification-badge--IsUnread}} pf-m-unread
+    {{~else if notification-badge--IsAttention}} pf-m-attention
+    {{~else}} pf-m-read
+    {{~/if}}
+    {{~#if notification-badge--IsExpanded}}
+      pf-m-expanded
+    {{~/if}}
+    {{~#if notification-badge--modifier}} {{notification-badge--modifier}}{{/if}}"
+    {{#if notification-badge--attribute}}
+      {{{notification-badge--attribute}}}
+    {{/if}}>
+    <i class="
+      {{~#if notification-badge--IsTask}}
+        pf-icon-task
+      {{~else if notification-badge--IsAttention}}
+        pf-icon-attention-bell
+      {{~else}}
+        pf-icon-bell
+      {{~/if}}"
+      aria-hidden="true"></i>
+    {{#if notification-badge--count}}
+      <span class="pf-c-notification-badge__count">
+        {{notification-badge--count}}
+      </span>
+    {{/if}}
+  </span>
+{{/button}}

src/patternfly/components/NotificationBadge/notification-badge.scss

@@ -31,16 +31,19 @@
   // Modifiers
   --pf-c-notification-badge--m-read--after--BorderColor: transparent; // remove at breaking change
   --pf-c-notification-badge--m-read--after--BackgroundColor: transparent;
+  --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
 
   // Unread
   --pf-c-notification-badge--m-unread--Color: var(--pf-global--Color--light-100);
   --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--active-color--100);
   --pf-c-notification-badge--m-unread--hover--after--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--200);
 
   // Attention
   --pf-c-notification-badge--m-attention--Color: var(--pf-global--Color--light-100);
   --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-global--danger-color--100);
   --pf-c-notification-badge--m-attention--hover--after--BackgroundColor: var(--pf-global--danger-color--200);
+  --pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor: var(--pf-global--danger-color--200);
   --pf-c-notification-badge__count--MarginLeft: var(--pf-global--spacer--xs);
 
   // Attention icon
@@ -90,6 +93,8 @@
   &.pf-m-read {
     --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-read--after--BackgroundColor);
     --pf-c-notification-badge--after--BorderColor: var(--pf-c-notification-badge--m-read--after--BorderColor);
+
+    color: var(--pf-c-notification-badge--m-read--Color, inherit);
   }
 
   &.pf-m-unread {
@@ -108,9 +113,16 @@
     color: var(--pf-c-notification-badge--m-attention--Color);
 
     &:hover {
-      --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
+      --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--hover--after--BackgroundColor);
     }
   }
+
+  &.pf-m-expanded {
+    --pf-c-notification-badge--m-read--Color: var(--pf-global--Color--light-100);
+    --pf-c-notification-badge--m-read--after--BackgroundColor: var(--pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor);
+    --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor);
+    --pf-c-notification-badge--m-attention--after--BackgroundColor: var(--pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor);
+  }
 }
 
 .pf-c-notification-badge__count {

src/patternfly/components/NotificationBadge/themes/dark/notification-badge.scss

@@ -2,6 +2,8 @@
 
 @mixin pf-theme-dark-notification-badge() {
   .pf-c-notification-badge {
+    --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor: var(--pf-global--BackgroundColor--400);
     --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
+    --pf-c-notification-badge--m-attention--Color: var(--pf-global--palette--black-900);
   }
 }

src/patternfly/demos/Masthead/masthead-template-content-icon-group.hbs

@@ -1,15 +1,9 @@
 {{#> toolbar-group toolbar-group--id=(concat masthead-template--id '-icon-group-') toolbar-group--modifier="pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"}}
-  {{#> toolbar-item}}
-    {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Notifications"'}}
-      {{#> notification-badge}}
-        {{#if masthead-template-content-icon-group--notification-badge--IsAttention}}
-          <i class="pf-icon-attention-bell" aria-hidden="true"></i>
-        {{else}}
-          <i class="pf-icon-bell" aria-hidden="true"></i>
-        {{/if}}
-      {{/notification-badge}}
-    {{/button}}
-  {{/toolbar-item}}
+  {{#if masthead-template--HasNotificationDrawer}}
+    {{#> toolbar-item}}
+      {{> notification-badge notification-badge--IsExpanded=notification-drawer--IsExpanded notification-badge--IsAttention=notification-drawer--IsAttention notification-badge--IsUnread=notification-drawer--IsUnread}}
+    {{/toolbar-item}}
+  {{/if}}
   {{#> toolbar-group toolbar-group--modifier=(concat 'pf-m-icon-button-group pf-m-hidden pf-m-visible-on-' masthead-template-content-icon-group--breakpoint)}}
     {{#> toolbar-item}}
       {{> masthead-template-application-launcher app-launcher--id=(concat toolbar-group--id '-app-launcher')}}

src/patternfly/demos/NotificationDrawer/examples/NotificationDrawer.md

@@ -7,36 +7,40 @@ section: components
 
 ### Collapsed
 ```hbs isFullscreen
-{{> notification-drawer-template notification-drawer-template--id="drawer-collapsed-example"}}
+{{> notification-drawer-template
+      notification-drawer-template--id="drawer-collapsed-example"
+      notification-drawer--IsRead="true"
+      notification-badge--aria-label="Notifications"
+}}
 ```
 
 ### Expanded read
 ```hbs isFullscreen
 {{> notification-drawer-template
       notification-drawer-template--id="drawer-expanded-read-example"
-      notification-drawer-basic-list--AllRead="true"
-      notification-badge--modifier="pf-m-read"
-      drawer-panel--IsOpen="true"
+      notification-drawer--IsExpanded="true"
+      notification-drawer--IsRead="true"
+      notification-badge--aria-label="Notifications"
 }}
 ```
 
 ### Expanded unread
 ```hbs isFullscreen
 {{> notification-drawer-template
       notification-drawer-template--id="drawer-expanded-unread-example"
-      notification-badge--modifier="pf-m-unread"
-      drawer-panel--IsOpen="true"
+      notification-drawer--IsExpanded="true"
+      notification-drawer--IsUnread="true"
+      notification-badge--aria-label="Unread notifications"
 }}
 ```
 
 ### Expanded attention
 ```hbs isFullscreen
 {{> notification-drawer-template
       notification-drawer-template--id="drawer-expanded-attention-example"
-      notification-drawer-basic-list--IsAttention="true"
-      notification-badge--modifier="pf-m-attention"
-      masthead-template-content-icon-group--notification-badge--IsAttention="true"
-      drawer-panel--IsOpen="true"
+      notification-drawer--IsExpanded="true"
+      notification-drawer--IsAttention="true"
+      notification-badge--aria-label="Attention notifications"
 }}
 ```
 
@@ -45,8 +49,9 @@ section: components
 {{> notification-drawer-template
       notification-drawer-template--id="drawer-expanded-with-groups-example"
       notification-drawer-template--IsGroup="true"
-      notification-badge--modifier="pf-m-unread"
-      drawer-panel--IsOpen="true"
+      notification-drawer--IsExpanded="true"
+      notification-drawer--IsUnread="true"
+      notification-badge--aria-label="Unread notifications"
 }}
 ```