@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.21

package/docs/components/ChipGroup/examples/ChipGroup.md

@@ -568,335 +568,6 @@ cssPrefix: pf-c-chip-group
 
 ```
 
-### Legacy chip group examples without main element
-
-```html
-<div class="pf-c-chip-group">
-  <ul class="pf-c-chip-group__list" role="list" aria-label="Chip group list">
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-simplechip_one_select_collapsed"
-        >Chip one</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-simpleremove_chip_one_select_collapsed legacy-simplechip_one_select_collapsed"
-          aria-label="Remove"
-          id="legacy-simpleremove_chip_one_select_collapsed"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-simplechip_two_select_collapsed"
-        >Chip two</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-simpleremove_chip_two_select_collapsed legacy-simplechip_two_select_collapsed"
-          aria-label="Remove"
-          id="legacy-simpleremove_chip_two_select_collapsed"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-simplechip_three_select_collapsed"
-        >Chip three</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-simpleremove_chip_three_select_collapsed legacy-simplechip_three_select_collapsed"
-          aria-label="Remove"
-          id="legacy-simpleremove_chip_three_select_collapsed"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-  </ul>
-</div>
-
-<br />
-<br />
-
-<div class="pf-c-chip-group">
-  <ul class="pf-c-chip-group__list" role="list" aria-label="Chip group list">
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-simple-removablechip_one_toolbar"
-        >Chip one</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-simple-removableremove_chip_one_toolbar legacy-simple-removablechip_one_toolbar"
-          aria-label="Remove"
-          id="legacy-simple-removableremove_chip_one_toolbar"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-simple-removablechip_two_toolbar"
-        >Chip two</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-simple-removableremove_chip_two_toolbar legacy-simple-removablechip_two_toolbar"
-          aria-label="Remove"
-          id="legacy-simple-removableremove_chip_two_toolbar"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-simple-removablechip_three_toolbar"
-        >Chip three</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-simple-removableremove_chip_three_toolbar legacy-simple-removablechip_three_toolbar"
-          aria-label="Remove"
-          id="legacy-simple-removableremove_chip_three_toolbar"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-simple-removablechip_four_toolbar"
-        >Chip four</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-simple-removableremove_chip_four_toolbar legacy-simple-removablechip_four_toolbar"
-          aria-label="Remove"
-          id="legacy-simple-removableremove_chip_four_toolbar"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-simple-removablechip_five_toolbar"
-        >Chip five</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-simple-removableremove_chip_five_toolbar legacy-simple-removablechip_five_toolbar"
-          aria-label="Remove"
-          id="legacy-simple-removableremove_chip_five_toolbar"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-simple-removablechip_six_toolbar"
-        >Chip six</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-simple-removableremove_chip_six_toolbar legacy-simple-removablechip_six_toolbar"
-          aria-label="Remove"
-          id="legacy-simple-removableremove_chip_six_toolbar"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-  </ul>
-  <div class="pf-c-chip-group__close">
-    <button
-      class="pf-c-button pf-m-plain"
-      type="button"
-      aria-labelledby="legacy-simple-removable-button legacy-simple-removable-label"
-      aria-label="Close chip group"
-      id="legacy-simple-removable-button"
-    >
-      <i class="fas fa-times-circle" aria-hidden="true"></i>
-    </button>
-  </div>
-</div>
-
-<br />
-<br />
-
-<div class="pf-c-chip-group pf-m-category">
-  <span
-    class="pf-c-chip-group__label"
-    aria-hidden="true"
-    id="legacy-category-label"
-  >Category one</span>
-  <ul
-    class="pf-c-chip-group__list"
-    role="list"
-    aria-labelledby="legacy-category-label"
-  >
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-categorychip_one_toolbar_collapsed"
-        >Chip one</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-categoryremove_chip_one_toolbar_collapsed legacy-categorychip_one_toolbar_collapsed"
-          aria-label="Remove"
-          id="legacy-categoryremove_chip_one_toolbar_collapsed"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-categorychip_two_toolbar_collapsed"
-        >Chip two</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-categoryremove_chip_two_toolbar_collapsed legacy-categorychip_two_toolbar_collapsed"
-          aria-label="Remove"
-          id="legacy-categoryremove_chip_two_toolbar_collapsed"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-categorychip_three_toolbar_collapsed"
-        >Chip three</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-categoryremove_chip_three_toolbar_collapsed legacy-categorychip_three_toolbar_collapsed"
-          aria-label="Remove"
-          id="legacy-categoryremove_chip_three_toolbar_collapsed"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-  </ul>
-</div>
-
-<br />
-<br />
-
-<div class="pf-c-chip-group pf-m-category">
-  <span
-    class="pf-c-chip-group__label"
-    aria-hidden="true"
-    id="legacy-category-removable-label"
-  >Category one</span>
-  <ul
-    class="pf-c-chip-group__list"
-    role="list"
-    aria-labelledby="legacy-category-removable-label"
-  >
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-category-removablechip_one_toolbar_collapsed"
-        >Chip one</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-category-removableremove_chip_one_toolbar_collapsed legacy-category-removablechip_one_toolbar_collapsed"
-          aria-label="Remove"
-          id="legacy-category-removableremove_chip_one_toolbar_collapsed"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-category-removablechip_two_toolbar_collapsed"
-        >Chip two</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-category-removableremove_chip_two_toolbar_collapsed legacy-category-removablechip_two_toolbar_collapsed"
-          aria-label="Remove"
-          id="legacy-category-removableremove_chip_two_toolbar_collapsed"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-    <li class="pf-c-chip-group__list-item">
-      <div class="pf-c-chip">
-        <span
-          class="pf-c-chip__text"
-          id="legacy-category-removablechip_three_toolbar_collapsed"
-        >Chip three</span>
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-labelledby="legacy-category-removableremove_chip_three_toolbar_collapsed legacy-category-removablechip_three_toolbar_collapsed"
-          aria-label="Remove"
-          id="legacy-category-removableremove_chip_three_toolbar_collapsed"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-    </li>
-  </ul>
-  <div class="pf-c-chip-group__close">
-    <button
-      class="pf-c-button pf-m-plain"
-      type="button"
-      aria-labelledby="legacy-category-removable-button legacy-category-removable-label"
-      aria-label="Close chip group"
-      id="legacy-category-removable-button"
-    >
-      <i class="fas fa-times-circle" aria-hidden="true"></i>
-    </button>
-  </div>
-</div>
-
-```
-
 ### Overview
 
 A chip group is constrained to the width of its container and will wrap when it exceeds that width. An overflow value can be set and when the number of chips exceeds that value, additional chips will be hidden by default. The default overflow value will be set to 3 chips but this can be adjusted per application needs. The toggle button after the last chip allows the group to be expanded (or collapsed).
@@ -909,21 +580,21 @@ The chip group requires the [chip component](/components/chip).
 
 **All single chip accessibility and usage requirements apply.**
 
-| Attributes for closable chip group button                                                                | Applied to                         | Outcome                                                                                                                                                                                                 |
-| -------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `role="list"`                                                                                            | `.pf-c-chip-group__list`           | Indicates that the chip group list is a list element. This role is redundant since `.pf-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
-| `aria-label="[button label text]"`                                                                       | `.pf-c-chip-group__close > button` | Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. **Required**                                            |
-| `aria-labelledby="[id value of .pf-c-chip-group__close > button] [id value of .pf-c-chip-group__label]"` | `.pf-c-chip-group__close > button` | Provides an accessible name for the button. **Required**                                                                                                                                                |
+| Attributes for closable chip group button | Applied to | Outcome |
+| -- | -- | -- |
+| `role="list"` | `.pf-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list propertly. **Required** |
+| `aria-label="[button label text]"` | `.pf-c-chip-group__close > button` |  Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
+| `aria-labelledby="[id value of .pf-c-chip-group__close > button] [id value of .pf-c-chip-group__label]"` | `.pf-c-chip-group__close > button` | Provides an accessible name for the button. **Required** |
 
 ### Usage
 
-| Class                         | Applied to                         | Outcome                                                                             |
-| ----------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------- |
-| `.pf-c-chip-group`            | `<div>`                            | Initiates the chip group component. **Required.**                                   |
-| `.pf-c-chip-group__list`      | `<ul>`                             | Initiates the container for a list of chips. **Required.**                          |
-| `.pf-c-chip-group__list-item` | `<li>`                             | Initiates the list item inside of the chip group. **Required.**                     |
-| `.pf-c-chip-group__label`     | `<span>`                           | Initiates the label to be used in the chip group.                                   |
-| `.pf-c-chip-group__close`     | `<div>`                            | Initiates the container used for the button to remove the chip group.               |
-| `.pf-c-chip-group__main`      | `<div>`                            | Initiates the container for the label and list elements so that they wrap together. |
-| `.pf-c-button`                | `.pf-c-chip-group__close <button>` | Initiates the button used to remove the chip group.                                 |
-| `.pf-m-category`              | `.pf-c-chip-group`                 | Modifies the chip group to support category styling.                                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-chip-group` | `<div>` | Initiates the chip group component. **Required.** |
+| `.pf-c-chip-group__list` | `<ul>` | Initiates the container for a list of chips. **Required.** |
+| `.pf-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.** |
+| `.pf-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group. |
+| `.pf-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group. |
+| `.pf-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. **Required** |
+| `.pf-c-button` | `.pf-c-chip-group__close <button>` | Initiates the button used to remove the chip group. |
+| `.pf-m-category` | `.pf-c-chip-group` | Modifies the chip group to support category styling. |

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -350,28 +350,28 @@ cssPrefix: pf-c-clipboard-copy
 
 ### Accessibility
 
-| Attribute                                                     | Applied to                                 | Outcome                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| ------------------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-label="Copy to clipboard"`, `aria-label="Show content"` | `.pf-c-button.pf-m-control`                | Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.**                                                                                                                                                                                                                                                                                                                                     |
-| `aria-label="[input label text]"`                             | `.pf-c-form-control`                       | Provides an accessible label for the input. Provide a label that describes the contents in the input. **Required**                                                                                                                                                                                                                                                                                                                                                              |
-| `aria-hidden="true"`                                          | `<i>`                                      | Hides the icon from assistive technologies.                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| `aria-controls="[id of expandable element]"`                  | `.pf-c-button.pf-m-control`                | Identifies the element controlled by the toggle button. **Required**                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `hidden`                                                      | `.pf-c-clipboard-copy__expandable-content` | Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies.                                                                                                                                                                                                                                                                                                                                                |
-| `aria-labelledby="[id of button] [id of input label]"`        | `.pf-c-button.pf-m-control`                | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="Copy to clipboard"`, `aria-label="Show content"` | `.pf-c-button.pf-m-control` | Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
+| `aria-label="[input label text]"` | `.pf-c-form-control` | Provides an accessible label for the input. Provide a label that describes the contents in the input. **Required** |
+| `aria-hidden="true"` | `<i>` |  Hides the icon from assistive technologies. |
+| `aria-controls="[id of expandable element]"` | `.pf-c-button.pf-m-control` | Identifies the element controlled by the toggle button. **Required** |
+| `hidden` | `.pf-c-clipboard-copy__expandable-content` | Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `aria-labelledby="[id of button] [id of input label]"` | `.pf-c-button.pf-m-control` | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. |
 
 ### Usage
 
-| Class                                      | Applied to                         | Outcome                                                                           |
-| ------------------------------------------ | ---------------------------------- | --------------------------------------------------------------------------------- |
-| `.pf-c-clipboard-copy`                     | `<div>`                            | Initiates a clipboard copy component. **Required**                                |
-| `.pf-c-clipboard-copy__group`              | `<div>`                            | Initiates a wrapper for the clipboard copy group. **Required**                    |
-| `.pf-c-clipboard-copy__toggle-icon`        | `<div>`                            | Initiates a toggle button icon.                                                   |
-| `.pf-c-clipboard-copy__expandable-content` | `<div>`                            | Initiates an expandable element.                                                  |
-| `.pf-c-clipboard-copy__text`               | `<span>`                           | Initiates the inline copy clipboard text element. **Required**                    |
-| `.pf-c-clipboard-copy__actions`            | `<span>`                           | Initiates the inline copy clipboard actions element. **Required**                 |
-| `.pf-c-clipboard-copy__actions-item`       | `<span>`                           | Initiates the inline copy clipboard actions item element. **Required**            |
-| `.pf-m-inline`                             | `.pf-c-clipboard-copy`             | Modifies the clipboard copy component for inline styles.                          |
-| `.pf-m-block`                              | `.pf-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting.            |
-| `.pf-m-expanded`                           | `.pf-c-clipboard-copy`             | Modifies the clipboard copy component for the expanded state.                     |
-| `.pf-m-expanded`                           | `.pf-c-button.pf-m-control`        | Modifies the control toggle button for the expanded state.                        |
-| `.pf-m-code`                               | `code.pf-c-clipboard-copy__text`   | Modifies the inline copy clipboard text styles for use with the `<code>` element. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-clipboard-copy` | `<div>` | Initiates a clipboard copy component. **Required** |
+| `.pf-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. **Required** |
+| `.pf-c-clipboard-copy__toggle-icon` | `<div>` | Initiates a toggle button icon. |
+| `.pf-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element. |
+| `.pf-c-clipboard-copy__text` | `<span>` | Initiates the inline copy clipboard text element. **Required** |
+| `.pf-c-clipboard-copy__actions` | `<span>` | Initiates the inline copy clipboard actions element. **Required** |
+| `.pf-c-clipboard-copy__actions-item` | `<span>` | Initiates the inline copy clipboard actions item element. **Required** |
+| `.pf-m-inline` | `.pf-c-clipboard-copy` | Modifies the clipboard copy component for inline styles. |
+| `.pf-m-block` | `.pf-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
+| `.pf-m-expanded` | `.pf-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
+| `.pf-m-expanded` | `.pf-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
+| `.pf-m-code` | `code.pf-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |

package/docs/components/CodeBlock/examples/CodeBlock.md

@@ -169,12 +169,12 @@ name: azure-sample-repo<div
 
 ### Usage
 
-| Class                            | Applied to | Outcome                                                 |
-| -------------------------------- | ---------- | ------------------------------------------------------- |
-| `.pf-c-code-block`               | `<div>`    | Initiates the code block component. **Required**        |
-| `.pf-c-chip-group__header`       | `<div>`    | Initiates the code block header.                        |
-| `.pf-c-chip-group__actions`      | `<div>`    | Initiates the code block actions.                       |
-| `.pf-c-chip-group__actions-item` | `<div>`    | Initiates a code block action item.                     |
-| `.pf-c-chip-group__content`      | `<div>`    | Initiates the code block content. **Required**          |
-| `.pf-c-chip-group__pre`          | `<pre>`    | Initiates the code block `<pre>` element. **Required**  |
-| `.pf-c-chip-group__code`         | `<code>`   | Initiates the code block `<code>` element. **Required** |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-code-block` | `<div>` | Initiates the code block component. **Required** |
+| `.pf-c-code-block__header` | `<div>` | Initiates the code block header. |
+| `.pf-c-code-block__actions` | `<div>` | Initiates the code block actions. |
+| `.pf-c-code-block__actions-item` | `<div>` | Initiates a code block action item. |
+| `.pf-c-code-block__content` | `<div>` | Initiates the code block content. **Required** |
+| `.pf-c-code-block__pre` | `<pre>` | Initiates the code block `<pre>` element. **Required** |
+| `.pf-c-code-block__code` | `<code>` | Initiates the code block `<code>` element. **Required** |

package/docs/components/CodeEditor/examples/CodeEditor.md

@@ -107,24 +107,37 @@ cssPrefix: pf-c-code-editor
     <div class="pf-c-code-editor__header-main"></div>
     <div class="pf-c-code-editor__tab">
       <span class="pf-c-code-editor__tab-icon">
-        <i class="fas fa-code"></i>
+        <i class="fas fa-code" aria-hidden="true"></i>
       </span>
       <span class="pf-c-code-editor__tab-text">YAML</span>
     </div>
   </div>
   <div class="pf-c-code-editor__main">
-    <div class="pf-c-empty-state pf-m-lg">
+    <div class="pf-c-empty-state">
       <div class="pf-c-empty-state__content">
-        <div class="pf-c-empty-state__icon">
-          <i class="fas fa-code"></i>
+        <div class="pf-c-empty-state__header">
+          <div class="pf-c-empty-state__icon">
+            <i class="fas fa- fa-code" aria-hidden="true"></i>
+          </div>
+          <div class="pf-c-empty-state__title">
+            <h1 class="pf-c-empty-state__title-text">Start editing</h1>
+          </div>
         </div>
-        <h1 class="pf-c-title pf-m-lg">Start editing</h1>
+
         <div
           class="pf-c-empty-state__body"
         >Drag a file here or browse to upload.</div>
-        <button class="pf-c-button pf-m-primary" type="button">Browse</button>
-        <div class="pf-c-empty-state__secondary">
-          <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
+
+        <div class="pf-c-empty-state__footer">
+          <div class="pf-c-empty-state__actions">
+            <button class="pf-c-button pf-m-primary" type="button">Browse</button>
+          </div>
+          <div class="pf-c-empty-state__actions">
+            <button
+              class="pf-c-button pf-m-link"
+              type="button"
+            >Start from scratch</button>
+          </div>
         </div>
       </div>
     </div>
@@ -141,24 +154,37 @@ cssPrefix: pf-c-code-editor
     <div class="pf-c-code-editor__header-main"></div>
     <div class="pf-c-code-editor__tab">
       <span class="pf-c-code-editor__tab-icon">
-        <i class="fas fa-code"></i>
+        <i class="fas fa-code" aria-hidden="true"></i>
       </span>
       <span class="pf-c-code-editor__tab-text">YAML</span>
     </div>
   </div>
   <div class="pf-c-code-editor__main pf-m-drag-hover">
-    <div class="pf-c-empty-state pf-m-lg">
+    <div class="pf-c-empty-state">
       <div class="pf-c-empty-state__content">
-        <div class="pf-c-empty-state__icon">
-          <i class="fas fa-code"></i>
+        <div class="pf-c-empty-state__header">
+          <div class="pf-c-empty-state__icon">
+            <i class="fas fa- fa-code" aria-hidden="true"></i>
+          </div>
+          <div class="pf-c-empty-state__title">
+            <h1 class="pf-c-empty-state__title-text">Start editing</h1>
+          </div>
         </div>
-        <h1 class="pf-c-title pf-m-lg">Start editing</h1>
+
         <div
           class="pf-c-empty-state__body"
         >Drag a file here or browse to upload.</div>
-        <button class="pf-c-button pf-m-primary" type="button">Browse</button>
-        <div class="pf-c-empty-state__secondary">
-          <button class="pf-c-button pf-m-link" type="button">Start from scratch</button>
+
+        <div class="pf-c-empty-state__footer">
+          <div class="pf-c-empty-state__actions">
+            <button class="pf-c-button pf-m-primary" type="button">Browse</button>
+          </div>
+          <div class="pf-c-empty-state__actions">
+            <button
+              class="pf-c-button pf-m-link"
+              type="button"
+            >Start from scratch</button>
+          </div>
         </div>
       </div>
     </div>
@@ -224,24 +250,17 @@ cssPrefix: pf-c-code-editor
 
 ## Documentation
 
-### Overview
-
-### Accessibility
-
-| Class | Applied to | Outcome |
-| ----- | ---------- | ------- |
-
 ### Usage
 
-| Class                                   | Applied to | Outcome                                                                                   |
-| --------------------------------------- | ---------- | ----------------------------------------------------------------------------------------- |
-| `.pf-c-code-editor`                     | `<div>`    | Initiates the code editor component. **Required**                                         |
-| `.pf-c-code-editor__header`             | `<div>`    | Initiates the code editor header used for the controls and tab elements. **Required**     |
-| `.pf-c-code-editor__main`               | `<div>`    | Initiates the main container for a code editor e.g. Monaco **Required**                   |
-| `.pf-c-code-editor__code`               | `<div>`    | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
-| `.pf-c-code-editor__controls`           | `<div>`    | Initiates the code editor controls.                                                       |
-| `.pf-c-code-editor__header-main`        | `<div>`    | Initiates the code editor header content area.                                            |
-| `.pf-c-code-editor__keyboard-shortcuts` | `<div>`    | Initiates the code editor header keyboard shortcuts area.                                 |
-| `.pf-c-code-editor__tab`                | `<div>`    | Initiates the code editor tab.                                                            |
-| `.pf-c-code-editor__tab-text`           | `<span>`   | Initiates the code editor tab text.                                                       |
-| `.pf-c-code-editor__tab-icon`           | `<span>`   | Initiates the code editor tab icon.                                                       |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-code-editor` | `<div>` | Initiates the code editor component. **Required** |
+| `.pf-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. **Required** |
+| `.pf-c-code-editor__main` | `<div>` | Initiates the main container for a code editor e.g. Monaco **Required** |
+| `.pf-c-code-editor__code` | `<div>` | Initiates the container for code without a JS code editor. Comes with PatternFly styling. |
+| `.pf-c-code-editor__controls` | `<div>` | Initiates the code editor controls. |
+| `.pf-c-code-editor__header-main` | `<div>` | Initiates the code editor header content area. |
+| `.pf-c-code-editor__keyboard-shortcuts` | `<div>` | Initiates the code editor header keyboard shortcuts area. |
+| `.pf-c-code-editor__tab` | `<div>` | Initiates the code editor tab. |
+| `.pf-c-code-editor__tab-text` | `<span>` | Initiates the code editor tab text. |
+| `.pf-c-code-editor__tab-icon` | `<span>` | Initiates the code editor tab icon. |