@patternfly/patternfly 5.0.0-alpha.67 → 5.0.0-alpha.69

package/components/InputGroup/input-group.css

@@ -20,8 +20,6 @@
   --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
   --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-input-group--c-form-control--invalid--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-input-group--c-form-control--MarginRight: 0;
   display: flex;
   width: 100%;
 }

package/components/InputGroup/input-group.scss

@@ -34,10 +34,6 @@
   --#{$input-group}__item--m-disabled--BorderBottomColor: transparent;
   --#{$input-group}__item--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
 
-  // Form control
-  --#{$input-group}--c-form-control--invalid--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$input-group}--c-form-control--MarginRight: 0;
-
   display: flex;
   width: 100%;
 }

package/components/NumberInput/number-input.css

@@ -1,7 +1,7 @@
-.pf-v5-c-number-input .pf-v5-c-form-control {
+.pf-v5-c-number-input .pf-v5-c-form-control > :is(input) {
   appearance: textfield;
 }
-.pf-v5-c-number-input .pf-v5-c-form-control::-webkit-inner-spin-button, .pf-v5-c-number-input .pf-v5-c-form-control::-webkit-outer-spin-button {
+.pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
@@ -27,6 +27,8 @@
 }
 .pf-v5-c-number-input .pf-v5-c-form-control {
   width: var(--pf-v5-c-number-input--c-form-control--Width);
+}
+.pf-v5-c-number-input .pf-v5-c-form-control > :is(input) {
   text-align: right;
 }
 

package/components/NumberInput/number-input.scss

@@ -31,9 +31,12 @@
 
   .#{$form-control} {
     width: var(--#{$number-input}--c-form-control--Width);
-    text-align: right;
 
-    @extend %pf-v5-remove-num-arrows;
+    > :is(input) {
+      text-align: right;
+
+      @extend %pf-v5-remove-num-arrows;
+    }
   }
 }
 

package/components/Pagination/pagination.css

@@ -1,7 +1,7 @@
-.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
+.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input) {
   appearance: textfield;
 }
-.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control::-webkit-outer-spin-button {
+.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
@@ -16,7 +16,7 @@
   --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
   --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination--c-options-menu__toggle--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-pagination__nav--Display: none;
   --pf-v5-c-pagination--m-display-summary__nav--Display: none;
   --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
@@ -60,9 +60,9 @@
   --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
-  --pf-v5-c-pagination--c-options-menu--Display: none;
-  --pf-v5-c-pagination--m-display-summary--c-options-menu--Display: none;
-  --pf-v5-c-pagination--m-display-full--c-options-menu--Display: inline-flex;
+  --pf-v5-c-pagination--c-menu-toggle--Display: none;
+  --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
+  --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: inline-flex;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -79,7 +79,7 @@
     --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
     --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
     --pf-v5-c-pagination--m-bottom--BoxShadow: none;
-    --pf-v5-c-pagination--c-options-menu--Display: inline-flex;
+    --pf-v5-c-pagination--c-menu-toggle--Display: inline-flex;
     --pf-v5-c-pagination__nav--Display: inline-flex;
     --pf-v5-c-pagination__total-items--Display: none;
   }
@@ -95,8 +95,9 @@
 .pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
   margin-right: var(--pf-v5-c-pagination--child--MarginRight);
 }
-.pf-v5-c-pagination .pf-v5-c-options-menu {
-  display: var(--pf-v5-c-pagination--c-options-menu--Display);
+.pf-v5-c-pagination .pf-v5-c-menu-toggle {
+  display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
+  font-size: var(--pf-v5-c-pagination--c-menu-toggle--FontSize);
 }
 .pf-v5-c-pagination.pf-m-bottom {
   --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--MarginRight);
@@ -126,7 +127,7 @@
 .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
   display: none;
 }
-.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-options-menu {
+.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
   position: absolute;
   display: block;
 }
@@ -149,7 +150,10 @@
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
     display: block;
   }
-  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-options-menu {
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
+    display: inline-flex;
+  }
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
     position: relative;
   }
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
@@ -174,9 +178,6 @@
     padding: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop) var(--pf-v5-c-pagination--m-sticky--md--PaddingRight) var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom) var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
   }
 }
-.pf-v5-c-pagination .pf-v5-c-options-menu__toggle {
-  font-size: var(--pf-v5-c-pagination--c-options-menu__toggle--FontSize);
-}
 .pf-v5-c-pagination.pf-m-compact {
   --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-compact--child--MarginRight);
 }
@@ -214,19 +215,18 @@
 .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
   width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
 }
-
 .pf-v5-c-pagination__total-items {
   display: var(--pf-v5-c-pagination__total-items--Display);
 }
 
 .pf-v5-c-pagination.pf-m-display-summary {
   --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+  --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
 }
 .pf-v5-c-pagination.pf-m-display-full {
   --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+  --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
 }
 .pf-v5-c-pagination.pf-m-inset-none {
@@ -250,12 +250,12 @@
 @media (min-width: 576px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-sm {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-sm {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-sm {
@@ -280,12 +280,12 @@
 @media (min-width: 768px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-md {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-md {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-md {
@@ -310,12 +310,12 @@
 @media (min-width: 992px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-lg {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-lg {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-lg {
@@ -340,12 +340,12 @@
 @media (min-width: 1200px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-xl {
@@ -370,12 +370,12 @@
 @media (min-width: 1450px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-2xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-2xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-2xl {

package/components/Pagination/pagination.scss

@@ -18,7 +18,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-compact--child--MarginRight: var(--#{$pf-global}--spacer--sm);
 
   // dropdown
-  --#{$pagination}--c-options-menu__toggle--FontSize: var(--#{$pf-global}--FontSize--sm);
+  --#{$pagination}--c-menu-toggle--FontSize: var(--#{$pf-global}--FontSize--sm);
 
   // nav
   --#{$pagination}__nav--Display: none;
@@ -76,9 +76,9 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--#{$pf-global}--BoxShadow--sm-top);
 
   // options menu
-  --#{$pagination}--c-options-menu--Display: none;
-  --#{$pagination}--m-display-summary--c-options-menu--Display: none;
-  --#{$pagination}--m-display-full--c-options-menu--Display: inline-flex;
+  --#{$pagination}--c-menu-toggle--Display: none;
+  --#{$pagination}--m-display-summary--c-menu-toggle--Display: none;
+  --#{$pagination}--m-display-full--c-menu-toggle--Display: inline-flex;
 
   @media screen and (min-width: $pf-v5-global--breakpoint--md) {
     --#{$pagination}--m-bottom__nav-control--c-button--PaddingTop: var(--#{$pagination}--m-bottom__nav-control--c-button--md--PaddingTop);
@@ -88,7 +88,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     --#{$pagination}--m-bottom--child--MarginRight: var(--#{$pagination}--m-bottom--child--md--MarginRight);
     --#{$pagination}--m-bottom__nav-control--c-button--OutlineOffset: 0;
     --#{$pagination}--m-bottom--BoxShadow: none;
-    --#{$pagination}--c-options-menu--Display: inline-flex;
+    --#{$pagination}--c-menu-toggle--Display: inline-flex;
     --#{$pagination}__nav--Display: inline-flex;
     --#{$pagination}__total-items--Display: none;
   }
@@ -113,8 +113,9 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     margin-right: var(--#{$pagination}--child--MarginRight);
   }
 
-  .#{$options-menu} {
-    display: var(--#{$pagination}--c-options-menu--Display);
+  .#{$menu-toggle} {
+    display: var(--#{$pagination}--c-menu-toggle--Display);
+    font-size: var(--#{$pagination}--c-menu-toggle--FontSize);
   }
 
   &.pf-m-bottom {
@@ -153,7 +154,7 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
       display: none;
     }
 
-    .#{$options-menu} {
+    .#{$menu-toggle} {
       position: absolute;
       display: block;
     }
@@ -179,7 +180,11 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
         display: block;
       }
 
-      .#{$options-menu} {
+      .#{$pagination}__nav-page-select {
+        display: inline-flex;
+      }
+
+      .#{$menu-toggle} {
         position: relative;
       }
 
@@ -208,10 +213,6 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     }
   }
 
-  .#{$options-menu}__toggle {
-    font-size: var(--#{$pagination}--c-options-menu__toggle--FontSize);
-  }
-
   &.pf-m-compact {
     --#{$pagination}--child--MarginRight: var(--#{$pagination}--m-compact--child--MarginRight);
   }
@@ -260,7 +261,9 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
   .#{$form-control} {
     width: var(--#{$pagination}__nav-page-select--c-form-control--Width);
 
-    @extend %pf-v5-remove-num-arrows;
+    > :is(input) {
+      @extend %pf-v5-remove-num-arrows;
+    }
   }
 }
 
@@ -277,13 +280,13 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
     @include pf-v5-apply-breakpoint($breakpoint) {
       &.pf-m-display-summary#{$breakpoint-name} {
         --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-summary__nav--Display);
-        --#{$pagination}--c-options-menu--Display: var(--#{$pagination}--m-display-summary--c-options-menu--Display);
+        --#{$pagination}--c-menu-toggle--Display: var(--#{$pagination}--m-display-summary--c-menu-toggle--Display);
         --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-summary__total-items--Display);
       }
 
       &.pf-m-display-full#{$breakpoint-name} {
         --#{$pagination}__nav--Display: var(--#{$pagination}--m-display-full__nav--Display);
-        --#{$pagination}--c-options-menu--Display: var(--#{$pagination}--m-display-full--c-options-menu--Display);
+        --#{$pagination}--c-menu-toggle--Display: var(--#{$pagination}--m-display-full--c-menu-toggle--Display);
         --#{$pagination}__total-items--Display: var(--#{$pagination}--m-display-full__total-items--Display);
       }
 

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -31,7 +31,7 @@ cssPrefix: pf-v5-c-clipboard-copy
 <br />
 <div class="pf-v5-c-clipboard-copy">
   <div class="pf-v5-c-clipboard-copy__group">
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"
@@ -109,7 +109,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </div>
     </button>
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"
@@ -149,7 +149,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </div>
     </button>
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"
@@ -188,7 +188,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         <i class="fas fa-angle-right" aria-hidden="true"></i>
       </div>
     </button>
-    <div class="pf-v5-c-form-control">
+    <div class="pf-v5-c-form-control pf-m-readonly">
       <input
         readonly
         type="text"

package/docs/components/DatePicker/examples/DatePicker.md

@@ -85,7 +85,7 @@ cssPrefix: pf-v5-c-date-picker
   <div class="pf-v5-c-date-picker__input">
     <div class="pf-v5-c-input-group">
       <div class="pf-v5-c-input-group__item pf-m-fill">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-error">
           <input
             aria-invalid="true"
             type="text"
@@ -94,6 +94,11 @@ cssPrefix: pf-v5-c-date-picker
             name="invalid-input"
             aria-label="Date picker"
           />
+          <div class="pf-v5-c-form-control__utilities">
+            <div class="pf-v5-c-form-control__icon pf-m-status">
+              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+            </div>
+          </div>
         </div>
       </div>
       <div class="pf-v5-c-input-group__item">

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

@@ -12,12 +12,12 @@ cssPrefix: 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">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-readonly">
           <input
+            readonly
             id="basic-file-upload-text-input"
             name="basic-file-upload-text-input"
             aria-label="Drag and drop a file or upload one"
-            readonly
             placeholder="Drag and drop a file or upload one"
             aria-describedby="basic-file-upload-browse"
           />
@@ -55,12 +55,12 @@ cssPrefix: 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">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-readonly">
           <input
+            readonly
             id="browsed-file-upload-complete-text-input"
             name="browsed-file-upload-complete-text-input"
             aria-label="Read only filename"
-            readonly
             value="Read only filename"
             aria-describedby="browsed-file-upload-complete-browse"
           />
@@ -78,13 +78,13 @@ cssPrefix: pf-v5-c-file-upload
       </div>
     </div>
   </div>
-  <div class="pf-v5-c-file-upload__file-details" readonly>
-    <div class="pf-v5-c-form-control pf-m-resize-vertical">
+  <div class="pf-v5-c-file-upload__file-details">
+    <div class="pf-v5-c-form-control pf-m-readonly pf-m-resize-vertical">
       <textarea
+        readonly
         id="browsed-file-upload-complete-file-details"
         name="browsed-file-upload-complete-file-details"
         aria-label="Text area"
-        readonly
       >Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc
   
   </textarea>
@@ -101,12 +101,12 @@ cssPrefix: 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">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-readonly">
           <input
+            readonly
             id="drop-file-text-input"
             name="drop-file-text-input"
             aria-label="Read only filename"
-            readonly
             value="Sample.txt"
             aria-describedby="drop-file-browse"
           />
@@ -146,12 +146,12 @@ cssPrefix: 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">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-readonly">
           <input
+            readonly
             id="drag-file-hover-component-text-input"
             name="drag-file-hover-component-text-input"
             aria-label="Drag and drop a file or upload one"
-            readonly
             placeholder="Drag and drop a file or upload one"
             aria-describedby="drag-file-hover-component-browse"
           />
@@ -191,12 +191,12 @@ cssPrefix: 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">
-            <div class="pf-v5-c-form-control">
+            <div 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"
-                required
                 value="Sample.png"
                 aria-describedby="file-upload-error-browse"
               />
@@ -219,7 +219,7 @@ cssPrefix: pf-v5-c-file-upload
         aria-describedby="textAreaHelperText1"
         aria-invalid="true"
       >
-        <div class="pf-v5-c-form-control pf-m-resize-vertical">
+        <div 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"
@@ -227,6 +227,11 @@ cssPrefix: pf-v5-c-file-upload
             aria-describedby="textAreaHelperText1"
             aria-invalid="true"
           ></textarea>
+          <div class="pf-v5-c-form-control__utilities">
+            <div class="pf-v5-c-form-control__icon pf-m-status">
+              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -254,12 +259,12 @@ cssPrefix: 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">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-readonly">
           <input
+            readonly
             id="file-upload-loading-text-input"
             name="file-upload-loading"
             aria-label="Read only filename"
-            readonly
             value="Sample.png"
             aria-describedby="file-upload-loading-browse"
           />