@patternfly/react-core 4.221.11 → 4.221.12

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.221.12 (2022-06-10)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.221.11 (2022-06-09)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.css

@@ -9951,6 +9951,150 @@ label.pf-c-input-group__text {
     --pf-c-sidebar__panel--FlexBasis: 100%;
   }
 }
+.pf-c-label-group {
+  --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
+  --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-label-group__label--MarginBottom: 0;
+  --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-label-group__label--MaxWidth: 18ch;
+  --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
+  --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
+  --pf-c-label-group__textarea--MinWidth: 12.5rem;
+  --pf-c-label-group__textarea--PaddingTop: 0.125rem;
+  --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-label-group__textarea--PaddingBottom: 0;
+  --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
+  display: inline-flex;
+  align-items: center;
+}
+
+.pf-c-label-group.pf-m-category {
+  padding-top: var(--pf-c-label-group--m-category--PaddingTop);
+  padding-right: var(--pf-c-label-group--m-category--PaddingRight);
+  padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
+  padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
+  background-color: var(--pf-c-label-group--m-category--BackgroundColor);
+  border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
+  border-radius: var(--pf-c-label-group--m-category--BorderRadius);
+}
+
+.pf-c-label-group.pf-m-vertical {
+  --pf-c-label-group__list--MarginRight: 0;
+  --pf-c-label-group__list--MarginBottom: 0;
+  --pf-c-label-group__list-item--MarginRight: 0;
+  --pf-c-label-group__label--MarginRight: 0;
+  --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
+  --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
+  --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
+  --pf-c-label-group__close--MarginBottom: 0;
+  --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
+  --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
+}
+
+.pf-c-label-group.pf-m-vertical.pf-c-label-group {
+  align-items: flex-start;
+}
+
+.pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
+  flex-direction: column;
+}
+
+.pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
+  --pf-c-label-group__list-item--MarginBottom: 0;
+}
+
+.pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
+  --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
+  --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
+}
+
+.pf-c-label-group.pf-m-editable,
+.pf-c-label-group.pf-m-editable .pf-c-label-group__main,
+.pf-c-label-group.pf-m-editable .pf-c-label-group__list {
+  display: flex;
+}
+
+.pf-c-label-group.pf-m-editable .pf-c-label-group__main,
+.pf-c-label-group.pf-m-editable .pf-c-label-group__list,
+.pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
+.pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
+  flex: 1;
+}
+
+.pf-c-label-group__main {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+
+.pf-c-label-group__list {
+  display: inline-flex;
+  flex-wrap: wrap;
+  margin-right: var(--pf-c-label-group__list--MarginRight);
+  margin-bottom: var(--pf-c-label-group__list--MarginBottom);
+}
+
+.pf-c-label-group__list-item {
+  display: inline-flex;
+  margin-right: var(--pf-c-label-group__list-item--MarginRight);
+  margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
+}
+
+.pf-c-label-group__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: var(--pf-c-label-group__label--MaxWidth);
+  margin-right: var(--pf-c-label-group__label--MarginRight);
+  margin-bottom: var(--pf-c-label-group__label--MarginBottom);
+  font-size: var(--pf-c-label-group__label--FontSize);
+}
+
+.pf-c-label-group__close {
+  margin-top: var(--pf-c-label-group__close--MarginTop);
+  margin-right: var(--pf-c-label-group__close--MarginRight);
+  margin-bottom: var(--pf-c-label-group__close--MarginBottom);
+  margin-left: var(--pf-c-label-group__close--MarginLeft);
+}
+
+.pf-c-label-group__textarea {
+  min-width: var(--pf-c-label-group__textarea--MinWidth);
+  padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
+  white-space: nowrap;
+  resize: none;
+  border: 0;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.pf-c-label-group__textarea::-webkit-scrollbar {
+  display: none;
+}
+
 .pf-c-label {
   --pf-c-label--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
@@ -10414,150 +10558,6 @@ button.pf-c-label__content:focus {
   --pf-c-label--m-outline--m-cyan__content--link--focus--before--BorderColor: var(--pf-global--palette--cyan-100);
 }
 
-.pf-c-label-group {
-  --pf-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
-  --pf-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-label-group--m-vertical--m-category--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
-  --pf-c-label-group--m-category--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-label-group--m-category--BorderColor: var(--pf-global--BorderColor--300);
-  --pf-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-label-group__label--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-label-group__label--MarginBottom: 0;
-  --pf-c-label-group--m-vertical__label--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-label-group__label--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-label-group__label--MaxWidth: 18ch;
-  --pf-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-label-group--m-vertical__close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label-group--m-vertical__close--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label-group--m-vertical__close--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-label-group--m-vertical__close--c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-label-group--m-vertical__close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
-  --pf-c-label-group__textarea--MinWidth: 12.5rem;
-  --pf-c-label-group__textarea--PaddingTop: 0.125rem;
-  --pf-c-label-group__textarea--PaddingRight: var(--pf-global--spacer--xs);
-  --pf-c-label-group__textarea--PaddingBottom: 0;
-  --pf-c-label-group__textarea--PaddingLeft: var(--pf-global--spacer--xs);
-  display: inline-flex;
-  align-items: center;
-}
-
-.pf-c-label-group.pf-m-category {
-  padding-top: var(--pf-c-label-group--m-category--PaddingTop);
-  padding-right: var(--pf-c-label-group--m-category--PaddingRight);
-  padding-bottom: var(--pf-c-label-group--m-category--PaddingBottom);
-  padding-left: var(--pf-c-label-group--m-category--PaddingLeft);
-  background-color: var(--pf-c-label-group--m-category--BackgroundColor);
-  border: var(--pf-c-label-group--m-category--BorderWidth) solid var(--pf-c-label-group--m-category--BorderColor);
-  border-radius: var(--pf-c-label-group--m-category--BorderRadius);
-}
-
-.pf-c-label-group.pf-m-vertical {
-  --pf-c-label-group__list--MarginRight: 0;
-  --pf-c-label-group__list--MarginBottom: 0;
-  --pf-c-label-group__list-item--MarginRight: 0;
-  --pf-c-label-group__label--MarginRight: 0;
-  --pf-c-label-group__label--MarginBottom: var(--pf-c-label-group--m-vertical__label--MarginBottom);
-  --pf-c-label-group__close--MarginTop: var(--pf-c-label-group--m-vertical__close--MarginTop);
-  --pf-c-label-group__close--MarginLeft: var(--pf-c-label-group--m-vertical__close--MarginLeft);
-  --pf-c-label-group__close--MarginBottom: 0;
-  --pf-c-label-group__close--MarginRight: var(--pf-c-label-group--m-vertical__close--MarginRight);
-  --pf-c-label-group--m-category--PaddingRight: var(--pf-c-label-group--m-vertical--m-category--PaddingRight);
-}
-
-.pf-c-label-group.pf-m-vertical.pf-c-label-group {
-  align-items: flex-start;
-}
-
-.pf-c-label-group.pf-m-vertical .pf-c-label-group__list {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.pf-c-label-group.pf-m-vertical .pf-c-label-group__main {
-  flex-direction: column;
-}
-
-.pf-c-label-group.pf-m-vertical .pf-c-label-group__list-item:last-child {
-  --pf-c-label-group__list-item--MarginBottom: 0;
-}
-
-.pf-c-label-group.pf-m-vertical .pf-c-label-group__close .pf-c-button {
-  --pf-c-button--PaddingLeft: var(--pf-c-label-group--m-vertical__close--c-button--PaddingLeft);
-  --pf-c-button--PaddingRight: var(--pf-c-label-group--m-vertical__close--c-button--PaddingRight);
-}
-
-.pf-c-label-group.pf-m-editable,
-.pf-c-label-group.pf-m-editable .pf-c-label-group__main,
-.pf-c-label-group.pf-m-editable .pf-c-label-group__list {
-  display: flex;
-}
-
-.pf-c-label-group.pf-m-editable .pf-c-label-group__main,
-.pf-c-label-group.pf-m-editable .pf-c-label-group__list,
-.pf-c-label-group.pf-m-editable .pf-c-label-group__list-item.pf-m-textarea,
-.pf-c-label-group.pf-m-editable .pf-c-label-group__textarea {
-  flex: 1;
-}
-
-.pf-c-label-group__main {
-  display: flex;
-  flex: 1;
-  flex-wrap: wrap;
-  align-items: baseline;
-}
-
-.pf-c-label-group__list {
-  display: inline-flex;
-  flex-wrap: wrap;
-  margin-right: var(--pf-c-label-group__list--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list--MarginBottom);
-}
-
-.pf-c-label-group__list-item {
-  display: inline-flex;
-  margin-right: var(--pf-c-label-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-label-group__list-item--MarginBottom);
-}
-
-.pf-c-label-group__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: var(--pf-c-label-group__label--MaxWidth);
-  margin-right: var(--pf-c-label-group__label--MarginRight);
-  margin-bottom: var(--pf-c-label-group__label--MarginBottom);
-  font-size: var(--pf-c-label-group__label--FontSize);
-}
-
-.pf-c-label-group__close {
-  margin-top: var(--pf-c-label-group__close--MarginTop);
-  margin-right: var(--pf-c-label-group__close--MarginRight);
-  margin-bottom: var(--pf-c-label-group__close--MarginBottom);
-  margin-left: var(--pf-c-label-group__close--MarginLeft);
-}
-
-.pf-c-label-group__textarea {
-  min-width: var(--pf-c-label-group__textarea--MinWidth);
-  padding: var(--pf-c-label-group__textarea--PaddingTop) var(--pf-c-label-group__textarea--PaddingRight) var(--pf-c-label-group__textarea--PaddingBottom) var(--pf-c-label-group__textarea--PaddingLeft);
-  white-space: nowrap;
-  resize: none;
-  border: 0;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.pf-c-label-group__textarea::-webkit-scrollbar {
-  display: none;
-}
-
 .pf-c-list {
   --pf-c-list--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-list--nested--MarginTop: var(--pf-global--spacer--sm);

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

@@ -9135,6 +9135,76 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-helper-text__item-text--m-success--Color: var(--pf-global--success-color--100);
 }
 
+.pf-c-hint {
+  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
+  --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
+  --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
+  --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
+  --pf-c-hint--Color: var(--pf-global--Color--100);
+  --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
+  --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
+  --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
+  --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-row-gap: var(--pf-c-hint--GridRowGap);
+  padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
+  color: var(--pf-c-hint--Color);
+  background-color: var(--pf-c-hint--BackgroundColor);
+  border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
+  box-shadow: var(--pf-c-hint--BoxShadow);
+}
+
+.pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
+  text-align: left;
+  white-space: normal;
+}
+
+.pf-c-hint__actions {
+  display: inline-grid;
+  grid-auto-flow: column;
+  margin-left: var(--pf-c-hint__actions--MarginLeft);
+  text-align: right;
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
+  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
+}
+
+.pf-c-hint__actions + .pf-c-hint__body {
+  grid-column: 1;
+}
+
+.pf-c-hint__title {
+  font-size: var(--pf-c-hint__title--FontSize);
+}
+
+.pf-c-hint__body {
+  grid-column: 1/-1;
+  font-size: var(--pf-c-hint__body--FontSize);
+}
+
+.pf-c-hint__footer {
+  grid-column: 1/-1;
+}
+
+.pf-c-hint__footer > :not(:last-child) {
+  margin-right: var(--pf-c-hint__footer--child--MarginRight);
+}
+
+:where(.pf-theme-dark) .pf-c-hint {
+  --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
+}
+
 .pf-c-input-group {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -9237,76 +9307,6 @@ label.pf-c-input-group__text {
   --pf-c-input-group__text--BackgroundColor: transparent;
 }
 
-.pf-c-hint {
-  --pf-c-hint--GridRowGap: var(--pf-global--spacer--md);
-  --pf-c-hint--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-hint--PaddingRight: var(--pf-global--spacer--lg);
-  --pf-c-hint--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-hint--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50);
-  --pf-c-hint--BorderColor: var(--pf-global--palette--blue-100);
-  --pf-c-hint--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm);
-  --pf-c-hint--Color: var(--pf-global--Color--100);
-  --pf-c-hint__title--FontSize: var(--pf-global--FontSize--lg);
-  --pf-c-hint__body--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-hint__footer--child--MarginRight: var(--pf-global--spacer--md);
-  --pf-c-hint__actions--MarginLeft: var(--pf-global--spacer--2xl);
-  --pf-c-hint__actions--c-dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-row-gap: var(--pf-c-hint--GridRowGap);
-  padding: var(--pf-c-hint--PaddingTop) var(--pf-c-hint--PaddingRight) var(--pf-c-hint--PaddingBottom) var(--pf-c-hint--PaddingLeft);
-  color: var(--pf-c-hint--Color);
-  background-color: var(--pf-c-hint--BackgroundColor);
-  border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
-  box-shadow: var(--pf-c-hint--BoxShadow);
-}
-
-.pf-c-hint .pf-c-button.pf-m-link.pf-m-inline {
-  text-align: left;
-  white-space: normal;
-}
-
-.pf-c-hint__actions {
-  display: inline-grid;
-  grid-auto-flow: column;
-  margin-left: var(--pf-c-hint__actions--MarginLeft);
-  text-align: right;
-  grid-column: 2;
-  grid-row: 1;
-}
-
-.pf-c-hint__actions .pf-c-dropdown .pf-c-dropdown__toggle.pf-m-plain {
-  margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
-}
-
-.pf-c-hint__actions + .pf-c-hint__body {
-  grid-column: 1;
-}
-
-.pf-c-hint__title {
-  font-size: var(--pf-c-hint__title--FontSize);
-}
-
-.pf-c-hint__body {
-  grid-column: 1/-1;
-  font-size: var(--pf-c-hint__body--FontSize);
-}
-
-.pf-c-hint__footer {
-  grid-column: 1/-1;
-}
-
-.pf-c-hint__footer > :not(:last-child) {
-  margin-right: var(--pf-c-hint__footer--child--MarginRight);
-}
-
-:where(.pf-theme-dark) .pf-c-hint {
-  --pf-c-hint--BackgroundColor: var(--pf-global--BackgroundColor--400);
-  --pf-c-hint--BorderColor: var(--pf-global--BorderColor--300);
-}
-
 .pf-c-jump-links {
   --pf-c-jump-links__list--Display: flex;
   --pf-c-jump-links__list--Visibility: visible;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.11",
+  "version": "4.221.12",
   "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.72.11",
-    "@patternfly/react-styles": "^4.71.11",
-    "@patternfly/react-tokens": "^4.73.11",
+    "@patternfly/react-icons": "^4.72.12",
+    "@patternfly/react-styles": "^4.71.12",
+    "@patternfly/react-tokens": "^4.73.12",
     "focus-trap": "6.9.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": "fd4459f338c4b07d600383d7204a240abd58d710"
+  "gitHead": "b8e574fd78b7216e72082488152e8031a1e5761a"
 }

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -11,217 +11,37 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 
 ### Basic
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class SimpleExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionBasic.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-<ExpandableSection toggleText="Show more">
-  This content is visible only when the component is expanded.
-</ExpandableSection>;
+```ts file="ExpandableSectionUncontrolled.tsx"
 ```
 
 ### Uncontrolled with dynamic toggle text
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-<ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
-  This content is visible only when the component is expanded.
-</ExpandableSection>;
+```ts file="ExpandableSectionUncontrolledDynamicToggleText.tsx"
 ```
 
 ### Detached
 
-```js
-import React from 'react';
-import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
-
-class DetachedExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    const contentId = 'detached-toggle-content';
-    return (
-      <Stack hasGutter>
-        <StackItem>
-          <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
-            This content is visible only when the component is expanded.
-          </ExpandableSection>
-        </StackItem>
-        <StackItem>
-          <ExpandableSectionToggle
-            isExpanded={isExpanded}
-            onToggle={this.onToggle}
-            contentId={contentId}
-            direction="up"
-          >
-            {isExpanded ? 'Show less' : 'Show more'}
-          </ExpandableSectionToggle>
-        </StackItem>
-      </Stack>
-    );
-  }
-}
+```ts file="ExpandableSectionDetached.tsx"
 ```
 
 ### Disclosure variation
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class DisclosureExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-        displaySize="large"
-        isWidthLimited
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionDisclosure.tsx"
 ```
 
 ### Indented
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class SimpleExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-        isIndented={true}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionIndented.tsx"
 ```
 
 ### With custom toggle content
 
 By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.
 
-```js
-import React from "react";
-import { ExpandableSection, Badge } from "@patternfly/react-core";
-import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
-
-class CustomExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = (isExpanded) => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleContent={
-          <div>
-            <span>You can also use icons </span>
-            <CheckCircleIcon />
-            <span> or badges </span>
-            <Badge isRead={true}>4</Badge>
-            <span> !</span>
-          </div>
-        }
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionCustomToggle.tsx"
 ```

package/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionBasic: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection toggleText={isExpanded ? 'Show less' : 'Show more'} onToggle={onToggle} isExpanded={isExpanded}>
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ExpandableSection, Badge } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleContent={
+        <div>
+          <span>You can also use icons </span>
+          <CheckCircleIcon />
+          <span> or badges </span>
+          <Badge isRead={true}>4</Badge>
+          <span> !</span>
+        </div>
+      }
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
+
+export const ExpandableSectionDetached: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const contentId = 'detached-toggle-content';
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
+          This content is visible only when the component is expanded.
+        </ExpandableSection>
+      </StackItem>
+      <StackItem>
+        <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId={contentId} direction="up">
+          {isExpanded ? 'Show less' : 'Show more'}
+        </ExpandableSectionToggle>
+      </StackItem>
+    </Stack>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      displaySize="large"
+      isWidthLimited
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionIndented: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      isIndented
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionUncontrolled: React.FunctionComponent = () => (
+  <ExpandableSection toggleText="Show more">
+    This content is visible only when the component is expanded.
+  </ExpandableSection>
+);

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionUncontrolledDynamicToggle: React.FunctionComponent = () => (
+  <ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
+    This content is visible only when the component is expanded.
+  </ExpandableSection>
+);