@patternfly/patternfly 4.210.0 → 4.211.0

package/RELEASE-NOTES.md

@@ -3,6 +3,33 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.11 release notes (2022-08-25)
+Packages released:
+- [@patternfly/patternfly@v4.210.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.210.2)
+
+### Components
+- **Avatar:** Updated examples to use correct avatar image, simplified hbs ([#5026](https://github.com/patternfly/patternfly/pull/5026))
+- **Button:** Added a badge count to the link button ([#5029](https://github.com/patternfly/patternfly/pull/5029))
+- **Card:** Updated body fill example to show fill behavior ([#5022](https://github.com/patternfly/patternfly/pull/5022))
+- **Checkbox:** Added support for required indicator ([#5025](https://github.com/patternfly/patternfly/pull/5025))
+- **Dropdown, select, context selector:** Added static variation for menu ([#4986](https://github.com/patternfly/patternfly/pull/4986))
+- **Expandable section:**
+  * Added truncate variant ([#5001](https://github.com/patternfly/patternfly/pull/5001))
+  * Fixed top margin on detached truncate toggle ([#5045](https://github.com/patternfly/patternfly/pull/5045))
+- **Menu:** Removed footer bottom border when scrollable ([#5002](https://github.com/patternfly/patternfly/pull/5002))
+- **Page:** Added full-height modifier ([#5018](https://github.com/patternfly/patternfly/pull/5018))
+- **Search input:** Added collapsible variant ([#4827](https://github.com/patternfly/patternfly/pull/4827))
+- **Table:** Added max-height support to outerscroll container ([#5039](https://github.com/patternfly/patternfly/pull/5039))
+- **Timestamp:** Added outline-offset and fixed trailing whitespace ([#5047](https://github.com/patternfly/patternfly/pull/5047))
+
+### Other
+- **Global:** Added custom property to allow override of root font-size ([#5032](https://github.com/patternfly/patternfly/pull/5032))
+- **Theme:**
+  * Adjusted dark theme colors ([#5020](https://github.com/patternfly/patternfly/pull/5020))
+  * Improved contrast of dark theme red-8888, warning button text ([#5041](https://github.com/patternfly/patternfly/pull/5041))
+- **Workspace:** Fixed a11y violations in data-list and toolbar ([#5015](https://github.com/patternfly/patternfly/pull/5015))
+
+
 ## 2022.10 release notes (2022-08-04)
 Packages released:
 - [@patternfly/patternfly@v4.206.3](https://www.npmjs.com/package/@patternfly/patternfly/v/4.206.3)

package/components/ExpandableSection/expandable-section.css

@@ -85,6 +85,9 @@
   -webkit-line-clamp: var(--pf-c-expandable-section--m-truncate__content--LineClamp);
   overflow: hidden;
 }
+.pf-c-expandable-section.pf-m-detached {
+  --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
+}
 
 .pf-c-expandable-section__toggle {
   display: flex;

package/components/ExpandableSection/expandable-section.scss

@@ -112,6 +112,10 @@
       overflow: hidden;
     }
   }
+
+  &.pf-m-detached {
+    --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
+  }
 }
 
 .pf-c-expandable-section__toggle {

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.                             |