@patternfly/patternfly 4.206.0 → 4.206.3

package/RELEASE-NOTES.md

@@ -3,6 +3,47 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 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)
+
+### Components
+- **Description list:** Removed dl group mod in examples ([#4993](https://github.com/patternfly/patternfly/pull/4993))
+- **Drawer:**
+  - Fixed sticky page sections when in drawer ([#4971](https://github.com/patternfly/patternfly/pull/4971))
+  - Fixed broken var names ([#4950](https://github.com/patternfly/patternfly/pull/4950))
+- **Form control:** Fixed disabled text color ([#4988](https://github.com/patternfly/patternfly/pull/4988))
+- **Menu:**
+  - Adjusted group title text ([#4917](https://github.com/patternfly/patternfly/pull/4917))
+  - Fixed non-visible drilldown submenu VO issue ([#4980](https://github.com/patternfly/patternfly/pull/4980))
+- **Number input:** Added support for status icon ([#4983](https://github.com/patternfly/patternfly/pull/4983))
+- **Page:** Fixed sticky-on section padding ([#5011](https://github.com/patternfly/patternfly/pull/5011))
+- **Popover:** Aligned edge of close button icon with content ([#4998](https://github.com/patternfly/patternfly/pull/4998))
+- **Sidebar:** Added light/dark theme border, remove desktop shadow ([#4938](https://github.com/patternfly/patternfly/pull/4938))
+- **Table:**
+  - Added aria-hidden to table border row ([#4923](https://github.com/patternfly/patternfly/pull/4923))
+  - Removed truncate from sticky hrs ([#4981](https://github.com/patternfly/patternfly/pull/4981))
+- **Tabs:** Added overflow variation for horiz overflow variation ([#5005](https://github.com/patternfly/patternfly/pull/5005))
+- **Timestamp:** Added component ([#4996](https://github.com/patternfly/patternfly/pull/4996))
+- **Tree view:**
+  - Added selectable/expandable, improved click areas ([#4869](https://github.com/patternfly/patternfly/pull/4869))
+  - Fixed selectable/expandable node bugs ([#4991](https://github.com/patternfly/patternfly/pull/4991))
+
+### Other
+- **Build:**
+  - Update docs framework ([#4934](https://github.com/patternfly/patternfly/pull/4934))
+  - Updated github workflow to publish docs before a11y tests ([#4967](https://github.com/patternfly/patternfly/pull/4967))
+  - Enable a11y attr check, update modal and popover docs ([#4977](https://github.com/patternfly/patternfly/pull/4977))
+- **Global:**
+  - Added full height/absolute mods for screen reader class ([#4888](https://github.com/patternfly/patternfly/pull/4888))
+  - Updated dark theme visited link color ([#4964](https://github.com/patternfly/patternfly/pull/4964))
+- **Workspace:**
+  - Fixed duplicate IDs in example docs ([#4928](https://github.com/patternfly/patternfly/pull/4928))
+  - Enabled dark theme switch ([#4937](https://github.com/patternfly/patternfly/pull/4937))
+  - Removed react css imports ([#4953](https://github.com/patternfly/patternfly/pull/4953))
+- **Utilities:** Adjusted utility colors in dark theme ([#4933](https://github.com/patternfly/patternfly/pull/4933))
+
+
 ## 2022.08 release notes (2022-06-24)
 Packages released:
 - [@patternfly/patternfly@v4.202.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.202.1)

package/components/Page/page.css

@@ -715,6 +715,31 @@
 .pf-c-page__main-nav.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-nav:last-child {
   padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
 }
+@media (min-height: 0) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-nav:last-child {
+    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 40rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-nav:last-child {
+    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 48rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-nav:last-child {
+    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 60rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-nav:last-child {
+    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 80rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-nav:last-child {
+    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  }
+}
 
 .pf-c-page__main-subnav {
   background-color: var(--pf-c-page__main-subnav--BackgroundColor);
@@ -740,6 +765,31 @@
 .pf-c-page__main-breadcrumb.pf-m-sticky-top, .pf-c-page__main-group.pf-m-sticky-top .pf-c-page__main-breadcrumb:last-child {
   --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
 }
+@media (min-height: 0) {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-c-page__main-breadcrumb:last-child {
+    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 40rem) {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-c-page__main-group.pf-m-sticky-top-on-md-height .pf-c-page__main-breadcrumb:last-child {
+    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 48rem) {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-c-page__main-breadcrumb:last-child {
+    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 60rem) {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-c-page__main-breadcrumb:last-child {
+    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  }
+}
+@media (min-height: 80rem) {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-c-page__main-breadcrumb:last-child {
+    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  }
+}
 
 .pf-c-page__main-tabs {
   padding: var(--pf-c-page__main-tabs--PaddingTop) var(--pf-c-page__main-tabs--PaddingRight) var(--pf-c-page__main-tabs--PaddingBottom) var(--pf-c-page__main-tabs--PaddingLeft);

package/components/Page/page.scss

@@ -548,9 +548,16 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
   padding-left: var(--pf-c-page__main-nav--PaddingLeft);
   background-color: var(--pf-c-page__main-nav--BackgroundColor);
 
-  &.pf-m-sticky-top,
-  .pf-c-page__main-group.pf-m-sticky-top &:last-child {
-    padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+  // Responsive height modifiers for sticky top/bottom
+  @each $breakpoint, $breakpoint-value in $pf-c-page--height-breakpoint-map {
+    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
+
+    @include pf-apply-height-breakpoint($breakpoint) {
+      &.pf-m-sticky-top#{$breakpoint-name},
+      .pf-c-page__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
+        padding-bottom: var(--pf-c-page__main-nav--m-sticky-top--PaddingBottom);
+      }
+    }
   }
 }
 
@@ -580,9 +587,16 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
     --pf-c-page__main-section--PaddingTop: var(--pf-c-page__main-breadcrumb--main-section--PaddingTop);
   }
 
-  &.pf-m-sticky-top,
-  .pf-c-page__main-group.pf-m-sticky-top &:last-child {
-    --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+  // Responsive height modifiers for sticky top/bottom
+  @each $breakpoint, $breakpoint-value in $pf-c-page--height-breakpoint-map {
+    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
+
+    @include pf-apply-height-breakpoint($breakpoint) {
+      &.pf-m-sticky-top#{$breakpoint-name},
+      .pf-c-page__main-group.pf-m-sticky-top#{$breakpoint-name} &:last-child {
+        --pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--m-sticky-top--PaddingBottom);
+      }
+    }
   }
 }
 

package/components/TreeView/tree-view.css

@@ -264,20 +264,14 @@
 .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
   --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
 }
-.pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
-}
-.pf-c-tree-view__node:hover,
-.pf-c-tree-view__node .pf-c-tree-view__node-toggle:hover {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover__icon--Color);
+.pf-c-tree-view__node:not(.pf-m-selectable):hover, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:hover {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover--Color);
 }
-.pf-c-tree-view__node:focus,
-.pf-c-tree-view__node .pf-c-tree-view__node-toggle:focus {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus__icon--Color);
+.pf-c-tree-view__node:not(.pf-m-selectable):focus, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:focus {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus--Color);
 }
-.pf-c-tree-view__node:active,
-.pf-c-tree-view__node .pf-c-tree-view__node-toggle:active {
-  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active__icon--Color);
+.pf-c-tree-view__node:not(.pf-m-selectable):active, .pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle:active {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active--Color);
 }
 
 .pf-c-tree-view__node-container {

package/components/TreeView/tree-view.scss

@@ -382,22 +382,18 @@ $pf-c-tree-view--MaxNesting: 10;
     }
   }
 
+  &:not(.pf-m-selectable),
   &.pf-m-selectable .pf-c-tree-view__node-toggle {
-    --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base); // resets hover/focus/active color when node triggers hover/focus/active color change
-  }
-
-  &,
-  .pf-c-tree-view__node-toggle {
     &:hover {
-      --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover__icon--Color);
+      --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover--Color);
     }
 
     &:focus {
-      --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus__icon--Color);
+      --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus--Color);
     }
 
     &:active {
-      --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active__icon--Color);
+      --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active--Color);
     }
   }
 }