@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

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,15 +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">
@@ -229,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"
@@ -317,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">
@@ -569,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"
@@ -585,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"
@@ -606,58 +599,67 @@ section: components
       </div>
       <div class="pf-c-form__group-control pf-m-stack">
         <div class="pf-c-input-group">
-          <input
-            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"
-          />
-
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Remove"
-          >
-            <i class="fas fa-minus-circle" aria-hidden="true"></i>
-          </button>
+          <div class="pf-c-input-group__item pf-m-fill">
+            <input
+              class="pf-c-form-control"
+              required
+              type="text"
+              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">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Remove"
+            >
+              <i class="fas fa-minus-circle" aria-hidden="true"></i>
+            </button>
+          </div>
         </div>
         <div class="pf-c-input-group">
-          <input
-            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"
-          />
-
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Remove"
-          >
-            <i class="fas fa-minus-circle" aria-hidden="true"></i>
-          </button>
+          <div class="pf-c-input-group__item pf-m-fill">
+            <input
+              class="pf-c-form-control"
+              required
+              type="text"
+              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">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Remove"
+            >
+              <i class="fas fa-minus-circle" aria-hidden="true"></i>
+            </button>
+          </div>
         </div>
         <div class="pf-c-input-group">
-          <input
-            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"
-          />
-
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Remove"
-          >
-            <i class="fas fa-minus-circle" aria-hidden="true"></i>
-          </button>
+          <div class="pf-c-input-group__item pf-m-fill">
+            <input
+              class="pf-c-form-control"
+              required
+              type="text"
+              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">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Remove"
+            >
+              <i class="fas fa-minus-circle" aria-hidden="true"></i>
+            </button>
+          </div>
         </div>
         <button class="pf-c-button pf-m-link pf-m-inline" type="button">
           <span class="pf-c-button__icon pf-m-start">
@@ -670,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"
@@ -686,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>
@@ -703,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"
@@ -718,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>
@@ -728,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"
@@ -742,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">
@@ -758,41 +760,47 @@ section: components
                       <span class="pf-c-label__icon">
                         <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
                       </span>
-                      prometheus=k8s
+                      <span class="pf-c-label__text">prometheus=k8s</span>
+                    </span>
+                    <span class="pf-c-label__actions">
+                      <button
+                        class="pf-c-button pf-m-plain"
+                        type="button"
+                        id="-label-1-button"
+                        aria-label="Remove"
+                        aria-labelledby="-label-1-button -label-1-text"
+                      >
+                        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+                      </button>
                     </span>
-                    <button
-                      class="pf-c-button pf-m-plain"
-                      type="button"
-                      id="-label-1-button"
-                      aria-label="Remove"
-                      aria-labelledby="-label-1-button -label-1-text"
-                    >
-                      <i class="fas fa-times" aria-hidden="true"></i>
-                    </button>
                   </span>
                 </li>
                 <li class="pf-c-label-group__list-item">
-                  <span class="pf-c-label pf-m-blue">
+                  <span class="pf-c-label">
                     <span class="pf-c-label__content">
                       <span class="pf-c-label__icon">
                         <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
                       </span>
-                      new
+                      <span class="pf-c-label__text">new</span>
+                    </span>
+                    <span class="pf-c-label__actions">
+                      <button
+                        class="pf-c-button pf-m-plain"
+                        type="button"
+                        id="-label-2-button"
+                        aria-label="Remove"
+                        aria-labelledby="-label-2-button -label-2-text"
+                      >
+                        <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+                      </button>
                     </span>
-                    <button
-                      class="pf-c-button pf-m-plain"
-                      type="button"
-                      id="-label-2-button"
-                      aria-label="Remove"
-                      aria-labelledby="-label-2-button -label-2-text"
-                    >
-                      <i class="fas fa-times" aria-hidden="true"></i>
-                    </button>
                   </span>
                 </li>
                 <li class="pf-c-label-group__list-item">
                   <button class="pf-c-label pf-m-add" type="button">
-                    <span class="pf-c-label__content">Add Label</span>
+                    <span class="pf-c-label__content">
+                      <span class="pf-c-label__text">Add Label</span>
+                    </span>
                   </button>
                 </li>
               </ul>
@@ -1032,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"
@@ -1041,22 +1049,25 @@ section: components
                   </div>
                   <div class="pf-c-form__group-control pf-m-stack">
                     <div class="pf-c-input-group">
-                      <input
-                        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"
-                      />
-
-                      <button
-                        class="pf-c-button pf-m-plain"
-                        type="button"
-                        aria-label="Remove"
-                      >
-                        <i class="fas fa-minus-circle" aria-hidden="true"></i>
-                      </button>
+                      <div class="pf-c-input-group__item pf-m-fill">
+                        <input
+                          class="pf-c-form-control"
+                          required
+                          type="text"
+                          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">
+                        <button
+                          class="pf-c-button pf-m-plain"
+                          type="button"
+                          aria-label="Remove"
+                        >
+                          <i class="fas fa-minus-circle" aria-hidden="true"></i>
+                        </button>
+                      </div>
                     </div>
                     <button
                       class="pf-c-button pf-m-link pf-m-inline"
@@ -1155,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>
@@ -1182,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>
@@ -1190,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>
@@ -1212,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>
@@ -1221,18 +1230,17 @@ section: components
             class="pf-c-form-control"
             type="text"
             placeholder="/"
-            id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
-            name="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
+            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>
@@ -1251,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>
@@ -1260,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>