@patternfly/react-styles 4.72.14 → 4.72.17

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.72.17 (2022-06-22)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 4.72.16 (2022-06-22)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 4.72.15 (2022-06-21)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## 4.72.14 (2022-06-17)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/DescriptionList/description-list.css

@@ -8,6 +8,7 @@
   --pf-c-description-list__group--RowGap: var(--pf-global--spacer--sm);
   --pf-c-description-list__group--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-description-list__group--GridTemplateColumns: auto;
+  --pf-c-description-list__group--GridTemplateRows: auto 1fr;
   --pf-c-description-list__group--GridColumn: auto;
   --pf-c-description-list--m-compact--RowGap: var(--pf-global--gutter);
   --pf-c-description-list--m-compact--ColumnGap: var(--pf-global--spacer--sm);
@@ -20,9 +21,11 @@
   --pf-c-description-list__term-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-description-list__term-icon--Color: var(--pf-global--icon--Color--light);
   --pf-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-c-description-list--GridTemplateColumns--count));
+  --pf-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
   --pf-c-description-list--m-horizontal__term--width: 12ch;
   --pf-c-description-list--m-horizontal__description--width: minmax(10ch, auto);
   --pf-c-description-list--m-horizontal__group--GridTemplateColumns: var(--pf-c-description-list__term--width) var(--pf-c-description-list--m-horizontal__description--width);
+  --pf-c-description-list--m-horizontal__group--GridTemplateRows: auto;
   --pf-c-description-list--m-1-col--GridTemplateColumns--count: 1;
   --pf-c-description-list--m-2-col--GridTemplateColumns--count: 2;
   --pf-c-description-list--m-3-col--GridTemplateColumns--count: 3;
@@ -33,6 +36,8 @@
   --pf-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
   --pf-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
   --pf-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-description-list--m-display-lg__description--FontSize: var(--pf-global--FontSize--lg);
+  --pf-c-description-list--m-display-2xl__description--FontSize: var(--pf-global--FontSize--2xl);
   display: grid;
   align-items: baseline;
   row-gap: var(--pf-c-description-list--RowGap);
@@ -119,7 +124,8 @@
   column-count: var(--pf-c-description-list--GridTemplateColumns--count);
   margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
 }
-.pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
+.pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group,
+.pf-c-description-list.pf-m-fill-columns > .pf-c-card {
   display: inline-grid;
   width: 100%;
   margin-bottom: var(--pf-c-description-list--RowGap);
@@ -128,13 +134,25 @@
   -webkit-column-break-inside: avoid;
   -moz-column-break-inside: avoid;
 }
+.pf-c-description-list.pf-m-display-lg {
+  --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-lg__description--FontSize);
+}
+.pf-c-description-list.pf-m-display-2xl {
+  --pf-c-description-list__description--FontSize: var(--pf-c-description-list--m-display-2xl__description--FontSize);
+}
+.pf-c-description-list > .pf-c-card {
+  align-self: stretch;
+  padding: var(--pf-c-card--first-child--PaddingTop) var(--pf-c-card--child--PaddingRight) var(--pf-c-card--child--PaddingBottom) var(--pf-c-card--child--PaddingLeft);
+}
 
-.pf-c-description-list__group {
+.pf-c-description-list__group,
+.pf-c-description-list > .pf-c-card {
   display: grid;
   grid-column: var(--pf-c-description-list__group--GridColumn);
   row-gap: var(--pf-c-description-list__group--RowGap);
   column-gap: var(--pf-c-description-list__group--ColumnGap);
   grid-template-columns: var(--pf-c-description-list__group--GridTemplateColumns);
+  grid-template-rows: var(--pf-c-description-list__group--GridTemplateRows);
   align-items: baseline;
 }
 
@@ -162,6 +180,10 @@
   color: var(--pf-c-description-list__term-icon--Color);
 }
 
+.pf-c-description-list__description {
+  font-size: var(--pf-c-description-list__description--FontSize, inherit);
+}
+
 .pf-c-description-list__text {
   min-width: 0;
 }
@@ -191,9 +213,11 @@
 }
 .pf-c-description-list.pf-m-horizontal {
   --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
+  --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
 }
 .pf-c-description-list.pf-m-vertical {
   --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
+  --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
 }
 @media (min-width: 576px) {
   .pf-c-description-list.pf-m-1-col-on-sm {
@@ -207,9 +231,11 @@
   }
   .pf-c-description-list.pf-m-horizontal-on-sm {
     --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
+    --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
   }
   .pf-c-description-list.pf-m-vertical-on-sm {
     --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
+    --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
   }
 }
 @media (min-width: 768px) {
@@ -224,9 +250,11 @@
   }
   .pf-c-description-list.pf-m-horizontal-on-md {
     --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
+    --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
   }
   .pf-c-description-list.pf-m-vertical-on-md {
     --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
+    --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
   }
 }
 @media (min-width: 992px) {
@@ -241,9 +269,11 @@
   }
   .pf-c-description-list.pf-m-horizontal-on-lg {
     --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
+    --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
   }
   .pf-c-description-list.pf-m-vertical-on-lg {
     --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
+    --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
   }
 }
 @media (min-width: 1200px) {
@@ -258,9 +288,11 @@
   }
   .pf-c-description-list.pf-m-horizontal-on-xl {
     --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
+    --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
   }
   .pf-c-description-list.pf-m-vertical-on-xl {
     --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
+    --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
   }
 }
 @media (min-width: 1450px) {
@@ -275,8 +307,10 @@
   }
   .pf-c-description-list.pf-m-horizontal-on-2xl {
     --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-horizontal__group--GridTemplateColumns);
+    --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-horizontal__group--GridTemplateRows);
   }
   .pf-c-description-list.pf-m-vertical-on-2xl {
     --pf-c-description-list__group--GridTemplateColumns: var(--pf-c-description-list--m-vertical__group--GridTemplateColumns);
+    --pf-c-description-list__group--GridTemplateRows: var(--pf-c-description-list--m-vertical__group--GridTemplateRows);
   }
 }

package/css/components/DescriptionList/description-list.d.ts

@@ -1,5 +1,6 @@
 import './description-list.css';
 declare const _default: {
+  "card": "pf-c-card",
   "descriptionList": "pf-c-description-list",
   "descriptionListDescription": "pf-c-description-list__description",
   "descriptionListGroup": "pf-c-description-list__group",
@@ -13,6 +14,8 @@ declare const _default: {
     "compact": "pf-m-compact",
     "fluid": "pf-m-fluid",
     "fillColumns": "pf-m-fill-columns",
+    "displayLg": "pf-m-display-lg",
+    "display_2xl": "pf-m-display-2xl",
     "helpText": "pf-m-help-text",
     "1Col": "pf-m-1-col",
     "2Col": "pf-m-2-col",

package/css/components/DescriptionList/description-list.js

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./description-list.css');
 exports.default = {
+  "card": "pf-c-card",
   "descriptionList": "pf-c-description-list",
   "descriptionListDescription": "pf-c-description-list__description",
   "descriptionListGroup": "pf-c-description-list__group",
@@ -15,6 +16,8 @@ exports.default = {
     "compact": "pf-m-compact",
     "fluid": "pf-m-fluid",
     "fillColumns": "pf-m-fill-columns",
+    "displayLg": "pf-m-display-lg",
+    "display_2xl": "pf-m-display-2xl",
     "helpText": "pf-m-help-text",
     "1Col": "pf-m-1-col",
     "2Col": "pf-m-2-col",

package/css/components/DescriptionList/description-list.mjs

@@ -1,5 +1,6 @@
 import('./description-list.css');
 export default {
+  "card": "pf-c-card",
   "descriptionList": "pf-c-description-list",
   "descriptionListDescription": "pf-c-description-list__description",
   "descriptionListGroup": "pf-c-description-list__group",
@@ -13,6 +14,8 @@ export default {
     "compact": "pf-m-compact",
     "fluid": "pf-m-fluid",
     "fillColumns": "pf-m-fill-columns",
+    "displayLg": "pf-m-display-lg",
+    "display_2xl": "pf-m-display-2xl",
     "helpText": "pf-m-help-text",
     "1Col": "pf-m-1-col",
     "2Col": "pf-m-2-col",

package/css/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/css/components/Page/page.d.ts

@@ -29,11 +29,21 @@ declare const _default: {
     "collapsed": "pf-m-collapsed",
     "limitWidth": "pf-m-limit-width",
     "alignCenter": "pf-m-align-center",
-    "stickyTop": "pf-m-sticky-top",
-    "stickyBottom": "pf-m-sticky-bottom",
     "overflowScroll": "pf-m-overflow-scroll",
     "shadowBottom": "pf-m-shadow-bottom",
     "shadowTop": "pf-m-shadow-top",
+    "stickyTop": "pf-m-sticky-top",
+    "stickyBottom": "pf-m-sticky-bottom",
+    "stickyTopOnSmHeight": "pf-m-sticky-top-on-sm-height",
+    "stickyBottomOnSmHeight": "pf-m-sticky-bottom-on-sm-height",
+    "stickyTopOnMdHeight": "pf-m-sticky-top-on-md-height",
+    "stickyBottomOnMdHeight": "pf-m-sticky-bottom-on-md-height",
+    "stickyTopOnLgHeight": "pf-m-sticky-top-on-lg-height",
+    "stickyBottomOnLgHeight": "pf-m-sticky-bottom-on-lg-height",
+    "stickyTopOnXlHeight": "pf-m-sticky-top-on-xl-height",
+    "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
+    "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
+    "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
     "fill": "pf-m-fill",
     "noFill": "pf-m-no-fill",
     "light_100": "pf-m-light-100",

package/css/components/Page/page.js

@@ -31,11 +31,21 @@ exports.default = {
     "collapsed": "pf-m-collapsed",
     "limitWidth": "pf-m-limit-width",
     "alignCenter": "pf-m-align-center",
-    "stickyTop": "pf-m-sticky-top",
-    "stickyBottom": "pf-m-sticky-bottom",
     "overflowScroll": "pf-m-overflow-scroll",
     "shadowBottom": "pf-m-shadow-bottom",
     "shadowTop": "pf-m-shadow-top",
+    "stickyTop": "pf-m-sticky-top",
+    "stickyBottom": "pf-m-sticky-bottom",
+    "stickyTopOnSmHeight": "pf-m-sticky-top-on-sm-height",
+    "stickyBottomOnSmHeight": "pf-m-sticky-bottom-on-sm-height",
+    "stickyTopOnMdHeight": "pf-m-sticky-top-on-md-height",
+    "stickyBottomOnMdHeight": "pf-m-sticky-bottom-on-md-height",
+    "stickyTopOnLgHeight": "pf-m-sticky-top-on-lg-height",
+    "stickyBottomOnLgHeight": "pf-m-sticky-bottom-on-lg-height",
+    "stickyTopOnXlHeight": "pf-m-sticky-top-on-xl-height",
+    "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
+    "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
+    "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
     "fill": "pf-m-fill",
     "noFill": "pf-m-no-fill",
     "light_100": "pf-m-light-100",

package/css/components/Page/page.mjs

@@ -29,11 +29,21 @@ export default {
     "collapsed": "pf-m-collapsed",
     "limitWidth": "pf-m-limit-width",
     "alignCenter": "pf-m-align-center",
-    "stickyTop": "pf-m-sticky-top",
-    "stickyBottom": "pf-m-sticky-bottom",
     "overflowScroll": "pf-m-overflow-scroll",
     "shadowBottom": "pf-m-shadow-bottom",
     "shadowTop": "pf-m-shadow-top",
+    "stickyTop": "pf-m-sticky-top",
+    "stickyBottom": "pf-m-sticky-bottom",
+    "stickyTopOnSmHeight": "pf-m-sticky-top-on-sm-height",
+    "stickyBottomOnSmHeight": "pf-m-sticky-bottom-on-sm-height",
+    "stickyTopOnMdHeight": "pf-m-sticky-top-on-md-height",
+    "stickyBottomOnMdHeight": "pf-m-sticky-bottom-on-md-height",
+    "stickyTopOnLgHeight": "pf-m-sticky-top-on-lg-height",
+    "stickyBottomOnLgHeight": "pf-m-sticky-bottom-on-lg-height",
+    "stickyTopOnXlHeight": "pf-m-sticky-top-on-xl-height",
+    "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
+    "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
+    "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
     "fill": "pf-m-fill",
     "noFill": "pf-m-no-fill",
     "light_100": "pf-m-light-100",