@patternfly/patternfly 4.163.0 → 4.164.3

package/RELEASE-NOTES.md

@@ -4,6 +4,37 @@ section: developer-resources
 releaseNoteTOC: true
 ---
 
+## 2021.16 release notes (2021-12-07)
+Packages released:
+- [@patternfly/patternfly@v4.164.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.164.2)
+
+### Components
+- **Button:** Added demo for progress button completion state ([#4528](https://github.com/patternfly/patternfly/pull/4528))
+- **Card:** Replaced dropdowns with selects in demos ([#4520](https://github.com/patternfly/patternfly/pull/4520))
+- **Description list:** Added columnar layout ([#4544](https://github.com/patternfly/patternfly/pull/4544))
+- **Dropdown:**
+  - Added plain text variant ([#4542](https://github.com/patternfly/patternfly/pull/4542))
+  - Added disabled styles ([#4543](https://github.com/patternfly/patternfly/pull/4543))
+- **Form:** Added support for horizontal layout at various breakpoints ([#4536](https://github.com/patternfly/patternfly/pull/4536))
+- **Multiple file upload:** Added component ([#4548](https://github.com/patternfly/patternfly/pull/4548))
+- **Table:**
+  - Removed cursor pointer on disabled checkboxes ([#4527](https://github.com/patternfly/patternfly/pull/4527))
+  - Removed extra padding from nested table cells ([#4529](https://github.com/patternfly/patternfly/pull/4529))
+  - Reorganized documentation ([#4539](https://github.com/patternfly/patternfly/pull/4539))
+  - Increased target area of checkboxes/radios ([#4546](https://github.com/patternfly/patternfly/pull/4546))
+- **Toolbar:** Set labels to show in collapsed state ([#4451](https://github.com/patternfly/patternfly/pull/4451))
+- **Truncate:**
+  - Added truncate component ([#4502](https://github.com/patternfly/patternfly/pull/4502))
+  - Fixed font size var value ([#4560](https://github.com/patternfly/patternfly/pull/4560))
+
+### Other
+- **Build:**
+  - Added a11y coverage report action ([#4530](https://github.com/patternfly/patternfly/pull/4530))
+  - Updated stylelint, deps ([#4537](https://github.com/patternfly/patternfly/pull/4537))
+- **Demos:** Added a password generator demo ([#4531](https://github.com/patternfly/patternfly/pull/4531))
+- **Fonts:** Added opt-ins for new red hat font ([#4476](https://github.com/patternfly/patternfly/pull/4476))
+- **Global:** Removed custom firefox focus styles ([#4533](https://github.com/patternfly/patternfly/pull/4533))
+
 ## 2021.15 release notes (2021-11-16)
 Packages released:
 - [@patternfly/patternfly@v4.159.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.159.1)

package/components/Form/form.css

@@ -100,7 +100,7 @@
 .pf-c-form.pf-m-horizontal.pf-m-align-right .pf-c-form__label {
   text-align: right;
 }
-@media (min-width: 768px) {
+@media screen and (min-width: 768px) {
   .pf-c-form.pf-m-horizontal {
     --pf-c-form__group-label--PaddingBottom: 0;
   }
@@ -120,6 +120,126 @@
     grid-column: 2;
   }
 }
+@media screen and (min-width: 0) {
+  .pf-c-form.pf-m-horizontal-on-xs {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-form.pf-m-horizontal-on-sm {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-form.pf-m-horizontal-on-md {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-form.pf-m-horizontal-on-lg {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-form.pf-m-horizontal-on-xl {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-form.pf-m-horizontal-on-2xl {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
 .pf-c-form.pf-m-limit-width {
   max-width: var(--pf-c-form--m-limit-width--MaxWidth);
 }

package/components/Form/form.scss

@@ -1,3 +1,28 @@
+$pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
+
+@mixin pf-c-form--m-horizontal {
+  // default horizontal styles applied at medium breakpoint
+  @media screen and (min-width: $pf-global--breakpoint--md) {
+    @content;
+  }
+
+  // custom xs style since this isn't in our maps - maps are based on mobile first design. This may not even be a valid option based on design but I guess it doesn't hurt to add.
+  &-on-xs {
+    @media screen and (min-width: $pf-global--breakpoint--xs) {
+      @content;
+    }
+  }
+
+  // loop to build the rest of the breakpoints
+  @each $breakpoint, $breakpoint-value in $pf-c-form--m-horizontal--breakpoint-map {
+    &-on-#{$breakpoint} {
+      @include pf-apply-breakpoint($breakpoint) {
+        @content;
+      }
+    }
+  }
+}
+
 .pf-c-form {
   --pf-c-form--GridGap: var(--pf-global--gutter--md);
 
@@ -160,7 +185,7 @@
       }
     }
 
-    @media (min-width: $pf-global--breakpoint--md) {
+    @include pf-c-form--m-horizontal {
       --pf-c-form__group-label--PaddingBottom: 0;
 
       .pf-c-form__group {

package/components/Label/label.css

@@ -93,6 +93,7 @@
   --pf-c-label--m-compact--PaddingBottom: 0;
   --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
   --pf-c-label__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
   --pf-c-label__text--MaxWidth: 16ch;
@@ -107,6 +108,18 @@
   --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label__editable-text--MaxWidth: 16ch;
+  --pf-c-label__editable-text--BorderWidth: 0;
+  --pf-c-label--m-editable--Cursor: pointer;
+  --pf-c-label--m-editable--TextDecoration: underline;
+  --pf-c-label--m-editable--TextDecorationStyle: dashed;
+  --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
+  --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
   --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -125,6 +138,7 @@
   --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
   --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
   --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
+  --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
 }
 .pf-c-label.pf-m-blue {
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
@@ -215,7 +229,23 @@
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
 }
 
+.pf-c-label.pf-m-editable {
+  text-decoration: var(--pf-c-label--m-editable--TextDecoration);
+  cursor: var(--pf-c-label--m-editable--Cursor);
+  text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
+  text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
+  text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
+  text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+}
+.pf-c-label.pf-m-editable:hover {
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
+}
+.pf-c-label.pf-m-editable:focus {
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
+}
 .pf-c-label.pf-m-editable-active {
+  --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
+  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -223,6 +253,13 @@
 .pf-c-label.pf-m-editable-active .pf-c-button {
   visibility: hidden;
 }
+.pf-c-label .pf-c-label__editable-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: var(--pf-c-label__editable-text--MaxWidth);
+  border-width: var(--pf-c-label__editable-text--BorderWidth);
+}
 .pf-c-label .pf-c-button {
   --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
   --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);

package/components/Label/label.scss

@@ -118,6 +118,7 @@
   --pf-c-label--m-compact--PaddingBottom: 0;
   --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label--m-compact--m-editable--TextDecorationOffset: #{pf-size-prem(1px)};
 
   // Content
   --pf-c-label__content--Color: var(--pf-global--Color--100);
@@ -142,6 +143,21 @@
   --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
 
   // Editable
+  --pf-c-label__editable-text--MaxWidth: 16ch;
+  --pf-c-label__editable-text--BorderWidth: 0;
+  --pf-c-label--m-editable--Cursor: pointer;
+  --pf-c-label--m-editable--TextDecoration: underline;
+  --pf-c-label--m-editable--TextDecorationStyle: dashed;
+  --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-editable--TextDecorationOffset: #{pf-size-prem(4px)};
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
+
+
+  // Editable active
+  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
+  --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
   --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -161,6 +177,7 @@
     --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
     --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
     --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
+    --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
   }
 
   &.pf-m-blue {
@@ -267,7 +284,26 @@
     }
   }
 
+  &.pf-m-editable {
+    text-decoration: var(--pf-c-label--m-editable--TextDecoration);
+    cursor: var(--pf-c-label--m-editable--Cursor);
+    text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
+    text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
+    text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
+    text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+
+    &:hover {
+      --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
+    }
+
+    &:focus {
+      --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
+    }
+  }
+
   &.pf-m-editable-active {
+    --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
+    --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
     --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
     --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
     --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -277,6 +313,13 @@
     }
   }
 
+  .pf-c-label__editable-text {
+    @include pf-text-overflow;
+
+    max-width: var(--pf-c-label__editable-text--MaxWidth);
+    border-width: var(--pf-c-label__editable-text--BorderWidth);
+  }
+
   .pf-c-button {
     --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
     --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);

package/components/MultipleFileUpload/multiple-file-upload.css

@@ -0,0 +1,180 @@
+.pf-c-multiple-file-upload {
+  --pf-c-multiple-file-upload--GridTemplateColumns: 1fr;
+  --pf-c-multiple-file-upload--Gap: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--TextAlign: center;
+  --pf-c-multiple-file-upload__main--GridTemplateColumns: auto;
+  --pf-c-multiple-file-upload__main--GridTemplateRows: auto;
+  --pf-c-multiple-file-upload__main--GridTemplateAreas:
+    "title"
+    "upload"
+    "info";
+  --pf-c-multiple-file-upload__main--Gap: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__main--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-global--spacer--xl);
+  --pf-c-multiple-file-upload__main--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload__main--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-multiple-file-upload__main--BorderStyle: dashed;
+  --pf-c-multiple-file-upload__main--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-multiple-file-upload__title--Display: grid;
+  --pf-c-multiple-file-upload__title--GridTemplateColumns: auto;
+  --pf-c-multiple-file-upload__title--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__title-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__title-text-separator--Display: block;
+  --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__info--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-multiple-file-upload__info--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__info--MarginTop: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload--m-drag-over__main--BorderStyle: solid;
+  --pf-c-multiple-file-upload--m-drag-over__main--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor: var(--pf-global--palette--blue-50);
+  --pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main__title-text--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-drag-over__main__info--Color: var(--pf-global--active-color--100);
+  --pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns: fit-content(100%);
+  --pf-c-multiple-file-upload--m-horizontal__main--TextAlign: left;
+  --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns: 1fr auto;
+  --pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas:
+    "title upload"
+    "info upload";
+  --pf-c-multiple-file-upload--m-horizontal__main--Gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--2xl);
+  --pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns: auto 1fr;
+  --pf-c-multiple-file-upload--m-horizontal__title--Gap: var(--pf-global--spacer--xs);
+  --pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display: inline;
+  --pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop: 0;
+  --pf-c-multiple-file-upload--m-horizontal__info--MarginTop: 0;
+  --pf-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
+  --pf-c-multiple-file-upload__status-progress--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-progress-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__status-item--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-multiple-file-upload__status-item--first-child--PaddingTop: 0;
+  --pf-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
+  --pf-c-multiple-file-upload__status-item--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-item--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-multiple-file-upload__status-item--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-multiple-file-upload__status-item-icon--Color: var(--pf-global--Color--200);
+  --pf-c-multiple-file-upload__status-item-close--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns: fit-content(100%) max-content;
+  --pf-c-multiple-file-upload__status-item-progress--Gap: var(--pf-global--spacer--sm);
+  --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
+  --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
+  display: grid;
+  gap: var(--pf-c-multiple-file-upload--Gap);
+  grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
+}
+.pf-c-multiple-file-upload.pf-m-horizontal {
+  --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
+  --pf-c-multiple-file-upload__main--TextAlign: var(--pf-c-multiple-file-upload--m-horizontal__main--TextAlign);
+  --pf-c-multiple-file-upload__main--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateColumns);
+  --pf-c-multiple-file-upload__main--GridTemplateAreas: var(--pf-c-multiple-file-upload--m-horizontal__main--GridTemplateAreas);
+  --pf-c-multiple-file-upload__main--Gap: var(--pf-c-multiple-file-upload--m-horizontal__main--Gap);
+  --pf-c-multiple-file-upload__main--PaddingBottom: var(--pf-c-multiple-file-upload--m-horizontal__main--PaddingBottom);
+  --pf-c-multiple-file-upload__title--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal__title--GridTemplateColumns);
+  --pf-c-multiple-file-upload__title--Gap: var(--pf-c-multiple-file-upload--m-horizontal__title--Gap);
+  --pf-c-multiple-file-upload__title-text-separator--Display: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--Display);
+  --pf-c-multiple-file-upload__title-text-separator--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__title-text-separator--MarginTop);
+  --pf-c-multiple-file-upload__info--MarginTop: var(--pf-c-multiple-file-upload--m-horizontal__info--MarginTop);
+}
+.pf-c-multiple-file-upload.pf-m-drag-over {
+  --pf-c-multiple-file-upload__main--BorderStyle: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderStyle);
+  --pf-c-multiple-file-upload__main--BorderColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BorderColor);
+  --pf-c-multiple-file-upload__main--BackgroundColor: var(--pf-c-multiple-file-upload--m-drag-over__main--BackgroundColor);
+  --pf-c-multiple-file-upload__title-icon--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-icon--Color);
+  --pf-c-multiple-file-upload__title-text--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__title-text--Color);
+  --pf-c-multiple-file-upload__info--Color: var(--pf-c-multiple-file-upload--m-drag-over__main__info--Color);
+}
+
+.pf-c-multiple-file-upload__main {
+  display: grid;
+  padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
+  text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
+  background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
+  border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
+  grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
+  grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
+  grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
+  gap: var(--pf-c-multiple-file-upload__main--Gap);
+}
+
+.pf-c-multiple-file-upload__title {
+  display: var(--pf-c-multiple-file-upload__title--Display);
+  grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__title--Gap);
+  grid-area: title;
+}
+
+.pf-c-multiple-file-upload__title-icon {
+  color: var(--pf-c-multiple-file-upload__title-icon--Color);
+}
+
+.pf-c-multiple-file-upload__title-text {
+  color: var(--pf-c-multiple-file-upload__title-text--Color, inherit);
+}
+
+.pf-c-multiple-file-upload__title-text-separator {
+  display: var(--pf-c-multiple-file-upload__title-text-separator--Display);
+  margin-top: var(--pf-c-multiple-file-upload__title-text-separator--MarginTop);
+}
+
+.pf-c-multiple-file-upload__upload {
+  grid-area: upload;
+}
+
+.pf-c-multiple-file-upload__info {
+  grid-area: info;
+  margin-top: var(--pf-c-multiple-file-upload__info--MarginTop);
+  font-size: var(--pf-c-multiple-file-upload__info--FontSize);
+  color: var(--pf-c-multiple-file-upload__info--Color);
+}
+
+.pf-c-multiple-file-upload__status,
+.pf-c-multiple-file-upload__status-item-main {
+  min-width: 0;
+}
+
+.pf-c-multiple-file-upload__status-progress {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-progress--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-progress--Gap);
+}
+
+.pf-c-multiple-file-upload__status-progress-icon {
+  color: var(--pf-c-multiple-file-upload__status-progress-icon--Color);
+}
+
+.pf-c-multiple-file-upload__status-item {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-item--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-item--Gap);
+  padding-top: var(--pf-c-multiple-file-upload__status-item--PaddingTop);
+  padding-bottom: var(--pf-c-multiple-file-upload__status-item--PaddingBottom);
+  border-bottom: var(--pf-c-multiple-file-upload__status-item--BorderWidth) solid var(--pf-c-multiple-file-upload__status-item--BorderColor);
+}
+.pf-c-multiple-file-upload__status-item:first-child {
+  --pf-c-multiple-file-upload__status-item--PaddingTop: var(--pf-c-multiple-file-upload__status-item--first-child--PaddingTop);
+}
+
+.pf-c-multiple-file-upload__status-item-icon {
+  color: var(--pf-c-multiple-file-upload__status-item-icon--Color);
+}
+
+.pf-c-multiple-file-upload__status-item-close {
+  margin-top: var(--pf-c-multiple-file-upload__status-item-close--MarginTop);
+}
+
+.pf-c-multiple-file-upload__status-item-progress {
+  display: grid;
+  grid-template-columns: var(--pf-c-multiple-file-upload__status-item-progress--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__status-item-progress--Gap);
+}
+
+.pf-c-multiple-file-upload__status-item-progress-text {
+  color: var(--pf-c-multiple-file-upload__status-item-progress-text--Color);
+}
+
+.pf-c-multiple-file-upload__status-item-progress-size {
+  color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
+}