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

package/docs/components/SearchInput/examples/SearchInput.md

@@ -1,6 +1,5 @@
 ---
 id: 'Search input'
-beta: true
 section: components
 cssPrefix: pf-c-search-input
 ---import './SearchInput.css'
@@ -139,22 +138,30 @@ cssPrefix: pf-c-search-input
 ```html
 <div class="pf-c-search-input">
   <div class="pf-c-input-group">
-    <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-input-group__item pf-m-fill">
+      <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>
+          </span>
+          <input
+            class="pf-c-search-input__text-input"
+            type="text"
+            placeholder="Find by name"
+            aria-label="Find by name"
+          />
         </span>
-        <input
-          class="pf-c-search-input__text-input"
-          type="text"
-          placeholder="Find by name"
-          aria-label="Find by name"
-        />
-      </span>
+      </div>
+    </div>
+    <div class="pf-c-input-group__item">
+      <button
+        class="pf-c-button pf-m-control"
+        type="submit"
+        aria-label="Search"
+      >
+        <i class="fas fa-arrow-right" aria-hidden="true"></i>
+      </button>
     </div>
-    <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
-      <i class="fas fa-arrow-right" aria-hidden="true"></i>
-    </button>
   </div>
 </div>
 
@@ -165,42 +172,52 @@ cssPrefix: pf-c-search-input
 ```html
 <div class="pf-c-search-input">
   <div class="pf-c-input-group">
-    <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-input-group__item pf-m-fill">
+      <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>
+          </span>
+          <input
+            class="pf-c-search-input__text-input"
+            type="text"
+            placeholder="username:admin firstname:joe"
+            aria-label="username:admin firstname:joe"
+            value="username:root firstname:ned"
+          />
         </span>
-        <input
-          class="pf-c-search-input__text-input"
-          type="text"
-          placeholder="username:admin firstname:joe"
-          aria-label="username:admin firstname:joe"
-          value="username:root firstname:ned"
-        />
-      </span>
-      <span class="pf-c-search-input__utilities">
-        <span class="pf-c-search-input__clear">
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Clear"
-          >
-            <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-          </button>
+        <span class="pf-c-search-input__utilities">
+          <span class="pf-c-search-input__clear">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Clear"
+            >
+              <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+            </button>
+          </span>
         </span>
-      </span>
+      </div>
+    </div>
+    <div class="pf-c-input-group__item">
+      <button
+        class="pf-c-button pf-m-control"
+        type="button"
+        aria-expanded="false"
+        aria-label="Advanced search"
+      >
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-input-group__item">
+      <button
+        class="pf-c-button pf-m-control"
+        type="submit"
+        aria-label="Search"
+      >
+        <i class="fas fa-arrow-right" aria-hidden="true"></i>
+      </button>
     </div>
-    <button
-      class="pf-c-button pf-m-control"
-      type="button"
-      aria-expanded="false"
-      aria-label="Advanced search"
-    >
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </button>
-    <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
-      <i class="fas fa-arrow-right" aria-hidden="true"></i>
-    </button>
   </div>
 </div>
 
@@ -211,42 +228,52 @@ cssPrefix: pf-c-search-input
 ```html
 <div class="pf-c-search-input">
   <div class="pf-c-input-group">
-    <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-input-group__item pf-m-fill">
+      <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>
+          </span>
+          <input
+            class="pf-c-search-input__text-input"
+            type="text"
+            placeholder="username:admin firstname:joe"
+            aria-label="username:admin firstname:joe"
+            value="username:root firstname:ned"
+          />
         </span>
-        <input
-          class="pf-c-search-input__text-input"
-          type="text"
-          placeholder="username:admin firstname:joe"
-          aria-label="username:admin firstname:joe"
-          value="username:root firstname:ned"
-        />
-      </span>
-      <span class="pf-c-search-input__utilities">
-        <span class="pf-c-search-input__clear">
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Clear"
-          >
-            <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-          </button>
+        <span class="pf-c-search-input__utilities">
+          <span class="pf-c-search-input__clear">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Clear"
+            >
+              <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+            </button>
+          </span>
         </span>
-      </span>
+      </div>
+    </div>
+    <div class="pf-c-input-group__item">
+      <button
+        class="pf-c-button pf-m-control pf-m-expanded"
+        type="button"
+        aria-expanded="true"
+        aria-label="Advanced search"
+      >
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-input-group__item">
+      <button
+        class="pf-c-button pf-m-control"
+        type="submit"
+        aria-label="Search"
+      >
+        <i class="fas fa-arrow-right" aria-hidden="true"></i>
+      </button>
     </div>
-    <button
-      class="pf-c-button pf-m-control pf-m-expanded"
-      type="button"
-      aria-expanded="true"
-      aria-label="Advanced search"
-    >
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </button>
-    <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
-      <i class="fas fa-arrow-right" aria-hidden="true"></i>
-    </button>
   </div>
   <div class="pf-c-search-input__menu">
     <div class="pf-c-search-input__menu-body">
@@ -436,42 +463,52 @@ cssPrefix: pf-c-search-input
 ```html
 <div class="pf-c-search-input">
   <div class="pf-c-input-group">
-    <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-input-group__item pf-m-fill">
+      <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>
+          </span>
+          <input
+            class="pf-c-search-input__text-input"
+            type="text"
+            placeholder="username:admin firstname:joe"
+            aria-label="username:admin firstname:joe"
+            value="username:root firstname:n"
+          />
         </span>
-        <input
-          class="pf-c-search-input__text-input"
-          type="text"
-          placeholder="username:admin firstname:joe"
-          aria-label="username:admin firstname:joe"
-          value="username:root firstname:n"
-        />
-      </span>
-      <span class="pf-c-search-input__utilities">
-        <span class="pf-c-search-input__clear">
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Clear"
-          >
-            <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-          </button>
+        <span class="pf-c-search-input__utilities">
+          <span class="pf-c-search-input__clear">
+            <button
+              class="pf-c-button pf-m-plain"
+              type="button"
+              aria-label="Clear"
+            >
+              <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+            </button>
+          </span>
         </span>
-      </span>
+      </div>
+    </div>
+    <div class="pf-c-input-group__item">
+      <button
+        class="pf-c-button pf-m-control pf-m-expanded"
+        type="button"
+        aria-expanded="true"
+        aria-label="Advanced search"
+      >
+        <i class="fas fa-caret-down" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-c-input-group__item">
+      <button
+        class="pf-c-button pf-m-control"
+        type="submit"
+        aria-label="Search"
+      >
+        <i class="fas fa-arrow-right" aria-hidden="true"></i>
+      </button>
     </div>
-    <button
-      class="pf-c-button pf-m-control pf-m-expanded"
-      type="button"
-      aria-expanded="true"
-      aria-label="Advanced search"
-    >
-      <i class="fas fa-caret-down" aria-hidden="true"></i>
-    </button>
-    <button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
-      <i class="fas fa-arrow-right" aria-hidden="true"></i>
-    </button>
   </div>
   <div class="pf-c-search-input__menu">
     <div class="pf-c-search-input__menu-body">
@@ -581,40 +618,40 @@ cssPrefix: pf-c-search-input
 
 ### Accessibility
 
-| Attributes                             | Applied to                                 | Outcome                                                                                                                    |
-| -------------------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
-| `aria-hidden="true"`                   | `.pf-c-search-input__icon > *`             | Hides the search icon from assistive technologies. **Required**                                                            |
-| `aria-label="Previous"`                | `.pf-c-search-input__nav > .pf-c-button`   | Provides an accessible label for the previous nav button. **Required**                                                     |
-| `aria-label="Next"`                    | `.pf-c-search-input__nav > .pf-c-button`   | Provides an accessible label for the next nav button. **Required**                                                         |
-| `aria-label="[descriptive text]"`      | `.pf-c-search-input__text-input`           | Provides an accessible label for the search input. **Required**                                                            |
-| `aria-label="Clear"`                   | `.pf-c-search-input__clear > .pf-c-button` | Provides an accessible label for the clear button. **Required**                                                            |
-| `aria-label="Search"`                  | `.pf-c-button`                             | Provides an accessible label for the search button. **Required**                                                           |
-| `aria-label="Advanced search"`         | `.pf-c-button`                             | Provides an accessible label for the advanced search toggle. **Required**                                                  |
-| `aria-expanded="[true/false]"`         | `.pf-c-button`                             | Indicates whether the advanced search menu is expanded or collapsed. **Required**                                          |
-| `id`                                   | `.pf-c-search-input__text-input`           | Assigns an ID that is used with `aria-labelledby` on `.pf-c-search-input__menu-list`. **Required when using autocomplete** |
-| `aria-labelledby="[id of text input]"` | `.pf-c-search-input__menu-list`            | Gives the menu list an accessible label. **Required when using autocomplete**                                              |
-| `disabled`                             | `.pf-c-search-input__text-input.pf-m-hint` | Disables the hint text input from being submitted with the search input. **Required when using hint text**                 |
-| `aria-hidden="true"`                   | `.pf-c-search-input__text-input.pf-m-hint` | Hides the hint text input from assistive technology. **Required when using hint text**                                     |
+| Attributes | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-hidden="true"` | `.pf-c-search-input__icon > *` | Hides the search icon from assistive technologies. **Required** |
+| `aria-label="Previous"` | `.pf-c-search-input__nav > .pf-c-button` | Provides an accessible label for the previous nav button. **Required** |
+| `aria-label="Next"` | `.pf-c-search-input__nav > .pf-c-button` | Provides an accessible label for the next nav button. **Required** |
+| `aria-label="[descriptive text]"` | `.pf-c-search-input__text-input` | Provides an accessible label for the search input. **Required** |
+| `aria-label="Clear"` | `.pf-c-search-input__clear > .pf-c-button` | Provides an accessible label for the clear button. **Required** |
+| `aria-label="Search"` | `.pf-c-button` | Provides an accessible label for the search button. **Required** |
+| `aria-label="Advanced search"` | `.pf-c-button` | Provides an accessible label for the advanced search toggle. **Required** |
+| `aria-expanded="[true/false]"` | `.pf-c-button` | Indicates whether the advanced search menu is expanded or collapsed. **Required** |
+| `id` | `.pf-c-search-input__text-input` | Assigns an ID that is used with `aria-labelledby` on `.pf-c-search-input__menu-list`. **Required when using autocomplete** |
+| `aria-labelledby="[id of text input]"` | `.pf-c-search-input__menu-list` | Gives the menu list an accessible label. **Required when using autocomplete** |
+| `disabled` | `.pf-c-search-input__text-input.pf-m-hint` | Disables the hint text input from being submitted with the search input. **Required when using hint text** |
+| `aria-hidden="true"` | `.pf-c-search-input__text-input.pf-m-hint` | Hides the hint text input from assistive technology. **Required when using hint text** |
 
 ### Usage
 
-| Class                                | Applied to                       | Outcome                                                                                   |
-| ------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------- |
-| `.pf-c-search-input`                 | `<div>`                          | Initiates the custom search input component. **Required**                                 |
-| `.pf-c-search-input__bar`            | `<div>`                          | Initiates the custom search input bar. **Required**                                       |
-| `.pf-c-search-input__text`           | `<span>`                         | Initiates the text area. **Required**                                                     |
-| `.pf-c-search-input__text-input`     | `<input>`                        | Initiates the search input. **Required**                                                  |
-| `.pf-c-search-input__icon`           | `<span>`                         | Initiates the search icon container. **Required**                                         |
-| `.pf-c-search-input__utilities`      | `<span>`                         | Initiates the utilities area beside the search input.                                     |
-| `.pf-c-search-input__count`          | `<span>`                         | Initiates the item count container.                                                       |
-| `.pf-c-search-input__nav`            | `<span>`                         | Initiates the navigable buttons container.                                                |
-| `.pf-c-search-input__clear`          | `<span>`                         | Initiates the clear button container. **Required when there is text in the search input** |
-| `.pf-c-search-input__menu`           | `<div>`                          | Initiates the search input dropdown menu.                                                 |
-| `.pf-c-search-input__menu-body`      | `<div>`                          | Initiates the search input dropdown menu body element.                                    |
-| `.pf-c-search-input__menu-list`      | `<div>`                          | Initiates the search input dropdown menu list.                                            |
-| `.pf-c-search-input__menu-list-item` | `<div>`                          | Initiates the search input dropdown menu list item.                                       |
-| `.pf-c-search-input__menu-item`      | `<div>`                          | Initiates the search input dropdown menu item.                                            |
-| `.pf-c-search-input__menu-item-text` | `<span>`                         | Initiates the search input dropdown menu item text.                                       |
-| `.pf-m-top`                          | `.pf-c-search-input__menu`       | Modifies the menu to display above the toggle.                                            |
-| `.pf-m-static`                       | `.pf-c-search-input__menu`       | Modifies the menu to be statically positioned to support custom positioning.              |
-| `.pf-m-hint`                         | `.pf-c-search-input__text-input` | Modifies the text input for hint text styles.                                             |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-search-input` | `<div>` | Initiates the custom search input component. **Required** |
+| `.pf-c-search-input__bar` | `<div>` | Initiates the custom search input bar. **Required** |
+| `.pf-c-search-input__text` | `<span>` | Initiates the text area. **Required** |
+| `.pf-c-search-input__text-input` | `<input>` | Initiates the search input. **Required** |
+| `.pf-c-search-input__icon` | `<span>` | Initiates the search icon container. **Required** |
+| `.pf-c-search-input__utilities` | `<span>` | Initiates the utilities area beside the search input. |
+| `.pf-c-search-input__count` | `<span>` | Initiates the item count container. |
+| `.pf-c-search-input__nav` | `<span>` | Initiates the navigable buttons container. |
+| `.pf-c-search-input__clear` | `<span>` | Initiates the clear button container. **Required when there is text in the search input** |
+| `.pf-c-search-input__menu` | `<div>` | Initiates the search input dropdown menu. |
+| `.pf-c-search-input__menu-body` | `<div>` | Initiates the search input dropdown menu body element. |
+| `.pf-c-search-input__menu-list` | `<div>` | Initiates the search input dropdown menu list. |
+| `.pf-c-search-input__menu-list-item` | `<div>` | Initiates the search input dropdown menu list item. |
+| `.pf-c-search-input__menu-item` | `<div>` | Initiates the search input dropdown menu item. |
+| `.pf-c-search-input__menu-item-text` | `<span>` | Initiates the search input dropdown menu item text. |
+| `.pf-m-top` | `.pf-c-search-input__menu` | Modifies the menu to display above the toggle. |
+| `.pf-m-static` | `.pf-c-search-input__menu` | Modifies the menu to be statically positioned to support custom positioning. |
+| `.pf-m-hint` | `.pf-c-search-input__text-input` | Modifies the text input for hint text styles. |