@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.31

package/docs/components/EmptyState/examples/EmptyState.md

@@ -9,20 +9,31 @@ cssPrefix: pf-c-empty-state
 ```html
 <div class="pf-c-empty-state">
   <div class="pf-c-empty-state__content">
-    <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
+    <div class="pf-c-empty-state__header">
+      <div class="pf-c-empty-state__icon">
+        <i class="fas fa-cubes" aria-hidden="true"></i>
+      </div>
+      <div class="pf-c-empty-state__title">
+        <h1 class="pf-c-empty-state__title-text">Empty state</h1>
+      </div>
+    </div>
 
-    <h1 class="pf-c-title pf-m-lg">Empty state</h1>
     <div
       class="pf-c-empty-state__body"
-    >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
-    <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
-    <div class="pf-c-empty-state__secondary">
-      <button class="pf-c-button pf-m-link" type="button">Multiple</button>
-      <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
-      <button class="pf-c-button pf-m-link" type="button">Can</button>
-      <button class="pf-c-button pf-m-link" type="button">Go here</button>
-      <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
-      <button class="pf-c-button pf-m-link" type="button">Action area</button>
+    >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
+
+    <div class="pf-c-empty-state__footer">
+      <div class="pf-c-empty-state__actions">
+        <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
+      </div>
+      <div class="pf-c-empty-state__actions">
+        <button class="pf-c-button pf-m-link" type="button">Multiple</button>
+        <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
+        <button class="pf-c-button pf-m-link" type="button">Can</button>
+        <button class="pf-c-button pf-m-link" type="button">Go here</button>
+        <button class="pf-c-button pf-m-link" type="button">In the second</button>
+        <button class="pf-c-button pf-m-link" type="button">Action area</button>
+      </div>
     </div>
   </div>
 </div>
@@ -34,17 +45,31 @@ cssPrefix: pf-c-empty-state
 ```html
 <div class="pf-c-empty-state pf-m-xs">
   <div class="pf-c-empty-state__content">
-    <h1 class="pf-c-title pf-m-md">Empty state</h1>
+    <div class="pf-c-empty-state__header">
+      <div class="pf-c-empty-state__title">
+        <h1 class="pf-c-empty-state__title-text">Empty state</h1>
+      </div>
+    </div>
+
     <div
       class="pf-c-empty-state__body"
-    >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
-    <div class="pf-c-empty-state__secondary">
-      <button class="pf-c-button pf-m-link" type="button">Multiple</button>
-      <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
-      <button class="pf-c-button pf-m-link" type="button">Can</button>
-      <button class="pf-c-button pf-m-link" type="button">Go here</button>
-      <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
-      <button class="pf-c-button pf-m-link" type="button">Action area</button>
+    >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
+
+    <div class="pf-c-empty-state__footer">
+      <div class="pf-c-empty-state__actions">
+        <button class="pf-c-button pf-m-link pf-m-small" type="button">Multiple</button>
+        <button
+          class="pf-c-button pf-m-link pf-m-small"
+          type="button"
+        >Action buttons</button>
+        <button class="pf-c-button pf-m-link pf-m-small" type="button">Can</button>
+        <button class="pf-c-button pf-m-link pf-m-small" type="button">Go here</button>
+        <button class="pf-c-button pf-m-link pf-m-small" type="button">In the</button>
+        <button
+          class="pf-c-button pf-m-link pf-m-small"
+          type="button"
+        >Action area</button>
+      </div>
     </div>
   </div>
 </div>
@@ -56,20 +81,32 @@ cssPrefix: pf-c-empty-state
 ```html
 <div class="pf-c-empty-state pf-m-sm">
   <div class="pf-c-empty-state__content">
-    <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
+    <div class="pf-c-empty-state__header">
+      <div class="pf-c-empty-state__icon">
+        <i class="fas fa-cubes" aria-hidden="true"></i>
+      </div>
+      <div class="pf-c-empty-state__title">
+        <h1 class="pf-c-empty-state__title-text">Empty state</h1>
+      </div>
+    </div>
 
-    <h1 class="pf-c-title pf-m-lg">Empty state</h1>
     <div
       class="pf-c-empty-state__body"
-    >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
-    <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
-    <div class="pf-c-empty-state__secondary">
-      <button class="pf-c-button pf-m-link" type="button">Multiple</button>
-      <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
-      <button class="pf-c-button pf-m-link" type="button">Can</button>
-      <button class="pf-c-button pf-m-link" type="button">Go here</button>
-      <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
-      <button class="pf-c-button pf-m-link" type="button">Action area</button>
+    >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
+
+    <div class="pf-c-empty-state__footer">
+      <div class="pf-c-empty-state__actions">
+        <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
+      </div>
+
+      <div class="pf-c-empty-state__actions">
+        <button class="pf-c-button pf-m-link" type="button">Multiple</button>
+        <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
+        <button class="pf-c-button pf-m-link" type="button">Can</button>
+        <button class="pf-c-button pf-m-link" type="button">Go here</button>
+        <button class="pf-c-button pf-m-link" type="button">In the second</button>
+        <button class="pf-c-button pf-m-link" type="button">Action area</button>
+      </div>
     </div>
   </div>
 </div>
@@ -81,20 +118,31 @@ cssPrefix: pf-c-empty-state
 ```html
 <div class="pf-c-empty-state pf-m-lg">
   <div class="pf-c-empty-state__content">
-    <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
+    <div class="pf-c-empty-state__header">
+      <div class="pf-c-empty-state__icon">
+        <i class="fas fa-cubes" aria-hidden="true"></i>
+      </div>
+      <div class="pf-c-empty-state__title">
+        <h1 class="pf-c-empty-state__title-text">Empty state</h1>
+      </div>
+    </div>
 
-    <h1 class="pf-c-title pf-m-lg">Empty state</h1>
     <div
       class="pf-c-empty-state__body"
-    >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
-    <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
-    <div class="pf-c-empty-state__secondary">
-      <button class="pf-c-button pf-m-link" type="button">Multiple</button>
-      <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
-      <button class="pf-c-button pf-m-link" type="button">Can</button>
-      <button class="pf-c-button pf-m-link" type="button">Go here</button>
-      <button class="pf-c-button pf-m-link" type="button">In the secondary</button>
-      <button class="pf-c-button pf-m-link" type="button">Action area</button>
+    >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
+
+    <div class="pf-c-empty-state__footer">
+      <div class="pf-c-empty-state__actions">
+        <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
+      </div>
+      <div class="pf-c-empty-state__actions">
+        <button class="pf-c-button pf-m-link" type="button">Multiple</button>
+        <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
+        <button class="pf-c-button pf-m-link" type="button">Can</button>
+        <button class="pf-c-button pf-m-link" type="button">Go here</button>
+        <button class="pf-c-button pf-m-link" type="button">In the second</button>
+        <button class="pf-c-button pf-m-link" type="button">Action area</button>
+      </div>
     </div>
   </div>
 </div>
@@ -106,31 +154,30 @@ cssPrefix: pf-c-empty-state
 ```html
 <div class="pf-c-empty-state pf-m-xl">
   <div class="pf-c-empty-state__content">
-    <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
-
-    <h1 class="pf-c-title pf-m-4xl">Empty state</h1>
-    <div
-      class="pf-c-empty-state__body"
-    >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
-    <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
-  </div>
-</div>
-
-```
-
-### With primary element
-
-```html
-<div class="pf-c-empty-state">
-  <div class="pf-c-empty-state__content">
-    <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
+    <div class="pf-c-empty-state__header">
+      <div class="pf-c-empty-state__icon">
+        <i class="fas fa-cubes" aria-hidden="true"></i>
+      </div>
+      <div class="pf-c-empty-state__title">
+        <h1 class="pf-c-empty-state__title-text">Empty state</h1>
+      </div>
+    </div>
 
-    <h1 class="pf-c-title pf-m-lg">Empty State</h1>
     <div
       class="pf-c-empty-state__body"
-    >This represents an the empty state pattern in PatternFly 4. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
-    <div class="pf-c-empty-state__primary">
-      <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
+    >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
+    <div class="pf-c-empty-state__footer">
+      <div class="pf-c-empty-state__actions">
+        <button class="pf-c-button pf-m-primary" type="button">Primary action</button>
+      </div>
+      <div class="pf-c-empty-state__actions">
+        <button class="pf-c-button pf-m-link" type="button">Multiple</button>
+        <button class="pf-c-button pf-m-link" type="button">Action buttons</button>
+        <button class="pf-c-button pf-m-link" type="button">Can</button>
+        <button class="pf-c-button pf-m-link" type="button">Go here</button>
+        <button class="pf-c-button pf-m-link" type="button">In the second</button>
+        <button class="pf-c-button pf-m-link" type="button">Action area</button>
+      </div>
     </div>
   </div>
 </div>
@@ -141,24 +188,25 @@ cssPrefix: pf-c-empty-state
 
 ### Accessibility
 
-| Attribute            | Applied to                | Outcome                                             |
-| -------------------- | ------------------------- | --------------------------------------------------- |
-| `aria-hidden="true"` | `.pf-c-empty-state__icon` | Hides icon for assistive technologies. **Required** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-hidden="true"` | `.pf-c-empty-state__icon` |  Hides icon for assistive technologies. **Required** |
 
 ### Usage
 
-| Class                          | Applied to                           | Outcome                                                                                                                                                                                                                                                                                                                                                      |
-| ------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-empty-state`            | `<div>`                              | Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required**                                                                                                                                                                                                             |
-| `.pf-c-empty-state__content`   | `<div>`                              | Creates the content container. **Required**                                                                                                                                                                                                                                                                                                                  |
-| `.pf-c-empty-state__icon`      | `<i>`, `<div>`                       | Creates the empty state icon or icon container when used as a `<div>`.                                                                                                                                                                                                                                                                                       |
-| `.pf-c-title`                  | `<h1>, <h2>, <h3>, <h4>, <h5>, <h6>` | Creates the empty state title. **Required**                                                                                                                                                                                                                                                                                                                  |
-| `.pf-c-empty-state__body`      | `<div>`                              | Creates the empty state body content. You can have more than one `.pf-c-empty-state__body` elements.                                                                                                                                                                                                                                                         |
-| `.pf-c-button.pf-m-primary`    | `<button>`                           | Creates the primary action button.                                                                                                                                                                                                                                                                                                                           |
-| `.pf-c-empty-state__primary`   | `<div>`                              | Container for primary actions. Can be used in lieu of using `.pf-c-button.pf-m-primary`.                                                                                                                                                                                                                                                                     |
-| `.pf-c-empty-state__secondary` | `<div>`                              | Container secondary actions.                                                                                                                                                                                                                                                                                                                                 |
-| `.pf-m-xs`                     | `.pf-c-empty-state`                  | Modifies the empty state for a extra small variation and max-width.                                                                                                                                                                                                                                                                                          |
-| `.pf-m-sm`                     | `.pf-c-empty-state`                  | Modifies the empty state for a small max-width.                                                                                                                                                                                                                                                                                                              |
-| `.pf-m-lg`                     | `.pf-c-empty-state`                  | Modifies the empty state for a large max-width.                                                                                                                                                                                                                                                                                                              |
-| `.pf-m-xl`                     | `.pf-c-empty-state`                  | Modifies the empty state for an x-large variation and max-width.                                                                                                                                                                                                                                                                                             |
-| `.pf-m-full-height`            | `.pf-c-empty-state`                  | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-empty-state` | `<div>` |  Initiates an empty state component. The empty state centers its content (`.pf-c-empty-state__content`) vertically and horizontally. **Required** |
+| `.pf-c-empty-state__content` | `<div>` |  Creates the content container. **Required** |
+| `.pf-c-empty-state__header` | `<div>` |  Creates the header container. **Required** |
+| `.pf-c-empty-state__title` | `<div>` |  Creates the empty state title container. **Required** |
+| `.pf-c-empty-state__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` |  Creates the empty state title text container. |
+| `.pf-c-empty-state__icon` | `<div>` |  Creates the empty state icon container. |
+| `.pf-c-empty-state__body` | `<div>` |  Creates the empty state body content. There can be more than one `.pf-c-empty-state__body` elements. |
+| `.pf-c-empty-state__footer` | `<div>` |  Creates the footer container. **Required** |
+| `.pf-c-empty-state__actions` | `<div>` |  Container for actions. **Required** |
+| `.pf-m-xs` | `.pf-c-empty-state` | Modifies the empty state for an extra small variation and max-width. |
+| `.pf-m-sm` | `.pf-c-empty-state` | Modifies the empty state for a small max-width. |
+| `.pf-m-lg` | `.pf-c-empty-state` | Modifies the empty state for a large max-width. |
+| `.pf-m-xl` | `.pf-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
+| `.pf-m-full-height` | `.pf-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-c-empty-state` have an implicit or explicit `height` defined.  |

package/docs/components/ExpandableSection/examples/ExpandableSection.md

@@ -185,29 +185,29 @@ cssPrefix: pf-c-expandable-section
 
 ### Accessibility
 
-| Attribute                                 | Applied to                                                                 | Outcome                                                                                                        |
-| ----------------------------------------- | -------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `aria-expanded="true"`                    | `.pf-c-expandable-section__toggle`                                         | Indicates that the expandable section content is visible. **Required**                                         |
-| `aria-expanded="false"`                   | `.pf-c-expandable-section__toggle`                                         | Indicates the the expandable section content is hidden. **Required**                                           |
-| `hidden`                                  | `.pf-c-expandable-section__content`                                        | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` **Required** |
-| `aria-hidden="true"`                      | `.pf-c-expandable-section__toggle-icon`                                    | Hides the icon from screen readers. **Required**                                                               |
-| `aria-controls="[id of content element]"` | `.pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__toggle`  | Identifies the element controlled by the toggle button. **Required**                                           |
-| `id`                                      | `.pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-c-expandable-section__toggle`. **Required**     |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-expanded="true"` | `.pf-c-expandable-section__toggle` | Indicates that the expandable section content is visible. **Required** |
+| `aria-expanded="false"` | `.pf-c-expandable-section__toggle` | Indicates the the expandable section content is hidden. **Required** |
+| `hidden` | `.pf-c-expandable-section__content` | Indicates that the expandable section content element is hidden. Use with `aria-expanded="false"` **Required** |
+| `aria-hidden="true"` | `.pf-c-expandable-section__toggle-icon` | Hides the icon from screen readers. **Required** |
+| `aria-controls="[id of content element]"` | `.pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__toggle` | Identifies the element controlled by the toggle button. **Required** |
+| `id` | `.pf-c-expandable-section.pf-m-detached .pf-c-expandable-section__content` | Gives the content an `id` for use with `aria-controls` on `.pf-c-expandable-section__toggle`. **Required** |
 
 ### Usage
 
-| Class                                                       | Applied to                               | Outcome                                                                                                                                          |
-| ----------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-expandable-section`                                  | `<div>`                                  | Initiates the expandable section component. **Required**                                                                                         |
-| `.pf-c-expandable-section__toggle`                          | `<button>`                               | Initiates the expandable section toggle. **Required**                                                                                            |
-| `.pf-c-expandable-section__toggle-text`                     | `<span>`                                 | Initiates the expandable toggle text. **Required**                                                                                               |
-| `.pf-c-expandable-section__toggle-icon`                     | `<span>`                                 | Initiates the expandable toggle icon. **Required**                                                                                               |
-| `.pf-c-expandable-section__content`                         | `<div>`                                  | Initiates the expandable section content. **Required**                                                                                           |
-| `.pf-m-expanded`                                            | `.pf-c-expandable-section`               | Modifies the component for the expanded state.                                                                                                   |
-| `.pf-m-display-lg`                                          | `.pf-c-expandable-section`               | Modifies the styling of the component to have large display styling.                                                                             |
-| `.pf-m-detached`                                            | `.pf-c-expandable-section`               | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
-| `.pf-m-indented`                                            | `.pf-c-expandable-section`               | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy.           |
-| `.pf-m-truncate`                                            | `.pf-c-expandable-section`               | Indicates that the expandable section content is truncated by default, and not truncated when expanded.                                          |
-| `.pf-m-active`                                              | `.pf-c-expandable-section__toggle`       | Forces display of the active state of the toggle.                                                                                                |
-| `.pf-m-expand-top`                                          | `.pf-c-expandable-section__toggle-icon`  | Modifies the toggle icon to point up when expanded.                                                                                              |
-| `--pf-c-expandable-section--m-truncate__content--LineClamp` | `.pf-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating.                                                                                          |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-expandable-section` | `<div>` | Initiates the expandable section component. **Required** |
+| `.pf-c-expandable-section__toggle` | `<button>` | Initiates the expandable section toggle. **Required** |
+| `.pf-c-expandable-section__toggle-text` | `<span>` | Initiates the expandable toggle text. **Required** |
+| `.pf-c-expandable-section__toggle-icon` | `<span>` | Initiates the expandable toggle icon. **Required** |
+| `.pf-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
+| `.pf-m-expanded` | `.pf-c-expandable-section` | Modifies the component for the expanded state. |
+| `.pf-m-display-lg` | `.pf-c-expandable-section` | Modifies the styling of the component to have large display styling. |
+| `.pf-m-detached` | `.pf-c-expandable-section` | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
+| `.pf-m-indented` | `.pf-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
+| `.pf-m-truncate` | `.pf-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
+| `.pf-m-active` | `.pf-c-expandable-section__toggle` | Forces display of the active state of the toggle. |
+| `.pf-m-expand-top` | `.pf-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
+| `--pf-c-expandable-section--m-truncate__content--LineClamp` | `.pf-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |

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

@@ -255,11 +255,11 @@ cssPrefix: pf-c-file-upload
 
 ### Usage
 
-| Class                                     | Applied to          | Outcome                                                                                 |
-| ----------------------------------------- | ------------------- | --------------------------------------------------------------------------------------- |
-| `.pf-c-file-upload`                       | `<div>`, `<form>`   | Initiates the file upload component. **Required**.                                      |
-| `.pf-c-file-upload__file-select`          | `<div>`             | Initiates the file select element. **Required**                                         |
-| `.pf-c-file-upload__file-details`         | `<div>`             | Initiates the file details element. **Required**                                        |
-| `.pf-c-file-upload__file-details-spinner` | `<div>`             | Initiates the file details element. **Required**                                        |
-| `.pf-m-drag-hover`                        | `.pf-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
-| `.pf-m-loading`                           | `.pf-c-file-upload` | Modifies file upload for the loading state.                                             |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-file-upload` | `<div>`, `<form>` | Initiates the file upload component. **Required**. |
+| `.pf-c-file-upload__file-select` | `<div>` | Initiates the file select element. **Required** |
+| `.pf-c-file-upload__file-details` | `<div>` | Initiates the file details element. **Required** |
+| `.pf-c-file-upload__file-details-spinner` | `<div>` | Initiates the file details element. **Required** |
+| `.pf-m-drag-hover` | `.pf-c-file-upload` | Modifies file upload for when an element is dragged or dropped inside of its container. |
+| `.pf-m-loading` | `.pf-c-file-upload` | Modifies file upload for the loading state. |

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

@@ -681,70 +681,70 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
 
 ### Accessibility
 
-| Attribute                                                            | Applied to                                                            | Outcome                                                                                                                                                                                                                                                                                                                                                                |
-| -------------------------------------------------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `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-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.**                                                                                                                                                                                                        |
-| `role="radiogroup"`                                                  | `.pf-c-form__group`                                                   | Provides group role for radio input groups. **Required for radio input groups**                                                                                                                                                                                                                                                                                        |
-| `role="button"`                                                      | `.pf-c-form__group-label-help`                                        | Provides button role for group label help spans. **Required for group label help.**                                                                                                                                                                                                                                                                                    |
-| `id`                                                                 | `.pf-c-form__group-label`                                             | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group.                                                                                                                                                                                                                                                                        |
-| `id`                                                                 | `.pf-c-form__field-group-title-text`                                  | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button.                                                                                                                                                                                                                                                             |
-| `id`                                                                 | `.pf-c-form__field-group-toggle-button > button`                      | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button.                                                                                                                                                                                                                                                             |
-| `aria-labelledby="{label id}"`                                       | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides an accessible label for form groups, form sections, and form field groups. **Required for form groups, form sections, and form field groups that contain labels.**                                                                                                                                                                                            |
-| `aria-label`                                                         | `.pf-c-form__field-group-toggle-button > button`                      | Provides an accessible label for the field group toggle button.                                                                                                                                                                                                                                                                                                        |
-| `aria-labelledby="{title id} {toggle button id}"`                    | `.pf-c-form__field-group-toggle-button > button`                      | Provides an accessible label for the field group toggle button.                                                                                                                                                                                                                                                                                                        |
-| `aria-expanded="true/false"`                                         | `.pf-c-form__field-group-toggle-button > button`                      | Indicates whether the field group body is visible or hidden.                                                                                                                                                                                                                                                                                                           |
-| `id="{form_label_id}"`                                               | `.pf-c-form__label`                                                   | Generates an `id` for use in the `aria-describedby` attribute in a `.pf-c-form__group-label-help`.                                                                                                                                                                                                                                                                     |
-| `aria-label="{descriptive text}" aria-describedby="{form_label_id}"` | `.pf-c-form__group-label-help`                                        | Provides an accessible label on a button that provides additional information for a form element.                                                                                                                                                                                                                                                                      |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `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-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.** |
+| `role="radiogroup"` | `.pf-c-form__group` | Provides group role for radio input groups. **Required for radio input groups** |
+| `role="button"` | `.pf-c-form__group-label-help` | Provides button role for group label help spans. **Required for group label help.** |
+| `id` | `.pf-c-form__group-label` | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group. |
+| `id` | `.pf-c-form__field-group-title-text` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
+| `id` | `.pf-c-form__field-group-toggle-button > button` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
+| `aria-labelledby="{label id}"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides an accessible label for form groups, form sections, and form field groups. **Required for form groups, form sections, and form field groups that contain labels.** |
+| `aria-label` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
+| `aria-labelledby="{title id} {toggle button id}"` | `.pf-c-form__field-group-toggle-button > button` | Provides an accessible label for the field group toggle button. |
+| `aria-expanded="true/false"` | `.pf-c-form__field-group-toggle-button > button` | Indicates whether the field group body is visible or hidden. |
+| `id="{form_label_id}"` | `.pf-c-form__label` |  Generates an `id` for use in the `aria-describedby` attribute in a `.pf-c-form__group-label-help`. |
+| `aria-label="{descriptive text}" aria-describedby="{form_label_id}"` | `.pf-c-form__group-label-help` |  Provides an accessible label on a button that provides additional information for a form element. |
 
 ### Usage
 
-| Class                                             | Applied to                                         | Outcome                                                                                                    |
-| ------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| `.pf-c-form`                                      | `<form>`                                           | Initiates a standard form. **Required**                                                                    |
-| `.pf-c-form__section`                             | `<div>, <section>`                                 | Initiates a form section.                                                                                  |
-| `.pf-c-form__section-title`                       | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a form section title.                                                                            |
-| `.pf-c-form__group`                               | `<div>`                                            | Initiates a form group.                                                                                    |
-| `.pf-c-form__group-label`                         | `<div>`                                            | Initiates a form group label.                                                                              |
-| `.pf-c-form__label`                               | `<label>`, `<span>`                                | Initiates a form label. **Required**                                                                       |
-| `.pf-c-form__label-text`                          | `<span>`                                           | Initiates a form label text. **Required**                                                                  |
-| `.pf-c-form__label-required`                      | `<span>`                                           | Initiates a form label required indicator.                                                                 |
-| `.pf-c-form__group-label-main`                    | `<div>`                                            | Initiates a form group label main container.                                                               |
-| `.pf-c-form__group-label-info`                    | `<div>`                                            | Initiates a form group info label.                                                                         |
-| `.pf-c-form__group-label-help`                    | `<button>`, `<span>`                               | Initiates a field level help span/button.                                                                  |
-| `.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.                                                                     |
-| `.pf-c-form__field-group-toggle-button`           | `<div>`                                            | Initiates the form field group toggle button.                                                              |
-| `.pf-c-form__field-group-toggle-icon`             | `<span>`                                           | Initiates the form field group toggle icon.                                                                |
-| `.pf-c-form__field-group-header`                  | `<div>`                                            | Initiates the form field group header.                                                                     |
-| `.pf-c-form__field-group-header-main`             | `<div>`                                            | Initiates the form field group main section.                                                               |
-| `.pf-c-form__field-group-header-title`            | `<div>`                                            | Initiates the form field group title.                                                                      |
-| `.pf-c-form__field-group-header-title-text`       | `<div>`                                            | Initiates the form field group title text.                                                                 |
-| `.pf-c-form__field-group-header-description`      | `<div>`                                            | Initiates the form field group description.                                                                |
-| `.pf-c-form__field-group-header-actions`          | `<div>`                                            | Initiates the form field group actions container.                                                          |
-| `.pf-c-form__field-group-body`                    | `<div>`                                            | Initiates the form field group body.                                                                       |
-| `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-c-form`                                       | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`.      |
-| `.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).            |
-| `.pf-m-stack`                                     | `.pf-c-form__group-control`                        | Modifies form group children to be stacked with space between children.                                    |
-| `.pf-m-expanded`                                  | `.pf-c-form__field-group`                          | Modifies an expandable field group for the expanded state.                                                 |
-| `--pf-c-form--m-limit-width--MaxWidth`            | `.pf-c-form.pf-m-limit-width`                      | Sets a custom `max-width` for a width limited form.                                                        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-form` | `<form>` |  Initiates a standard form. **Required** |
+| `.pf-c-form__section` | `<div>, <section>` |  Initiates a form section. |
+| `.pf-c-form__section-title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` |  Initiates a form section title. |
+| `.pf-c-form__group` | `<div>` |  Initiates a form group. |
+| `.pf-c-form__group-label` | `<div>` |  Initiates a form group label. |
+| `.pf-c-form__label` | `<label>`, `<span>` |  Initiates a form label. **Required** |
+| `.pf-c-form__label-text` | `<span>` |  Initiates a form label text. **Required** |
+| `.pf-c-form__label-required` | `<span>` |  Initiates a form label required indicator. |
+| `.pf-c-form__group-label-main` | `<div>` |  Initiates a form group label main container. |
+| `.pf-c-form__group-label-info` | `<div>` |  Initiates a form group info label. |
+| `.pf-c-form__group-label-help` | `<button>`, `<span>` | Initiates a field level help span/button. |
+| `.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. |
+| `.pf-c-form__field-group-toggle-button` | `<div>` | Initiates the form field group toggle button. |
+| `.pf-c-form__field-group-toggle-icon` | `<span>` | Initiates the form field group toggle icon. |
+| `.pf-c-form__field-group-header` | `<div>` | Initiates the form field group header. |
+| `.pf-c-form__field-group-header-main` | `<div>` | Initiates the form field group main section. |
+| `.pf-c-form__field-group-header-title` | `<div>` | Initiates the form field group title. |
+| `.pf-c-form__field-group-header-title-text` | `<div>` | Initiates the form field group title text. |
+| `.pf-c-form__field-group-header-description` | `<div>` | Initiates the form field group description. |
+| `.pf-c-form__field-group-header-actions` | `<div>` | Initiates the form field group actions container. |
+| `.pf-c-form__field-group-body` | `<div>` | Initiates the form field group body. |
+| `.pf-m-horizontal{-on-[xs, sm, md, lg, xl, 2xl]}` | `.pf-c-form` | Modifies the form for a horizontal layout at an optional breakpoint. The default breakpoint is `-md`. |
+| `.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). |
+| `.pf-m-stack` | `.pf-c-form__group-control` | Modifies form group children to be stacked with space between children. |
+| `.pf-m-expanded` | `.pf-c-form__field-group` | Modifies an expandable field group for the expanded state. |
+| `--pf-c-form--m-limit-width--MaxWidth` | `.pf-c-form.pf-m-limit-width` | Sets a custom `max-width` for a width limited form. |