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

package/docs/components/Select/examples/Select.md

@@ -1,6 +1,7 @@
 ---
 id: Select
 section: components
+subsection: menus
 cssPrefix: pf-c-select
 ---import './Select.css'
 
@@ -235,19 +236,19 @@ The single select should be used when the user is selecting an option from a lis
 
 ### Usage
 
-| Class                          | Applied to           | Outcome                                                                             |
-| ------------------------------ | -------------------- | ----------------------------------------------------------------------------------- |
-| `.pf-c-select`                 | `<div>`              | Initiates a custom select.                                                          |
-| `.pf-c-select__toggle`         | `<button>`           | Initiates a custom toggle.                                                          |
-| `.pf-c-select__toggle-wrapper` | `<div>`              | Initiates a custom select toggle wrapper.                                           |
-| `.pf-c-select__toggle-arrow`   | `<span>`             | Initiates the caret to toggle the dropdown.                                         |
-| `.pf-c-select__menu`           | `<ul>`               | Initiates the custom select dropdown menu.                                          |
-| `.pf-c-select__menu-item`      | `<li>`               | Initiates the items in the custom select dropdown menu.                             |
-| `.pf-c-select__menu-item-icon` | `<i>`                | Initiates the selected item icon.                                                   |
-| `.pf-m-top`                    | `.pf-c-select`       | Modifies the select menu to display above the toggle.                               |
-| `.pf-m-align-right`            | `.pf-c-select__menu` | Modifies the select menu to display right aligned to the toggle.                    |
-| `.pf-m-static`                 | `.pf-c-select__menu` | Modifies the select menu to be statically positioned to support custom positioning. |
-| `.pf-m-active`                 | `.pf-c-select`       | Forces display of the active state of the toggle.                                   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select` | `<div>` |  Initiates a custom select. |
+| `.pf-c-select__toggle` | `<button>` |  Initiates a custom toggle. |
+| `.pf-c-select__toggle-wrapper` | `<div>` |  Initiates a custom select toggle wrapper. |
+| `.pf-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
+| `.pf-c-select__menu` | `<ul>` |  Initiates the custom select dropdown menu. |
+| `.pf-c-select__menu-item` | `<li>` |  Initiates the items in the custom select dropdown menu. |
+| `.pf-c-select__menu-item-icon` | `<i>` |  Initiates the selected item icon. |
+| `.pf-m-top` | `.pf-c-select` |  Modifies the select menu to display above the toggle. |
+| `.pf-m-align-right` | `.pf-c-select__menu` |  Modifies the select menu to display right aligned to the toggle. |
+| `.pf-m-static` | `.pf-c-select__menu` |  Modifies the select menu to be statically positioned to support custom positioning. |
+| `.pf-m-active` | `.pf-c-select` | Forces display of the active state of the toggle. |
 
 ## States
 
@@ -492,29 +493,29 @@ The single select should be used when the user is selecting an option from a lis
 
 ### Accessibility
 
-| Attribute              | Applied to                | Outcome                                                          |
-| ---------------------- | ------------------------- | ---------------------------------------------------------------- |
-| `aria-invalid="true"`  | `.pf-c-select__toggle`    | Indicates that the select is in the invalid state.               |
-| `aria-selected="true"` | `.pf-c-select__menu-item` | Should be set programmatically to indicate the active item.      |
-| `disabled`             | `.pf-c-select__toggle`    | Disables the dropdown toggle and removes it from keyboard focus. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-invalid="true"` | `.pf-c-select__toggle` | Indicates that the select is in the invalid state. |
+| `aria-selected="true"` | `.pf-c-select__menu-item` | Should be set programmatically to indicate the active item. |
+| `disabled` | `.pf-c-select__toggle` | Disables the dropdown toggle and removes it from keyboard focus. |
 
 ### Usage
 
-| Class                          | Applied to                | Outcome                                                                                                                                                                                                                                                                                       |
-| ------------------------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-select`                 | `<div>`                   | Initiates the select component.                                                                                                                                                                                                                                                               |
-| `.pf-c-select__toggle`         | `<button>`                | Initiates the select toggle.                                                                                                                                                                                                                                                                  |
-| `.pf-c-select__toggle-wrapper` | `<div>`                   | Initiates the select toggle wrapper.                                                                                                                                                                                                                                                          |
-| `.pf-c-select__toggle-arrow`   | `<span>`                  | Initiates the caret to toggle the dropdown.                                                                                                                                                                                                                                                   |
-| `.pf-c-select__menu`           | `<ul>`                    | Initiates the select dropdown menu.                                                                                                                                                                                                                                                           |
-| `.pf-c-select__menu-item`      | `<li>`                    | Initiates the items in the select dropdown menu.                                                                                                                                                                                                                                              |
-| `.pf-c-select__menu-item-icon` | `<span>`                  | Initiates the selected item icon wrapper.                                                                                                                                                                                                                                                     |
-| `.pf-m-expanded`               | `.pf-c-select`            | Indicates the select is expanded.                                                                                                                                                                                                                                                             |
-| `.pf-m-success`                | `.pf-c-select`            | Modifies select component for the success state.                                                                                                                                                                                                                                              |
-| `.pf-m-warning`                | `.pf-c-select`            | Modifies select component for the warning state.                                                                                                                                                                                                                                              |
-| `.pf-m-invalid`                | `.pf-c-select`            | Modifies select component for the invalid state.                                                                                                                                                                                                                                              |
-| `.pf-m-selected`               | `.pf-c-select__menu-item` | Indicates the menu item is selected.                                                                                                                                                                                                                                                          |
-| `.pf-m-disabled`               | `div.pf-c-select__toggle` | Modifies to display the select toggle as disabled. This applies to `div.pf-c-select__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-c-select__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-c-select__toggle` |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-c-select__toggle` | `<button>` |  Initiates the select toggle. |
+| `.pf-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
+| `.pf-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
+| `.pf-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
+| `.pf-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
+| `.pf-c-select__menu-item-icon` | `<span>` |  Initiates the selected item icon wrapper. |
+| `.pf-m-expanded` | `.pf-c-select` |  Indicates the select is expanded. |
+| `.pf-m-success` | `.pf-c-select` | Modifies select component for the success state. |
+| `.pf-m-warning` | `.pf-c-select` | Modifies select component for the warning state. |
+| `.pf-m-invalid` | `.pf-c-select` | Modifies select component for the invalid state. |
+| `.pf-m-selected` | `.pf-c-select__menu-item` |  Indicates the menu item is selected. |
+| `.pf-m-disabled` | `div.pf-c-select__toggle` | Modifies to display the select toggle as disabled. This applies to `div.pf-c-select__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-c-select__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-c-select__toggle`|
 
 ## Typeahead
 
@@ -902,26 +903,26 @@ The single select typeahead should be used when the user is selecting one option
 
 ### Accessibility
 
-| Attribute              | Applied to                | Outcome                                                     |
-| ---------------------- | ------------------------- | ----------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `aria-selected="true"` | `.pf-c-select__menu-item` | Should be set programmatically to indicate the active item. |
 
 ### Usage
 
-| Class                            | Applied to                      | Outcome                                                                                                                                                |
-| -------------------------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-select`                   | `<div>`                         | Initiates the select component.                                                                                                                        |
-| `.pf-c-select__toggle`           | `<div>`                         | Initiates the select toggle.                                                                                                                           |
-| `.pf-c-select__toggle-wrapper`   | `<div>`                         | Initiates the select toggle wrapper.                                                                                                                   |
-| `.pf-c-select__toggle-typeahead` | `input.pf-c-form-control`       | Initiates the input field for typeahead.                                                                                                               |
-| `.pf-c-select__toggle-clear`     | `button.pf-c-button.pf-m-plain` | Initiates a clear button in the toggle.                                                                                                                |
-| `.pf-c-select__toggle-button`    | `button.pf-c-button.pf-m-plain` | Initiates a toggle button.                                                                                                                             |
-| `.pf-c-select__toggle-arrow`     | `<span>`                        | Initiates the caret icon.                                                                                                                              |
-| `.pf-c-select__menu`             | `<ul>`                          | Initiates the select dropdown menu.                                                                                                                    |
-| `.pf-c-select__menu-item`        | `<li>`                          | Initiates the items in the select dropdown menu.                                                                                                       |
-| `.pf-m-expanded`                 | `.pf-c-select`                  | Indicates the select is expanded.                                                                                                                      |
-| `.pf-m-typeahead`                | `.pf-c-select__toggle`          | Indicates the select has a typeahead.                                                                                                                  |
-| `.pf-m-focus`                    | `.pf-c-select__menu-item`       | Modifies the menu item to apply `:focus` styling. For use when navigating the menu items by keyboard when the typeahead input field has browser focus. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-c-select__toggle` | `<div>` |  Initiates the select toggle. |
+| `.pf-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
+| `.pf-c-select__toggle-typeahead` | `input.pf-c-form-control` |  Initiates the input field for typeahead. |
+| `.pf-c-select__toggle-clear` | `button.pf-c-button.pf-m-plain` |  Initiates a clear button in the toggle. |
+| `.pf-c-select__toggle-button` | `button.pf-c-button.pf-m-plain` | Initiates a toggle button. |
+| `.pf-c-select__toggle-arrow` | `<span>` |  Initiates the caret icon. |
+| `.pf-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
+| `.pf-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
+| `.pf-m-expanded` | `.pf-c-select` |  Indicates the select is expanded. |
+| `.pf-m-typeahead` | `.pf-c-select__toggle` |  Indicates the select has a typeahead. |
+| `.pf-m-focus` | `.pf-c-select__menu-item` |  Modifies the menu item to apply `:focus` styling. For use when navigating the menu items by keyboard when the typeahead input field has browser focus. |
 
 ## Typeahead multiselect
 
@@ -1003,87 +1004,107 @@ The single select typeahead should be used when the user is selecting one option
           >
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-expanded-chip_one"
-                >Arkansas</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-expanded_chip_one select-multi-typeahead-expanded-chip_two"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-expanded_chip_one"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-expanded-chip_one"
+                  >Arkansas</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-expanded_chip_one select-multi-typeahead-expanded-chip_two"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-expanded_chip_one"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-expanded-chip_two"
-                >Massachusetts</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-expanded_chip_two select-multi-typeahead-expanded-chip_two"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-expanded_chip_two"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-expanded-chip_two"
+                  >Massachusetts</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-expanded_chip_two select-multi-typeahead-expanded-chip_two"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-expanded_chip_two"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-expanded-chip_three"
-                >New Mexico</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-expanded_chip_three select-multi-typeahead-expanded-chip_three"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-expanded_chip_three"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-expanded-chip_three"
+                  >New Mexico</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-expanded_chip_three select-multi-typeahead-expanded-chip_three"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-expanded_chip_three"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-expanded-chip_four"
-                >Ohio</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-expanded_chip_four select-multi-typeahead-expanded-chip_four"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-expanded_chip_four"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-expanded-chip_four"
+                  >Ohio</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-expanded_chip_four select-multi-typeahead-expanded-chip_four"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-expanded_chip_four"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-expanded-chip_five"
-                >Washington</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-expanded_chip_five select-multi-typeahead-expanded-chip_five"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-expanded_chip_five"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-expanded-chip_five"
+                  >Washington</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-expanded_chip_five select-multi-typeahead-expanded-chip_five"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-expanded_chip_five"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
           </ul>
@@ -1165,58 +1186,72 @@ The single select typeahead should be used when the user is selecting one option
           >
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-expanded-selected-chip_one"
-                >Arkansas</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_one select-multi-typeahead-expanded-selected-chip_one"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-expanded-selected_chip_one"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-expanded-selected-chip_one"
+                  >Arkansas</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_one select-multi-typeahead-expanded-selected-chip_one"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-expanded-selected_chip_one"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-expanded-selected-chip_two"
-                >Massachusetts</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_two select-multi-typeahead-expanded-selected-chip_two"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-expanded-selected_chip_two"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-expanded-selected-chip_two"
+                  >Massachusetts</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_two select-multi-typeahead-expanded-selected-chip_two"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-expanded-selected_chip_two"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-expanded-selected-chip_three"
-                >New Mexico</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_three select-multi-typeahead-expanded-selected-chip_three"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-expanded-selected_chip_three"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-expanded-selected-chip_three"
+                  >New Mexico</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-expanded-selected_chip_three select-multi-typeahead-expanded-selected-chip_three"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-expanded-selected_chip_three"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <button class="pf-c-chip pf-m-overflow">
-                <span class="pf-c-chip__text">2 more</span>
+                <span class="pf-c-chip__content">
+                  <span class="pf-c-chip__text">2 more</span>
+                </span>
               </button>
             </li>
           </ul>
@@ -1289,87 +1324,107 @@ The single select typeahead should be used when the user is selecting one option
           >
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-invalid-chip_one"
-                >Arkansas</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-invalid_chip_one select-multi-typeahead-invalid-chip_two"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-invalid_chip_one"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-invalid-chip_one"
+                  >Arkansas</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-invalid_chip_one select-multi-typeahead-invalid-chip_two"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-invalid_chip_one"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-invalid-chip_two"
-                >Massachusetts</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-invalid_chip_two select-multi-typeahead-invalid-chip_two"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-invalid_chip_two"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-invalid-chip_two"
+                  >Massachusetts</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-invalid_chip_two select-multi-typeahead-invalid-chip_two"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-invalid_chip_two"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-invalid-chip_three"
-                >New Mexico</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-invalid_chip_three select-multi-typeahead-invalid-chip_three"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-invalid_chip_three"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-invalid-chip_three"
+                  >New Mexico</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-invalid_chip_three select-multi-typeahead-invalid-chip_three"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-invalid_chip_three"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-invalid-chip_four"
-                >Ohio</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-invalid_chip_four select-multi-typeahead-invalid-chip_four"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-invalid_chip_four"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-invalid-chip_four"
+                  >Ohio</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-invalid_chip_four select-multi-typeahead-invalid-chip_four"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-invalid_chip_four"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
             <li class="pf-c-chip-group__list-item">
               <div class="pf-c-chip">
-                <span
-                  class="pf-c-chip__text"
-                  id="select-multi-typeahead-invalid-chip_five"
-                >Washington</span>
-                <button
-                  class="pf-c-button pf-m-plain"
-                  type="button"
-                  aria-labelledby="remove_select-multi-typeahead-invalid_chip_five select-multi-typeahead-invalid-chip_five"
-                  aria-label="Remove"
-                  id="remove_select-multi-typeahead-invalid_chip_five"
-                >
-                  <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                <span class="pf-c-chip__content">
+                  <span
+                    class="pf-c-chip__text"
+                    id="select-multi-typeahead-invalid-chip_five"
+                  >Washington</span>
+                </span>
+                <span class="pf-c-chip__actions">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-labelledby="remove_select-multi-typeahead-invalid_chip_five select-multi-typeahead-invalid-chip_five"
+                    aria-label="Remove"
+                    id="remove_select-multi-typeahead-invalid_chip_five"
+                  >
+                    <i class="fas fa-times" aria-hidden="true"></i>
+                  </button>
+                </span>
               </div>
             </li>
           </ul>
@@ -1443,26 +1498,26 @@ The multiselect should be used when the user is selecting multiple items from a
 
 ### Accessibility
 
-| Attribute              | Applied to                | Outcome                                                     |
-| ---------------------- | ------------------------- | ----------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `aria-selected="true"` | `.pf-c-select__menu-item` | Should be set programmatically to indicate the active item. |
 
 ### Usage
 
-| Class                            | Applied to                | Outcome                                                                              |
-| -------------------------------- | ------------------------- | ------------------------------------------------------------------------------------ |
-| `.pf-c-select`                   | `<div>`                   | Initiates the select component.                                                      |
-| `.pf-c-select__toggle`           | `<div>`                   | Initiates the select toggle.                                                         |
-| `.pf-c-select__toggle-wrapper`   | `<div>`                   | Initiates the select toggle wrapper so that chips and input field can wrap together. |
-| `.pf-c-chip`                     | `<div>`                   | Initiates a chip. (See [chip component](/components/chip) for more details)          |
-| `.pf-c-select__toggle-typeahead` | `input.pf-c-form-control` | Initiates the input field for typeahead.                                             |
-| `.pf-c-select__toggle-clear`     | `button.pf-m-plain`       | Initiates a clear button in the toggle.                                              |
-| `.pf-c-select__toggle-button`    | `<button>`                | Initiates a toggle button.                                                           |
-| `.pf-c-select__toggle-arrow`     | `<span>`                  | Initiates the caret icon.                                                            |
-| `.pf-c-select__menu`             | `<ul>`                    | Initiates the select dropdown menu.                                                  |
-| `.pf-c-select__menu-item`        | `<li>`                    | Initiates the items in the select dropdown menu.                                     |
-| `.pf-m-expanded`                 | `.pf-c-select`            | Indicates the select is expanded.                                                    |
-| `.pf-m-typeahead`                | `.pf-c-select__toggle`    | Indicates the select has a typeahead.                                                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-c-select__toggle` | `<div>` |  Initiates the select toggle. |
+| `.pf-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper so that chips and input field can wrap together. |
+| `.pf-c-chip` | `<div>` |  Initiates a chip. (See [chip component](/components/chip) for more details) |
+| `.pf-c-select__toggle-typeahead` | `input.pf-c-form-control` |  Initiates the input field for typeahead. |
+| `.pf-c-select__toggle-clear` | `button.pf-m-plain` |  Initiates a clear button in the toggle. |
+| `.pf-c-select__toggle-button` | `<button>` | Initiates a toggle button. |
+| `.pf-c-select__toggle-arrow` | `<span>` |  Initiates the caret icon. |
+| `.pf-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
+| `.pf-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
+| `.pf-m-expanded` | `.pf-c-select` |  Indicates the select is expanded. |
+| `.pf-m-typeahead` | `.pf-c-select__toggle` |  Indicates the select has a typeahead. |
 
 ## Checkbox
 
@@ -2229,27 +2284,27 @@ The checkbox select can select multiple items using checkboxes. The number of it
 
 ### Usage
 
-| Class                            | Applied to                | Outcome                                                                                                                  |
-| -------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-select`                   | `<div>`                   | Initiates the select component.                                                                                          |
-| `.pf-c-select__toggle`           | `<button>`                | Initiates the select toggle.                                                                                             |
-| `.pf-c-select__toggle-wrapper`   | `<div>`                   | Initiates the select toggle wrapper so that chips and input field can wrap together.                                     |
-| `.pf-c-chip`                     | `<div>`                   | Initiates a chip. (See [chip component](/components/chip) for more details)                                              |
-| `.pf-c-select__toggle-typeahead` | `input.pf-c-form-control` | Initiates the input field for typeahead.                                                                                 |
-| `.pf-c-select__toggle-badge`     | `<div>`                   | Initiates a container for a badge to indicate the number of items checked. _ note: This should contain an unread badge _ |
-| `.pf-c-select__toggle-clear`     | `button.pf-m-plain`       | Initiates a clear button in the toggle.                                                                                  |
-| `.pf-c-select__toggle-arrow`     | `<span>`                  | Initiates the caret to toggle the dropdown.                                                                              |
-| `.pf-c-select__menu`             | `<div>`                   | Initiates the select dropdown menu.                                                                                      |
-| `.pf-c-select__menu-item`        | `div.pf-c-check`          | Initiates the items in the select dropdown menu.                                                                         |
-| `.pf-c-select__menu-item-row`    | `<span>`                  | Initiates a menu item row for use with positioning other elements before/after the item text.                            |
-| `.pf-c-select__menu-item-text`   | `<span>`                  | Initiates the menu item row text.                                                                                        |
-| `.pf-c-select__menu-item-count`  | `<span>`                  | Initiates the menu item row count.                                                                                       |
-| `.pf-c-select__menu-fieldset`    | `<fieldset>`              | Initiates a fieldset for the items in a checkbox select.                                                                 |
-| `.pf-c-select__menu-group`       | `<div>`                   | Initiates a group within a select menu.                                                                                  |
-| `.pf-c-select__menu-group-title` | `<div>`                   | Initiates a title for a group with a select menu.                                                                        |
-| `.pf-c-select__menu-search`      | `<div>`                   | Initiates a container for the search input group.                                                                        |
-| `.pf-m-expanded`                 | `.pf-c-select`            | Indicates the select is expanded.                                                                                        |
-| `.pf-m-typeahead`                | `.pf-c-select__toggle`    | Indicates the select has a typeahead.                                                                                    |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select` | `<div>` | Initiates the select component. |
+| `.pf-c-select__toggle` | `<button>` | Initiates the select toggle. |
+| `.pf-c-select__toggle-wrapper` | `<div>` | Initiates the select toggle wrapper so that chips and input field can wrap together. |
+| `.pf-c-chip` | `<div>` | Initiates a chip. (See [chip component](/components/chip) for more details) |
+| `.pf-c-select__toggle-typeahead` | `input.pf-c-form-control` |  Initiates the input field for typeahead. |
+| `.pf-c-select__toggle-badge` | `<div>` | Initiates a container for a badge to indicate the number of items checked. \* note: This should contain an unread badge \* |
+| `.pf-c-select__toggle-clear` | `button.pf-m-plain` | Initiates a clear button in the toggle. |
+| `.pf-c-select__toggle-arrow` | `<span>` | Initiates the caret to toggle the dropdown. |
+| `.pf-c-select__menu` | `<div>` | Initiates the select dropdown menu. |
+| `.pf-c-select__menu-item` | `div.pf-c-check` | Initiates the items in the select dropdown menu. |
+| `.pf-c-select__menu-item-row` | `<span>` | Initiates a menu item row for use with positioning other elements before/after the item text. |
+| `.pf-c-select__menu-item-text` | `<span>` | Initiates the menu item row text. |
+| `.pf-c-select__menu-item-count` | `<span>` | Initiates the menu item row count. |
+| `.pf-c-select__menu-fieldset` | `<fieldset>` | Initiates a fieldset for the items in a checkbox select. |
+| `.pf-c-select__menu-group` | `<div>` | Initiates a group within a select menu. |
+| `.pf-c-select__menu-group-title` | `<div>` | Initiates a title for a group with a select menu. |
+| `.pf-c-select__menu-search` | `<div>` | Initiates a container for the search input group. |
+| `.pf-m-expanded` | `.pf-c-select` | Indicates the select is expanded. |
+| `.pf-m-typeahead` | `.pf-c-select__toggle` | Indicates the select has a typeahead. |
 
 ## Plain
 
@@ -2370,18 +2425,18 @@ The plain select variation should be used when you do not want a border applied
 
 ### Usage
 
-| Class                          | Applied to                | Outcome                                          |
-| ------------------------------ | ------------------------- | ------------------------------------------------ |
-| `.pf-c-select`                 | `<div>`                   | Initiates the select component.                  |
-| `.pf-c-select__toggle`         | `<button>`                | Initiates the select toggle.                     |
-| `.pf-c-select__toggle-wrapper` | `<div>`                   | Initiates the select toggle wrapper.             |
-| `.pf-c-select__toggle-arrow`   | `<span>`                  | Initiates the caret to toggle the dropdown.      |
-| `.pf-c-select__menu`           | `<ul>`                    | Initiates the select dropdown menu.              |
-| `.pf-c-select__menu-item`      | `<li>`                    | Initiates the items in the select dropdown menu. |
-| `.pf-c-select__menu-item-icon` | `<i>`                     | Initiates the selected item icon.                |
-| `.pf-m-expanded`               | `.pf-c-select`            | Indicates the select is expanded.                |
-| `.pf-m-plain`                  | `.pf-c-select__toggle`    | Modifies to display the toggle with no border.   |
-| `.pf-m-selected`               | `.pf-c-select__menu-item` | Indicates the menu item is selected.             |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-c-select__toggle` | `<button>` |  Initiates the select toggle. |
+| `.pf-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
+| `.pf-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
+| `.pf-c-select__menu` | `<ul>` |  Initiates the select dropdown menu. |
+| `.pf-c-select__menu-item` | `<li>` |  Initiates the items in the select dropdown menu. |
+| `.pf-c-select__menu-item-icon` | `<i>` |  Initiates the selected item icon. |
+| `.pf-m-expanded` | `.pf-c-select` |  Indicates the select is expanded. |
+| `.pf-m-plain` | `.pf-c-select__toggle` |  Modifies to display the toggle with no border. |
+| `.pf-m-selected` | `.pf-c-select__menu-item` |  Indicates the menu item is selected. |
 
 ## Icon
 
@@ -2447,19 +2502,19 @@ The plain select variation should be used when you do not want a border applied
 
 ### Accessibility
 
-| Attribute            | Applied to                  | Outcome                                     |
-| -------------------- | --------------------------- | ------------------------------------------- |
-| `aria-hidden="true"` | `.pf-c-select__toggle-icon` | Hides the icon from assistive technologies. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-hidden="true"` | `.pf-c-select__toggle-icon` | Hides the icon from assistive technologies.
 
 ### Usage
 
-| Class                          | Applied to | Outcome                                     |
-| ------------------------------ | ---------- | ------------------------------------------- |
-| `.pf-c-select`                 | `<div>`    | Initiates the select component.             |
-| `.pf-c-select__toggle`         | `<button>` | Initiates the select toggle.                |
-| `.pf-c-select__toggle-wrapper` | `<div>`    | Initiates the select toggle wrapper.        |
-| `.pf-c-select__toggle-icon`    | `<span>`   | Initiates the icon in the dropdown toggle.  |
-| `.pf-c-select__toggle-arrow`   | `<span>`   | Initiates the caret to toggle the dropdown. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-c-select__toggle` | `<button>` |  Initiates the select toggle. |
+| `.pf-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
+| `.pf-c-select__toggle-icon` | `<span>` |  Initiates the icon in the dropdown toggle. |
+| `.pf-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
 
 ## Panel
 
@@ -2495,13 +2550,13 @@ The plain select variation should be used when you do not want a border applied
 
 ### Usage
 
-| Class                          | Applied to | Outcome                                     |
-| ------------------------------ | ---------- | ------------------------------------------- |
-| `.pf-c-select`                 | `<div>`    | Initiates the select component.             |
-| `.pf-c-select__toggle`         | `<button>` | Initiates the select toggle.                |
-| `.pf-c-select__toggle-wrapper` | `<div>`    | Initiates the select toggle wrapper.        |
-| `.pf-c-select__toggle-arrow`   | `<span>`   | Initiates the caret to toggle the dropdown. |
-| `.pf-c-select__menu`           | `<div>`    | Initiates the select dropdown menu.         |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select` | `<div>` |  Initiates the select component. |
+| `.pf-c-select__toggle` | `<button>` |  Initiates the select toggle. |
+| `.pf-c-select__toggle-wrapper` | `<div>` |  Initiates the select toggle wrapper. |
+| `.pf-c-select__toggle-arrow` | `<span>` |  Initiates the caret to toggle the dropdown. |
+| `.pf-c-select__menu` | `<div>` |  Initiates the select dropdown menu. |
 
 ## Description
 
@@ -2707,11 +2762,11 @@ The plain select variation should be used when you do not want a border applied
 
 ### Usage
 
-| Class                                 | Applied to                | Outcome                                                                                    |
-| ------------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------ |
-| `.pf-c-select__menu-item-description` | `<span>`                  | Initiates the select menu item description element.                                        |
-| `.pf-c-select__menu-item-main`        | `<span>`                  | Initiates the select menu item main element. Used when the description element is present. |
-| `.pf-m-description`                   | `.pf-c-select__menu-item` | Modifies the select menu item when selected to accommodate the description element.        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select__menu-item-description` | `<span>` |  Initiates the select menu item description element. |
+| `.pf-c-select__menu-item-main` | `<span>` | Initiates the select menu item main element. Used when the description element is present. |
+| `.pf-m-description` | `.pf-c-select__menu-item` | Modifies the select menu item when selected to accommodate the description element. |
 
 ## Favorites
 
@@ -2914,20 +2969,20 @@ The plain select variation should be used when you do not want a border applied
 
 ### Accessibility
 
-| Attribute                  | Applied to                                                                       | Outcome                                                                           |
-| -------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
-| `aria-label="Not starred"` | `.pf-c-select__menu-wrapper > .pf-c-select__menu-item.pf-m-action`               | Provides an accessible label indicating that the favorite action is not selected. |
-| `aria-label="Starred"`     | `.pf-c-select__menu-wrapper.pf-m-favorite > .pf-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is selected.     |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="Not starred"` | `.pf-c-select__menu-wrapper > .pf-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is not selected. |
+| `aria-label="Starred"` | `.pf-c-select__menu-wrapper.pf-m-favorite > .pf-c-select__menu-item.pf-m-action` | Provides an accessible label indicating that the favorite action is selected. |
 
 ### Usage
 
-| Class                        | Applied to                                                       | Outcome                                                                             |
-| ---------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
-| `.pf-c-select__menu-wrapper` | `<li>`                                                           | Defines a menu wrapper for use with multiple actionable items in a single item row. |
-| `.pf-m-favorite`             | `.pf-c-select__menu-wrapper`                                     | Modifies wrapper to indicate that the item row has been favorited.                  |
-| `.pf-m-favorite-action`      | `.pf-c-select__menu-item`                                        | Modifies an item for favorite styles.                                               |
-| `.pf-m-link`                 | `.pf-c-select__menu-item.pf-m-wrapper > .pf-c-select__menu-item` | Modifies item for link styles.                                                      |
-| `.pf-m-action`               | `.pf-c-select__menu-item.pf-m-wrapper > .pf-c-select__menu-item` | Modifies item to for action styles.                                                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
+| `.pf-m-favorite` | `.pf-c-select__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
+| `.pf-m-favorite-action` | `.pf-c-select__menu-item` | Modifies an item for favorite styles. |
+| `.pf-m-link` | `.pf-c-select__menu-item.pf-m-wrapper > .pf-c-select__menu-item` | Modifies item for link styles. |
+| `.pf-m-action` | `.pf-c-select__menu-item.pf-m-wrapper > .pf-c-select__menu-item` | Modifies item to for action styles. |
 
 ## View more
 
@@ -2992,8 +3047,8 @@ The plain select variation should be used when you do not want a border applied
 
 ### Usage
 
-| Class        | Applied to                | Outcome                               |
-| ------------ | ------------------------- | ------------------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.pf-m-load` | `.pf-c-select__menu-item` | Modifies a menu item for load styles. |
 
 ## Loading
@@ -3067,10 +3122,10 @@ The plain select variation should be used when you do not want a border applied
 
 ### Usage
 
-| Class                     | Applied to                | Outcome                                         |
-| ------------------------- | ------------------------- | ----------------------------------------------- |
-| `.pf-c-select__list-item` | `<li>`                    | Defines a list item element in the select menu. |
-| `.pf-m-loading`           | `.pf-c-select__list-item` | Modifies a list item for loading styles.        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select__list-item` | `<li>` | Defines a list item element in the select menu. |
+| `.pf-m-loading` | `.pf-c-select__list-item` | Modifies a list item for loading styles. |
 
 ## Footer
 
@@ -3137,10 +3192,10 @@ The plain select variation should be used when you do not want a border applied
 
 ### Usage
 
-| Class                       | Applied to | Outcome                                                                   |
-| --------------------------- | ---------- | ------------------------------------------------------------------------- |
-| `.pf-c-select__menu-footer` | `<div>`    | Defines a menu footer.                                                    |
-| `.pf-c-select__menu-list`   | `<ul>`     | Defines the menu list when the list is placed in `div.pf-c-select__menu`. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-select__menu-footer` | `<div>` | Defines a menu footer. |
+| `.pf-c-select__menu-list` | `<ul>` | Defines the menu list when the list is placed in `div.pf-c-select__menu`. |
 
 ## Placeholder
 
@@ -3381,8 +3436,8 @@ The plain select variation should be used when you do not want a border applied
 
 ### Usage
 
-| Class               | Applied to             | Outcome                                     |
-| ------------------- | ---------------------- | ------------------------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.pf-m-placeholder` | `.pf-c-select__toggle` | Modifies the toggle for placeholder styles. |
 
 ## Documentation