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

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

@@ -1,6 +1,7 @@
 ---
 id: Form
 section: components
+subsection: forms
 cssPrefix: pf-c-form
 ---## Examples
 
@@ -75,11 +76,11 @@ cssPrefix: pf-c-form
   <div
     class="pf-c-form__group"
     role="group"
-    aria-labelledby="form-horizontal-checkbox-legend"
+    aria-labelledby="form-horizontalform-horizontal-checkbox-legend"
   >
     <div
       class="pf-c-form__group-label pf-m-no-padding-top"
-      id="form-horizontal-checkbox-legend"
+      id="form-horizontalform-horizontal-checkbox-legend"
     ><span class="pf-c-form__label">
         <span class="pf-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span
         class="pf-c-form__group-label-help"
@@ -160,7 +161,7 @@ cssPrefix: pf-c-form
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          for="form-section-example-form-section-1-input"
+          for="form-section-example-section-1-input"
         >
           <span class="pf-c-form__label-text">Form section 1 inputs</span></label>
       </div>
@@ -168,8 +169,8 @@ cssPrefix: pf-c-form
         <input
           class="pf-c-form-control"
           type="text"
-          id="form-section-example-form-section-1-input"
-          name="form-section-example-form-section-1-input"
+          id="form-section-example-section-1-input"
+          name="form-section-example-section-1-input"
           required
         />
       </div>
@@ -177,7 +178,7 @@ cssPrefix: pf-c-form
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          for="form-section-example-form-section-1-input-2"
+          for="form-section-example-section-1-input-2"
         >
           <span class="pf-c-form__label-text">Form section 1 inputs</span></label>
       </div>
@@ -185,8 +186,8 @@ cssPrefix: pf-c-form
         <input
           class="pf-c-form-control"
           type="text"
-          id="form-section-example-form-section-1-input-2"
-          name="form-section-example-form-section-1-input-2"
+          id="form-section-example-section-1-input-2"
+          name="form-section-example-section-1-input-2"
           required
         />
       </div>
@@ -195,17 +196,17 @@ cssPrefix: pf-c-form
   <section
     class="pf-c-form__section"
     role="group"
-    aria-labelledby="form-section-example-section2-title"
+    aria-labelledby="form-section-example-section-2-title"
   >
     <div
       class="pf-c-form__section-title"
-      id="form-section-example-section2-title"
+      id="form-section-example-section-2-title"
       aria-hidden="true"
     >Section 2 title (optional)</div>
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          for="form-section-example-form-section-2-input"
+          for="form-section-example-section-2-input"
         >
           <span class="pf-c-form__label-text">Form section 2 inputs</span></label>
       </div>
@@ -213,8 +214,8 @@ cssPrefix: pf-c-form
         <input
           class="pf-c-form-control"
           type="text"
-          id="form-section-example-form-section-2-input"
-          name="form-section-example-form-section-2-input"
+          id="form-section-example-section-2-input"
+          name="form-section-example-section-2-input"
           required
         />
       </div>
@@ -222,7 +223,7 @@ cssPrefix: pf-c-form
     <div class="pf-c-form__group">
       <div class="pf-c-form__group-label"><label
           class="pf-c-form__label"
-          for="form-section-example-form-section-2-input-2"
+          for="form-section-example-section-2-input-2"
         >
           <span class="pf-c-form__label-text">Form section 2 inputs</span></label>
       </div>
@@ -230,8 +231,8 @@ cssPrefix: pf-c-form
         <input
           class="pf-c-form-control"
           type="text"
-          id="form-section-example-form-section-2-input-2"
-          name="form-section-example-form-section-2-input-2"
+          id="form-section-example-section-2-input-2"
+          name="form-section-example-section-2-input-2"
           required
         />
       </div>
@@ -258,11 +259,13 @@ cssPrefix: pf-c-form
         name="form-help-text-name"
         aria-describedby="form-help-text-name-helper"
       />
-      <p
-        class="pf-c-form__helper-text"
-        id="form-help-text-name-helper"
-        aria-live="polite"
-      >This is helper text.</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-help-text-name-helper">
+            <span class="pf-c-helper-text__item-text">This is helper text.</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="pf-c-form__group">
@@ -278,15 +281,22 @@ cssPrefix: pf-c-form
         name="form-help-text-email"
         aria-describedby="form-help-text-email-helper"
       />
-      <p
-        class="pf-c-form__helper-text pf-m-warning"
-        id="form-help-text-email-helper"
-        aria-live="polite"
-      >This is helper text for a warning input.</p>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div
+            class="pf-c-helper-text__item pf-m-warning"
+            id="form-help-text-email-helper"
+          >
+            <span
+              class="pf-c-helper-text__item-text"
+            >This is helper text for a warning input.</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-help-text-address">
+    <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-address">
         <span class="pf-c-form__label-text">Address</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
     </div>
     <div class="pf-c-form__group-control">
@@ -294,16 +304,20 @@ cssPrefix: pf-c-form
         class="pf-c-form-control"
         required
         type="text"
-        id="form-help-text-address"
-        name="form-help-text-address"
+        id="-address"
+        name="-address"
         aria-invalid="true"
-        aria-describedby="form-help-text-address-helper"
+        aria-describedby="-address-helper"
       />
-      <p
-        class="pf-c-form__helper-text pf-m-error"
-        id="form-help-text-address-helper"
-        aria-live="polite"
-      >This is helper text for an invalid input.</p>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div class="pf-c-helper-text__item pf-m-error" id="-address-helper">
+            <span
+              class="pf-c-helper-text__item-text"
+            >This is helper text for an invalid input.</span>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
   <div class="pf-c-form__group">
@@ -319,34 +333,48 @@ cssPrefix: pf-c-form
         name="form-help-text-comment"
         aria-describedby="form-help-text-comment-helper"
       />
-      <p
-        class="pf-c-form__helper-text pf-m-success"
-        id="form-help-text-comment-helper"
-        aria-live="polite"
-      >This is helper text for success input.</p>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div
+            class="pf-c-helper-text__item pf-m-success"
+            id="form-help-text-comment-helper"
+          >
+            <span
+              class="pf-c-helper-text__item-text"
+            >This is helper text for success input.</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-help-text-info">
         <span class="pf-c-form__label-text">Information</span></label>
     </div>
-    <textarea
-      class="pf-c-form-control"
-      id="form-help-text-info"
-      name="form-help-text-info"
-      aria-invalid="true"
-      aria-describedby="form-help-text-info-helper"
-    ></textarea>
-    <p
-      class="pf-c-form__helper-text pf-m-error"
-      id="form-help-text-info-helper"
-      aria-live="polite"
-    >
-      <span class="pf-c-form__helper-text-icon">
-        <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-      </span>
-      This is helper text with an icon.
-    </p>
+    <div class="pf-c-form__group-control">
+      <textarea
+        class="pf-c-form-control"
+        id="form-help-text-info"
+        name="form-help-text-info"
+        aria-invalid="true"
+        aria-describedby="form-help-text-info-helper"
+      ></textarea>
+      <div class="pf-c-form__helper-text" aria-live="polite">
+        <div class="pf-c-helper-text">
+          <div
+            class="pf-c-helper-text__item pf-m-error"
+            id="form-help-text-info-helper"
+          >
+            <span class="pf-c-helper-text__item-icon">
+              <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+            </span>
+            <span
+              class="pf-c-helper-text__item-text"
+            >This is helper text with an icon.</span>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </form>
 
@@ -362,7 +390,7 @@ cssPrefix: pf-c-form
           <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-additional-info-name"
+          aria-describedby="form-additional-infoform-additional-info-name"
           role="button"
           type="button"
           tabindex="0"
@@ -427,12 +455,12 @@ cssPrefix: pf-c-form
       <div class="pf-c-form__group">
         <div class="pf-c-form__group-label"><label
             class="pf-c-form__label"
-            for="form-field-groupform-field-group-field-group-label1"
+            for="form-field-group-field-group-label1"
           >
             <span class="pf-c-form__label-text">Label 1</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 label 1 field"
-            aria-describedby="form-field-groupform-field-group-field-group-label1"
+            aria-describedby="form-field-group-field-group-label1"
             role="button"
             type="button"
             tabindex="0"
@@ -442,8 +470,8 @@ cssPrefix: pf-c-form
           <input
             class="pf-c-form-control"
             type="text"
-            id="form-field-groupform-field-group-field-group-label1"
-            name="form-field-groupform-field-group-field-group-label1"
+            id="form-field-group-field-group-label1"
+            name="form-field-group-field-group-label1"
             required
           />
         </div>
@@ -451,12 +479,12 @@ cssPrefix: pf-c-form
       <div class="pf-c-form__group">
         <div class="pf-c-form__group-label"><label
             class="pf-c-form__label"
-            for="form-field-groupform-field-group-field-group-label2"
+            for="form-field-group-field-group-label2"
           >
             <span class="pf-c-form__label-text">Label 2</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 label 2 field"
-            aria-describedby="form-field-groupform-field-group-field-group-label2"
+            aria-describedby="form-field-group-field-group-label2"
             role="button"
             type="button"
             tabindex="0"
@@ -466,8 +494,8 @@ cssPrefix: pf-c-form
           <input
             class="pf-c-form-control"
             type="text"
-            id="form-field-groupform-field-group-field-group-label2"
-            name="form-field-groupform-field-group-field-group-label2"
+            id="form-field-group-field-group-label2"
+            name="form-field-group-field-group-label2"
             required
           />
         </div>
@@ -686,8 +714,7 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
 | `for` | `<label>` |  Each `<label>` must have a `for` attribute that matches its form field id. **Required** |
 | `id` | `<input type="radio/checkbox/text">`, `<select>`, `<textarea>` |  Each `<form>` field must have an `id` attribute that matches its label's `for` value. **Required** |
 | `required` | `<input>`, `<select>`, `<textarea>` | Required fields must include these attributes. |
-| `id="{helper_text_id}"` | `.pf-c-form__helper-text` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<p class="pf-c-form__helper-text" id="{helper_text_id}">`.  |
-| `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`.  |
+| `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-c-helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`.  |
 | `aria-invalid="true" aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` |  When form validation fails `aria-describedby` is used to communicate the error to the user. These attributes need to be handled with Javascript so that `aria-describedby` only references help text that explains the error, and so that `aria-invalid="true"` is only present when validation fails. For proper styling of errors `aria-invalid="true"` is required. |
 | `aria-hidden="true"` | `.pf-c-form__label-required` |  Hides the required indicator from assistive technologies. |
 | `role="group"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides group role for form groups, form sections, and form field groups. **Required for checkbox groups, form groups, form sections, and form field groups.** |
@@ -721,7 +748,6 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
 | `.pf-c-form__group-control` | `<div>` |  Initiates a form group control section. |
 | `.pf-c-form__actions` | `<div>` | Iniates a row of actions. |
 | `.pf-c-form__helper-text` | `<p>`, `<div>` |  Initiates a form helper text block. |
-| `.pf-c-form__helper-text-icon` | `<span>` |  Initiates a form helper text icon. |
 | `.pf-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
 | `.pf-c-form__field-group` | `<div>` | Initiates a form field group. |
 | `.pf-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle. |
@@ -738,10 +764,6 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
 | `.pf-m-limit-width` | `.pf-c-form` | Limits the overall max-width of the form. Configurable by defining `--pf-c-form--m-limit-width--MaxWidth`. |
 | `.pf-m-info` | `.pf-c-form__group-label` | Modifies the form group label to contain form group label info. |
 | `.pf-m-action` | `.pf-c-form__group` | Modifies form group margin-top. |
-| `.pf-m-success` | `.pf-c-form__helper-text` | Modifies text color of helper text for success state. |
-| `.pf-m-warning` | `.pf-c-form__helper-text` | Modifies text color of helper text for warning state. |
-| `.pf-m-error` | `.pf-c-form__helper-text`| Modifies text color of helper text for error state. |
-| `.pf-m-inactive` | `.pf-c-form__helper-text`| Modifies display of helper text to none. |
 | `.pf-m-disabled` | `.pf-c-form__label` | Modifies form label to show disabled state. |
 | `.pf-m-no-padding-top` | `.pf-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
 | `.pf-m-inline` | `.pf-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |

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

@@ -1,6 +1,7 @@
 ---
 id: Form control
 section: components
+subsection: forms
 cssPrefix: pf-c-form-control
 ---import './FormControl.css'
 

package/docs/components/HelperText/examples/HelperText.md

@@ -12,25 +12,21 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is default helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-indeterminate">
     <span class="pf-c-helper-text__item-text">This is indeterminate helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-warning">
     <span class="pf-c-helper-text__item-text">This is warning helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-success">
     <span class="pf-c-helper-text__item-text">This is success helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-error">
     <span class="pf-c-helper-text__item-text">This is error helper text</span>
@@ -50,7 +46,6 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is default helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-indeterminate">
     <span class="pf-c-helper-text__item-icon">
@@ -59,7 +54,6 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is indeterminate helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-warning">
     <span class="pf-c-helper-text__item-icon">
@@ -68,7 +62,6 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is warning helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-success">
     <span class="pf-c-helper-text__item-icon">
@@ -77,7 +70,6 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is success helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
   <div class="pf-c-helper-text__item pf-m-error">
     <span class="pf-c-helper-text__item-icon">
@@ -121,36 +113,32 @@ cssPrefix: pf-c-helper-text
     <span class="pf-c-helper-text__item-text">This is default helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
-  <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
+  <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
     <span class="pf-c-helper-text__item-icon">
       <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
     </span>
     <span class="pf-c-helper-text__item-text">This is indeterminate helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
-  <div class="pf-c-helper-text__item pf-m-dynamic pf-m-warning">
+  <div class="pf-c-helper-text__item pf-m-warning pf-m-dynamic">
     <span class="pf-c-helper-text__item-icon">
       <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
     </span>
     <span class="pf-c-helper-text__item-text">This is warning helper text</span>
   </div>
 </div>
-
 <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>
     <span class="pf-c-helper-text__item-text">This is success helper text</span>
   </div>
 </div>
-
 <div class="pf-c-helper-text">
-  <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>
@@ -163,30 +151,30 @@ cssPrefix: pf-c-helper-text
 ### Dynamic list
 
 ```html
-<ul class="pf-c-helper-text" role="list">
-  <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
+<div class="pf-c-helper-text">
+  <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>
     <span class="pf-c-helper-text__item-text">Must be at least 14 characters</span>
-  </li>
-  <li class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
+  </div>
+  <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>
     <span
       class="pf-c-helper-text__item-text"
     >Cannot contain any variation of the word "redhat"</span>
-  </li>
-  <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
+  </div>
+  <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>
     <span
       class="pf-c-helper-text__item-text"
     >Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols</span>
-  </li>
-</ul>
+  </div>
+</div>
 
 ```
 
@@ -203,3 +191,4 @@ cssPrefix: pf-c-helper-text
 | `.pf-m-warning` | `.pf-c-helper-text__item` |  Modifies a helper text item for warning state styles. |
 | `.pf-m-success` | `.pf-c-helper-text__item` |  Modifies a helper text item for success state styles. |
 | `.pf-m-error` | `.pf-c-helper-text__item` |  Modifies a helper text item for error state styles. |
+| `.pf-m-hidden` | `.pf-c-helper-text` | Hides helper text. |

package/docs/components/Icon/examples/Icon.md

@@ -84,7 +84,7 @@ cssPrefix: pf-c-icon
   </span>
 </span>
 <span class="pf-c-icon">
-  <span class="pf-c-icon__content pf-m-default">
+  <span class="pf-c-icon__content pf-m-custom">
     <i class="fas fa-bell" aria-hidden="true"></i>
   </span>
 </span>
@@ -252,4 +252,4 @@ Refer to the [icons](/guidelines/icons) page for information about the PatternFl
 | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
 | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
 | `.pf-m-in-progress` | `.pf-c-icon` | Shows the progress element in place of the icon content.  |
-| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-default`  | `.pf-c-icon__content` | Modifies the icon content to use a status color.  |
+| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom`  | `.pf-c-icon__content` | Modifies the icon content to use a status color.  |