@patternfly/react-core 4.199.2 → 4.199.3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.199.3 (2022-03-17)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.199.2 (2022-03-17)
 
 **Note:** Version bump only for package @patternfly/react-core

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

@@ -17310,6 +17310,225 @@ label.pf-c-radio, .pf-c-radio__label,
   left: var(--pf-c-skip-to-content--focus--Left);
 }
 
+.pf-c-slider {
+  --pf-c-slider--value: 0;
+  --pf-c-slider__rail--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-slider__rail--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-slider__rail-track--Height: 0.25rem;
+  --pf-c-slider__rail-track--before--base--BackgroundColor: var(--pf-global--BorderColor--100);
+  --pf-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-global--active-color--300);
+  --pf-c-slider__rail-track--before--BorderRadius: var(--pf-global--BorderRadius--lg);
+  --pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-c-slider--value);
+  --pf-c-slider__steps--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-slider__steps--Height: var(--pf-c-slider__steps--FontSize);
+  --pf-c-slider__step-tick--Top: var(--pf-global--spacer--md);
+  --pf-c-slider__step-tick--Width: 0.25rem;
+  --pf-c-slider__step-tick--Height: 0.25rem;
+  --pf-c-slider__step-tick--BackgroundColor: var(--pf-global--BorderColor--200);
+  --pf-c-slider__step-tick--TranslateX: -50%;
+  --pf-c-slider__step-tick--BorderRadius: var(--pf-global--BorderRadius--lg);
+  --pf-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-slider__step--first-child__step-tick--TranslateX: 0;
+  --pf-c-slider__step--last-child__step-tick--TranslateX: -100%;
+  --pf-c-slider__step-label--TranslateX: -50%;
+  --pf-c-slider__step-label--Top: calc(var(--pf-global--spacer--xl) + var(--pf-c-slider__rail-track--Height));
+  --pf-c-slider__step--first-child__step-label--TranslateX: 0;
+  --pf-c-slider__step--last-child__step-label--TranslateX: -100%;
+  --pf-c-slider__thumb--Top: calc(var(--pf-c-slider__rail-track--Height) / 2 + var(--pf-global--spacer--md));
+  --pf-c-slider__thumb--Width: 1rem;
+  --pf-c-slider__thumb--Height: 1rem;
+  --pf-c-slider__thumb--Left: var(--pf-c-slider--value);
+  --pf-c-slider__thumb--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-slider__thumb--TranslateX: -50%;
+  --pf-c-slider__thumb--TranslateY: -50%;
+  --pf-c-slider__thumb--BorderRadius: var(--pf-global--BorderRadius--lg);
+  --pf-c-slider__thumb--BoxShadow--base:
+    0 0 0 2px var(--pf-global--BackgroundColor--100),
+    0 0 0 3px var(--pf-global--primary-color--100);
+  --pf-c-slider__thumb--hover--BoxShadow: var(--pf-c-slider__thumb--BoxShadow--base);
+  --pf-c-slider__thumb--focus--BoxShadow: var(--pf-c-slider__thumb--BoxShadow--base);
+  --pf-c-slider__thumb--active--BoxShadow:
+    var(--pf-c-slider__thumb--BoxShadow--base),
+    0 0 2px 5px var(--pf-global--active-color--200);
+  --pf-c-slider__thumb--before--Width: var(--pf-global--target-size--MinWidth);
+  --pf-c-slider__thumb--before--Height: var(--pf-global--target-size--MinHeight);
+  --pf-c-slider__thumb--before--BorderRadius: var(--pf-global--BorderRadius--lg);
+  --pf-c-slider__thumb--before--TranslateX: -50%;
+  --pf-c-slider__thumb--before--TranslateY: -50%;
+  --pf-c-slider__value--MarginLeft: var(--pf-global--spacer--md);
+  --pf-c-slider__value--c-form-control--width-base: 3.5ch;
+  --pf-c-slider__value--c-form-control--width-chars: 3;
+  --pf-c-slider__value--c-form-control--Width: calc(var(--pf-c-slider__value--c-form-control--width-base) + (var(--pf-c-slider__value--c-form-control--width-chars) * 1ch));
+  --pf-c-slider__value--m-floating--TranslateX: -50%;
+  --pf-c-slider__value--m-floating--TranslateY: -100%;
+  --pf-c-slider__value--m-floating--Left: var(--pf-c-slider--value);
+  --pf-c-slider__value--m-floating--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-slider__actions--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-slider__main--actions--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-global--palette--black-700);
+  --pf-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-global--palette--black-700);
+  display: flex;
+}
+
+.pf-c-slider.pf-m-disabled {
+  --pf-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
+  --pf-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
+  --pf-c-slider__thumb--BackgroundColor: var(--pf-c-slider--m-disabled__thumb--BackgroundColor);
+}
+
+.pf-c-slider.pf-m-disabled .pf-c-slider__rail,
+.pf-c-slider.pf-m-disabled .pf-c-slider__thumb {
+  cursor: not-allowed;
+}
+
+.pf-c-slider.pf-m-disabled .pf-c-slider__thumb {
+  --pf-c-slider__thumb--BoxShadow: none;
+}
+
+.pf-c-slider__main {
+  position: relative;
+  flex-grow: 1;
+}
+
+.pf-c-slider__rail {
+  padding-top: var(--pf-c-slider__rail--PaddingTop);
+  padding-bottom: var(--pf-c-slider__rail--PaddingBottom);
+}
+
+.pf-c-slider__rail-track {
+  position: relative;
+  height: var(--pf-c-slider__rail-track--Height);
+}
+
+.pf-c-slider__rail-track::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  background: linear-gradient(to right, var(--pf-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-c-slider__rail-track--before--base--BackgroundColor) var(--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
+  border-radius: var(--pf-c-slider__rail-track--before--BorderRadius);
+}
+
+.pf-c-slider__steps {
+  height: var(--pf-c-slider__steps--Height);
+  font-size: var(--pf-c-slider__steps--FontSize);
+  line-height: 1;
+}
+
+.pf-c-slider__step {
+  position: absolute;
+  top: 0;
+  left: var(--pf-c-slider__step--Left);
+  content: "";
+}
+
+.pf-c-slider__step.pf-m-active {
+  --pf-c-slider__step-tick--BackgroundColor: var(--pf-c-slider__step--m-active__slider-tick--BackgroundColor);
+}
+
+.pf-c-slider__step:first-child {
+  --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--first-child__step-tick--TranslateX);
+  --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--first-child__step-label--TranslateX);
+}
+
+.pf-c-slider__step:last-child {
+  --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--last-child__step-tick--TranslateX);
+  --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--last-child__step-label--TranslateX);
+}
+
+.pf-c-slider__step-tick {
+  position: absolute;
+  top: var(--pf-c-slider__step-tick--Top);
+  left: 0;
+  width: var(--pf-c-slider__step-tick--Width);
+  height: var(--pf-c-slider__step-tick--Height);
+  background-color: var(--pf-c-slider__step-tick--BackgroundColor);
+  border-radius: var(--pf-c-slider__step-tick--BorderRadius);
+  transform: translateX(var(--pf-c-slider__step-tick--TranslateX));
+}
+
+.pf-c-slider__step-label {
+  position: absolute;
+  top: var(--pf-c-slider__step-label--Top);
+  transform: translateX(var(--pf-c-slider__step-label--TranslateX));
+}
+
+.pf-c-slider__thumb {
+  position: absolute;
+  top: var(--pf-c-slider__thumb--Top);
+  left: var(--pf-c-slider__thumb--Left);
+  width: var(--pf-c-slider__thumb--Width);
+  height: var(--pf-c-slider__thumb--Height);
+  cursor: pointer;
+  background-color: var(--pf-c-slider__thumb--BackgroundColor);
+  border-radius: var(--pf-c-slider__thumb--BorderRadius);
+  box-shadow: var(--pf-c-slider__thumb--BoxShadow);
+  transform: translate(var(--pf-c-slider__thumb--TranslateX), var(--pf-c-slider__thumb--TranslateY));
+}
+
+.pf-c-slider__thumb::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--pf-c-slider__thumb--before--Width);
+  height: var(--pf-c-slider__thumb--before--Height);
+  content: "";
+  border-radius: var(--pf-c-slider__thumb--before--BorderRadius);
+  transform: translate(var(--pf-c-slider__thumb--before--TranslateX), var(--pf-c-slider__thumb--before--TranslateY));
+}
+
+.pf-c-slider__thumb:hover {
+  --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--hover--BoxShadow);
+}
+
+.pf-c-slider__thumb:focus {
+  --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--focus--BoxShadow);
+  outline: 0;
+}
+
+.pf-c-slider__thumb:active {
+  --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--active--BoxShadow);
+}
+
+.pf-c-slider__value {
+  margin-left: var(--pf-c-slider__value--MarginLeft);
+}
+
+.pf-c-slider__value.pf-m-floating {
+  --pf-c-slider__value--MarginLeft: 0;
+  position: absolute;
+  top: 0;
+  left: var(--pf-c-slider__value--m-floating--Left);
+  z-index: var(--pf-c-slider__value--m-floating--ZIndex);
+  transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
+}
+
+.pf-c-slider__value.pf-m-floating .pf-c-input-group {
+  align-items: center;
+}
+
+.pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
+  position: absolute;
+  left: 100%;
+}
+
+.pf-c-slider__value .pf-c-form-control {
+  width: var(--pf-c-slider__value--c-form-control--Width);
+}
+
+.pf-c-slider__actions {
+  display: flex;
+  margin-right: var(--pf-c-slider__actions--MarginRight);
+}
+
+.pf-c-slider__main ~ .pf-c-slider__actions {
+  --pf-c-slider__actions--MarginRight: 0;
+  margin-left: var(--pf-c-slider__main--actions--MarginLeft);
+}
+
 .pf-c-spinner {
   --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
   --pf-c-spinner--Width: var(--pf-c-spinner--diameter);
@@ -17539,225 +17758,6 @@ svg.pf-c-spinner.pf-m-xl {
     transform: rotate(720deg);
   }
 }
-.pf-c-slider {
-  --pf-c-slider--value: 0;
-  --pf-c-slider__rail--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-slider__rail--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-slider__rail-track--Height: 0.25rem;
-  --pf-c-slider__rail-track--before--base--BackgroundColor: var(--pf-global--BorderColor--100);
-  --pf-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-global--active-color--300);
-  --pf-c-slider__rail-track--before--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-c-slider--value);
-  --pf-c-slider__steps--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-slider__steps--Height: var(--pf-c-slider__steps--FontSize);
-  --pf-c-slider__step-tick--Top: var(--pf-global--spacer--md);
-  --pf-c-slider__step-tick--Width: 0.25rem;
-  --pf-c-slider__step-tick--Height: 0.25rem;
-  --pf-c-slider__step-tick--BackgroundColor: var(--pf-global--BorderColor--200);
-  --pf-c-slider__step-tick--TranslateX: -50%;
-  --pf-c-slider__step-tick--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-slider__step--first-child__step-tick--TranslateX: 0;
-  --pf-c-slider__step--last-child__step-tick--TranslateX: -100%;
-  --pf-c-slider__step-label--TranslateX: -50%;
-  --pf-c-slider__step-label--Top: calc(var(--pf-global--spacer--xl) + var(--pf-c-slider__rail-track--Height));
-  --pf-c-slider__step--first-child__step-label--TranslateX: 0;
-  --pf-c-slider__step--last-child__step-label--TranslateX: -100%;
-  --pf-c-slider__thumb--Top: calc(var(--pf-c-slider__rail-track--Height) / 2 + var(--pf-global--spacer--md));
-  --pf-c-slider__thumb--Width: 1rem;
-  --pf-c-slider__thumb--Height: 1rem;
-  --pf-c-slider__thumb--Left: var(--pf-c-slider--value);
-  --pf-c-slider__thumb--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-slider__thumb--TranslateX: -50%;
-  --pf-c-slider__thumb--TranslateY: -50%;
-  --pf-c-slider__thumb--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-slider__thumb--BoxShadow--base:
-    0 0 0 2px var(--pf-global--BackgroundColor--100),
-    0 0 0 3px var(--pf-global--primary-color--100);
-  --pf-c-slider__thumb--hover--BoxShadow: var(--pf-c-slider__thumb--BoxShadow--base);
-  --pf-c-slider__thumb--focus--BoxShadow: var(--pf-c-slider__thumb--BoxShadow--base);
-  --pf-c-slider__thumb--active--BoxShadow:
-    var(--pf-c-slider__thumb--BoxShadow--base),
-    0 0 2px 5px var(--pf-global--active-color--200);
-  --pf-c-slider__thumb--before--Width: var(--pf-global--target-size--MinWidth);
-  --pf-c-slider__thumb--before--Height: var(--pf-global--target-size--MinHeight);
-  --pf-c-slider__thumb--before--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-slider__thumb--before--TranslateX: -50%;
-  --pf-c-slider__thumb--before--TranslateY: -50%;
-  --pf-c-slider__value--MarginLeft: var(--pf-global--spacer--md);
-  --pf-c-slider__value--c-form-control--width-base: 3.5ch;
-  --pf-c-slider__value--c-form-control--width-chars: 3;
-  --pf-c-slider__value--c-form-control--Width: calc(var(--pf-c-slider__value--c-form-control--width-base) + (var(--pf-c-slider__value--c-form-control--width-chars) * 1ch));
-  --pf-c-slider__value--m-floating--TranslateX: -50%;
-  --pf-c-slider__value--m-floating--TranslateY: -100%;
-  --pf-c-slider__value--m-floating--Left: var(--pf-c-slider--value);
-  --pf-c-slider__value--m-floating--ZIndex: var(--pf-global--ZIndex--sm);
-  --pf-c-slider__actions--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-slider__main--actions--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-global--palette--black-500);
-  --pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-global--palette--black-700);
-  --pf-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-global--palette--black-700);
-  display: flex;
-}
-
-.pf-c-slider.pf-m-disabled {
-  --pf-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
-  --pf-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
-  --pf-c-slider__thumb--BackgroundColor: var(--pf-c-slider--m-disabled__thumb--BackgroundColor);
-}
-
-.pf-c-slider.pf-m-disabled .pf-c-slider__rail,
-.pf-c-slider.pf-m-disabled .pf-c-slider__thumb {
-  cursor: not-allowed;
-}
-
-.pf-c-slider.pf-m-disabled .pf-c-slider__thumb {
-  --pf-c-slider__thumb--BoxShadow: none;
-}
-
-.pf-c-slider__main {
-  position: relative;
-  flex-grow: 1;
-}
-
-.pf-c-slider__rail {
-  padding-top: var(--pf-c-slider__rail--PaddingTop);
-  padding-bottom: var(--pf-c-slider__rail--PaddingBottom);
-}
-
-.pf-c-slider__rail-track {
-  position: relative;
-  height: var(--pf-c-slider__rail-track--Height);
-}
-
-.pf-c-slider__rail-track::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: "";
-  background: linear-gradient(to right, var(--pf-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-c-slider__rail-track--before--base--BackgroundColor) var(--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
-  border-radius: var(--pf-c-slider__rail-track--before--BorderRadius);
-}
-
-.pf-c-slider__steps {
-  height: var(--pf-c-slider__steps--Height);
-  font-size: var(--pf-c-slider__steps--FontSize);
-  line-height: 1;
-}
-
-.pf-c-slider__step {
-  position: absolute;
-  top: 0;
-  left: var(--pf-c-slider__step--Left);
-  content: "";
-}
-
-.pf-c-slider__step.pf-m-active {
-  --pf-c-slider__step-tick--BackgroundColor: var(--pf-c-slider__step--m-active__slider-tick--BackgroundColor);
-}
-
-.pf-c-slider__step:first-child {
-  --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--first-child__step-tick--TranslateX);
-  --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--first-child__step-label--TranslateX);
-}
-
-.pf-c-slider__step:last-child {
-  --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--last-child__step-tick--TranslateX);
-  --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--last-child__step-label--TranslateX);
-}
-
-.pf-c-slider__step-tick {
-  position: absolute;
-  top: var(--pf-c-slider__step-tick--Top);
-  left: 0;
-  width: var(--pf-c-slider__step-tick--Width);
-  height: var(--pf-c-slider__step-tick--Height);
-  background-color: var(--pf-c-slider__step-tick--BackgroundColor);
-  border-radius: var(--pf-c-slider__step-tick--BorderRadius);
-  transform: translateX(var(--pf-c-slider__step-tick--TranslateX));
-}
-
-.pf-c-slider__step-label {
-  position: absolute;
-  top: var(--pf-c-slider__step-label--Top);
-  transform: translateX(var(--pf-c-slider__step-label--TranslateX));
-}
-
-.pf-c-slider__thumb {
-  position: absolute;
-  top: var(--pf-c-slider__thumb--Top);
-  left: var(--pf-c-slider__thumb--Left);
-  width: var(--pf-c-slider__thumb--Width);
-  height: var(--pf-c-slider__thumb--Height);
-  cursor: pointer;
-  background-color: var(--pf-c-slider__thumb--BackgroundColor);
-  border-radius: var(--pf-c-slider__thumb--BorderRadius);
-  box-shadow: var(--pf-c-slider__thumb--BoxShadow);
-  transform: translate(var(--pf-c-slider__thumb--TranslateX), var(--pf-c-slider__thumb--TranslateY));
-}
-
-.pf-c-slider__thumb::before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: var(--pf-c-slider__thumb--before--Width);
-  height: var(--pf-c-slider__thumb--before--Height);
-  content: "";
-  border-radius: var(--pf-c-slider__thumb--before--BorderRadius);
-  transform: translate(var(--pf-c-slider__thumb--before--TranslateX), var(--pf-c-slider__thumb--before--TranslateY));
-}
-
-.pf-c-slider__thumb:hover {
-  --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--hover--BoxShadow);
-}
-
-.pf-c-slider__thumb:focus {
-  --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--focus--BoxShadow);
-  outline: 0;
-}
-
-.pf-c-slider__thumb:active {
-  --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--active--BoxShadow);
-}
-
-.pf-c-slider__value {
-  margin-left: var(--pf-c-slider__value--MarginLeft);
-}
-
-.pf-c-slider__value.pf-m-floating {
-  --pf-c-slider__value--MarginLeft: 0;
-  position: absolute;
-  top: 0;
-  left: var(--pf-c-slider__value--m-floating--Left);
-  z-index: var(--pf-c-slider__value--m-floating--ZIndex);
-  transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
-}
-
-.pf-c-slider__value.pf-m-floating .pf-c-input-group {
-  align-items: center;
-}
-
-.pf-c-slider__value.pf-m-floating .pf-c-input-group__text {
-  position: absolute;
-  left: 100%;
-}
-
-.pf-c-slider__value .pf-c-form-control {
-  width: var(--pf-c-slider__value--c-form-control--Width);
-}
-
-.pf-c-slider__actions {
-  display: flex;
-  margin-right: var(--pf-c-slider__actions--MarginRight);
-}
-
-.pf-c-slider__main ~ .pf-c-slider__actions {
-  --pf-c-slider__actions--MarginRight: 0;
-  margin-left: var(--pf-c-slider__main--actions--MarginLeft);
-}
-
 .pf-c-switch {
   --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
   --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.199.2",
+  "version": "4.199.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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.50.2",
-    "@patternfly/react-styles": "^4.49.2",
-    "@patternfly/react-tokens": "^4.51.2",
+    "@patternfly/react-icons": "^4.50.3",
+    "@patternfly/react-styles": "^4.49.3",
+    "@patternfly/react-tokens": "^4.51.3",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "57da79b104a7ac151b99b79933cf164ed611cc7d"
+  "gitHead": "5ebdd87969330ddee041f3a5b91ef9293be16abd"
 }

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

@@ -1,72 +1,53 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { shallow } from 'enzyme';
-import { AboutModal } from '../AboutModal';
-import { KEY_CODES } from '../../../helpers/constants';
 
-const mockListener = jest.spyOn(ReactDOM, 'createPortal');
-jest.spyOn(document, 'createElement');
-jest.spyOn(document.body, 'addEventListener');
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
-mockListener.mockImplementation(node => node as React.ReactPortal);
+import { AboutModal, AboutModalProps } from '../AboutModal';
 
-const props = {
+const props: AboutModalProps = {
   onClose: jest.fn(),
   children: 'modal content',
   productName: 'Product Name',
   trademark: 'Trademark and copyright information here',
   brandImageSrc: 'brandImg...',
-  brandImageAlt: 'Brand Image',
-  logoImageSrc: 'logoImg...',
-  logoImageAlt: 'AboutModal Logo'
+  brandImageAlt: 'Brand Image'
 };
 
-test('AboutModal creates a container element once for div', () => {
-  const view = shallow(<AboutModal {...props}> Test About Modal </AboutModal>);
-  view.update();
-  expect(document.createElement).toBeCalledWith('div');
-  expect(document.createElement).toHaveBeenCalledTimes(1);
-});
-
-test('About Modal closes with escape', () => {
-  shallow(
-    <AboutModal {...props} isOpen>
-      Test About Modal
-    </AboutModal>
-  );
-  const [event, handler] = (document.body.addEventListener as any).mock.calls[0];
-  expect(event).toBe('keydown');
-  handler({ keyCode: KEY_CODES.ESCAPE_KEY });
-  expect(props.onClose).toBeCalled();
-});
-
-test('modal does not call onClose for esc key if it is not open', () => {
-  shallow(<AboutModal {...props} />);
-  const [event, handler] = (document.body.addEventListener as any).mock.calls[0];
-  expect(event).toBe('keydown');
-  handler({ keyCode: KEY_CODES.ESCAPE_KEY });
-  expect(props.onClose).not.toBeCalled();
-});
-
-test('Each modal is given new aria-describedby and aria-labelledby', () => {
-  const first = new AboutModal(props);
-  const second = new AboutModal(props);
-  expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);
-  expect(first.ariaDescribedBy).not.toBe(second.ariaDescribedBy);
-});
-
-test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
-  const noImgAltrops = {
-    onClose: jest.fn(),
-    children: 'modal content',
-    productName: 'Product Name',
-    trademark: 'Trademark and copyright information here',
-    brandImageSrc: 'brandImg...',
-    logoImageSrc: 'logoImg...'
-  };
-  const myMock = jest.fn() as any;
-  global.console = { error: myMock } as any;
-  const JSAboutModal = AboutModal as any;
-  shallow(<JSAboutModal {...noImgAltrops}> Test About Modal </JSAboutModal>);
-  expect(myMock).toBeCalled();
+describe('AboutModal', () => {
+  test('closes with escape', () => {
+    render(<AboutModal {...props} isOpen />);
+
+    userEvent.type(screen.getByRole('dialog'), '{esc}');
+    expect(props.onClose).toBeCalled();
+  });
+
+  test('does not render the modal when isOpen is not specified', () => {
+    render(<AboutModal {...props} />);
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  test('Each modal is given new aria-describedby and aria-labelledby', () => {
+    const first = new AboutModal(props);
+    const second = new AboutModal(props);
+
+    expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);
+    expect(first.ariaDescribedBy).not.toBe(second.ariaDescribedBy);
+  });
+
+  test('Console error is generated when the logoImageSrc is provided without logoImageAlt', () => {
+    const noImgAltrops = {
+      onClose: jest.fn(),
+      children: 'modal content',
+      productName: 'Product Name',
+      trademark: 'Trademark and copyright information here',
+      brandImageSrc: 'brandImg...',
+      logoImageSrc: 'logoImg...'
+    } as any;
+    const myMock = jest.fn() as any;
+    global.console = { error: myMock } as any;
+
+    render(<AboutModal {...noImgAltrops}>Test About Modal</AboutModal>);
+    expect(myMock).toBeCalled();
+  });
 });