@patternfly/patternfly 5.0.0-alpha.32 → 5.0.0-alpha.34

package/docs/demos/Form/examples/BasicForms.md

@@ -1,6 +1,7 @@
 ---
 id: Form
 section: components
+subsection: forms
 ---## Demos
 
 ### Basic
@@ -8,7 +9,7 @@ section: components
 ```html
 <form class="pf-c-form" novalidate>
   <div class="pf-c-form__group">
-    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-basic-name">
+    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-name">
         <span class="pf-c-form__label-text">Full name</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
     </div>
     <div class="pf-c-form__group-control">
@@ -16,37 +17,36 @@ section: components
         class="pf-c-form-control"
         required
         type="text"
-        id="form-demo-basic-name"
-        name="form-demo-basic-name"
-        aria-describedby="form-demo-basic-name-helper"
+        id="-name"
+        name="-name"
+        aria-describedby="-name-helper"
       />
 
-      <p
-        class="pf-c-form__helper-text"
-        id="form-demo-basic-name-helper"
-        aria-live="polite"
-      >Include your middle name if you have one.</p>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div class="pf-c-helper-text__item" id="-name-helper">
+            <span
+              class="pf-c-helper-text__item-text"
+            >Include your middle name if you have one.</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="pf-c-form__group">
-    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-basic-email">
+    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-email">
         <span class="pf-c-form__label-text">Email</span></label>
     </div>
     <div class="pf-c-form__group-control">
-      <input
-        class="pf-c-form-control"
-        type="email"
-        id="form-demo-basic-email"
-        name="form-demo-basic-email"
-      />
+      <input class="pf-c-form-control" type="email" id="-email" name="-email" />
     </div>
   </div>
   <div class="pf-c-form__group">
-    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-basic-phone">
+    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-phone">
         <span class="pf-c-form__label-text">Phone number</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
         class="pf-c-form__group-label-help"
         aria-label="More information for phone number field"
-        aria-describedby="form-demo-basic-phone"
+        aria-describedby="-phone"
         role="button"
         type="button"
         tabindex="0"
@@ -58,8 +58,8 @@ section: components
         required
         type="tel"
         placeholder="555-555-5555"
-        id="form-demo-basic-phone"
-        name="form-demo-basic-phone"
+        id="-phone"
+        name="-phone"
       />
     </div>
   </div>
@@ -76,40 +76,31 @@ section: components
         <input
           class="pf-c-check__input"
           type="checkbox"
-          id="form-demo-basic-contact-check-1"
-          name="form-demo-basic-contact-check-1"
+          id="-contact-check-1"
+          name="-contact-check-1"
         />
 
-        <label
-          class="pf-c-check__label"
-          for="form-demo-basic-contact-check-1"
-        >Email</label>
+        <label class="pf-c-check__label" for="-contact-check-1">Email</label>
       </div>
       <div class="pf-c-check">
         <input
           class="pf-c-check__input"
           type="checkbox"
-          id="form-demo-basic-contact-check-2"
-          name="form-demo-basic-contact-check-2"
+          id="-contact-check-2"
+          name="-contact-check-2"
         />
 
-        <label
-          class="pf-c-check__label"
-          for="form-demo-basic-contact-check-2"
-        >Phone</label>
+        <label class="pf-c-check__label" for="-contact-check-2">Phone</label>
       </div>
       <div class="pf-c-check">
         <input
           class="pf-c-check__input"
           type="checkbox"
-          id="form-demo-basic-contact-check-3"
-          name="form-demo-basic-contact-check-3"
+          id="-contact-check-3"
+          name="-contact-check-3"
         />
 
-        <label
-          class="pf-c-check__label"
-          for="form-demo-basic-contact-check-3"
-        >Mail</label>
+        <label class="pf-c-check__label" for="-contact-check-3">Mail</label>
       </div>
     </div>
   </div>
@@ -126,40 +117,31 @@ section: components
         <input
           class="pf-c-radio__input"
           type="radio"
-          id="form-demo-basic-time-zone-radio-1"
-          name="form-demo-basic-time-zone-radio"
+          id="-time-zone-radio-1"
+          name="-time-zone-radio"
         />
 
-        <label
-          class="pf-c-radio__label"
-          for="form-demo-basic-time-zone-radio-1"
-        >Eastern</label>
+        <label class="pf-c-radio__label" for="-time-zone-radio-1">Eastern</label>
       </div>
       <div class="pf-c-radio">
         <input
           class="pf-c-radio__input"
           type="radio"
-          id="form-demo-basic-time-zone-radio-2"
-          name="form-demo-basic-time-zone-radio"
+          id="-time-zone-radio-2"
+          name="-time-zone-radio"
         />
 
-        <label
-          class="pf-c-radio__label"
-          for="form-demo-basic-time-zone-radio-2"
-        >Central</label>
+        <label class="pf-c-radio__label" for="-time-zone-radio-2">Central</label>
       </div>
       <div class="pf-c-radio">
         <input
           class="pf-c-radio__input"
           type="radio"
-          id="form-demo-basic-time-zone-radio-3"
-          name="form-demo-basic-time-zone-radio"
+          id="-time-zone-radio-3"
+          name="-time-zone-radio"
         />
 
-        <label
-          class="pf-c-radio__label"
-          for="form-demo-basic-time-zone-radio-3"
-        >Pacific</label>
+        <label class="pf-c-radio__label" for="-time-zone-radio-3">Pacific</label>
       </div>
     </div>
   </div>
@@ -180,7 +162,7 @@ section: components
 ```html
 <form class="pf-c-form pf-m-horizontal" novalidate>
   <div class="pf-c-form__group -name">
-    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-horizontal">
+    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-horizontal-name">
         <span class="pf-c-form__label-text">Full name</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
     </div>
     <div class="pf-c-form__group-control">
@@ -188,16 +170,22 @@ section: components
         class="pf-c-form-control"
         required
         type="text"
-        id="form-demo-horizontal"
-        name="form-demo-horizontal"
-        aria-describedby="form-demo-horizontal-helper"
+        id="form-demo-horizontal-name"
+        name="form-demo-horizontal-name"
+        aria-describedby="form-demo-horizontal-name-helper"
       />
-
-      <p
-        class="pf-c-form__helper-text"
-        id="form-demo-horizontal-helper"
-        aria-live="polite"
-      >Include your middle name if you have one.</p>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div
+            class="pf-c-helper-text__item"
+            id="form-demo-horizontal-name-helper"
+          >
+            <span
+              class="pf-c-helper-text__item-text"
+            >Include your middle name if you have one.</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="pf-c-form__group">
@@ -230,11 +218,11 @@ section: components
   <div
     class="pf-c-form__group"
     role="group"
-    aria-labelledby="form-demo-horizontal-contact-legend"
+    aria-labelledby="form-demo-horizontalform-demo-horizontal-contact-legend"
   >
     <div
       class="pf-c-form__group-label pf-m-no-padding-top"
-      id="form-demo-horizontal-contact-legend"
+      id="form-demo-horizontalform-demo-horizontal-contact-legend"
     ><span class="pf-c-form__label">
         <span class="pf-c-form__label-text">How can we contact you?</span></span>&nbsp;<span
         class="pf-c-form__group-label-help"
@@ -318,11 +306,15 @@ section: components
           aria-describedby="form-demo-grid-name-helper"
         />
 
-        <p
-          class="pf-c-form__helper-text"
-          id="form-demo-grid-name-helper"
-          aria-live="polite"
-        >Include your middle name if you have one.</p>
+        <div class="pf-c-form__helper-text" aria-live="polite">
+          <div class="pf-c-helper-text">
+            <div class="pf-c-helper-text__item" id="-helper">
+              <span
+                class="pf-c-helper-text__item-text"
+              >Include your middle name if you have one.</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div class="pf-c-form__group">
@@ -570,12 +562,12 @@ section: components
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          for="form-demo-sections-repeatable-fields-rooturl"
+          for="form-demo-sections-repeatable-fields-section2-rooturl"
         >
           <span class="pf-c-form__label-text">Root URL</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
           class="pf-c-form__group-label-help"
           aria-label="More information for root URL field"
-          aria-describedby="form-demo-sections-repeatable-fields-rooturl"
+          aria-describedby="form-demo-sections-repeatable-fields-section2-rooturl"
           role="button"
           type="button"
           tabindex="0"
@@ -586,20 +578,20 @@ section: components
           class="pf-c-form-control"
           required
           type="text"
-          id="form-demo-sections-repeatable-fields-rooturl"
-          name="form-demo-sections-repeatable-fields-rooturl"
+          id="form-demo-sections-repeatable-fields-section2-rooturl"
+          name="form-demo-sections-repeatable-fields-section2-rooturl"
         />
       </div>
     </div>
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          id="form-demo-sections-repeatable-fields-uris"
+          id="form-demo-sections-repeatable-fields-section2-uris"
         >
           <span class="pf-c-form__label-text">Valid redirect URIs</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
           class="pf-c-form__group-label-help"
           aria-label="More information for valid redirect URIs field"
-          aria-describedby="form-demo-sections-repeatable-fields-uris"
+          aria-describedby="form-demo-sections-repeatable-fields-section2-uris"
           role="button"
           type="button"
           tabindex="0"
@@ -612,9 +604,9 @@ section: components
               class="pf-c-form-control"
               required
               type="text"
-              id="form-demo-sections-repeatable-fields-uris-input-1"
-              name="form-demo-sections-repeatable-fields-uris-input-1"
-              aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-1"
+              id="form-demo-sections-repeatable-fields-section2-uris-input-1"
+              name="form-demo-sections-repeatable-fields-section2-uris-input-1"
+              aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-1"
             />
           </div>
           <div class="pf-c-input-group__item pf-m-plain">
@@ -633,9 +625,9 @@ section: components
               class="pf-c-form-control"
               required
               type="text"
-              id="form-demo-sections-repeatable-fields-uris-input-2"
-              name="form-demo-sections-repeatable-fields-uris-input-2"
-              aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-2"
+              id="form-demo-sections-repeatable-fields-section2-uris-input-2"
+              name="form-demo-sections-repeatable-fields-section2-uris-input-2"
+              aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-2"
             />
           </div>
           <div class="pf-c-input-group__item pf-m-plain">
@@ -654,9 +646,9 @@ section: components
               class="pf-c-form-control"
               required
               type="text"
-              id="form-demo-sections-repeatable-fields-uris-input-3"
-              name="form-demo-sections-repeatable-fields-uris-input-3"
-              aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-3"
+              id="form-demo-sections-repeatable-fields-section2-uris-input-3"
+              name="form-demo-sections-repeatable-fields-section2-uris-input-3"
+              aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-3"
             />
           </div>
           <div class="pf-c-input-group__item pf-m-plain">
@@ -680,12 +672,12 @@ section: components
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          for="form-demo-sections-repeatable-fields-home-url"
+          for="form-demo-sections-repeatable-fields-section2-home-url"
         >
           <span class="pf-c-form__label-text">Home URL</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
           class="pf-c-form__group-label-help"
           aria-label="More information for home URL field"
-          aria-describedby="form-demo-sections-repeatable-fields-home-url"
+          aria-describedby="form-demo-sections-repeatable-fields-section2-home-url"
           role="button"
           type="button"
           tabindex="0"
@@ -696,8 +688,8 @@ section: components
           class="pf-c-form-control"
           required
           type="text"
-          id="form-demo-sections-repeatable-fields-home-url"
-          name="form-demo-sections-repeatable-fields-home-url"
+          id="form-demo-sections-repeatable-fields-section2-home-url"
+          name="form-demo-sections-repeatable-fields-section2-home-url"
         />
       </div>
     </div>
@@ -713,12 +705,12 @@ section: components
   <div class="pf-c-form__group">
     <div class="pf-c-form__group-label"><label
         class="pf-c-form__label"
-        for="form-demo-sections-complex-formform-demo-sections-complex-form-name"
+        for="form-demo-sections-complex-form-name"
       >
         <span class="pf-c-form__label-text">Name</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
         class="pf-c-form__group-label-help"
         aria-label="More information for name field"
-        aria-describedby="form-demo-sections-complex-formform-demo-sections-complex-form-name"
+        aria-describedby="form-demo-sections-complex-form-name"
         role="button"
         type="button"
         tabindex="0"
@@ -728,8 +720,8 @@ section: components
       <input
         class="pf-c-form-control"
         type="text"
-        id="form-demo-sections-complex-formform-demo-sections-complex-form-name"
-        name="form-demo-sections-complex-formform-demo-sections-complex-form-name"
+        id="form-demo-sections-complex-form-name"
+        name="form-demo-sections-complex-form-name"
         required
       />
     </div>
@@ -738,12 +730,12 @@ section: components
   <div class="pf-c-form__group">
     <div class="pf-c-form__group-label"><label
         class="pf-c-form__label"
-        for="form-demo-sections-complex-formform-demo-sections-complex-form-labels"
+        for="form-demo-sections-complex-form-labels"
       >
         <span class="pf-c-form__label-text">Labels</span></label>&nbsp;<span
         class="pf-c-form__group-label-help"
         aria-label="More information for labels field"
-        aria-describedby="form-demo-sections-complex-formform-demo-sections-complex-form-labels"
+        aria-describedby="form-demo-sections-complex-form-labels"
         role="button"
         type="button"
         tabindex="0"
@@ -752,7 +744,7 @@ section: components
     <div class="pf-c-form__group-control">
       <div
         class="pf-c-text-input-group"
-        id="form-demo-sections-complex-formform-demo-sections-complex-form-labels"
+        id="form-demo-sections-complex-form-labels"
       >
         <div class="pf-c-text-input-group__main">
           <div class="pf-c-label-group">
@@ -1048,7 +1040,7 @@ section: components
                 <div class="pf-c-form__group">
                   <div class="pf-c-form__group-label"><label
                       class="pf-c-form__label"
-                      id="form-demo-sections-complex-form-node-selector-terms-title"
+                      id="-node-selector-terms-title"
                     >
                       <span class="pf-c-form__label-text">Node selector terms</span>&nbsp;<span
                         class="pf-c-form__label-required"
@@ -1062,9 +1054,9 @@ section: components
                           class="pf-c-form-control"
                           required
                           type="text"
-                          id="form-demo-sections-complex-form-node-selector-terms-input-1"
-                          name="form-demo-sections-complex-form-node-selector-terms-input-1"
-                          aria-labelledby="form-demo-sections-complex-form-node-selector-terms form-demo-sections-complex-form-node-selector-terms-title"
+                          id="-node-selector-terms-input-1"
+                          name="-node-selector-terms-input-1"
+                          aria-labelledby="-node-selector-terms -node-selector-terms-title"
                         />
                       </div>
                       <div class="pf-c-input-group__item pf-m-plain">
@@ -1174,22 +1166,21 @@ section: components
             <input
               class="pf-c-check__input"
               type="checkbox"
-              id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-create-route"
-              name="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-create-route"
+              id="form-demo-sections-complex-form-routing-create-route-create-route"
+              name="form-demo-sections-complex-form-routing-create-route-create-route"
             />
 
             <label
               class="pf-c-check__label"
-              for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-create-route"
+              for="form-demo-sections-complex-form-routing-create-route-create-route"
             >Create a route to the application</label>
           </div>
-          <div
-            class="pf-c-form__helper-text"
-            id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-legend"
-            aria-live="polite"
-          >
+          <div class="pf-c-form__helper-text" aria-live="polite">
             <div class="pf-c-helper-text">
-              <div class="pf-c-helper-text__item">
+              <div
+                class="pf-c-helper-text__item"
+                id="form-demo-sections-complex-form-routing-create-route-helper"
+              >
                 <span
                   class="pf-c-helper-text__item-text"
                 >Exposes your appplication at a public URL.</span>
@@ -1201,7 +1192,7 @@ section: components
       <div class="pf-c-form__group">
         <div class="pf-c-form__group-label"><label
             class="pf-c-form__label"
-            for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname"
+            for="form-demo-sections-complex-form-routing-hostname"
           >
             <span class="pf-c-form__label-text">Hostname</span></label>
         </div>
@@ -1209,17 +1200,16 @@ section: components
           <input
             class="pf-c-form-control"
             type="text"
-            id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname"
-            name="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname"
+            id="form-demo-sections-complex-form-routing-hostname"
+            name="form-demo-sections-complex-form-routing-hostname"
           />
 
-          <div
-            class="pf-c-form__helper-text"
-            id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname-helper"
-            aria-live="polite"
-          >
+          <div class="pf-c-form__helper-text" aria-live="polite">
             <div class="pf-c-helper-text">
-              <div class="pf-c-helper-text__item">
+              <div
+                class="pf-c-helper-text__item"
+                id="form-demo-sections-complex-form-routing-hostname-helper"
+              >
                 <span
                   class="pf-c-helper-text__item-text"
                 >Public hostname for the route. If not specified, a hostname is generated.</span>
@@ -1231,7 +1221,7 @@ section: components
       <div class="pf-c-form__group">
         <div class="pf-c-form__group-label"><label
             class="pf-c-form__label"
-            for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
+            for="form-demo-sections-complex-form-routing-path"
           >
             <span class="pf-c-form__label-text">Path</span></label>
         </div>
@@ -1239,17 +1229,18 @@ section: components
           <input
             class="pf-c-form-control"
             type="text"
-            id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
-            name="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
+            placeholder="/"
+            id="form-demo-sections-complex-form-routing-path"
+            name="form-demo-sections-complex-form-routing-path"
+            required
           />
 
-          <div
-            class="pf-c-form__helper-text"
-            id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path-helper"
-            aria-live="polite"
-          >
+          <div class="pf-c-form__helper-text" aria-live="polite">
             <div class="pf-c-helper-text">
-              <div class="pf-c-helper-text__item">
+              <div
+                class="pf-c-helper-text__item"
+                id="form-demo-sections-complex-form-routing-path-helper"
+              >
                 <span
                   class="pf-c-helper-text__item-text"
                 >Path that the router watches to route traffic to the service.</span>
@@ -1268,7 +1259,7 @@ section: components
           id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-legend"
         ><span
             class="pf-c-form__label"
-            for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security"
+            for="form-demo-sections-complex-form-routing-security"
           >
             <span class="pf-c-form__label-text">Security</span></span>
         </div>
@@ -1277,22 +1268,21 @@ section: components
             <input
               class="pf-c-check__input"
               type="checkbox"
-              id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-check-1"
-              name="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-check-1"
+              id="form-demo-sections-complex-form-routing-security-check-1"
+              name="form-demo-sections-complex-form-routing-security-check-1"
             />
 
             <label
               class="pf-c-check__label"
-              for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-check-1"
+              for="form-demo-sections-complex-form-routing-security-check-1"
             >Secure Route</label>
           </div>
-          <div
-            class="pf-c-form__helper-text"
-            id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-helper"
-            aria-live="polite"
-          >
+          <div class="pf-c-form__helper-text" aria-live="polite">
             <div class="pf-c-helper-text">
-              <div class="pf-c-helper-text__item">
+              <div
+                class="pf-c-helper-text__item"
+                id="form-demo-sections-complex-form-routing-security-helper"
+              >
                 <span
                   class="pf-c-helper-text__item-text"
                 >Routes can be secured using several TLS termination types for serving certificates.</span>

package/docs/demos/HelperText/examples/HelperText.md

@@ -22,8 +22,8 @@ section: components
       />
       <div
         class="pf-c-form__helper-text"
-        id="helper-text-form-name-helper"
         aria-live="polite"
+        id="helper-text-form-name-helper"
       >
         <div class="pf-c-helper-text">
           <div class="pf-c-helper-text__item">
@@ -48,10 +48,11 @@ section: components
         name="helper-text-form-email"
         aria-describedby="helper-text-form-email-helper"
       />
+
       <div
         class="pf-c-form__helper-text"
-        id="helper-text-form-email-helper"
         aria-live="polite"
+        id="helper-text-form-email-helper"
       >
         <div class="pf-c-helper-text">
           <div class="pf-c-helper-text__item pf-m-warning">
@@ -77,13 +78,14 @@ section: components
         aria-invalid="true"
         aria-describedby="helper-text-form-address-helper"
       />
+
       <div
         class="pf-c-form__helper-text"
-        id="helper-text-form-address-helper"
         aria-live="polite"
+        id="helper-text-form-address-helper"
       >
         <div class="pf-c-helper-text">
-          <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
+          <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
             <span class="pf-c-helper-text__item-icon">
               <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
             </span>
@@ -91,7 +93,7 @@ section: components
               class="pf-c-helper-text__item-text"
             >This criteria has been met.</span>
           </div>
-          <div class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
+          <div class="pf-c-helper-text__item pf-m-error pf-m-dynamic">
             <span class="pf-c-helper-text__item-icon">
               <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
             </span>
@@ -99,7 +101,7 @@ section: components
               class="pf-c-helper-text__item-text"
             >This criteria has not been met.</span>
           </div>
-          <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
+          <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
             <span class="pf-c-helper-text__item-icon">
               <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
             </span>
@@ -124,13 +126,14 @@ section: components
         name="helper-text-form-comment"
         aria-describedby="helper-text-form-comment-helper"
       />
+
       <div
         class="pf-c-form__helper-text"
-        id="helper-text-form-comment-helper"
         aria-live="polite"
+        id="helper-text-form-comment-helper"
       >
         <div class="pf-c-helper-text">
-          <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
+          <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
             <span class="pf-c-helper-text__item-icon">
               <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
             </span>