@patternfly/patternfly 4.210.2 → 4.211.0

package/components/Masthead/masthead.css

@@ -228,7 +228,7 @@
   align-self: stretch;
 }
 .pf-c-masthead .pf-c-button.pf-m-plain {
-  color: var(--pf-global--Color--200);
+  color: var(--pf-c-button--m-plain--Color);
 }
 
 .pf-c-masthead__main {

package/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
   }
 }
 

package/components/NotificationBadge/notification-badge.css

@@ -21,12 +21,15 @@
   --pf-c-notification-badge__i--Height: auto;
   --pf-c-notification-badge--m-read--after--BorderColor: transparent;
   --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);
   --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);
   --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);
   --pf-c-notification-badge--pf-icon-attention-bell--LineHeight: var(--pf-global--LineHeight--sm);
   position: relative;
@@ -68,6 +71,7 @@
 .pf-c-notification-badge.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-c-notification-badge.pf-m-unread {
   --pf-c-notification-badge--after--BackgroundColor: var(--pf-c-notification-badge--m-unread--after--BackgroundColor);
@@ -81,7 +85,13 @@
   color: var(--pf-c-notification-badge--m-attention--Color);
 }
 .pf-c-notification-badge.pf-m-attention: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-c-notification-badge.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 {
@@ -89,5 +99,7 @@
 }
 
 :where(.pf-theme-dark) .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);
 }

package/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 {

package/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);
   }
 }

package/components/Page/page.css

@@ -273,6 +273,7 @@
 .pf-c-page.pf-m-full-height {
   height: 100vh;
   height: 100dvh;
+  max-height: 100%;
 }
 
 .pf-c-page__header,

package/components/Page/page.scss

@@ -212,6 +212,7 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   &.pf-m-full-height {
     height: 100vh;
     height: 100dvh;
+    max-height: 100%;
   }
 }
 

package/docs/components/Dropdown/examples/Dropdown.md

@@ -435,7 +435,7 @@ cssPrefix: pf-c-dropdown
 <div class="pf-c-dropdown pf-m-expanded">
   <button
     class="pf-c-dropdown__toggle"
-    id="-button"
+    id="dropdown-align-on-different-breakpoint-button"
     aria-expanded="true"
     type="button"
   >
@@ -446,7 +446,7 @@ cssPrefix: pf-c-dropdown
   </button>
   <ul
     class="pf-c-dropdown__menu pf-m-align-right-on-lg pf-m-align-left-on-2xl"
-    aria-labelledby="-button"
+    aria-labelledby="dropdown-align-on-different-breakpoint-button"
   >
     <li>
       <a class="pf-c-dropdown__menu-item" href="#">Link</a>

package/docs/components/NotificationBadge/examples/NotificationBadge.md

@@ -19,7 +19,6 @@ cssPrefix: pf-c-notification-badge
       <i class="pf-icon-bell" aria-hidden="true"></i>
     </span>
   </button>
-
   <button
     class="pf-c-button pf-m-plain"
     type="button"
@@ -29,7 +28,6 @@ cssPrefix: pf-c-notification-badge
       <i class="pf-icon-bell" aria-hidden="true"></i>
     </span>
   </button>
-
   <button
     class="pf-c-button pf-m-plain"
     type="button"
@@ -39,16 +37,13 @@ cssPrefix: pf-c-notification-badge
       <i class="pf-icon-attention-bell" aria-hidden="true"></i>
     </span>
   </button>
-
   <br />
   <br />
-
   <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
     <span class="pf-c-notification-badge pf-m-read">
       <i class="pf-icon-task" aria-hidden="true"></i>
     </span>
   </button>
-
   <button
     class="pf-c-button pf-m-plain"
     type="button"
@@ -58,7 +53,6 @@ cssPrefix: pf-c-notification-badge
       <i class="pf-icon-task" aria-hidden="true"></i>
     </span>
   </button>
-
   <button
     class="pf-c-button pf-m-plain"
     type="button"
@@ -79,65 +73,129 @@ cssPrefix: pf-c-notification-badge
   <button
     class="pf-c-button pf-m-plain"
     type="button"
-    aria-label="Notifications"
+    aria-label="24 notifications"
   >
     <span class="pf-c-notification-badge pf-m-read">
       <i class="pf-icon-bell" aria-hidden="true"></i>
       <span class="pf-c-notification-badge__count">24</span>
     </span>
   </button>
-
   <button
     class="pf-c-button pf-m-plain"
     type="button"
-    aria-label="Unread notifications"
+    aria-label="24 unread notifications"
   >
     <span class="pf-c-notification-badge pf-m-unread">
       <i class="pf-icon-bell" aria-hidden="true"></i>
-      <span class="pf-c-notification-badge__count">25</span>
+      <span class="pf-c-notification-badge__count">24</span>
     </span>
   </button>
-
   <button
     class="pf-c-button pf-m-plain"
     type="button"
-    aria-label="Attention notifications"
+    aria-label="24 attention notifications"
   >
     <span class="pf-c-notification-badge pf-m-attention">
       <i class="pf-icon-attention-bell" aria-hidden="true"></i>
-      <span class="pf-c-notification-badge__count">26</span>
+      <span class="pf-c-notification-badge__count">24</span>
     </span>
   </button>
-
   <br />
   <br />
-
-  <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
+  <button class="pf-c-button pf-m-plain" type="button" aria-label="24 tasks">
     <span class="pf-c-notification-badge pf-m-read">
       <i class="pf-icon-task" aria-hidden="true"></i>
       <span class="pf-c-notification-badge__count">24</span>
     </span>
   </button>
-
   <button
     class="pf-c-button pf-m-plain"
     type="button"
-    aria-label="Unread tasks"
+    aria-label="24 unread tasks"
   >
     <span class="pf-c-notification-badge pf-m-unread">
       <i class="pf-icon-task" aria-hidden="true"></i>
-      <span class="pf-c-notification-badge__count">25</span>
+      <span class="pf-c-notification-badge__count">24</span>
     </span>
   </button>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="24 attention tasks"
+  >
+    <span class="pf-c-notification-badge pf-m-attention">
+      <i class="pf-icon-task" aria-hidden="true"></i>
+      <span class="pf-c-notification-badge__count">24</span>
+    </span>
+  </button>
+</div>
 
+```
+
+### Expanded
+
+```html
+<div class="pf-t-dark">
   <button
     class="pf-c-button pf-m-plain"
     type="button"
+    aria-expanded="true"
+    aria-label="Notifications"
+  >
+    <span class="pf-c-notification-badge pf-m-read pf-m-expanded">
+      <i class="pf-icon-bell" aria-hidden="true"></i>
+    </span>
+  </button>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-expanded="true"
+    aria-label="Unread notifications"
+  >
+    <span class="pf-c-notification-badge pf-m-unread pf-m-expanded">
+      <i class="pf-icon-bell" aria-hidden="true"></i>
+    </span>
+  </button>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-expanded="true"
+    aria-label="Attention notifications"
+  >
+    <span class="pf-c-notification-badge pf-m-attention pf-m-expanded">
+      <i class="pf-icon-attention-bell" aria-hidden="true"></i>
+    </span>
+  </button>
+  <br />
+  <br />
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-expanded="true"
+    aria-label="Tasks"
+  >
+    <span class="pf-c-notification-badge pf-m-read pf-m-expanded">
+      <i class="pf-icon-task" aria-hidden="true"></i>
+    </span>
+  </button>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-expanded="true"
+    aria-label="Unread tasks"
+  >
+    <span class="pf-c-notification-badge pf-m-unread pf-m-expanded">
+      <i class="pf-icon-task" aria-hidden="true"></i>
+    </span>
+  </button>
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-expanded="true"
     aria-label="Attention tasks"
   >
-    <span class="pf-c-notification-badge pf-m-attention">
+    <span class="pf-c-notification-badge pf-m-attention pf-m-expanded">
       <i class="pf-icon-task" aria-hidden="true"></i>
-      <span class="pf-c-notification-badge__count">26</span>
     </span>
   </button>
 </div>
@@ -148,9 +206,7 @@ cssPrefix: pf-c-notification-badge
 
 ### 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
 
@@ -165,3 +221,4 @@ Be sure that the component associated with this indicator handles screen reader
 | `.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.                             |