@patternfly/patternfly 6.0.0-alpha.57 → 6.0.0-alpha.59

package/components/ToggleGroup/toggle-group.css

@@ -1,38 +1,39 @@
-.pf-v5-c-toggle-group {
-  --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-toggle-group__button--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-toggle-group__button--LineHeight: calc(var(--pf-v5-global--FontSize--md) * var(--pf-v5-global--LineHeight--md));
-  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+:where(:root),
+:where(.pf-v5-c-toggle-group) {
+  --pf-v5-c-toggle-group__button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-toggle-group__button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v5-c-toggle-group__button--ZIndex: auto;
-  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-toggle-group__button--focus--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-toggle-group__button--focus--before--BorderColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-v5-global--BorderWidth--sm));
-  --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
-  --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
-  --pf-v5-c-toggle-group__button--m-selected--Color: initial;
-  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
+  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --pf-v5-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v5-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --pf-v5-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
+  --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
+  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
   --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
-  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-toggle-group--m-compact__button--PaddingBottom: 0;
-  --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-v5-global--FontSize--xs);
+  --pf-v5-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
+}
+
+.pf-v5-c-toggle-group {
   display: flex;
 }
 .pf-v5-c-toggle-group.pf-m-compact {
@@ -79,17 +80,12 @@
   content: "";
   border: var(--pf-v5-c-toggle-group__button--before--BorderWidth) solid var(--pf-v5-c-toggle-group__button--before--BorderColor);
 }
-.pf-v5-c-toggle-group__button:hover {
+.pf-v5-c-toggle-group__button:hover, .pf-v5-c-toggle-group__button:focus {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--hover--BackgroundColor);
   --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--hover--ZIndex);
   --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--hover--before--BorderColor);
   text-decoration: none;
 }
-.pf-v5-c-toggle-group__button:focus {
-  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--focus--BackgroundColor);
-  --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--focus--ZIndex);
-  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--focus--before--BorderColor);
-}
 .pf-v5-c-toggle-group__button.pf-m-selected {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
   --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
@@ -105,13 +101,4 @@
 .pf-v5-c-toggle-group__icon + .pf-v5-c-toggle-group__text,
 .pf-v5-c-toggle-group__text + .pf-v5-c-toggle-group__icon {
   margin-inline-start: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
-  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--palette--black-700);
-  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
-  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
-  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
-  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
 }

package/components/ToggleGroup/toggle-group.scss

@@ -1,50 +1,50 @@
 // @debug $toggle-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$toggle-group} {
+:where(:root),
+:where(.#{$toggle-group}) {
   // button
-  --#{$toggle-group}__button--PaddingTop: var(--#{$pf-global}--spacer--form-element);
-  --#{$toggle-group}__button--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$toggle-group}__button--PaddingBottom: var(--#{$pf-global}--spacer--form-element);
-  --#{$toggle-group}__button--PaddingLeft: var(--#{$pf-global}--spacer--md);
-  --#{$toggle-group}__button--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$toggle-group}__button--LineHeight: calc(var(--#{$pf-global}--FontSize--md) * var(--#{$pf-global}--LineHeight--md));
-  --#{$toggle-group}__button--Color: var(--#{$pf-global}--Color--100);
-  --#{$toggle-group}__button--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
+  --#{$toggle-group}__button--PaddingTop: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}__button--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$toggle-group}__button--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}__button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$toggle-group}__button--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$toggle-group}__button--LineHeight: var(--pf-t--global--font--line-height--body);
+  --#{$toggle-group}__button--Color: var(--pf-t--global--text--color--regular);
+  --#{$toggle-group}__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$toggle-group}__button--ZIndex: auto;
-  --#{$toggle-group}__button--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$toggle-group}__button--hover--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$toggle-group}__button--hover--before--BorderColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$toggle-group}__button--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
-  --#{$toggle-group}__button--focus--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$toggle-group}__button--focus--before--BorderColor: var(--#{$pf-global}--BorderColor--200);
-  --#{$toggle-group}__button--disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
-  --#{$toggle-group}__button--disabled--Color: var(--#{$pf-global}--disabled-color--100);
-  --#{$toggle-group}__button--before--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$toggle-group}__button--before--BorderColor: var(--#{$pf-global}--BorderColor--100);
+  --#{$toggle-group}__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --#{$toggle-group}__button--hover--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$toggle-group}__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$toggle-group}__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --#{$toggle-group}__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$toggle-group}__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
 
   // item
-  --#{$toggle-group}__item--item--MarginLeft: calc(-1 * var(--#{$pf-global}--BorderWidth--sm));
-  --#{$toggle-group}__item--first-child__button--BorderTopLeftRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$toggle-group}__item--last-child__button--BorderTopRightRadius: var(--#{$pf-global}--BorderRadius--sm);
-  --#{$toggle-group}__item--last-child__button--BorderBottomRightRadius: var(--#{$pf-global}--BorderRadius--sm);
+  --#{$toggle-group}__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
+  --#{$toggle-group}__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
+  --#{$toggle-group}__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
+  --#{$toggle-group}__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
 
   // icon
-  --#{$toggle-group}__icon--text--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$toggle-group}__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
 
   // Selected
-  --#{$toggle-group}__button--m-selected--BackgroundColor: var(--#{$pf-global}--palette--blue-50);
-  --#{$toggle-group}__button--m-selected--Color: initial;
-  --#{$toggle-group}__button--m-selected--before--BorderColor: var(--#{$pf-global}--primary-color--100);
-  --#{$toggle-group}__button--m-selected--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --#{$toggle-group}__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
+  --#{$toggle-group}__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
+  --#{$toggle-group}__button--m-selected--ZIndex: var(--pf-t--global--Zindex--xs);
 
   // Compact
   --#{$toggle-group}--m-compact__button--PaddingTop: 0;
-  --#{$toggle-group}--m-compact__button--PaddingRight: var(--#{$pf-global}--spacer--sm);
+  --#{$toggle-group}--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$toggle-group}--m-compact__button--PaddingBottom: 0;
-  --#{$toggle-group}--m-compact__button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$toggle-group}--m-compact__button--FontSize: var(--#{$pf-global}--FontSize--xs);
+  --#{$toggle-group}--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
+}
 
+.#{$toggle-group} {
   display: flex;
 
   &.pf-m-compact {
@@ -107,7 +107,8 @@
     border: var(--#{$toggle-group}__button--before--BorderWidth) solid var(--#{$toggle-group}__button--before--BorderColor);
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--hover--BackgroundColor);
     --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--hover--ZIndex);
     --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--hover--before--BorderColor);
@@ -115,12 +116,6 @@
     text-decoration: none;
   }
 
-  &:focus {
-    --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--focus--BackgroundColor);
-    --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--focus--ZIndex);
-    --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--focus--before--BorderColor);
-  }
-
   &.pf-m-selected {
     --#{$toggle-group}__button--BackgroundColor: var(--#{$toggle-group}__button--m-selected--BackgroundColor);
     --#{$toggle-group}__button--Color: var(--#{$toggle-group}__button--m-selected--Color, inherit);
@@ -142,9 +137,3 @@
   margin-inline-start: var(--#{$toggle-group}__icon--text--MarginLeft);
 }
 
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/toggle-group";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-toggle-group;
-}

package/docs/components/DragDrop/examples/DragDrop.css

@@ -3,7 +3,7 @@
 }
 
 .pf-v5-c-draggable.pf-m-dragging {
-  --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   position: absolute;
   inset-block-start: 23%;

package/docs/components/FileUpload/examples/FileUpload.md

@@ -48,6 +48,57 @@ cssPrefix: pf-v5-c-file-upload
 
 ```
 
+### With helper text
+
+```html
+<div class="pf-v5-c-file-upload">
+  <div class="pf-v5-c-file-upload__file-select">
+    <div class="pf-v5-c-input-group">
+      <div class="pf-v5-c-input-group__item pf-m-fill">
+        <span class="pf-v5-c-form-control pf-m-readonly">
+          <input
+            readonly
+            id="file-upload-helper-text-text-input"
+            name="file-upload-helper-text-text-input"
+            aria-label="Drag and drop a file or upload one"
+            placeholder="Drag and drop a file or upload one"
+            aria-describedby="file-upload-helper-text-browse"
+          />
+        </span>
+      </div>
+      <div class="pf-v5-c-input-group__item">
+        <button
+          class="pf-v5-c-button pf-m-control"
+          type="button"
+          id="file-upload-helper-text-browse"
+          aria-describedby="helper-text-example"
+        >Upload</button>
+      </div>
+      <div class="pf-v5-c-input-group__item">
+        <button class="pf-v5-c-button pf-m-control" type="button" disabled>Clear</button>
+      </div>
+    </div>
+  </div>
+  <div class="pf-v5-c-file-upload__file-details">
+    <span class="pf-v5-c-form-control pf-m-resize-vertical">
+      <textarea
+        id="file-upload-helper-text-file-details"
+        name="file-upload-helper-text-file-details"
+        aria-label="Uploaded file content"
+      ></textarea>
+    </span>
+  </div>
+  <div class="pf-v5-c-file-upload__helper-text">
+    <div class="pf-v5-c-helper-text">
+      <div class="pf-v5-c-helper-text__item" id="helper-text-example">
+        <span class="pf-v5-c-helper-text__item-text">Upload a CSV file</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
 ### Upload complete non editable
 
 ```html
@@ -187,63 +238,70 @@ cssPrefix: pf-v5-c-file-upload
 ```html
 <form class="pf-v5-c-form" novalidate>
   <div class="pf-v5-c-form__group">
-    <div class="pf-v5-c-file-upload">
-      <div class="pf-v5-c-file-upload__file-select">
-        <div class="pf-v5-c-input-group">
-          <div class="pf-v5-c-input-group__item pf-m-fill">
-            <span class="pf-v5-c-form-control pf-m-required">
-              <input
-                required
-                id="file-upload-error-text-input"
-                name="file-upload-error-text-input"
-                aria-label="File upload error"
-                value="Sample.png"
-                aria-describedby="file-upload-error-browse"
-              />
-            </span>
-          </div>
-          <div class="pf-v5-c-input-group__item">
-            <button
-              class="pf-v5-c-button pf-m-control"
-              type="button"
-              id="file-upload-error-browse"
-            >Upload</button>
-          </div>
-          <div class="pf-v5-c-input-group__item">
-            <button class="pf-v5-c-button pf-m-control" type="button">Clear</button>
+    <div class="pf-v5-c-form__group-control">
+      <div class="pf-v5-c-file-upload">
+        <div class="pf-v5-c-file-upload__file-select">
+          <div class="pf-v5-c-input-group">
+            <div class="pf-v5-c-input-group__item pf-m-fill">
+              <span class="pf-v5-c-form-control pf-m-readonly">
+                <input
+                  readonly
+                  id="file-upload-error-text-input"
+                  name="file-upload-error-text-input"
+                  aria-label="File upload error"
+                  value="Sample.png"
+                  aria-describedby="file-upload-error-browse"
+                />
+              </span>
+            </div>
+            <div class="pf-v5-c-input-group__item">
+              <button
+                class="pf-v5-c-button pf-m-control"
+                type="button"
+                id="file-upload-error-browse"
+                aria-describedby="with-error-example-helper-text"
+              >Upload</button>
+            </div>
+            <div class="pf-v5-c-input-group__item">
+              <button class="pf-v5-c-button pf-m-control" type="button">Clear</button>
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="pf-v5-c-file-upload__file-details"
-        aria-describedby="textAreaHelperText1"
-        aria-invalid="true"
-      >
-        <span class="pf-v5-c-form-control pf-m-error pf-m-resize-vertical">
-          <textarea
-            id="file-upload-error-file-details"
-            name="file-upload-error-file-details"
-            aria-label="Empty text area"
-            aria-describedby="textAreaHelperText1"
-            aria-invalid="true"
-          ></textarea>
-          <span class="pf-v5-c-form-control__utilities">
-            <span class="pf-v5-c-form-control__icon pf-m-status">
-              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-            </span>
-          </span>
-        </span>
-      </div>
-    </div>
-    <div class="pf-v5-c-form__helper-text" aria-live="polite">
-      <div class="pf-v5-c-helper-text">
         <div
-          class="pf-v5-c-helper-text__item pf-m-error"
-          id="textAreaHelperText1"
+          class="pf-v5-c-file-upload__file-details"
+          aria-describedby="with-error-example-helper-text"
+          aria-invalid="true"
         >
-          <span
-            class="pf-v5-c-helper-text__item-text"
-          >We don't support this file type. Try again with a different file type.</span>
+          <span class="pf-v5-c-form-control pf-m-error pf-m-resize-vertical">
+            <textarea
+              id="file-upload-error-file-details"
+              name="file-upload-error-file-details"
+              aria-label="Empty text area"
+              aria-describedby="with-error-example-helper-text"
+              aria-invalid="true"
+            ></textarea>
+            <span class="pf-v5-c-form-control__utilities">
+              <span class="pf-v5-c-form-control__icon pf-m-status">
+                <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+              </span>
+            </span>
+          </span>
+        </div>
+
+        <div class="pf-v5-c-file-upload__helper-text">
+          <div class="pf-v5-c-helper-text">
+            <div
+              class="pf-v5-c-helper-text__item pf-m-error"
+              id="with-error-example-helper-text"
+            >
+              <span class="pf-v5-c-helper-text__item-icon">
+                <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+              </span>
+              <span
+                class="pf-v5-c-helper-text__item-text"
+              >Must be a CSV file no larger than 1 KB</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -327,5 +385,6 @@ cssPrefix: pf-v5-c-file-upload
 | `.pf-v5-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
 | `.pf-v5-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
 | `.pf-v5-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
+| `.pf-v5-c-file-upload__helper-text` | `<div>` | Initiates a container for [helper text](/components/helper-text) |
 | `.pf-m-drag-hover` | `.pf-v5-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
 | `.pf-m-loading` | `.pf-v5-c-file-upload` | Modifies file upload for the loading state. |

package/docs/components/Icon/examples/Icon.md

@@ -33,7 +33,7 @@ cssPrefix: pf-v5-c-icon
 
 ```
 
-### Sizes
+### Standalone icon sizes
 
 ```html
 <span class="pf-v5-c-icon pf-m-sm">
@@ -56,6 +56,73 @@ cssPrefix: pf-v5-c-icon
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </span>
+<span class="pf-v5-c-icon pf-m-2xl">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
+<span class="pf-v5-c-icon pf-m-3xl">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
+
+```
+
+### Body sizes
+
+```html
+<span class="pf-v5-c-icon pf-m-body-sm">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
+<span class="pf-v5-c-icon pf-m-body-default">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
+<span class="pf-v5-c-icon pf-m-body-lg">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
+
+```
+
+### Heading sizes
+
+```html
+<span class="pf-v5-c-icon pf-m-heading-sm">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
+<span class="pf-v5-c-icon pf-m-heading-md">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
+<span class="pf-v5-c-icon pf-m-heading-lg">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
+<span class="pf-v5-c-icon pf-m-heading-xl">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
+<span class="pf-v5-c-icon pf-m-heading-2xl">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
+<span class="pf-v5-c-icon pf-m-heading-3xl">
+  <span class="pf-v5-c-icon__content">
+    <i class="fas fa-plus-circle" aria-hidden="true"></i>
+  </span>
+</span>
 
 ```
 
@@ -95,23 +162,23 @@ cssPrefix: pf-v5-c-icon
 Use a size modifier on the icon container to maintain a consistent size, even if the contents change in size.
 
 ```html
-<span class="pf-v5-c-icon pf-m-xl pf-m-inline">
-  <span class="pf-v5-c-icon__content pf-m-sm">
+<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
+  <span class="pf-v5-c-icon__content pf-m-lg">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </span>
-<span class="pf-v5-c-icon pf-m-xl pf-m-inline">
-  <span class="pf-v5-c-icon__content pf-m-md">
+<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
+  <span class="pf-v5-c-icon__content pf-m-xl">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </span>
-<span class="pf-v5-c-icon pf-m-xl pf-m-inline">
-  <span class="pf-v5-c-icon__content pf-m-lg">
+<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
+  <span class="pf-v5-c-icon__content pf-m-2xl">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </span>
-<span class="pf-v5-c-icon pf-m-xl pf-m-inline">
-  <span class="pf-v5-c-icon__content pf-m-xl">
+<span class="pf-v5-c-icon pf-m-3xl pf-m-inline">
+  <span class="pf-v5-c-icon__content pf-m-3xl">
     <i class="fas fa-plus-circle" aria-hidden="true"></i>
   </span>
 </span>
@@ -248,7 +315,11 @@ Refer to the [icons](/design-foundations/icons) page for information about the P
 | `.pf-v5-c-icon__content` | `<span>`, `<div>` | Initiates the icon content. **Required**  |
 | `.pf-v5-c-icon__progress` | `<span>`, `<div>` | Initiates a container for a progress spinner.  |
 | `.pf-m-inline` | `.pf-v5-c-icon` | Displays the icon inline with text, and allows the icon to inherit the size and color of the parent. |
-| `.pf-m-[sm,md,lg,xl]` | `.pf-v5-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
-| `.pf-m-[sm,md,lg,xl]` | `.pf-v5-c-icon__content`, `pf-v5-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
+| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon` | Modifies the icon container to be small, medium, large, extra large, double extra large, or triple extra large. |
+| `.pf-m-body-[sm,default,lg]` | `.pf-v5-c-icon` | Modifies the icon container to be a size matching small, default, or large body text. |
+| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon` | Modifies the icon container to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
+| `.pf-m-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon__content`, `pf-v5-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
+| `.pf-m-body-[sm,default,lg]` | `.pf-v5-c-icon__content` | Modifies the icon content or progress element to be a size matching small, default, or large body text. |
+| `.pf-m-heading-[sm,md,lg,xl,2xl,3xl]` | `.pf-v5-c-icon__content` | Modifies the icon content or progress element to be a size matching small, medium, large, extra large, double extra large, or triple extra large (h6-h1) heading text. |
 | `.pf-m-in-progress` | `.pf-v5-c-icon` | Shows the progress element in place of the icon content.  |
 | `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom`  | `.pf-v5-c-icon__content` | Modifies the icon content to use a status color.  |

package/docs/components/Sidebar/examples/Sidebar.md

@@ -24,6 +24,24 @@ cssPrefix: pf-v5-c-sidebar
 
 ```
 
+### With secondary background
+
+```html
+<div class="pf-v5-c-sidebar">
+  <div class="pf-v5-c-sidebar__main">
+    <div class="pf-v5-c-sidebar__panel pf-m-secondary">Sidebar panel</div>
+    <div class="pf-v5-c-sidebar__content pf-m-secondary">
+      <div class="pf-v5-c-content">
+        <p>Default layout.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dapibus nulla id augue dictum commodo. Donec mollis arcu massa, sollicitudin venenatis est rutrum vitae. Integer pulvinar ligula at augue mollis, ac pulvinar arcu semper. Maecenas nisi lorem, malesuada ac lectus nec, porta pretium neque. Ut convallis libero sit amet metus mattis, vel facilisis lorem malesuada. Duis consectetur ante sit amet magna efficitur, a interdum leo vulputate.</p>
+        <p>Praesent at odio nec sapien ultrices tincidunt in non mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis consectetur nisl quis facilisis faucibus. Sed eu bibendum risus. Suspendisse porta euismod tortor, at elementum odio suscipit sed. Cras eget ultrices urna, ac feugiat lectus. Integer a pharetra velit, in imperdiet mi. Phasellus vel hendrerit velit. Vestibulum ut augue vitae erat vulputate bibendum a ut magna.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
 ### Gutter
 
 ```html
@@ -249,3 +267,4 @@ cssPrefix: pf-v5-c-sidebar
 | `.pf-m-static` | `.pf-v5-c-sidebar__panel` | Modifies the panel to be positioned statically. |
 | `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v5-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** does not apply when the panel is stacked on top of the content. |
 | `.pf-m-no-background` | `.pf-v5-c-sidebar`, `.pf-v5-c-sidebar__panel, .pf-v5-c-sidebar__content` | Modifies the element to have a transparent background. |
+| `.pf-m-secondary` | `.pf-v5-c-sidebar__panel, .pf-v5-c-sidebar__content` | Modifies the element to have secondary styling. |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.0.0-alpha.57",
+  "version": "6.0.0-alpha.59",
   "keywords": [],
   "license": "MIT",
   "scripts": {