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

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. |