@patternfly/patternfly 5.0.0-alpha.14 → 5.0.0-alpha.19

package/docs/components/Chip/examples/Chip.md

@@ -80,20 +80,20 @@ A Chip is used to display items that have been filtered or selected from a large
 
 ## Accessibility
 
-| Attribute                                      | Applied to     | Outcome                                                                                                                                                            |
-| ---------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `aria-label="[button label text]"`             | `.pf-c-button` | 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.                            |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[button label text]"` | `.pf-c-button` |  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-labelledby="[id value of .pf-c-button]"` | `.pf-c-button` | Gives the button an accessible name by referring to the element that provides the position of the button within a list. Required when the button is being removed. |
-| `aria-hidden="true"`                           | `<i>`          | Hides the icon from assistive technologies.                                                                                                                        |
+| `aria-hidden="true"` | `<i>` |  Hides the icon from assistive technologies. |
 
 ## Usage
 
-| Class              | Applied to            | Outcome                                                                         |
-| ------------------ | --------------------- | ------------------------------------------------------------------------------- |
-| `.pf-c-chip`       | `<div>`, `<button>`,  | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
-| `.pf-c-chip__text` | `<span>`              | Initiates the text inside of the chip. **Required**                             |
-| `.pf-c-chip__icon` | `<span>`              | Initiates the icon inside of the chip.                                          |
-| `.pf-c-button`     | `.pf-c-chip <button>` | Initiates the button used to remove the chip.                                   |
-| `.pf-c-badge`      | `<span>`              | Initiates the badge inside the chip.                                            |
-| `.pf-m-overflow`   | `button.pf-c-chip`    | Applies styling of the overflow chip.                                           |
-| `.pf-m-draggable`  | `.pf-c-chip`          | Modifies the chip to be in the draggable state.                                 |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-chip` | `<div>`, `<button>`, | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
+| `.pf-c-chip__text` | `<span>` | Initiates the text inside of the chip. **Required** |
+| `.pf-c-chip__icon` | `<span>` | Initiates the icon inside of the chip. |
+| `.pf-c-button` | `.pf-c-chip <button>` | Initiates the button used to remove the chip. |
+| `.pf-c-badge` | `<span>` | Initiates the badge inside the chip. |
+| `.pf-m-overflow` | `button.pf-c-chip` | Applies styling of the overflow chip. |
+| `.pf-m-draggable` | `.pf-c-chip` | Modifies the chip to be in the draggable state. |

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

@@ -580,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. **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.                                             |
+| 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-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** |
+| 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,23 +107,38 @@ 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>
-        <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>
   </div>
@@ -139,23 +154,38 @@ 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>
-        <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>
   </div>
@@ -220,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. |

package/docs/components/Content/examples/Content.md

@@ -163,11 +163,11 @@ cssPrefix: pf-c-content
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `pf-c-content` as container. It can handle almost any HTML tag:
 
--   `<p>` paragraphs
--   `<ul>` `<ol>` `<dl>` lists
--   `<h1>` to `<h6>` headings
--   `<blockquote>` quotes
--   `<em>` and `<strong>`
+*   `<p>` paragraphs
+*   `<ul>` `<ol>` `<dl>` lists
+*   `<h1>` to `<h6>` headings
+*   `<blockquote>` quotes
+*   `<em>` and `<strong>`
 
 This `pf-c-content` class can be used in any context where you just want to (or can only) write some text.
 
@@ -175,8 +175,8 @@ This component is an exception to the variable system since we style type select
 
 ### Usage
 
-| Class           | Applied to                           | Outcome                                                                                                                   |
-| --------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-content` | `<div>`, `<section>`, or `<article>` | Generates vertical rhythm and typographic treatment to html elements.                                                     |
-| `.pf-m-visited` | `.pf-c-content`, `<a>`               | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
-| `.pf-m-plain`   | `<ul>`, `<ol>`                       | Removes the list marker and indentation.                                                                                  |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-content` | `<div>`, `<section>`, or `<article>` | Generates vertical rhythm and typographic treatment to html elements. |
+| `.pf-m-visited` | `.pf-c-content`, `<a>` | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
+| `.pf-m-plain` | `<ul>`, `<ol>` | Removes the list marker and indentation. |

package/docs/components/ContextSelector/examples/context-selector.css

@@ -1,3 +1,7 @@
-#ws-core-c-context-selector-basic, #ws-core-c-context-selector-with-footer, #ws-core-c-context-selector-plain-with-text {
+#ws-core-c-context-selector-basic, #ws-core-c-context-selector-plain-with-text {
   min-height: 380px;
 }
+
+#ws-core-c-context-selector-with-footer {
+  min-height: 420px;
+}

package/docs/components/ContextSelector/examples/context-selector.md

@@ -24,17 +24,18 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu" hidden>
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
@@ -138,17 +139,18 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
@@ -260,17 +262,18 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu" hidden>
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
@@ -377,17 +380,18 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
@@ -496,17 +500,18 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
@@ -617,17 +622,18 @@ cssPrefix: pf-c-context-selector
   </button>
   <div class="pf-c-context-selector__menu">
     <div class="pf-c-context-selector__menu-search">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
@@ -729,32 +735,32 @@ cssPrefix: pf-c-context-selector
 
 ### Accessibility
 
-| Class                   | Applied to                                | Outcome                                                                                                        |
-| ----------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `aria-expanded="false"` | `.pf-c-context-selector__toggle`          | Indicates that the menu is hidden.                                                                             |
-| `aria-expanded="true"`  | `.pf-c-context-selector__toggle`          | Indicates that the menu is visible.                                                                            |
-| `aria-hidden="true"`    | `.pf-c-context-selector__toggle-icon > *` | Hides the icon from assistive technologies.                                                                    |
-| `disabled`              | `button.pf-c-context-selector__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
-| `aria-disabled="true"`  | `a.pf-c-context-selector__menu-item`      | When the menu item uses a link element, indicates that it is unavailable.                                      |
-| `tabindex="-1"`         | `a.pf-c-context-selector__menu-item`      | When the menu item uses a link element, removes it from keyboard focus.                                        |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-expanded="false"` | `.pf-c-context-selector__toggle` |  Indicates that the menu is hidden. |
+| `aria-expanded="true"` | `.pf-c-context-selector__toggle` |  Indicates that the menu is visible. |
+| `aria-hidden="true"` | `.pf-c-context-selector__toggle-icon > *` | Hides the icon from assistive technologies. |
+| `disabled` | `button.pf-c-context-selector__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `aria-disabled="true"` | `a.pf-c-context-selector__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
+| `tabindex="-1"` | `a.pf-c-context-selector__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
 
 ### Usage
 
-| Class                                    | Applied to                                | Outcome                                                                         |
-| ---------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------- |
-| `.pf-c-context-selector`                 | `<div>`                                   | Initiates a context selector.                                                   |
-| `.pf-c-context-selector__toggle`         | `<button>`                                | Initiates a toggle.                                                             |
-| `.pf-c-context-selector__toggle-text`    | `<span>`                                  | Initiates text inside the toggle.                                               |
-| `.pf-c-context-selector__toggle-icon`    | `<span>`                                  | Inititiates the toggle icon wrapper.                                            |
-| `.pf-c-context-selector__menu`           | `<div>`                                   | Initiaties a menu.                                                              |
-| `.pf-c-context-selector__menu-search`    | `<div>`                                   | Initiates a container for the search input group.                               |
-| `.pf-c-context-selector__menu-list`      | `<ul>`                                    | Initiaties an unordered list of menu items that sits under the input container. |
-| `.pf-c-context-selector__menu-footer`    | `<div>`                                   | Initiaties a menu footer.                                                       |
-| `.pf-c-context-selector__menu-list-item` | `<li>`                                    | Initiaties a menu item.                                                         |
-| `.pf-m-expanded`                         | `.pf-c-context-selector`                  | Modifies for the expanded state.                                                |
-| `.pf-m-active`                           | `.pf-c-context-selector__toggle`          | Forces display of the active state of the toggle.                               |
-| `.pf-m-plain.pf-m-text`                  | `.pf-c-context-selector__toggle`          | Modifies the context selector toggle for plain text styles.                     |
-| `.pf-m-disabled`                         | `a.pf-c-context-selector__menu-list-item` | Modifies an item for the disabled state.                                        |
-| `.pf-m-full-height`                      | `.pf-c-context-selector`                  | Modifies a context selector to full height of parent. See masthead for use.     |
-| `.pf-m-large`                            | `.pf-c-context-selector`                  | Modifies toggle height to be large.                                             |
-| `.pf-m-page-insets`                      | `.pf-c-context-selector`                  | Modifies toggle and menu insets to match the responsive page chrome insets.     |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-context-selector` | `<div>` | Initiates a context selector.|
+| `.pf-c-context-selector__toggle` | `<button>` | Initiates a toggle. |
+| `.pf-c-context-selector__toggle-text` | `<span>` | Initiates text inside the toggle. |
+| `.pf-c-context-selector__toggle-icon` | `<span>` | Inititiates the toggle icon wrapper. |
+| `.pf-c-context-selector__menu` | `<div>` | Initiaties a menu. |
+| `.pf-c-context-selector__menu-search` | `<div>` | Initiates a container for the search input group. |
+| `.pf-c-context-selector__menu-list` | `<ul>` | Initiaties an unordered list of menu items that sits under the input container. |
+| `.pf-c-context-selector__menu-footer` | `<div>` | Initiaties a menu footer. |
+| `.pf-c-context-selector__menu-list-item` | `<li>` | Initiaties a menu item. |
+| `.pf-m-expanded` | `.pf-c-context-selector` | Modifies for the expanded state. |
+| `.pf-m-active` | `.pf-c-context-selector__toggle` | Forces display of the active state of the toggle. |
+| `.pf-m-plain.pf-m-text` | `.pf-c-context-selector__toggle` | Modifies the context selector toggle for plain text styles. |
+| `.pf-m-disabled` | `a.pf-c-context-selector__menu-list-item` | Modifies an item for the disabled state.|
+| `.pf-m-full-height` | `.pf-c-context-selector` | Modifies a context selector to full height of parent. See masthead for use. |
+| `.pf-m-large` | `.pf-c-context-selector` | Modifies toggle height to be large. |
+| `.pf-m-page-insets` | `.pf-c-context-selector` | Modifies toggle and menu insets to match the responsive page chrome insets. |