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

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

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

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

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

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

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

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

@@ -75,6 +75,33 @@ cssPrefix: pf-c-content
     <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
   </p>
   <hr />
+  <h3>Plain list example</h3>
+  <ol class="pf-m-plain">
+    <li>Donec blandit a lorem id convallis.</li>
+    <li>Cras gravida arcu at diam gravida gravida.</li>
+    <li>Integer in volutpat libero.</li>
+    <li>Donec a diam tellus.</li>
+    <li>
+      Etiam auctor nisl et.
+      <ul>
+        <li>Regular list</li>
+        <li>Donec blandit a lorem id convallis.</li>
+        <li>Cras gravida arcu at diam gravida gravida.</li>
+        <li>
+          Integer in volutpat libero.
+          <ol class="pf-m-plain">
+            <li>Nested plain list</li>
+            <li>Donec blandit a lorem id convallis.</li>
+            <li>Cras gravida arcu at diam gravida gravida.</li>
+          </ol>
+        </li>
+      </ul>
+    </li>
+    <li>Aenean nec tortor orci.</li>
+    <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
+    <li>Vivamus maximus ultricies pulvinar.</li>
+  </ol>
+  <hr />
   <h3>Visited link example</h3>
   <p>
     <a class="pf-m-visited" href>Visited link</a>
@@ -136,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.
 
@@ -148,7 +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. |
+| 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

@@ -1,6 +1,7 @@
 ---
 id: Context selector
 section: components
+subsection: menus
 cssPrefix: pf-c-context-selector
 ---import './context-selector.css'
 
@@ -24,23 +25,24 @@ 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>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -138,23 +140,24 @@ 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>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -260,23 +263,24 @@ 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>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -377,23 +381,24 @@ 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>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -496,23 +501,24 @@ 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>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -617,23 +623,24 @@ 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>
       </div>
     </div>
-    <ul class="pf-c-context-selector__menu-list">
+    <ul class="pf-c-context-selector__menu-list" role="list">
       <li>
         <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
       </li>
@@ -729,32 +736,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. |