@patternfly/patternfly 4.198.0 → 4.199.0

package/base/_variables.scss

@@ -198,6 +198,13 @@
   --pf-global--breakpoint--xl: #{$pf-global--breakpoint--xl};
   --pf-global--breakpoint--2xl: #{$pf-global--breakpoint--2xl};
 
+  // Vertical breakpoints
+  --pf-global--height-breakpoint--sm: #{$pf-global--height-breakpoint--sm};
+  --pf-global--height-breakpoint--md: #{$pf-global--height-breakpoint--md};
+  --pf-global--height-breakpoint--lg: #{$pf-global--height-breakpoint--lg};
+  --pf-global--height-breakpoint--xl: #{$pf-global--height-breakpoint--xl};
+  --pf-global--height-breakpoint--2xl: #{$pf-global--height-breakpoint--2xl};
+
   // Links
   --pf-global--link--Color: #{$pf-global--link--Color};
   --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};

package/base/patternfly-variables.css

@@ -171,6 +171,11 @@
   --pf-global--breakpoint--lg: 992px;
   --pf-global--breakpoint--xl: 1200px;
   --pf-global--breakpoint--2xl: 1450px;
+  --pf-global--height-breakpoint--sm: 0;
+  --pf-global--height-breakpoint--md: 40rem;
+  --pf-global--height-breakpoint--lg: 48rem;
+  --pf-global--height-breakpoint--xl: 60rem;
+  --pf-global--height-breakpoint--2xl: 80rem;
   --pf-global--link--Color: #06c;
   --pf-global--link--Color--hover: #004080;
   --pf-global--link--Color--light: #2b9af3;

package/components/Page/page.css

@@ -497,30 +497,6 @@
 .pf-c-page__main-subnav {
   flex-shrink: 0;
 }
-.pf-c-page__main-nav.pf-m-sticky-top,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top,
-.pf-c-page__main-tabs.pf-m-sticky-top,
-.pf-c-page__main-section.pf-m-sticky-top,
-.pf-c-page__main-wizard.pf-m-sticky-top,
-.pf-c-page__main-group.pf-m-sticky-top,
-.pf-c-page__main-subnav.pf-m-sticky-top {
-  position: sticky;
-  top: 0;
-  z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
-  box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
-}
-.pf-c-page__main-nav.pf-m-sticky-bottom,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
-.pf-c-page__main-tabs.pf-m-sticky-bottom,
-.pf-c-page__main-section.pf-m-sticky-bottom,
-.pf-c-page__main-wizard.pf-m-sticky-bottom,
-.pf-c-page__main-group.pf-m-sticky-bottom,
-.pf-c-page__main-subnav.pf-m-sticky-bottom {
-  position: sticky;
-  bottom: 0;
-  z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
-  box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
-}
 .pf-c-page__main-nav.pf-m-overflow-scroll,
 .pf-c-page__main-breadcrumb.pf-m-overflow-scroll,
 .pf-c-page__main-tabs.pf-m-overflow-scroll,
@@ -552,6 +528,160 @@
   z-index: var(--pf-c-page--section--m-shadow-top--ZIndex);
   box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
 }
+.pf-c-page__main-nav.pf-m-sticky-top,
+.pf-c-page__main-breadcrumb.pf-m-sticky-top,
+.pf-c-page__main-tabs.pf-m-sticky-top,
+.pf-c-page__main-section.pf-m-sticky-top,
+.pf-c-page__main-wizard.pf-m-sticky-top,
+.pf-c-page__main-group.pf-m-sticky-top,
+.pf-c-page__main-subnav.pf-m-sticky-top {
+  position: sticky;
+  top: 0;
+  z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
+  box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
+}
+.pf-c-page__main-nav.pf-m-sticky-bottom,
+.pf-c-page__main-breadcrumb.pf-m-sticky-bottom,
+.pf-c-page__main-tabs.pf-m-sticky-bottom,
+.pf-c-page__main-section.pf-m-sticky-bottom,
+.pf-c-page__main-wizard.pf-m-sticky-bottom,
+.pf-c-page__main-group.pf-m-sticky-bottom,
+.pf-c-page__main-subnav.pf-m-sticky-bottom {
+  position: sticky;
+  bottom: 0;
+  z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
+  box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
+}
+@media (min-height: 0) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height,
+.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
+.pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
+.pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
+.pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
+.pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
+.pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
+    position: sticky;
+    top: 0;
+    z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
+    box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
+  }
+  .pf-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
+.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
+.pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
+.pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
+.pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
+.pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
+.pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
+    box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
+  }
+}
+@media (min-height: 40rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-md-height,
+.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
+.pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
+.pf-c-page__main-section.pf-m-sticky-top-on-md-height,
+.pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
+.pf-c-page__main-group.pf-m-sticky-top-on-md-height,
+.pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
+    position: sticky;
+    top: 0;
+    z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
+    box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
+  }
+  .pf-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
+.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
+.pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
+.pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
+.pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
+.pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
+.pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
+    box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
+  }
+}
+@media (min-height: 48rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height,
+.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
+.pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
+.pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
+.pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
+.pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
+.pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
+    position: sticky;
+    top: 0;
+    z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
+    box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
+  }
+  .pf-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
+.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
+.pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
+.pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
+.pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
+.pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
+.pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
+    box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
+  }
+}
+@media (min-height: 60rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height,
+.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
+.pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
+.pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
+.pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
+.pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
+.pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
+    position: sticky;
+    top: 0;
+    z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
+    box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
+  }
+  .pf-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
+.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
+.pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
+.pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
+.pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
+.pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
+.pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
+    box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
+  }
+}
+@media (min-height: 80rem) {
+  .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
+.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
+.pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
+.pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
+.pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
+.pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
+.pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
+    position: sticky;
+    top: 0;
+    z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
+    box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
+  }
+  .pf-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
+.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
+.pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
+.pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
+.pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
+.pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
+.pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
+    position: sticky;
+    bottom: 0;
+    z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
+    box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
+  }
+}
 
 .pf-c-page__main,
 .pf-c-page__drawer {

package/components/Page/page.scss

@@ -1,4 +1,5 @@
 $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
 // URL.com/guidelines#layout
 .pf-c-page {
@@ -477,20 +478,6 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
 .pf-c-page__main-subnav {
   flex-shrink: 0;
 
-  &.pf-m-sticky-top {
-    position: sticky;
-    top: 0;
-    z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
-    box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
-  }
-
-  &.pf-m-sticky-bottom {
-    position: sticky;
-    bottom: 0;
-    z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
-    box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
-  }
-
   &.pf-m-overflow-scroll {
     position: relative;
     flex-shrink: 1;
@@ -506,6 +493,28 @@ $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl",
     z-index: var(--pf-c-page--section--m-shadow-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-shadow-top--BoxShadow);
   }
+
+  // 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} {
+        position: sticky;
+        top: 0;
+        z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
+        box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
+      }
+
+      &.pf-m-sticky-bottom#{$breakpoint-name} {
+        position: sticky;
+        bottom: 0;
+        z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
+        box-shadow: var(--pf-c-page--section--m-sticky-bottom--BoxShadow);
+      }
+    }
+  }
 }
 
 // Main & Drawer

package/components/ProgressStepper/progress-stepper.css

@@ -223,6 +223,7 @@
   font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
   color: var(--pf-c-progress-stepper__step-title--Color);
   text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
+  border: 0;
 }
 .pf-c-progress-stepper__step-title.pf-m-help-text {
   text-decoration: underline;

package/components/ProgressStepper/progress-stepper.scss

@@ -272,6 +272,7 @@
   font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
   color: var(--pf-c-progress-stepper__step-title--Color);
   text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
+  border: 0;
 
   &.pf-m-help-text {
     text-decoration: underline;

package/components/Table/table.css

@@ -304,12 +304,14 @@
   border-bottom: 0;
 }
 .pf-c-table.pf-m-sticky-header > thead > tr > * {
+  z-index: var(--pf-global--ZIndex--xs);
+}
+.pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
   position: sticky;
   top: 0;
-  z-index: var(--pf-global--ZIndex--xs);
   background: var(--pf-c-table--BackgroundColor);
 }
-.pf-c-table.pf-m-sticky-header > thead > tr > *::after {
+.pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > *::after {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -317,6 +319,27 @@
   content: "";
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--pf-global--ZIndex--xs);
+  background: var(--pf-c-table--BackgroundColor);
+}
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header > .pf-m-border-row {
+  height: var(--pf-c-table--border-width--base);
+  background-color: var(--pf-c-table--BorderColor);
+}
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) th:not([rowspan]),
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) td:not([rowspan]) {
+  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+}
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) {
+  border-bottom: 0;
+}
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
+  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+}
 .pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
 .pf-c-table > .pf-m-striped > tr:nth-child(odd),
 .pf-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -414,13 +437,6 @@
 .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
 }
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) {
-  --pf-c-table--border-width--base: 0;
-}
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
-  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
-}
 .pf-c-table thead .pf-c-table__subhead {
   --pf-c-table__sort__button__text--Color: var(--pf-c-table__subhead--Color);
   color: var(--pf-c-table__subhead--Color);

package/components/Table/table.scss

@@ -330,9 +330,15 @@
       border-bottom: 0;
 
       > * {
+        z-index: var(--pf-global--ZIndex--xs); // set z-index here to allow sticky column to override
+      }
+    }
+
+    // standard sticky headers
+    > thead:not(.pf-m-nested-column-header) {
+      > tr > * {
         position: sticky;
         top: 0;
-        z-index: var(--pf-global--ZIndex--xs);
         background: var(--pf-c-table--BackgroundColor);
 
         // stylelint-disable-next-line
@@ -346,6 +352,45 @@
         }
       }
     }
+
+    // nested column header
+    > .pf-m-nested-column-header {
+      position: sticky;
+      top: 0;
+      z-index: var(--pf-global--ZIndex--xs);
+      background: var(--pf-c-table--BackgroundColor);
+
+      > .pf-m-border-row {
+        height: var(--pf-c-table--border-width--base);
+        background-color: var(--pf-c-table--BorderColor);
+      }
+
+      tr:not(:nth-last-child(2)) {
+        // stylelint-disable max-nesting-depth
+        th,
+        td {
+          &:not([rowspan]) {
+            --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+          }
+        }
+        // stylelint-enable
+      }
+    }
+  }
+
+  &:not(.pf-m-sticky-header) > .pf-m-nested-column-header {
+    tr:not(:last-child) {
+      border-bottom: 0; // hard reset tr borders in nested headers
+
+      // stylelint-disable max-nesting-depth
+      th,
+      td {
+        &:not([rowspan]) {
+          --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+        }
+      }
+      // stylelint-enable
+    }
   }
 
   // For regular and expandable tables
@@ -488,16 +533,6 @@
         }
       }
 
-      tr:not(:last-child) {
-        --pf-c-table--border-width--base: 0; // hard reset tr borders in nested headers
-
-        th,
-        td {
-          &:not([rowspan]) {
-            --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
-          }
-        }
-      }
     }
     // stylelint-enable
 

package/components/Tabs/tabs.css

@@ -122,6 +122,15 @@
   --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
   --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
   --pf-c-tabs__add--c-button--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
+  --pf-c-tabs__link-toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
+  --pf-c-tabs__link-toggle-icon--Rotate: 0;
+  --pf-c-tabs__link-toggle-icon--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-tabs__link--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-c-tabs__link--hover__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-tabs__link--active__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-tabs__link--focus__toggle-icon--Color: var(--pf-global--Color--100);
   position: relative;
   display: flex;
   width: var(--pf-c-tabs--Width);
@@ -550,6 +559,15 @@
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
 }
 
+.pf-c-tabs__link:hover {
+  --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);
+}
+.pf-c-tabs__link:focus {
+  --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--focus__toggle-icon--Color);
+}
+.pf-c-tabs__link:active, .pf-c-tabs__link.pf-m-active {
+  --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--active__toggle-icon--Color);
+}
 .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
   pointer-events: none;
 }
@@ -573,6 +591,18 @@
 .pf-c-tabs__link .pf-c-tabs__item-text:last-child {
   --pf-c-tabs__link--child--MarginRight: 0;
 }
+.pf-c-tabs__link.pf-m-expanded {
+  --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--m-expanded__toggle-icon--Color);
+  --pf-c-tabs__link-toggle-icon--Rotate: var(--pf-c-tabs__link--m-expanded__toggle-icon--Rotate);
+}
+
+.pf-c-tabs__link-toggle-icon {
+  align-self: end;
+  font-size: var(--pf-c-tabs__link-toggle-icon--FontSize);
+  color: var(--pf-c-tabs__link-toggle-icon--Color);
+  transition: var(--pf-c-tabs__link-toggle-icon--Transition);
+  transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
+}
 
 .pf-c-tabs__item-close {
   display: flex;

package/components/Tabs/tabs.scss

@@ -156,6 +156,17 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
   --pf-c-tabs__add--c-button--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
 
+  // Overflow menu toggle icon
+  --pf-c-tabs__link-toggle-icon--Color: var(--pf-global--Color--200);
+  --pf-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
+  --pf-c-tabs__link-toggle-icon--Rotate: 0;
+  --pf-c-tabs__link-toggle-icon--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-tabs__link--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-c-tabs__link--hover__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-tabs__link--active__toggle-icon--Color: var(--pf-global--Color--100);
+  --pf-c-tabs__link--focus__toggle-icon--Color: var(--pf-global--Color--100);
+
   @media screen and (min-width: $pf-global--breakpoint--xl) {
     --pf-c-tabs__scroll-button--Width: var(--pf-c-tabs__scroll-button--xl--Width);
     --pf-c-tabs--m-page-insets--inset: var(--pf-c-tabs--m-page-insets--xl--inset);
@@ -628,6 +639,19 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
     }
   }
 
+  &:hover {
+    --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);
+  }
+
+  &:focus {
+    --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--focus__toggle-icon--Color);
+  }
+
+  &:active,
+  &.pf-m-active {
+    --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--active__toggle-icon--Color);
+  }
+
   &:disabled,
   &.pf-m-disabled {
     pointer-events: none;
@@ -658,6 +682,19 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
       --pf-c-tabs__link--child--MarginRight: 0;
     }
   }
+
+  &.pf-m-expanded {
+    --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--m-expanded__toggle-icon--Color);
+    --pf-c-tabs__link-toggle-icon--Rotate: var(--pf-c-tabs__link--m-expanded__toggle-icon--Rotate);
+  }
+}
+
+.pf-c-tabs__link-toggle-icon {
+  align-self: end;
+  font-size: var(--pf-c-tabs__link-toggle-icon--FontSize);
+  color: var(--pf-c-tabs__link-toggle-icon--Color);
+  transition: var(--pf-c-tabs__link-toggle-icon--Transition);
+  transform: rotate(var(--pf-c-tabs__link-toggle-icon--Rotate));
 }
 
 .pf-c-tabs__item-close {

package/docs/components/Page/examples/Page.md

@@ -224,8 +224,8 @@ This component provides the basic chrome for a page, including sidebar, header,
 | `.pf-m-visible{-on-[breakpoint]}`                        | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                            |
 | `.pf-m-limit-width`                                      | `.pf-c-page__main-section`                                        | Modifies a page section to limit the `max-width` of the content inside.                                                                                                                                                                                       |
 | `.pf-m-align-center`                                     | `.pf-c-page__main-section.pf-m-limit-width`                       | Modifies a page section body to align center.                                                                                                                                                                                                                 |
-| `.pf-m-sticky-top`                                       | `.pf-c-page__main-*`                                              | Modifies a section/group to be sticky to the top of its container.                                                                                                                                                                                            |
-| `.pf-m-sticky-bottom`                                    | `.pf-c-page__main-*`                                              | Modifies a section/group to be sticky to the bottom of its container.                                                                                                                                                                                         |
+| `.pf-m-sticky-top{-on-[breakpoint]-height}`              | `.pf-c-page__main-*`                                              | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint.                                                                                                                                                           |
+| `.pf-m-sticky-bottom{-on-[breakpoint]-height}`           | `.pf-c-page__main-*`                                              | Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint.                                                                                                                                                        |
 | `.pf-m-shadow-bottom`                                    | `.pf-c-page__main-*`                                              | Modifies a section/group to have a bottom shadow.                                                                                                                                                                                                             |
 | `.pf-m-shadow-top`                                       | `.pf-c-page__main-*`                                              | Modifies a section/group to have a top shadow.                                                                                                                                                                                                                |
 | `.pf-m-overflow-scroll`                                  | `.pf-c-page__main-*`                                              | Modifies a section/group to show a scrollbar if it has overflow content.                                                                                                                                                                                      |

package/docs/components/ProgressStepper/examples/ProgressStepper.md

@@ -470,12 +470,10 @@ cssPrefix: pf-c-progress-stepper
       </span>
     </div>
     <div class="pf-c-progress-stepper__step-main">
-      <span
+      <button
         class="pf-c-progress-stepper__step-title pf-m-help-text"
-        role="button"
         type="button"
-        tabindex="0"
-      >First step</span>
+      >First step</button>
     </div>
   </li>
   <li
@@ -488,12 +486,10 @@ cssPrefix: pf-c-progress-stepper
       </span>
     </div>
     <div class="pf-c-progress-stepper__step-main">
-      <span
+      <button
         class="pf-c-progress-stepper__step-title pf-m-help-text"
-        role="button"
         type="button"
-        tabindex="0"
-      >Second step</span>
+      >Second step</button>
     </div>
   </li>
   <li
@@ -506,12 +502,10 @@ cssPrefix: pf-c-progress-stepper
       </span>
     </div>
     <div class="pf-c-progress-stepper__step-main">
-      <span
+      <button
         class="pf-c-progress-stepper__step-title pf-m-help-text"
-        role="button"
         type="button"
-        tabindex="0"
-      >Third step</span>
+      >Third step</button>
     </div>
   </li>
   <li
@@ -555,7 +549,7 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, and
 | `.progress-stepper__step-connector`   | `<div>`                              | Creates the connecting line between steps **Required**                                                                                                             |
 | `.progress-stepper__step-icon`        | `<span>`                             | Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. **Required** |
 | `.progress-stepper__step-main`        | `<div>`                              | Contains the main text content of the step. This element is required, but may be empty if title and description are not used. **Required**                         |
-| `.progress-stepper__step-title`       | `<div>`                              | Contains the title of the step.                                                                                                                                    |
+| `.progress-stepper__step-title`       | `<div>`, `<button>`                  | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text.            |
 | `.progress-stepper__step-description` | `<div>`                              | Contains the description of the step.                                                                                                                              |
 | `.pf-m-center`                        | `.pf-c-progress-stepper`             | Modifies to center each step.                                                                                                                                      |
 | `.pf-m-vertical`                      | `.pf-c-progress-stepper`             | Modifies for vertical orientation.                                                                                                                                 |