@patternfly/react-core 4.251.1 → 4.251.3

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.251.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.251.2...@patternfly/react-core@4.251.3) (2022-10-14)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## [4.251.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.251.1...@patternfly/react-core@4.251.2) (2022-10-14)
+
+
+### Bug Fixes
+
+* **JumpLinks:** clean up demo in a drawer ([#8182](https://github.com/patternfly/patternfly-react/issues/8182)) ([d8e5b91](https://github.com/patternfly/patternfly-react/commit/d8e5b91c74957bc0dc4825e519721191f9f0427e))
+
+
+
+
+
 ## [4.251.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.251.0...@patternfly/react-core@4.251.1) (2022-10-13)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.min.css

@@ -3628,6 +3628,44 @@ label.pf-c-check, .pf-c-check__label,
   border: 0;
 }
 
+.pf-c-code-block {
+  --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
+  --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
+  --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
+  background-color: var(--pf-c-code-block--BackgroundColor);
+}
+
+.pf-c-code-block__header {
+  display: flex;
+  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
+}
+
+.pf-c-code-block__actions {
+  display: flex;
+  margin-left: auto;
+}
+
+.pf-c-code-block__content {
+  padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
+}
+
+.pf-c-code-block__pre {
+  font-family: var(--pf-c-code-block__pre--FontFamily);
+  font-size: var(--pf-c-code-block__pre--FontSize);
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.pf-c-code-block__code {
+  font-family: var(--pf-c-code-block__code--FontFamily, inherit);
+}
+
 .pf-c-context-selector__menu {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -3962,44 +4000,6 @@ label.pf-c-check, .pf-c-check__label,
   border-top: 1px solid var(--pf-global--BorderColor--300);
 }
 
-.pf-c-code-block {
-  --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
-  --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
-  background-color: var(--pf-c-code-block--BackgroundColor);
-}
-
-.pf-c-code-block__header {
-  display: flex;
-  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
-}
-
-.pf-c-code-block__actions {
-  display: flex;
-  margin-left: auto;
-}
-
-.pf-c-code-block__content {
-  padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
-}
-
-.pf-c-code-block__pre {
-  font-family: var(--pf-c-code-block__pre--FontFamily);
-  font-size: var(--pf-c-code-block__pre--FontSize);
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.pf-c-code-block__code {
-  font-family: var(--pf-c-code-block__code--FontFamily, inherit);
-}
-
 .pf-c-data-list {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -5474,67 +5474,6 @@ label.pf-c-check, .pf-c-check__label,
     overflow-y: visible;
   }
 }
-.pf-c-date-picker {
-  --pf-c-date-picker--m-top__calendar--Top: 0;
-  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
-  --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
-  --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
-  --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
-  --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
-  --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
-  --pf-c-date-picker__input--c-form-control--width-chars: 10;
-  --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
-  --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
-  --pf-c-date-picker__calendar--Right: auto;
-  --pf-c-date-picker__calendar--Left: 0;
-  --pf-c-date-picker__calendar--m-align-right--Right: 0;
-  --pf-c-date-picker__calendar--m-align-right--Left: auto;
-  position: relative;
-  display: inline-block;
-}
-
-.pf-c-date-picker__helper-text {
-  margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
-  font-size: var(--pf-c-date-picker__helper-text--FontSize);
-  color: var(--pf-c-date-picker__helper-text--Color);
-}
-
-.pf-c-date-picker__helper-text.pf-m-error {
-  --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
-}
-
-.pf-c-date-picker__input .pf-c-form-control {
-  width: var(--pf-c-date-picker__input--c-form-control--Width);
-}
-
-.pf-c-date-picker__calendar {
-  position: absolute;
-  top: var(--pf-c-date-picker__calendar--Top);
-  right: var(--pf-c-date-picker__calendar--Right);
-  left: var(--pf-c-date-picker__calendar--Left);
-  z-index: var(--pf-c-date-picker__calendar--ZIndex);
-  background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
-  box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
-}
-
-.pf-c-date-picker__calendar.pf-m-align-right {
-  --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
-  --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
-}
-
-.pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
-  --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
-  transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
-}
-
-:where(.pf-theme-dark) .pf-c-date-picker {
-  --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-date-picker__calendar--Top: 100%;
-}
-
 .pf-c-description-list {
   --pf-c-description-list--RowGap: var(--pf-global--gutter--md);
   --pf-c-description-list--ColumnGap: var(--pf-global--spacer--lg);
@@ -7285,6 +7224,67 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-drawer__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
 }
 
+.pf-c-date-picker {
+  --pf-c-date-picker--m-top__calendar--Top: 0;
+  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
+  --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
+  --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
+  --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
+  --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
+  --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
+  --pf-c-date-picker__input--c-form-control--width-chars: 10;
+  --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
+  --pf-c-date-picker__calendar--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-date-picker__calendar--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-date-picker__calendar--Top: calc(100% + var(--pf-global--spacer--xs));
+  --pf-c-date-picker__calendar--Right: auto;
+  --pf-c-date-picker__calendar--Left: 0;
+  --pf-c-date-picker__calendar--m-align-right--Right: 0;
+  --pf-c-date-picker__calendar--m-align-right--Left: auto;
+  position: relative;
+  display: inline-block;
+}
+
+.pf-c-date-picker__helper-text {
+  margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
+  font-size: var(--pf-c-date-picker__helper-text--FontSize);
+  color: var(--pf-c-date-picker__helper-text--Color);
+}
+
+.pf-c-date-picker__helper-text.pf-m-error {
+  --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
+}
+
+.pf-c-date-picker__input .pf-c-form-control {
+  width: var(--pf-c-date-picker__input--c-form-control--Width);
+}
+
+.pf-c-date-picker__calendar {
+  position: absolute;
+  top: var(--pf-c-date-picker__calendar--Top);
+  right: var(--pf-c-date-picker__calendar--Right);
+  left: var(--pf-c-date-picker__calendar--Left);
+  z-index: var(--pf-c-date-picker__calendar--ZIndex);
+  background-color: var(--pf-c-date-picker__calendar--BackgroundColor);
+  box-shadow: var(--pf-c-date-picker__calendar--BoxShadow);
+}
+
+.pf-c-date-picker__calendar.pf-m-align-right {
+  --pf-c-date-picker__calendar--Right: var(--pf-c-date-picker__calendar--m-align-right--Right);
+  --pf-c-date-picker__calendar--Left: var(--pf-c-date-picker__calendar--m-align-right--Left);
+}
+
+.pf-c-date-picker.pf-m-top .pf-c-date-picker__calendar {
+  --pf-c-date-picker__calendar--Top: var(--pf-c-date-picker--m-top__calendar--Top);
+  transform: translateY(var(--pf-c-date-picker--m-top__calendar--TranslateY));
+}
+
+:where(.pf-theme-dark) .pf-c-date-picker {
+  --pf-c-date-picker__calendar--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-date-picker__calendar--Top: 100%;
+}
+
 .pf-c-dropdown {
   --pf-c-dropdown__toggle--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-dropdown__toggle--PaddingRight: var(--pf-global--spacer--sm);
@@ -26353,75 +26353,6 @@ label.pf-c-tree-view__node-text {
     --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
   }
 }
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
   --pf-l-grid__item--GridColumnStart: auto;
@@ -27636,6 +27567,75 @@ label.pf-c-tree-view__node-text {
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-level {
   --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.251.1",
+  "version": "4.251.3",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "9eacaae1c7ae678cc139c0ee937c158483826c18"
+  "gitHead": "e1567ca0fde85ebde768664b8026605b08a47500"
 }

package/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { TextArea, TextAreaBase } from '../TextArea';
+import { TextArea } from '../TextArea';
 import { ValidatedOptions } from '../../../helpers/constants';
 
 const props = {
@@ -11,116 +11,132 @@ const props = {
   value: 'test textarea'
 };
 
-describe('TextArea', () => {
-  test('textarea passes value and event to onChange handler', async () => {
-    const user = userEvent.setup();
-
-    render(<TextAreaBase {...props} value="" aria-label="test textarea" />);
-
-    await user.type(screen.getByLabelText('test textarea'), 'a');
-    expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
-  });
-
-  test('simple text area', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="simple textarea" />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('disabled text area using isDisabled', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="is disabled textarea" isDisabled />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('disabled text area using disabled', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="disabled textarea" disabled />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area using isReadOnly', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="is read only textarea" isReadOnly />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area using default readOnlyVariant', () => {
-    const { asFragment } = render(
-      <TextArea {...props} aria-label="is default read only textarea" readOnlyVariant="default" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area using plain readOnlyVariant', () => {
-    const { asFragment } = render(
-      <TextArea {...props} aria-label="is plain read only textarea" readOnlyVariant="plain" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('read only text area using readOnly', () => {
-    const { asFragment } = render(<TextArea {...props} aria-label="read only textarea" readOnly />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('validated text area success', () => {
-    render(<TextArea {...props} required validated={ValidatedOptions.success} aria-label="validated textarea" />);
-    expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-success');
-  });
-
-  test('validated text area warning', () => {
-    render(<TextArea {...props} required validated={ValidatedOptions.warning} aria-label="validated textarea" />);
-    expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-warning');
-  });
-
-  test('validated text area error', () => {
-    const { asFragment } = render(
-      <TextArea {...props} required validated={ValidatedOptions.error} aria-label="validated textarea" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('vertically resizable text area', () => {
-    const { asFragment } = render(
-      <TextArea resizeOrientation="vertical" {...props} aria-label="vertical resize textarea" />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('horizontally resizable text area', () => {
-    const { asFragment } = render(
-      <TextArea
-        resizeOrientation="horizontal"
-        {...props}
-        required
-        validated={'error'}
-        aria-label="horizontal resize textarea"
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('should throw console error when no aria-label or id is given', () => {
-    const myMock = jest.fn();
-    global.console = { ...global.console, error: myMock };
-
-    render(<TextArea {...props} />);
-
-    expect(myMock).toHaveBeenCalled();
-  });
-
-  test('should not throw console error when id is given but no aria-label', () => {
-    const myMock = jest.fn();
-    global.console = { ...global.console, error: myMock };
-
-    render(<TextArea {...props} id="5" />);
-
-    expect(myMock).not.toHaveBeenCalled();
-  });
-
-  test('should not throw console error when aria-label is given but no id', () => {
-    const myMock = jest.fn();
-    global.console = { ...global.console, error: myMock };
-
-    render(<TextArea {...props} aria-label="test textarea" />);
-
-    expect(myMock).not.toHaveBeenCalled();
-  });
+test('Textarea input passes value and event to onChange handler', async () => {
+  const user = userEvent.setup();
+  render(<TextArea {...props} value="" aria-label="test textarea" />);
+
+  await user.type(screen.getByRole('textbox'), 'a');
+
+  expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
+});
+
+test('Renders simple text input', () => {
+  render(
+    <div data-testid="textarea">
+      <TextArea aria-label="simple textarea" />
+    </div>
+  );
+  expect(screen.getByTestId('textarea').firstChild).toBeVisible();
+});
+
+test('Renders with custom class passed', () => {
+  render(<TextArea aria-label="custom class textarea" className="test-class" />);
+
+  expect(screen.getByRole('textbox')).toHaveClass('test-class');
+});
+
+test('Renders text area with required attribute using isRequired', () => {
+  render(<TextArea aria-label="required textarea" isRequired />);
+
+  expect(screen.getByRole('textbox')).toBeRequired();
+});
+
+test('Text area is not required by default', () => {
+  render(<TextArea aria-label="not required textarea" />);
+
+  expect(screen.getByRole('textbox')).not.toBeRequired();
+});
+
+test('Renders disabled text area using isDisabled', () => {
+  render(<TextArea aria-label="is disabled textarea" isDisabled />);
+  expect(screen.getByRole('textbox')).toBeDisabled();
+});
+
+test('Text area is not disabled by default', () => {
+  render(<TextArea aria-label="not disabled textarea" />);
+  expect(screen.getByRole('textbox')).not.toBeDisabled();
+});
+
+test('Renders read only text area using readOnlyVariant', () => {
+  render(<TextArea aria-label="is read only textarea" readOnlyVariant={'default'} />);
+  expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
+});
+
+test('Text area is not read only by default', () => {
+  render(<TextArea aria-label="not read only textarea" />);
+  expect(screen.getByRole('textbox')).not.toHaveAttribute('readonly');
+});
+
+test('Renders text area with default class name only', () => {
+  render(<TextArea aria-label="validated textarea" />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-c-form-control', { exact: true });
+});
+
+test('Renders validated text area with success className', () => {
+  render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.success} />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');
+});
+
+test('Renders validated text area with warning className', () => {
+  render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.warning} />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-warning');
+});
+
+test('Renders invalid text area', () => {
+  render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.error} />);
+  expect(screen.getByRole('textbox')).toBeInvalid();
+});
+
+test('Text area is not invalid by default', () => {
+  render(<TextArea aria-label="validated textarea" />);
+  expect(screen.getByRole('textbox')).not.toBeInvalid();
+});
+
+test('Renders vertically resizable text area', () => {
+  render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-vertical');
+});
+
+test('Renders horizontally resizable text area', () => {
+  render(<TextArea aria-label="horizontal resize textarea" resizeOrientation="horizontal" />);
+  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-horizontal');
+});
+
+test('Throws console error when no aria-label or id is given', () => {
+  jest.spyOn(global.console, 'error');
+
+  render(<TextArea />);
+
+  expect(console.error).toHaveBeenCalled();
+});
+
+test('Does not throw console error when id is given but no aria-label', () => {
+  jest.spyOn(global.console, 'error');
+
+  render(<TextArea id="5" />);
+
+  expect(console.error).not.toHaveBeenCalled();
+});
+
+test('Does not throw console error when aria-label is given but no id', () => {
+  jest.spyOn(global.console, 'error');
+
+  render(<TextArea aria-label="test textarea" />);
+
+  expect(console.error).not.toHaveBeenCalled();
+});
+
+test('TextArea can be accessed via passed ref', () => {
+  const testRef: React.RefObject<HTMLTextAreaElement> = React.createRef();
+  render(<TextArea ref={testRef} />);
+  global.scrollTo = jest.fn();
+  testRef.current?.focus();
+  expect(screen.getByRole('textbox')).toHaveFocus();
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(
+    <TextArea className="custom class" isRequired isDisabled autoResize aria-label="test textarea" />
+  );
+  expect(asFragment()).toMatchSnapshot();
 });

package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap

@@ -1,129 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TextArea disabled text area using disabled 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <textarea
     aria-invalid="false"
-    aria-label="disabled textarea"
-    class="pf-c-form-control"
+    aria-label="test textarea"
+    class="pf-c-form-control custom class"
     disabled=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea disabled text area using isDisabled 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is disabled textarea"
-    class="pf-c-form-control"
-    disabled=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea horizontally resizable text area 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="true"
-    aria-label="horizontal resize textarea"
-    class="pf-c-form-control pf-m-resize-horizontal"
-    required=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using default readOnlyVariant 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is default read only textarea"
-    class="pf-c-form-control"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using isReadOnly 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is read only textarea"
-    class="pf-c-form-control"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using plain readOnlyVariant 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="is plain read only textarea"
-    class="pf-c-form-control pf-m-plain"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea read only text area using readOnly 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="read only textarea"
-    class="pf-c-form-control"
-    readonly=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea simple text area 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="simple textarea"
-    class="pf-c-form-control"
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea validated text area error 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="true"
-    aria-label="validated textarea"
-    class="pf-c-form-control"
     required=""
-  >
-    test textarea
-  </textarea>
-</DocumentFragment>
-`;
-
-exports[`TextArea vertically resizable text area 1`] = `
-<DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="vertical resize textarea"
-    class="pf-c-form-control pf-m-resize-vertical"
-  >
-    test textarea
-  </textarea>
+    style="--pf-c-form-control--textarea--Height: 6px;"
+  />
 </DocumentFragment>
 `;

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -12,6 +12,7 @@ import {
   JumpLinksItem,
   JumpLinksList,
   PageSection,
+  PageSectionVariants,
   Sidebar,
   SidebarContent,
   SidebarPanel,
@@ -29,7 +30,7 @@ export const JumpLinksWithDrawer = () => {
 
   React.useEffect(() => {
     const masthead = document.getElementsByClassName('pf-c-masthead')[0];
-    const drawerToggleSection = document.getElementsByClassName('pf-c-page__main-section')[0];
+    const drawerToggleSection = document.getElementById('drawer-toggle');
 
     getResizeObserver(masthead, () => {
       setOffsetHeight(masthead.offsetHeight + drawerToggleSection.offsetHeight);
@@ -61,60 +62,65 @@ export const JumpLinksWithDrawer = () => {
     <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
       <Drawer isExpanded={isExpanded}>
         <DrawerContent panelContent={panelContent} id="jump-links-drawer-drawer-scrollable-container">
-          <DrawerContentBody hasPadding>
+          <DrawerContentBody>
             <Sidebar>
               <SidebarPanel variant="sticky">
-                <JumpLinks
-                  isVertical={true}
-                  label="Jump to section"
-                  scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
-                  offset={offsetHeight}
-                  expandable={{ default: 'expandable', md: 'nonExpandable' }}
-                >
-                  {headings.map(heading => (
-                    <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
-                      {`${heading} section`}
-                      <JumpLinksList></JumpLinksList>
-                    </JumpLinksItem>
-                  ))}
-                </JumpLinks>
+                <PageSection variant={PageSectionVariants.light}>
+                  <JumpLinks
+                    isVertical={true}
+                    label="Jump to section"
+                    scrollableSelector="#jump-links-drawer-drawer-scrollable-container"
+                    offset={offsetHeight}
+                    expandable={{ default: 'expandable', md: 'nonExpandable' }}
+                  >
+                    {headings.map(heading => (
+                      <JumpLinksItem key={heading} href={`#jump-links-drawer-jump-links-${heading.toLowerCase()}`}>
+                        {`${heading} section`}
+                        <JumpLinksList></JumpLinksList>
+                      </JumpLinksItem>
+                    ))}
+                  </JumpLinks>
+                </PageSection>
               </SidebarPanel>
               <SidebarContent>
-                <PageSection sticky="top" variant="light">
+                <PageSection id="drawer-toggle" stickyOnBreakpoint={{ default: 'top' }} variant="light">
                   <Button onClick={onToggleClick}>Toggle drawer</Button>
                 </PageSection>
-                <TextContent>
-                  {headings.map(heading => (
-                    <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
-                      <h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}>
-                        {`${heading} section`}
-                      </h2>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim
-                        purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel.
-                        Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc
-                        viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit,
-                        tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus,
-                        vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper.
-                        Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla.
-                        Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros
-                        pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a
-                        accumsan. Nam pretium vitae leo vitae rhoncus.
-                      </p>
-                      <p>
-                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-                        deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
-                        provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et
-                        dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
-                        soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere
-                        possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
-                        aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et
-                        molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
-                        voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
-                      </p>
-                    </div>
-                  ))}
-                </TextContent>
+                <PageSection variant={PageSectionVariants.light}>
+                  <TextContent>
+                    {headings.map(heading => (
+                      <div key={heading} style={{ maxWidth: '800px', marginBottom: '32px' }}>
+                        <h2 id={`jump-links-drawer-jump-links-${heading.toLowerCase()}`} tabIndex={-1}>
+                          {`${heading} section`}
+                        </h2>
+                        <p>
+                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper,
+                          dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus
+                          efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut
+                          vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac
+                          accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in.
+                          Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae
+                          ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur
+                          porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec
+                          augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus
+                          porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.
+                        </p>
+                        <p>
+                          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
+                          voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                          cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
+                          laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero
+                          tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime
+                          placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus
+                          autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
+                          voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
+                          sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
+                          doloribus asperiores repellat.
+                        </p>
+                      </div>
+                    ))}
+                  </TextContent>
+                </PageSection>
               </SidebarContent>
             </Sidebar>
           </DrawerContentBody>