@patternfly/patternfly 5.0.0-alpha.66 → 5.0.0-alpha.68

package/docs/components/Form/examples/Form.md

@@ -21,12 +21,12 @@ cssPrefix: pf-v5-c-form
       ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
     </div>
     <div class="pf-v5-c-form__group-control">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-required">
         <input
+          required
           type="text"
           id="form-vertical-name"
           name="form-vertical-name"
-          required
         />
       </div>
     </div>
@@ -44,12 +44,12 @@ cssPrefix: pf-v5-c-form
         <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
     </div>
     <div class="pf-v5-c-form__group-control">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-required">
         <input
+          required
           type="text"
           id="form-horizontal-name"
           name="form-horizontal-name"
-          required
         />
       </div>
     </div>
@@ -146,12 +146,12 @@ cssPrefix: pf-v5-c-form
       ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
     </div>
     <div class="pf-v5-c-form__group-control">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-required">
         <input
+          required
           type="text"
           id="form-horizontal-custom-breakpoint-name"
           name="form-horizontal-custom-breakpoint-name"
-          required
         />
       </div>
     </div>
@@ -173,12 +173,12 @@ cssPrefix: pf-v5-c-form
           <span class="pf-v5-c-form__label-text">Form section 1 inputs</span></label>
       </div>
       <div class="pf-v5-c-form__group-control">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-required">
           <input
+            required
             type="text"
             id="form-section-example-section-1-input"
             name="form-section-example-section-1-input"
-            required
           />
         </div>
       </div>
@@ -191,12 +191,12 @@ cssPrefix: pf-v5-c-form
           <span class="pf-v5-c-form__label-text">Form section 1 inputs</span></label>
       </div>
       <div class="pf-v5-c-form__group-control">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-required">
           <input
+            required
             type="text"
             id="form-section-example-section-1-input-2"
             name="form-section-example-section-1-input-2"
-            required
           />
         </div>
       </div>
@@ -220,12 +220,12 @@ cssPrefix: pf-v5-c-form
           <span class="pf-v5-c-form__label-text">Form section 2 inputs</span></label>
       </div>
       <div class="pf-v5-c-form__group-control">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-required">
           <input
+            required
             type="text"
             id="form-section-example-section-2-input"
             name="form-section-example-section-2-input"
-            required
           />
         </div>
       </div>
@@ -238,12 +238,12 @@ cssPrefix: pf-v5-c-form
           <span class="pf-v5-c-form__label-text">Form section 2 inputs</span></label>
       </div>
       <div class="pf-v5-c-form__group-control">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-required">
           <input
+            required
             type="text"
             id="form-section-example-section-2-input-2"
             name="form-section-example-section-2-input-2"
-            required
           />
         </div>
       </div>
@@ -262,7 +262,7 @@ cssPrefix: pf-v5-c-form
         <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
     </div>
     <div class="pf-v5-c-form__group-control">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-required">
         <input
           required
           type="text"
@@ -296,6 +296,11 @@ cssPrefix: pf-v5-c-form
           name="form-help-text-email"
           aria-describedby="form-help-text-email-helper"
         />
+        <div class="pf-v5-c-form-control__utilities">
+          <div class="pf-v5-c-form-control__icon pf-m-status">
+            <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+          </div>
+        </div>
       </div>
       <div class="pf-v5-c-form__helper-text" aria-live="polite">
         <div class="pf-v5-c-helper-text">
@@ -316,7 +321,7 @@ cssPrefix: pf-v5-c-form
         <span class="pf-v5-c-form__label-text">Address</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
     </div>
     <div class="pf-v5-c-form__group-control">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-required pf-m-error">
         <input
           required
           type="text"
@@ -325,6 +330,11 @@ cssPrefix: pf-v5-c-form
           aria-invalid="true"
           aria-describedby="-address-helper"
         />
+        <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 class="pf-v5-c-form__helper-text" aria-live="polite">
         <div class="pf-v5-c-helper-text">
@@ -353,6 +363,11 @@ cssPrefix: pf-v5-c-form
           name="form-help-text-comment"
           aria-describedby="form-help-text-comment-helper"
         />
+        <div class="pf-v5-c-form-control__utilities">
+          <div class="pf-v5-c-form-control__icon pf-m-status">
+            <i class="fas fa-check-circle" aria-hidden="true"></i>
+          </div>
+        </div>
       </div>
       <div class="pf-v5-c-form__helper-text" aria-live="polite">
         <div class="pf-v5-c-helper-text">
@@ -373,13 +388,18 @@ cssPrefix: pf-v5-c-form
         <span class="pf-v5-c-form__label-text">Information</span></label>
     </div>
     <div class="pf-v5-c-form__group-control">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-error pf-m-resize-both">
         <textarea
           id="form-help-text-info"
           name="form-help-text-info"
           aria-invalid="true"
           aria-describedby="form-help-text-info-helper"
         ></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 class="pf-v5-c-form__helper-text" aria-live="polite">
         <div class="pf-v5-c-helper-text">
@@ -421,12 +441,12 @@ cssPrefix: pf-v5-c-form
       <div class="pf-v5-c-form__group-label-info">info</div>
     </div>
     <div class="pf-v5-c-form__group-control">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-required">
         <input
+          required
           type="text"
           id="form-additional-info-name"
           name="form-additional-info-name"
-          required
         />
       </div>
     </div>
@@ -490,12 +510,12 @@ cssPrefix: pf-v5-c-form
           ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
         </div>
         <div class="pf-v5-c-form__group-control">
-          <div class="pf-v5-c-form-control">
+          <div class="pf-v5-c-form-control pf-m-required">
             <input
+              required
               type="text"
               id="form-field-group-field-group-label1"
               name="form-field-group-field-group-label1"
-              required
             />
           </div>
         </div>
@@ -515,12 +535,12 @@ cssPrefix: pf-v5-c-form
           ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
         </div>
         <div class="pf-v5-c-form__group-control">
-          <div class="pf-v5-c-form-control">
+          <div class="pf-v5-c-form-control pf-m-required">
             <input
+              required
               type="text"
               id="form-field-group-field-group-label2"
               name="form-field-group-field-group-label2"
-              required
             />
           </div>
         </div>
@@ -623,12 +643,12 @@ cssPrefix: pf-v5-c-form
           ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
         </div>
         <div class="pf-v5-c-form__group-control">
-          <div class="pf-v5-c-form-control">
+          <div class="pf-v5-c-form-control pf-m-required">
             <input
+              required
               type="text"
               id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
               name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
-              required
             />
           </div>
         </div>
@@ -648,12 +668,12 @@ cssPrefix: pf-v5-c-form
           ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
         </div>
         <div class="pf-v5-c-form__group-control">
-          <div class="pf-v5-c-form-control">
+          <div class="pf-v5-c-form-control pf-m-required">
             <input
+              required
               type="text"
               id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
               name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
-              required
             />
           </div>
         </div>
@@ -692,12 +712,12 @@ cssPrefix: pf-v5-c-form
               ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
             </div>
             <div class="pf-v5-c-form__group-control">
-              <div class="pf-v5-c-form-control">
+              <div class="pf-v5-c-form-control pf-m-required">
                 <input
+                  required
                   type="text"
                   id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
                   name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
-                  required
                 />
               </div>
             </div>
@@ -720,12 +740,12 @@ cssPrefix: pf-v5-c-form
               ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
             </div>
             <div class="pf-v5-c-form__group-control">
-              <div class="pf-v5-c-form-control">
+              <div class="pf-v5-c-form-control pf-m-required">
                 <input
+                  required
                   type="text"
                   id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
                   name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
-                  required
                 />
               </div>
             </div>

package/docs/components/FormControl/examples/FormControl.md

@@ -19,7 +19,7 @@ cssPrefix: pf-v5-c-form-control
   />
 </div>
 <br />
-<div class="pf-v5-c-form-control pf-m-placeholder">
+<div class="pf-v5-c-form-control">
   <input
     type="text"
     placeholder="Placeholder"

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -377,13 +377,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
   <div class="pf-v5-c-inline-edit__value">Static value</div>
   <div class="pf-v5-c-inline-edit__group">
     <div class="pf-v5-c-inline-edit__input">
-      <div class="pf-v5-c-form-control">
+      <div class="pf-v5-c-form-control pf-m-required pf-m-error">
         <input
           required
           value="Invalid state"
           aria-invalid="true"
           aria-label="Error state input example"
         />
+        <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-inline-edit__group pf-m-action-group pf-m-icon-group">
@@ -464,13 +469,13 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             class="pf-v5-c-inline-edit__value"
           >Text input disabled, description content</div>
           <div class="pf-v5-c-inline-edit__input">
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-disabled">
               <input
+                disabled
                 type="text"
                 value="Text input disabled, description content"
                 id="bulk-edit-table-example-row-1-text-input-disabled"
                 aria-label="Disabled text input"
-                disabled
               />
             </div>
           </div>
@@ -673,13 +678,13 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             class="pf-v5-c-inline-edit__value"
           >Text input disabled, description content</div>
           <div class="pf-v5-c-inline-edit__input">
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-disabled">
               <input
+                disabled
                 type="text"
                 value="Text input disabled, description content"
                 id="bulk-edit-table-example-row-2-text-input-disabled"
                 aria-label="Disabled text input"
-                disabled
               />
             </div>
           </div>
@@ -895,154 +900,4 @@ All accessibility requirements for inputs apply to elements within inline edit.
 | `.pf-m-valid` | `.pf-v5-c-inline-edit__action` | Modifies the action button state. |
 | `.pf-m-enable-editable` | `.pf-v5-c-inline-edit__action` | Exposes an inline edit action by default. |
 
-<!--
-### Bulk edit dl (default)
-```hbs
-{{#> inline-edit inline-edit--type="form" inline-edit--id="bulk-edit-dl-example-default"}}
-  {{#> inline-edit-dl}}{{/inline-edit-dl}}
-{{/inline-edit}}
-```
-
-### Bulk edit dl (active)
-```hbs
-{{#> inline-edit inline-edit--type="form" inline-edit--id="bulk-edit-dl-example-active" inline-edit--modifier="pf-m-inline-editable"}}
-  {{#> inline-edit-dl}}{{/inline-edit-dl}}
-{{/inline-edit}}
-```
-
-### Inline edit dl example
-```hbs
-{{#> list list--type="dl" list--modifier="pf-m-2-col" list--attribute=(concat 'aria-label="Inline edit description list example"')}}
-  <div>
-    <dt>Name</dt>
-    <dd>main</dd>
-  </div>
-  {{#> inline-edit inline-edit--id="inline-edit-dl-example-1"}}
-    <dt>
-      {{#> inline-edit-group}}
-        {{#> inline-edit-label}}
-          Description
-        {{/inline-edit-label}}
-        {{#> inline-edit-toggle}}
-          {{#> button button--modifier="pf-m-plain" button--attribute=(concat 'id="' inline-edit--id '-edit-button" aria-label="Edit" aria-labelledby="' inline-edit--id '-edit-button"')}}
-            <i class="fas fa-pencil-alt" aria-hidden="true"></i>
-          {{/button}}
-        {{/inline-edit-toggle}}
-      {{/inline-edit-group}}
-    </dt>
-    <dd>
-      {{#> inline-edit-value}}
-        test cluster
-      {{/inline-edit-value}}
-      {{#> inline-edit-input}}
-        {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="Text input description content" id="' inline-edit--id '-input"')}}
-      {{/inline-edit-input}}
-    </dd>
-  {{/inline-edit}}
-
-  {{#> inline-edit inline-edit--id="inline-edit-dl-example-2" inline-edit--modifier="pf-m-inline-editable"}}
-    <dt>
-      {{#> inline-edit-group}}
-        {{#> inline-edit-label}}
-          Description (editable)
-        {{/inline-edit-label}}
-        {{#> inline-edit-toggle}}
-          {{#> button button--modifier="pf-m-plain" button--attribute=(concat 'id="' inline-edit--id '-edit-button" aria-label="Edit" aria-labelledby="' inline-edit--id '-label ' inline-edit--id '-edit-button"')}}
-            <i class="fas fa-pencil-alt" aria-hidden="true"></i>
-          {{/button}}
-        {{/inline-edit-toggle}}
-      {{/inline-edit-group}}
-    </dt>
-    <dd>
-      {{#> inline-edit-value}}
-        Text input description content
-      {{/inline-edit-value}}
-      {{#> inline-edit-input}}
-        {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="Text input description content" id="' inline-edit--id '-input"')}}
-      {{/inline-edit-input}}
-    </dd>
-  {{/inline-edit}}
-
-  <div>
-    <dt>Tags</dt>
-    <dd>
-      {{#> chip chip--type="div" chip--modifier="pf-m-read-only"}}
-        {{#> chip-content}}
-          {{#> chip-text}}
-            alertmanager=main
-          {{/chip-text}}
-        {{/chip-content}}
-      {{/chip}}
-    </dd>
-  </div>
-
-  {{#> inline-edit inline-edit--id="inline-edit-dl-example-3"}}
-    <dt>
-      {{#> inline-edit-group}}
-        {{#> inline-edit-label}}
-          Value
-        {{/inline-edit-label}}
-        {{#> inline-edit-toggle}}
-          {{#> button button--modifier="pf-m-plain" button--attribute=(concat 'id="' inline-edit--id '-edit-button" aria-label="Edit" aria-labelledby="' inline-edit--id '-label ' inline-edit--id '-edit-button"')}}
-            <i class="fas fa-pencil-alt" aria-hidden="true"></i>
-          {{/button}}
-        {{/inline-edit-toggle}}
-      {{/inline-edit-group}}
-    </dt>
-    <dd>
-      {{#> inline-edit-value}}
-        True
-      {{/inline-edit-value}}
-      {{#> inline-edit-group inline-edit-group--attribute='role="radiogroup" aria-label="Radio group example"' inline-edit-group--modifier="pf-m-column"}}
-        {{#> inline-edit-input}}
-          {{#> radio}}
-            {{#> radio-input radio-input--attribute=(concat 'id="' inline-edit--id '-radio1" name="' inline-edit--id '-input"')}}{{/radio-input}}
-            {{#> radio-label radio-label--attribute=(concat 'for="' inline-edit--id '-radio1"')}}True{{/radio-label}}
-          {{/radio}}
-        {{/inline-edit-input}}
-        {{#> inline-edit-input}}
-          {{#> radio}}
-            {{#> radio-input radio-input--attribute=(concat 'id="' inline-edit--id '-radio2" name="' inline-edit--id '-input"')}}{{/radio-input}}
-            {{#> radio-label radio-label--attribute=(concat 'for="' inline-edit--id '-radio2"')}}False{{/radio-label}}
-          {{/radio}}
-        {{/inline-edit-input}}
-      {{/inline-edit-group}}
-    </dd>
-  {{/inline-edit}}
-
-  {{#> inline-edit inline-edit--id="inline-edit-dl-example-4" inline-edit--modifier="pf-m-inline-editable"}}
-    <dt>
-      {{#> inline-edit-group}}
-        {{#> inline-edit-label}}
-          Value
-        {{/inline-edit-label}}
-        {{#> inline-edit-toggle}}
-          {{#> button button--modifier="pf-m-plain" button--attribute=(concat 'id="' inline-edit--id '-edit-button" aria-label="Edit" aria-labelledby="' inline-edit--id '-label ' inline-edit--id '-edit-button"')}}
-            <i class="fas fa-pencil-alt" aria-hidden="true"></i>
-          {{/button}}
-        {{/inline-edit-toggle}}
-      {{/inline-edit-group}}
-    </dt>
-    <dd>
-      {{#> inline-edit-value}}
-        True
-      {{/inline-edit-value}}
-      {{#> inline-edit-group inline-edit-group--attribute='role="radiogroup" aria-label="Radio group example"' inline-edit-group--modifier="pf-m-column"}}
-        {{#> inline-edit-input}}
-          {{#> radio}}
-            {{#> radio-input radio-input--attribute=(concat 'id="' inline-edit--id '-radio1" name="' inline-edit--id '-input"')}}{{/radio-input}}
-            {{#> radio-label radio-label--attribute=(concat 'for="' inline-edit--id '-radio1"')}}True{{/radio-label}}
-          {{/radio}}
-        {{/inline-edit-input}}
-        {{#> inline-edit-input}}
-          {{#> radio}}
-            {{#> radio-input radio-input--attribute=(concat 'id="' inline-edit--id '-radio2" name="' inline-edit--id '-input"')}}{{/radio-input}}
-            {{#> radio-label radio-label--attribute=(concat 'for="' inline-edit--id '-radio2"')}}False{{/radio-label}}
-          {{/radio}}
-        {{/inline-edit-input}}
-      {{/inline-edit-group}}
-    </dd>
-  {{/inline-edit}}
-{{/list}}
-```
--->
+    -->

package/docs/components/InputGroup/examples/InputGroup.md

@@ -20,7 +20,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     >Button</button>
   </div>
   <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-resize-both">
       <textarea
         name="textarea1"
         id="textarea1"
@@ -36,7 +36,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 <br />
 <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-resize-both">
       <textarea
         name="textarea2"
         id="textarea2"
@@ -66,7 +66,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     <button class="pf-v5-c-button pf-m-control" type="button">Button</button>
   </div>
   <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-resize-both">
       <textarea
         name="textarea3"
         id="textarea3"
@@ -203,7 +203,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
     </span>
   </div>
   <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 pf-m-error">
       <input
         required
         type="email"
@@ -212,6 +212,11 @@ Use the input group to extend form controls by adding text, buttons, selects, et
         aria-invalid="true"
         aria-label="Error state username example"
       />
+      <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>

package/docs/components/Login/examples/Login.md

@@ -48,7 +48,7 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
                 input="true"
@@ -64,10 +64,9 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
-                input="true"
                 type="password"
                 id="login-demo-form-password"
                 name="login-demo-form-password"
@@ -261,7 +260,7 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required pf-m-error">
               <input
                 required
                 type="text"
@@ -269,6 +268,11 @@ wrapperTag: div
                 name="invalid-login-demo-form-username"
                 aria-invalid="true"
               />
+              <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-form__group"><label
@@ -280,7 +284,7 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required pf-m-error">
               <input
                 required
                 type="password"
@@ -288,6 +292,11 @@ wrapperTag: div
                 name="invalid-login-demo-form-password"
                 aria-invalid="true"
               />
+              <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-form__group">
@@ -474,10 +483,9 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
-                input="true"
                 type="text"
                 id="login-demo-form-username"
                 name="login-demo-form-username"
@@ -491,10 +499,9 @@ wrapperTag: div
               >&#42;</span></label>
 
             <div class="pf-v5-c-input-group">
-              <div class="pf-v5-c-form-control">
+              <div class="pf-v5-c-form-control pf-m-required">
                 <input
                   required
-                  input="true"
                   type="password"
                   id="login-demo-form-password"
                   name="login-demo-form-password"
@@ -702,10 +709,9 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
-                input="true"
                 type="text"
                 id="login-demo-form-username"
                 name="login-demo-form-username"
@@ -719,10 +725,9 @@ wrapperTag: div
               >&#42;</span></label>
 
             <div class="pf-v5-c-input-group">
-              <div class="pf-v5-c-form-control">
+              <div class="pf-v5-c-form-control pf-m-required">
                 <input
                   required
-                  input="true"
                   type="text"
                   id="login-demo-form-password"
                   name="login-demo-form-password"
@@ -969,10 +974,9 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
-                input="true"
                 type="text"
                 id="login-demo-form-username"
                 name="login-demo-form-username"
@@ -985,10 +989,9 @@ wrapperTag: div
                 aria-hidden="true"
               >&#42;</span></label>
 
-            <div class="pf-v5-c-form-control">
+            <div class="pf-v5-c-form-control pf-m-required">
               <input
                 required
-                input="true"
                 type="password"
                 id="login-demo-form-password"
                 name="login-demo-form-password"