@patternfly/react-core 4.198.22 → 4.199.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.199.2 (2022-03-17)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.199.1 (2022-03-16)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+# 4.199.0 (2022-03-15)
+
+
+### Features
+
+* **CodeEditor:** 6226 size to fit height ([#7033](https://github.com/patternfly/patternfly-react/issues/7033)) ([f18abd3](https://github.com/patternfly/patternfly-react/commit/f18abd3020e04ee6602fd168d503f43cc0de649e))
+
+
+
+
+
 ## 4.198.22 (2022-03-14)
 
 **Note:** Version bump only for package @patternfly/react-core

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

@@ -17310,225 +17310,6 @@ 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);
@@ -17758,6 +17539,225 @@ 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.198.22",
+  "version": "4.199.2",
   "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.49.22",
-    "@patternfly/react-styles": "^4.48.22",
-    "@patternfly/react-tokens": "^4.50.22",
+    "@patternfly/react-icons": "^4.50.2",
+    "@patternfly/react-styles": "^4.49.2",
+    "@patternfly/react-tokens": "^4.51.2",
     "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": "ac0a21dcd9b59e9f148e6130f3ef077dfe6a97bd"
+  "gitHead": "57da79b104a7ac151b99b79933cf164ed611cc7d"
 }

package/src/components/Checkbox/examples/Checkbox.md

@@ -8,142 +8,38 @@ propComponents: ['Checkbox']
 import './checkbox.css';
 
 ## Examples
+
 ### Controlled
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
-
-class ControlledCheckbox extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      check1: false,
-      check2: false,
-      check3: false,
-      check4: false
-    };
-    this.handleChange = (checked, event) => {
-      const target = event.target;
-      const value = target.type === 'checkbox' ? target.checked : target.value;
-      const name = target.name;
-      this.setState({ [name]: value });
-    };
-  }
-
-  componentDidUpdate(_prevProps, prevState) {
-    if (prevState.check1 !== this.state.check1 && this.state.check1 !== null) {
-      this.setState({
-        check2: this.state.check1,
-        check3: this.state.check1,
-      })
-    }
-
-    if (prevState.check2 !== this.state.check2 || prevState.check3 !== this.state.check3) {
-      this.setState({
-        check1: (this.state.check2 && this.state.check3) || (this.state.check2 || this.state.check3 ? null : false)
-      })
-    }
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <Checkbox
-          label="Parent CheckBox"
-          isChecked={this.state.check1}
-          onChange={this.handleChange}
-          aria-label="controlled checkbox example"
-          id="check-1"
-          name="check1"
-        />
-        <Checkbox
-          className="nested"
-          label="Child CheckBox 1"
-          isChecked={this.state.check2}
-          onChange={this.handleChange}
-          aria-label="controlled checkbox example"
-          id="check-2"
-          name="check2"
-        />
-        <Checkbox
-          className="nested"
-          label="Child CheckBox 2"
-          isChecked={this.state.check3}
-          onChange={this.handleChange}
-          aria-label="controlled checkbox example"
-          id="check-3"
-          name="check3"
-        />
-        <Checkbox
-          label="Controlled CheckBox"
-          isChecked={this.state.check4}
-          onChange={this.handleChange}
-          aria-label="controlled checkbox example"
-          id="check-4"
-          name="check4"
-        />
-      </React.Fragment>
-    );
-  }
-}
+
+```ts file='./CheckboxControlled.tsx'
 ```
 
 ### Uncontrolled
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Checkbox label="Uncontrolled CheckBox" aria-label="uncontrolled checkbox example" id="check-5" />
-  <Checkbox label="Uncontrolled CheckBox" aria-label="uncontrolled checkbox example" id="check-6" />
-</React.Fragment>
+
+```ts file='./CheckboxUncontrolled.tsx'
 ```
 
 ### Disabled
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Checkbox
-    id="check-7"
-    label="Disabled CheckBox"
-    aria-label="disabled checked checkbox example"
-    defaultChecked
-    isDisabled
-  />{' '}
-  <Checkbox id="check-8" label="Disabled CheckBox" aria-label="disabled checkbox example" isDisabled />
-</React.Fragment>
+
+```ts file='./CheckboxDisabled.tsx'
 ```
 
 ### Checkbox with description
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
 
-<Checkbox id="check-9" label="Checkbox with description" aria-label="Checkbox with description example" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."/>
+```ts file='./CheckboxWithDescription.tsx'
 ```
 
 ### Checkbox with body
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
 
-<Checkbox id="check-10" label="Checkbox with body" aria-label="Checkbox with body example" body="This is where custom content goes."/>
+```ts file='./CheckboxWithBody.tsx'
 ```
 
 ### Checkbox with description and body
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
 
-<Checkbox id="check-11" label="Checkbox with description and body" aria-label="Checkbox with body example" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP." body="This is where custom content goes."/>
+```ts file='./CheckboxWithDescriptionBody.tsx'
 ```
 
 ### Standalone input
-```js
-import React from 'react';
-import { Checkbox } from '@patternfly/react-core';
 
-<Checkbox id="check-standalone-input" name="check-standalone-input" aria-label="Standalone input"/>
+```ts file='./CheckboxStandaloneInput.tsx'
 ```

package/src/components/Checkbox/examples/CheckboxControlled.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxControlled: React.FunctionComponent = () => {
+  const [isChecked1, setIsChecked1] = React.useState<boolean>(false);
+  const [isChecked2, setIsChecked2] = React.useState<boolean>(false);
+  const [isChecked3, setIsChecked3] = React.useState<boolean>(false);
+  const [isChecked4, setIsChecked4] = React.useState<boolean>(false);
+
+  const handleChange = (checked: boolean, event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.currentTarget;
+    const name = target.name;
+
+    switch (name) {
+      case 'check1':
+        setIsChecked1(checked);
+        break;
+      case 'check2':
+        setIsChecked2(checked);
+        break;
+      case 'check3':
+        setIsChecked3(checked);
+        break;
+      case 'check4':
+        setIsChecked4(checked);
+        break;
+      default:
+        // eslint-disable-next-line no-console
+        console.log(name);
+    }
+  };
+
+  React.useEffect(() => {
+    if (isChecked1 !== null) {
+      setIsChecked2(isChecked1);
+      setIsChecked3(isChecked1);
+    }
+  }, [isChecked1]);
+
+  React.useEffect(() => {
+    setIsChecked1((isChecked2 && isChecked3) || (isChecked2 || isChecked3 ? null : false));
+  }, [isChecked2, isChecked3]);
+
+  return (
+    <React.Fragment>
+      <Checkbox
+        label="Parent CheckBox"
+        isChecked={isChecked1}
+        onChange={handleChange}
+        id="controlled-check-1"
+        name="check1"
+      />
+      <Checkbox
+        className="nested"
+        label="Child CheckBox 1"
+        isChecked={isChecked2}
+        onChange={handleChange}
+        id="controlled-check-2"
+        name="check2"
+      />
+      <Checkbox
+        className="nested"
+        label="Child CheckBox 2"
+        isChecked={isChecked3}
+        onChange={handleChange}
+        id="controlled-check-3"
+        name="check3"
+      />
+      <Checkbox
+        label="Controlled CheckBox"
+        isChecked={isChecked4}
+        onChange={handleChange}
+        id="controlled-check-4"
+        name="check4"
+      />
+    </React.Fragment>
+  );
+};

package/src/components/Checkbox/examples/CheckboxDisabled.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxDisabled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Checkbox id="disabled-check-1" label="Disabled CheckBox 1" defaultChecked isDisabled />
+    <Checkbox id="disabled-check-2" label="Disabled CheckBox 2" isDisabled />
+  </React.Fragment>
+);

package/src/components/Checkbox/examples/CheckboxStandaloneInput.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxStandaloneInput: React.FunctionComponent = () => (
+  <Checkbox id="standalone-check" name="standlone-check" aria-label="Standalone input" />
+);

package/src/components/Checkbox/examples/CheckboxUncontrolled.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxUncontrolled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Checkbox label="Uncontrolled CheckBox 1" id="uncontrolled-check-1" />
+    <Checkbox label="Uncontrolled CheckBox 2" id="uncontrolled-check-2" />
+  </React.Fragment>
+);

package/src/components/Checkbox/examples/CheckboxWithBody.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxWithBody: React.FunctionComponent = () => (
+  <Checkbox id="body-check-1" label="Checkbox with body" body="This is where custom content goes." />
+);

package/src/components/Checkbox/examples/CheckboxWithDescription.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxWithDescription: React.FunctionComponent = () => (
+  <Checkbox
+    id="description-check-1"
+    label="Checkbox with description"
+    description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
+  />
+);

package/src/components/Checkbox/examples/CheckboxWithDescriptionBody.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxWithDescriptionBody: React.FunctionComponent = () => (
+  <Checkbox
+    id="description-body-check"
+    label="Checkbox with description and body"
+    description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
+    body="This is where custom content goes."
+  />
+);

package/src/components/Chip/examples/Chip.md

@@ -10,77 +10,5 @@ ouia: true
 
 ### Default
 
-```js
-import React from 'react';
-import { Badge, Chip } from '@patternfly/react-core';
-
-class SingleChip extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chip: {
-        name: 'Chip 1'
-      },
-      longchip: {
-        name: 'Really long chip that goes on and on'
-      },
-      badgechip: {
-        name: 'Chip',
-        isRead: true,
-        count: 7
-      },
-      readonlychip: {
-        name: 'Read-only chip'
-      },
-      overflowchip: {
-        name: 'Overflow chip'
-      }
-    };
-    this.deleteItem = id => {
-      this.setState({ [id]: null });
-    };
-  }
-
-  render() {
-    const { chip, longchip, badgechip, readonlychip, overflowchip } = this.state;
-    return (
-      <React.Fragment>
-        {chip && (
-          <React.Fragment>
-            <Chip key="chip1" onClick={() => this.deleteItem('chip')}>
-              {chip.name}
-            </Chip>
-            <br /> <br />
-          </React.Fragment>
-        )}
-        {longchip && (
-          <React.Fragment>
-            <Chip key="chip2" onClick={() => this.deleteItem('longchip')}>
-              {longchip.name}
-            </Chip>
-            <br /> <br />
-          </React.Fragment>
-        )}
-        {badgechip && (
-          <React.Fragment>
-            <Chip key="chip3" onClick={() => this.deleteItem('badgechip')}>
-              {badgechip.name}
-              <Badge isRead={badgechip.isRead}>{badgechip.count}</Badge>
-            </Chip>
-            <br /> <br />
-          </React.Fragment>
-        )}
-        <Chip key="chip4" onClick={() => this.deleteItem('readonlychip')} isReadOnly>
-          {readonlychip.name}
-        </Chip>
-        <br /> <br />
-        {overflowchip && (
-          <Chip key="chip5" component="button" onClick={() => this.deleteItem('overflowchip')} isOverflowChip>
-            {overflowchip.name}
-          </Chip>
-        )}
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./ChipDefault.tsx'
 ```

package/src/components/Chip/examples/ChipDefault.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Badge, Chip } from '@patternfly/react-core';
+
+export const ChipDefault: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState({
+    chip: {
+      name: 'Chip 1'
+    },
+    longchip: {
+      name: 'Really long chip that goes on and on'
+    },
+    badgechip: {
+      name: 'Chip',
+      isRead: true,
+      count: 7
+    },
+    readonlychip: {
+      name: 'Read-only chip'
+    },
+    overflowchip: {
+      name: 'Overflow chip'
+    }
+  });
+
+  const deleteItem = (id: string) => {
+    setChips({ ...chips, [id]: null });
+  };
+
+  const { chip, longchip, badgechip, readonlychip, overflowchip } = chips;
+  return (
+    <React.Fragment>
+      {chip && (
+        <React.Fragment>
+          <Chip key="chip1" onClick={() => deleteItem('chip')}>
+            {chip.name}
+          </Chip>
+          <br /> <br />
+        </React.Fragment>
+      )}
+      {longchip && (
+        <React.Fragment>
+          <Chip key="chip2" onClick={() => deleteItem('longchip')}>
+            {longchip.name}
+          </Chip>
+          <br /> <br />
+        </React.Fragment>
+      )}
+      {badgechip && (
+        <React.Fragment>
+          <Chip key="chip3" onClick={() => deleteItem('badgechip')}>
+            {badgechip.name}
+            <Badge isRead={badgechip.isRead}>{badgechip.count}</Badge>
+          </Chip>
+          <br /> <br />
+        </React.Fragment>
+      )}
+      <Chip key="chip4" onClick={() => deleteItem('readonlychip')} isReadOnly>
+        {readonlychip.name}
+      </Chip>
+      <br /> <br />
+      {overflowchip && (
+        <Chip key="chip5" component="button" onClick={() => deleteItem('overflowchip')} isOverflowChip>
+          {overflowchip.name}
+        </Chip>
+      )}
+    </React.Fragment>
+  );
+};

package/src/components/ChipGroup/examples/ChipGroup.md

@@ -8,145 +8,17 @@ ouia: true
 
 ## Examples
 
-### Simple inline chip group
+### Simple inline
 
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class SimpleInlineChipGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Really long chip that goes on and on', 'Chip three', 'Chip four', 'Chip five']
-    };
-
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-  }
-
-  render() {
-    const { chips } = this.state;
-
-    return (
-      <ChipGroup>
-        {chips.map(currentChip => (
-          <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-            {currentChip}
-          </Chip>
-        ))}
-      </ChipGroup>
-    );
-  }
-}
+```ts file='./ChipGroupInline.tsx'
 ```
 
-### Chip groups with categories
-
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class SimpleCategoryChipGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Chip two', 'Chip three', 'Chip four', 'Chip five']
-    };
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-  }
-
-  render() {
-    const { chips } = this.state;
+### With categories
 
-    return (
-      <ChipGroup categoryName="Category one">
-        {chips.map(currentChip => (
-          <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-            {currentChip}
-          </Chip>
-        ))}
-      </ChipGroup>
-    );
-  }
-}
+```ts file='./ChipGroupWithCategories.tsx'
 ```
 
-### Chip groups with categories removable
-
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class CategoryChipGroupRemovable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Chip two', 'Chip three'],
-      chips2: ['Chip one', 'Chip two', 'Chip three', 'Chip 4']
-    };
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-
-    this.deleteItem2 = id => {
-      const copyOfChips = this.state.chips2;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips2: copyOfChips });
-      }
-    };
-
-    this.deleteCategory = () => {
-      this.setState({ chips: [] });
-    };
-
-    this.deleteCategory2 = () => {
-      this.setState({ chips2: [] });
-    };
-  }
-
-  render() {
-    const { chips, chips2 } = this.state;
+### With removable categories
 
-    return (
-      <React.Fragment>
-        <ChipGroup categoryName="Category one" isClosable onClick={this.deleteCategory}>
-          {chips.map(currentChip => (
-            <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-              {currentChip}
-            </Chip>
-          ))}
-        </ChipGroup>
-        <br /> <br />
-        <ChipGroup categoryName="Category two has a very long name" isClosable onClick={this.deleteCategory2}>
-          {chips2.map(currentChip => (
-            <Chip key={currentChip} onClick={() => this.deleteItem2(currentChip)}>
-              {currentChip}
-            </Chip>
-          ))}
-        </ChipGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./ChipGroupRemovableCategories.tsx'
 ```

package/src/components/ChipGroup/examples/ChipGroupInline.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupInline: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState([
+    'Chip one',
+    'Really long chip that goes on and on',
+    'Chip three',
+    'Chip four',
+    'Chip five'
+  ]);
+
+  const deleteItem = (id: string) => {
+    const copyOfChips = [...chips];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    setChips(filteredCopy);
+  };
+
+  return (
+    <ChipGroup>
+      {chips.map(currentChip => (
+        <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>
+          {currentChip}
+        </Chip>
+      ))}
+    </ChipGroup>
+  );
+};

package/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
+  const [chipGroup1, setChipGroup1] = React.useState(['Chip one', 'Chip two', 'Chip three']);
+  const [chipGroup2, setChipGroup2] = React.useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']);
+
+  const deleteItem = (id: string, group: string[]) => {
+    const copyOfChips = [...group];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+
+    if (group === chipGroup1) {
+      setChipGroup1(filteredCopy);
+    } else {
+      setChipGroup2(filteredCopy);
+    }
+  };
+
+  const deleteCategory = (group: string[]) => {
+    if (group === chipGroup1) {
+      setChipGroup1([]);
+    } else {
+      setChipGroup2([]);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <ChipGroup categoryName="Category one" isClosable onClick={() => deleteCategory(chipGroup1)}>
+        {chipGroup1.map(currentChip => (
+          <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup1)}>
+            {currentChip}
+          </Chip>
+        ))}
+      </ChipGroup>
+      <br /> <br />
+      <ChipGroup categoryName="Category two has a very long name" isClosable onClick={() => deleteCategory(chipGroup2)}>
+        {chipGroup2.map(currentChip => (
+          <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup2)}>
+            {currentChip}
+          </Chip>
+        ))}
+      </ChipGroup>
+    </React.Fragment>
+  );
+};

package/src/components/ChipGroup/examples/ChipGroupWithCategories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupWithCategories: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState([
+    'Chip one',
+    'Really long chip that goes on and on',
+    'Chip three',
+    'Chip four',
+    'Chip five'
+  ]);
+
+  const deleteItem = (id: string) => {
+    const copyOfChips = [...chips];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    setChips(filteredCopy);
+  };
+
+  return (
+    <ChipGroup categoryName="Category one">
+      {chips.map(currentChip => (
+        <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>
+          {currentChip}
+        </Chip>
+      ))}
+    </ChipGroup>
+  );
+};

package/src/layouts/Flex/examples/Flex.md

@@ -81,7 +81,7 @@ import { Flex, FlexItem } from '@patternfly/react-core';
 import React from 'react';
 import { Flex, FlexItem } from '@patternfly/react-core';
 
-<Flex spaceItems={{ modifier: 'spaceItemsXl' }}>
+<Flex spaceItems={{ default: 'spaceItemsXl' }}>
   <FlexItem>Flex item</FlexItem>
   <FlexItem>Flex item</FlexItem>
   <FlexItem>Flex item</FlexItem>