@patternfly/react-core 4.252.0 → 4.252.1

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.252.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.252.0...@patternfly/react-core@4.252.1) (2022-10-18)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 # [4.252.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.251.4...@patternfly/react-core@4.252.0) (2022-10-17)
 
 

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

@@ -1634,6 +1634,45 @@ textarea.pf-c-form-control {
   display: block;
 }
 
+.pf-c-badge {
+  --pf-c-badge--BorderRadius: var(--pf-global--BorderRadius--lg);
+  --pf-c-badge--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-badge--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-badge--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-badge--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-badge--Color: var(--pf-global--Color--dark-100);
+  --pf-c-badge--MinWidth: var(--pf-global--spacer--xl);
+  --pf-c-badge--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-badge--m-read--Color: var(--pf-global--Color--dark-100);
+  --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-badge--m-unread--Color: var(--pf-global--Color--light-100);
+  display: inline-block;
+  min-width: var(--pf-c-badge--MinWidth);
+  padding-right: var(--pf-c-badge--PaddingRight);
+  padding-left: var(--pf-c-badge--PaddingLeft);
+  font-size: var(--pf-c-badge--FontSize);
+  font-weight: var(--pf-c-badge--FontWeight);
+  color: var(--pf-c-badge--Color);
+  text-align: center;
+  background-color: var(--pf-c-badge--BackgroundColor);
+  border-radius: var(--pf-c-badge--BorderRadius);
+}
+
+.pf-c-badge.pf-m-read {
+  --pf-c-badge--Color: var(--pf-c-badge--m-read--Color);
+  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor);
+}
+
+.pf-c-badge.pf-m-unread {
+  --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color);
+  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
+}
+
+:where(.pf-theme-dark) .pf-c-badge {
+  --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);
+}
+
 .pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -1812,45 +1851,6 @@ textarea.pf-c-form-control {
   color: var(--pf-global--palette--black-900);
 }
 
-.pf-c-badge {
-  --pf-c-badge--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-badge--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-badge--FontWeight: var(--pf-global--FontWeight--bold);
-  --pf-c-badge--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-badge--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-badge--Color: var(--pf-global--Color--dark-100);
-  --pf-c-badge--MinWidth: var(--pf-global--spacer--xl);
-  --pf-c-badge--m-read--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-badge--m-read--Color: var(--pf-global--Color--dark-100);
-  --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-badge--m-unread--Color: var(--pf-global--Color--light-100);
-  display: inline-block;
-  min-width: var(--pf-c-badge--MinWidth);
-  padding-right: var(--pf-c-badge--PaddingRight);
-  padding-left: var(--pf-c-badge--PaddingLeft);
-  font-size: var(--pf-c-badge--FontSize);
-  font-weight: var(--pf-c-badge--FontWeight);
-  color: var(--pf-c-badge--Color);
-  text-align: center;
-  background-color: var(--pf-c-badge--BackgroundColor);
-  border-radius: var(--pf-c-badge--BorderRadius);
-}
-
-.pf-c-badge.pf-m-read {
-  --pf-c-badge--Color: var(--pf-c-badge--m-read--Color);
-  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-read--BackgroundColor);
-}
-
-.pf-c-badge.pf-m-unread {
-  --pf-c-badge--Color: var(--pf-c-badge--m-unread--Color);
-  --pf-c-badge--BackgroundColor: var(--pf-c-badge--m-unread--BackgroundColor);
-}
-
-:where(.pf-theme-dark) .pf-c-badge {
-  --pf-c-badge--m-read--BackgroundColor: var(--pf-global--palette--black-500);
-  --pf-c-badge--m-unread--BackgroundColor: var(--pf-global--primary-color--300);
-}
-
 .pf-c-brand {
   --pf-c-brand--Width: auto;
   --pf-c-brand--Height: auto;
@@ -3323,118 +3323,6 @@ label.pf-c-check, .pf-c-check__label,
   color: var(--pf-c-check__label-required--Color);
 }
 
-.pf-c-chip {
-  --pf-global--Color--100: var(--pf-global--Color--dark-100);
-  --pf-global--Color--200: var(--pf-global--Color--dark-200);
-  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
-  --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
-  --pf-global--link--Color: var(--pf-global--link--Color--dark);
-  --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
-  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
-}
-
-.pf-c-chip {
-  --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100);
-  --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm);
-  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300);
-  --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
-  --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100);
-  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
-  --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-chip__text--Color: var(--pf-global--Color--100);
-  --pf-c-chip__text--MaxWidth: 16ch;
-  --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
-  --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
-  --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
-  --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
-  color: var(--pf-global--Color--100);
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  min-width: 0;
-  padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
-  list-style: none;
-  background-color: var(--pf-c-chip--BackgroundColor);
-  border-radius: var(--pf-c-chip--BorderRadius);
-}
-
-.pf-c-chip::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: "";
-  border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
-  border-radius: var(--pf-c-chip--before--BorderRadius);
-}
-
-.pf-c-chip.pf-m-overflow {
-  border: 0;
-}
-
-.pf-c-chip.pf-m-overflow .pf-c-chip__text {
-  color: var(--pf-c-chip--m-overflow__text--Color);
-}
-
-.pf-c-chip.pf-m-draggable {
-  --pf-c-chip--BackgroundColor: var(--pf-c-chip--m-draggable--BackgroundColor);
-  box-shadow: var(--pf-c-chip--m-draggable--BoxShadow);
-}
-
-.pf-c-chip.pf-m-draggable .pf-c-chip__icon {
-  font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
-}
-
-.pf-c-chip .pf-c-button {
-  --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
-  --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
-  --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
-  --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
-  margin-top: var(--pf-c-chip__c-button--MarginTop);
-  margin-right: var(--pf-c-chip__c-button--MarginRight);
-  margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
-}
-
-.pf-c-chip .pf-c-badge {
-  margin-left: var(--pf-c-chip__c-badge--MarginLeft);
-}
-
-.pf-c-chip__text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  position: relative;
-  max-width: var(--pf-c-chip__text--MaxWidth);
-  font-size: var(--pf-c-chip__text--FontSize);
-  color: var(--pf-c-chip__text--Color);
-}
-
-.pf-c-chip__icon + .pf-c-chip__text,
-.pf-c-chip__text + .pf-c-chip__icon {
-  margin-left: var(--pf-c-chip__icon--MarginLeft);
-}
-
-:where(.pf-theme-dark) .pf-c-chip {
-  --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
-}
-
 .pf-c-chip-group {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -3628,6 +3516,118 @@ label.pf-c-check, .pf-c-check__label,
   border: 0;
 }
 
+.pf-c-chip {
+  --pf-global--Color--100: var(--pf-global--Color--dark-100);
+  --pf-global--Color--200: var(--pf-global--Color--dark-200);
+  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
+  --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
+  --pf-global--link--Color: var(--pf-global--link--Color--dark);
+  --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
+  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
+}
+
+.pf-c-chip {
+  --pf-c-chip--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-chip--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100);
+  --pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300);
+  --pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
+  --pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100);
+  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
+  --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__text--Color: var(--pf-global--Color--100);
+  --pf-c-chip__text--MaxWidth: 16ch;
+  --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
+  --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
+  --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
+  --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
+  color: var(--pf-global--Color--100);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
+  list-style: none;
+  background-color: var(--pf-c-chip--BackgroundColor);
+  border-radius: var(--pf-c-chip--BorderRadius);
+}
+
+.pf-c-chip::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
+  border-radius: var(--pf-c-chip--before--BorderRadius);
+}
+
+.pf-c-chip.pf-m-overflow {
+  border: 0;
+}
+
+.pf-c-chip.pf-m-overflow .pf-c-chip__text {
+  color: var(--pf-c-chip--m-overflow__text--Color);
+}
+
+.pf-c-chip.pf-m-draggable {
+  --pf-c-chip--BackgroundColor: var(--pf-c-chip--m-draggable--BackgroundColor);
+  box-shadow: var(--pf-c-chip--m-draggable--BoxShadow);
+}
+
+.pf-c-chip.pf-m-draggable .pf-c-chip__icon {
+  font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
+}
+
+.pf-c-chip .pf-c-button {
+  --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
+  --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
+  --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
+  --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
+  margin-top: var(--pf-c-chip__c-button--MarginTop);
+  margin-right: var(--pf-c-chip__c-button--MarginRight);
+  margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
+}
+
+.pf-c-chip .pf-c-badge {
+  margin-left: var(--pf-c-chip__c-badge--MarginLeft);
+}
+
+.pf-c-chip__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+  max-width: var(--pf-c-chip__text--MaxWidth);
+  font-size: var(--pf-c-chip__text--FontSize);
+  color: var(--pf-c-chip__text--Color);
+}
+
+.pf-c-chip__icon + .pf-c-chip__text,
+.pf-c-chip__text + .pf-c-chip__icon {
+  margin-left: var(--pf-c-chip__icon--MarginLeft);
+}
+
+:where(.pf-theme-dark) .pf-c-chip {
+  --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--palette--black-600);
+}
+
 .pf-c-code-block {
   --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -8635,81 +8635,6 @@ label.pf-c-check, .pf-c-check__label,
   font-weight: var(--pf-global--FontWeight--semi-bold);
 }
 
-.pf-c-file-upload {
-  --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
-  --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
-  --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
-  --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
-  --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
-  --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
-  --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.pf-c-file-upload.pf-m-drag-hover::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
-  content: "";
-  border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor);
-}
-
-.pf-c-file-upload.pf-m-drag-hover::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: "";
-  background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
-  opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity);
-}
-
-.pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
-  position: relative;
-}
-
-.pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
-  position: absolute;
-  top: 0;
-  right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
-  bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
-  left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
-  content: "";
-  background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor);
-}
-
-.pf-c-file-upload__file-select .pf-c-button.pf-m-control {
-  outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset);
-}
-
-.pf-c-file-upload__file-details {
-  position: relative;
-  display: flex;
-}
-
-.pf-c-file-upload__file-details .pf-c-form-control {
-  flex: 1 1 auto;
-  min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
-  border-top: 0;
-}
-
-.pf-c-file-upload__file-details-spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .pf-c-form {
   --pf-c-form--GridGap: var(--pf-global--gutter--md);
   --pf-c-form__group--m-action--MarginTop: var(--pf-global--spacer--xl);
@@ -9276,6 +9201,81 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-form__helper-text--m-success--Color: var(--pf-global--success-color--100);
 }
 
+.pf-c-file-upload {
+  --pf-c-file-upload--m-loading__file-details--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-file-upload--m-loading__file-details--before--Left: var(--pf-global--BorderWidth--sm);
+  --pf-c-file-upload--m-loading__file-details--before--Right: var(--pf-global--BorderWidth--sm);
+  --pf-c-file-upload--m-loading__file-details--before--Bottom: var(--pf-global--BorderWidth--sm);
+  --pf-c-file-upload--m-drag-hover--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-file-upload--m-drag-hover--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-file-upload--m-drag-hover--before--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-file-upload--m-drag-hover--after--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-file-upload--m-drag-hover--after--Opacity: .1;
+  --pf-c-file-upload__file-details__c-form-control--MinHeight: calc(var(--pf-global--spacer--3xl) * 2);
+  --pf-c-file-upload__file-select__c-button--m-control--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.pf-c-file-upload.pf-m-drag-hover::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--pf-c-file-upload--m-drag-hover--before--ZIndex);
+  content: "";
+  border: var(--pf-c-file-upload--m-drag-hover--before--BorderWidth) solid var(--pf-c-file-upload--m-drag-hover--before--BorderColor);
+}
+
+.pf-c-file-upload.pf-m-drag-hover::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  background-color: var(--pf-c-file-upload--m-drag-hover--after--BackgroundColor);
+  opacity: var(--pf-c-file-upload--m-drag-hover--after--Opacity);
+}
+
+.pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details {
+  position: relative;
+}
+
+.pf-c-file-upload.pf-m-loading .pf-c-file-upload__file-details::before {
+  position: absolute;
+  top: 0;
+  right: var(--pf-c-file-upload--m-loading__file-details--before--Left);
+  bottom: var(--pf-c-file-upload--m-loading__file-details--before--Left);
+  left: var(--pf-c-file-upload--m-loading__file-details--before--Left);
+  content: "";
+  background-color: var(--pf-c-file-upload--m-loading__file-details--before--BackgroundColor);
+}
+
+.pf-c-file-upload__file-select .pf-c-button.pf-m-control {
+  outline-offset: var(--pf-c-file-upload__file-select__c-button--m-control--OutlineOffset);
+}
+
+.pf-c-file-upload__file-details {
+  position: relative;
+  display: flex;
+}
+
+.pf-c-file-upload__file-details .pf-c-form-control {
+  flex: 1 1 auto;
+  min-height: var(--pf-c-file-upload__file-details__c-form-control--MinHeight);
+  border-top: 0;
+}
+
+.pf-c-file-upload__file-details-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .pf-c-helper-text {
   --pf-c-helper-text--Gap: var(--pf-global--spacer--xs);
   --pf-c-helper-text--FontSize: var(--pf-global--FontSize--sm);

package/package.json

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

package/src/components/SimpleList/examples/SimpleList.md

@@ -9,120 +9,16 @@ propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 
 ### Simple list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem } from '@patternfly/react-core';
-
-class SimpleListDemo extends React.Component {
-  onSelect(selectedItem, selectedItemProps) {
-    console.log('new selection SimpleListDemo', selectedItem, selectedItemProps);
-  }
-
-  render() {
-    const items = [
-      <SimpleListItem key="item1" isActive>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" component="a" href="#">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3">List item 3</SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} aria-label="Simple List Example">
-        {items}
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListBasic.tsx"
 ```
 
 ### Grouped list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
-
-class SimpleListGroupDemo extends React.Component {
-  onSelect(selectedItem, selectedItemProps) {
-    console.log('new selection SimpleListGroupDemo', selectedItem, selectedItemProps);
-  }
-
-  render() {
-    const group1Items = [
-      <SimpleListItem key="item1" isActive>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" id="test 2">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3">List item 3</SimpleListItem>,
-      <SimpleListItem key="item4">List item 4</SimpleListItem>
-    ];
-
-    const group2Items = [
-      <SimpleListItem key="item5">List item 1</SimpleListItem>,
-      <SimpleListItem key="item6" component="a" href="#">
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item7" component="a" href="#">
-        List item 3
-      </SimpleListItem>,
-      <SimpleListItem key="item8">List item 4</SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} aria-label="Grouped List Example">
-        <SimpleListGroup title="Group 1" id="group-1">
-          {group1Items}
-        </SimpleListGroup>
-        <SimpleListGroup title="Group 2" id="group-2">
-          {group2Items}
-        </SimpleListGroup>
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListGrouped.tsx"
 ```
 
 ### Uncontrolled simple list
 
-```js
-import React from 'react';
-import { SimpleList, SimpleListItem } from '@patternfly/react-core';
-
-class SimpleListUncontrolledDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 0
-    };
-    this.onSelect = (selectedItem, selectedItemProps) => {
-      console.log('new selection SimpleListUncontrolledDemo', selectedItem, selectedItemProps);
-      this.setState({ activeItem: selectedItemProps.itemId });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    const items = [
-      <SimpleListItem key="item1" itemId={0} isActive={activeItem === 0}>
-        List item 1
-      </SimpleListItem>,
-      <SimpleListItem key="item2" itemId={1} isActive={activeItem === 1}>
-        List item 2
-      </SimpleListItem>,
-      <SimpleListItem key="item3" itemId={2} isActive={activeItem === 2}>
-        List item 3
-      </SimpleListItem>
-    ];
-
-    return (
-      <SimpleList onSelect={this.onSelect} isControlled={false} aria-label="Uncontrolled Simple List Example">
-        {items}
-      </SimpleList>
-    );
-  }
-}
+```ts file="SimpleListUncontrolled.tsx"
 ```
+

package/src/components/SimpleList/examples/SimpleListBasic.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SimpleList, SimpleListItem } from '@patternfly/react-core';
+
+export const SimpleListBasic: React.FunctionComponent = () => {
+  const items = [
+    <SimpleListItem key="item1" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3">List item 3</SimpleListItem>
+  ];
+
+  return <SimpleList aria-label="Simple List Example">{items}</SimpleList>;
+};

package/src/components/SimpleList/examples/SimpleListGrouped.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SimpleList, SimpleListItem, SimpleListGroup } from '@patternfly/react-core';
+
+export const SimpleListGrouped: React.FunctionComponent = () => {
+  const group1Items = [
+    <SimpleListItem key="item1" isActive>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2">List item 2</SimpleListItem>,
+    <SimpleListItem key="item3">List item 3</SimpleListItem>,
+    <SimpleListItem key="item4">List item 4</SimpleListItem>
+  ];
+
+  const group2Items = [
+    <SimpleListItem key="item5">List item 1</SimpleListItem>,
+    <SimpleListItem key="item6" component="a" href="#">
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item7" component="a" href="#">
+      List item 3
+    </SimpleListItem>,
+    <SimpleListItem key="item8">List item 4</SimpleListItem>
+  ];
+
+  return (
+    <SimpleList aria-label="Grouped simple list example">
+      <SimpleListGroup title="Group 1" id="group-1">
+        {group1Items}
+      </SimpleListGroup>
+      <SimpleListGroup title="Group 2" id="group-2">
+        {group2Items}
+      </SimpleListGroup>
+    </SimpleList>
+  );
+};

package/src/components/SimpleList/examples/SimpleListUncontrolled.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SimpleList, SimpleListItem, SimpleListItemProps } from '@patternfly/react-core';
+
+export const SimpleListUncontrolled: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (
+    selectedItem: React.RefObject<HTMLButtonElement> | React.RefObject<HTMLAnchorElement>,
+    selectedItemProps: SimpleListItemProps
+  ) => {
+    setActiveItem(selectedItemProps.itemId as number);
+  };
+
+  const items = [
+    <SimpleListItem key="item1" itemId={0} isActive={activeItem === 0}>
+      List item 1
+    </SimpleListItem>,
+    <SimpleListItem key="item2" itemId={1} isActive={activeItem === 1}>
+      List item 2
+    </SimpleListItem>,
+    <SimpleListItem key="item3" itemId={2} isActive={activeItem === 2}>
+      List item 3
+    </SimpleListItem>
+  ];
+
+  return (
+    <SimpleList onSelect={onSelect} isControlled={false} aria-label="Uncontrolled Simple List Example">
+      {items}
+    </SimpleList>
+  );
+};