@patternfly/patternfly 4.210.1 → 4.212.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/LogViewer/log-viewer.css

@@ -46,18 +46,19 @@
   --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
   --pf-c-log-viewer__list--Height: auto;
   --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
+  --pf-c-log-viewer__list--FontFamily: var(--pf-global--FontFamily--monospace);
+  --pf-c-log-viewer__list--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__index--Display: none;
   --pf-c-log-viewer__index--Width: 4.0625rem;
   --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
   --pf-c-log-viewer__index--BackgroundColor: transparent;
+  --pf-c-log-viewer--line-number-chars: 4.4;
+  --pf-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-c-log-viewer--line-number-chars) + var(--pf-c-log-viewer__index--PaddingRight) + var(--pf-c-log-viewer__index--PaddingLeft));
   --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
   --pf-c-log-viewer__text--WordBreak: break-all;
   --pf-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -114,6 +115,10 @@
   content: "";
   background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
 }
+.pf-c-log-viewer.pf-m-line-number-chars {
+  --pf-c-log-viewer__index--PaddingRight: var(--pf-c-log-viewer--m-line-number-chars__index--PaddingRight);
+  --pf-c-log-viewer__index--Width: var(--pf-c-log-viewer--m-line-number-chars__index--Width);
+}
 .pf-c-log-viewer .pf-c-toolbar {
   --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
   --pf-c-toolbar--PaddingBottom: var(--pf-c-log-viewer--c-toolbar--PaddingBottom);
@@ -154,6 +159,8 @@
 .pf-c-log-viewer__list {
   position: relative;
   height: var(--pf-c-log-viewer__list--Height);
+  font-family: var(--pf-c-log-viewer__list--FontFamily);
+  font-size: var(--pf-c-log-viewer__list--FontSize);
 }
 
 .pf-c-log-viewer__list-item {
@@ -177,8 +184,8 @@
   width: var(--pf-c-log-viewer__index--Width);
   padding-right: var(--pf-c-log-viewer__index--PaddingRight);
   padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
-  font-family: var(--pf-c-log-viewer__index--FontFamily);
-  font-size: var(--pf-c-log-viewer__index--FontSize);
+  font-family: var(--pf-c-log-viewer__index--FontFamily, inherit);
+  font-size: var(--pf-c-log-viewer__index--FontSize, inherit);
   color: var(--pf-c-log-viewer__index--Color);
   user-select: none;
   background-color: var(--pf-c-log-viewer__index--BackgroundColor);
@@ -188,8 +195,8 @@
   display: block;
   padding-right: var(--pf-c-log-viewer__text--PaddingRight);
   padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
-  font-family: var(--pf-c-log-viewer__text--FontFamily);
-  font-size: var(--pf-c-log-viewer__text--FontSize);
+  font-family: var(--pf-c-log-viewer__text--FontFamily, inherit);
+  font-size: var(--pf-c-log-viewer__text--FontSize, inherit);
   color: var(--pf-c-log-viewer__text--Color);
   word-break: var(--pf-c-log-viewer__text--WordBreak);
   white-space: var(--pf-c-log-viewer__text--WhiteSpace);

package/components/LogViewer/log-viewer.scss

@@ -25,22 +25,23 @@
   // List
   --pf-c-log-viewer__list--Height: auto;
   --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
+  --pf-c-log-viewer__list--FontFamily: var(--pf-global--FontFamily--monospace);
+  --pf-c-log-viewer__list--FontSize: var(--pf-global--FontSize--sm);
 
   // Index
   --pf-c-log-viewer__index--Display: none;
   --pf-c-log-viewer__index--Width: #{pf-size-prem(65px)}; // default width
   --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-log-viewer__index--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
   --pf-c-log-viewer__index--BackgroundColor: transparent;
+  --pf-c-log-viewer--line-number-chars: 4.4; // it's close enough to the existing default
+  --pf-c-log-viewer--m-line-number-chars__index--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-log-viewer--m-line-number-chars__index--Width: calc(1ch * var(--pf-c-log-viewer--line-number-chars) + var(--pf-c-log-viewer__index--PaddingRight) + var(--pf-c-log-viewer__index--PaddingLeft));
 
   // Text
   --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
   --pf-c-log-viewer__text--WordBreak: break-all;
   --pf-c-log-viewer__text--WhiteSpace: break-spaces;
@@ -113,6 +114,11 @@
     }
   }
 
+  &.pf-m-line-number-chars {
+    --pf-c-log-viewer__index--PaddingRight: var(--pf-c-log-viewer--m-line-number-chars__index--PaddingRight);
+    --pf-c-log-viewer__index--Width: var(--pf-c-log-viewer--m-line-number-chars__index--Width);
+  }
+
   // Nested toolbar
   .pf-c-toolbar {
     --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
@@ -160,6 +166,8 @@
 .pf-c-log-viewer__list {
   position: relative;
   height: var(--pf-c-log-viewer__list--Height);
+  font-family: var(--pf-c-log-viewer__list--FontFamily);
+  font-size: var(--pf-c-log-viewer__list--FontSize);
 }
 
 .pf-c-log-viewer__list-item {
@@ -187,8 +195,8 @@
   width: var(--pf-c-log-viewer__index--Width);
   padding-right: var(--pf-c-log-viewer__index--PaddingRight);
   padding-left: var(--pf-c-log-viewer__index--PaddingLeft);
-  font-family: var(--pf-c-log-viewer__index--FontFamily);
-  font-size: var(--pf-c-log-viewer__index--FontSize);
+  font-family: var(--pf-c-log-viewer__index--FontFamily, inherit);
+  font-size: var(--pf-c-log-viewer__index--FontSize, inherit);
   color: var(--pf-c-log-viewer__index--Color);
   user-select: none;
   background-color: var(--pf-c-log-viewer__index--BackgroundColor);
@@ -199,8 +207,8 @@
   display: block;
   padding-right: var(--pf-c-log-viewer__text--PaddingRight);
   padding-left: var(--pf-c-log-viewer__text--PaddingLeft);
-  font-family: var(--pf-c-log-viewer__text--FontFamily);
-  font-size: var(--pf-c-log-viewer__text--FontSize);
+  font-family: var(--pf-c-log-viewer__text--FontFamily, inherit);
+  font-size: var(--pf-c-log-viewer__text--FontSize, inherit);
   color: var(--pf-c-log-viewer__text--Color);
   word-break: var(--pf-c-log-viewer__text--WordBreak);
   white-space: var(--pf-c-log-viewer__text--WhiteSpace);

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>