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

package/docs/components/Toolbar/examples/Toolbar.md

@@ -10,28 +10,32 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
 
 ### Default spacing for items and groups:
 
-| Class                  | CSS Variable                    | Computed Value |
-| ---------------------- | ------------------------------- | -------------- |
-| `.pf-c-toolbar__item`  | `--pf-c-toolbar__item--spacer`  | `16px`         |
-| `.pf-c-toolbar__group` | `--pf-c-toolbar__group--spacer` | `16px`         |
+| Class | CSS Variable | Computed Value |
+| -- | -- | -- |
+| `.pf-c-toolbar__item` | `--pf-c-toolbar__item--spacer` | `16px` |
+| `.pf-c-toolbar__group` | `--pf-c-toolbar__group--spacer` | `16px` |
 
 ### Toolbar item types
 
-| Class                 | Applied to            | Outcome                                                                                                      |
-| --------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `.pf-m-bulk-select`   | `.pf-c-toolbar__item` | Initiates bulk select spacing. Spacer value is set to `var(--pf-c-toolbar--m-bulk-select--spacer)`.          |
-| `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-c-toolbar--m-overflow-menu--spacer)`.      |
-| `.pf-m-pagination`    | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. Spacer value is set to `var(--pf-c-toolbar--m-pagination--spacer)`. |
-| `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-c-toolbar--m-search-filter--spacer)`.      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. Spacer value is set to `var(--pf-c-toolbar--m-bulk-select--spacer)`. |
+| `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. Spacer value is set to `var(--pf-c-toolbar--m-overflow-menu--spacer)`. |
+| `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. Spacer value is set to `var(--pf-c-toolbar--m-pagination--spacer)`. |
+| `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. Spacer value is set to `var(--pf-c-toolbar--m-search-filter--spacer)`. |
 
 ### Modifiers
 
-| Class                                 | Applied to          | Outcome                                                                                                                                               |
-| ------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-m-hidden{-on-[breakpoint]}`      | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).   |
-| `.pf-m-visible{-on-[breakpoint]}`     | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).    |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-align-left{-on-[breakpoint]}`  | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
+| `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
+| `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
+| `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
 
 ### Special notes
 
@@ -68,10 +72,10 @@ Several components in the following examples do not include functional and/or ac
 
 ### Item types
 
-| Class                  | Applied to | Outcome                                            |
-| ---------------------- | ---------- | -------------------------------------------------- |
-| `.pf-c-toolbar__item`  | `<div>`    | Initiates the toolbar component item. **Required** |
-| `.pf-c-toolbar__group` | `<div>`    | Initiates the toolbar component group.             |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
+| `.pf-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
 
 ### Spacers
 
@@ -164,12 +168,12 @@ In some instances, it may be necessary to adjust spacing explicitly where items
 
 ### Toolbar spacers and insets
 
-| Class                                                       | Applied to                                    | Outcome                                                                                                                                                                                         |
-| ----------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-m-page-insets`                                         | `.pf-c-toolbar`                               | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-global--spacer--md` to `--pf-global--spacer--lg` at the `xl` breakpoint. |
-| `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}`         | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                             |
-| `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}`    | `.pf-c-toolbar__group`                        | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                               |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar`                               | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-page-insets` | `.pf-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-global--spacer--md` to `--pf-global--spacer--lg` at the `xl` breakpoint. |
+| `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 
 ### Width control
 
@@ -195,10 +199,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
 
 ### Width control usage
 
-| Class                                                       | Applied to            | Outcome                                                                                                                                                     |
-| ----------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}`    | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).     |
-| `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` |  Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` |  Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 
 ### Group types
 
@@ -433,11 +437,11 @@ In some instances, it may be necessary to adjust spacing explicitly where items
 
 ### Toolbar group types
 
-| Class                     | Applied to             | Outcome                                                                                                                                                                                                   |
-| ------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-m-filter-group`      | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--space-items)`.      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-filter-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-filter-group--space-items)`. |
 | `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-icon-button-group--space-items)`. |
-| `.pf-m-button-group`      | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-button-group--space-items)`.      |
+| `.pf-m-button-group` | `.pf-c-toolbar__group` | Modifies toolbar group spacing. Spacer value is set to `var(--pf-c-toolbar__group--m-toggle-group--spacer)`. Child spacer value is set to `var(--pf-c-toolbar__group--m-button-group--space-items)`. |
 
 ### Toggle group
 
@@ -489,7 +493,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
                 role="listbox"
                 aria-labelledby="toolbar-toggle-group-example-select-name-label"
                 hidden
-                style="width: 175px"
               >
                 <li role="presentation">
                   <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -520,7 +523,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
                 </li>
               </ul>
             </div>
-            <div class="pf-c-text-input-group">
+            <div class="pf-c-text-input-group" style="width: auto">
               <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">
@@ -528,9 +531,9 @@ In some instances, it may be necessary to adjust spacing explicitly where items
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Filter by name"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -810,7 +813,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
               role="listbox"
               aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
               hidden
-              style="width: 175px"
             >
               <li role="presentation">
                 <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -841,7 +843,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
               </li>
             </ul>
           </div>
-          <div class="pf-c-text-input-group">
+          <div class="pf-c-text-input-group" style="width: auto">
             <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">
@@ -849,9 +851,9 @@ In some instances, it may be necessary to adjust spacing explicitly where items
                 </span>
                 <input
                   class="pf-c-text-input-group__text-input"
-                  type="text"
-                  value
+                  type="search"
                   placeholder="Filter by name"
+                  value
                   aria-label="Type to filter"
                 />
               </span>
@@ -1075,27 +1077,27 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
 
 ### Accessibility
 
-| Attribute                                    | Applied to                                                                                                  | Outcome                                                                       |
-| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `hidden`                                     | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toggle group element is hidden. **Required**               |
-| `aria-expanded="true"`                       | `.pf-c-toolbar__toggle > .pf-c-button`                                                                      | Indicates that the expandable content is visible. **Required**                |
-| `aria-expanded="false"`                      | `.pf-c-toolbar__toggle > .pf-c-button`                                                                      | Indicates the the expandable content is hidden. **Required**                  |
-| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button`                                                                      | Identifies the expanded content controlled by the toggle button. **Required** |
-| `id="[expandable-content_id]"`               | `.pf-c-toolbar__expandable-content`                                                                         | Provides a reference for toggle button description. **Required**              |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `hidden` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` |  Indicates that the toggle group element is hidden. **Required** |
+| `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` |  Indicates that the expandable content is visible. **Required** |
+| `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` |  Indicates the the expandable content is hidden. **Required** |
+| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` |  Identifies the expanded content controlled by the toggle button. **Required** |
+| `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
 
 ### Responsive attributes
 
-| Attribute              | Applied to                             | Outcome                                                                                                                                                          |
-| ---------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
 | `aria-haspopup="true"` | `.pf-c-toolbar__toggle > .pf-c-button` | When expandable content appears above content (mobile viewport), `aria-haspopup="true"` should be applied to indicate that focus should be trapped. **Required** |
 
 ### Usage
 
-| Class                          | Applied to                                                                    | Outcome                                                                                                                                                                                                                             |
-| ------------------------------ | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
-| `.pf-m-chip-container`         | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group`                      | Modifies the toolbar element for applied filters layout.                                                                                                                                                                            |
-| `.pf-m-expanded`               | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle`                  | Modifies the component for the expanded state.                                                                                                                                                                                      |
+| `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
+| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
 
 ### Selected
 
@@ -1115,11 +1117,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               class="pf-c-dropdown__toggle-check"
               for="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
             >
-              <input
-                type="checkbox"
-                id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
-                aria-label="Select all"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  id="toolbar-selected-filters-toggle-group-collapsed-example-bulk-select-toggle-check"
+                  aria-label="Select all"
+                />
+              </div>
             </label>
 
             <button
@@ -1192,7 +1197,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                 role="listbox"
                 aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
                 hidden
-                style="width: 175px"
               >
                 <li role="presentation">
                   <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1223,7 +1227,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                 </li>
               </ul>
             </div>
-            <div class="pf-c-text-input-group">
+            <div class="pf-c-text-input-group" style="width: auto">
               <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">
@@ -1231,9 +1235,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Filter by name"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -1656,11 +1660,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               class="pf-c-dropdown__toggle-check"
               for="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
             >
-              <input
-                type="checkbox"
-                id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
-                aria-label="Select all"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  id="toolbar-selected-filters-toggle-group-expanded-example-bulk-select-toggle-check"
+                  aria-label="Select all"
+                />
+              </div>
             </label>
 
             <button
@@ -1774,7 +1781,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               role="listbox"
               aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
               hidden
-              style="width: 175px"
             >
               <li role="presentation">
                 <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1805,7 +1811,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               </li>
             </ul>
           </div>
-          <div class="pf-c-text-input-group">
+          <div class="pf-c-text-input-group" style="width: auto">
             <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">
@@ -1813,9 +1819,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                 </span>
                 <input
                   class="pf-c-text-input-group__text-input"
-                  type="text"
-                  value
+                  type="search"
                   placeholder="Filter by name"
+                  value
                   aria-label="Type to filter"
                 />
               </span>
@@ -2192,11 +2198,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               class="pf-c-dropdown__toggle-check"
               for="toolbar-selected-filters-example-bulk-select-toggle-check"
             >
-              <input
-                type="checkbox"
-                id="toolbar-selected-filters-example-bulk-select-toggle-check"
-                aria-label="Select all"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  id="toolbar-selected-filters-example-bulk-select-toggle-check"
+                  aria-label="Select all"
+                />
+              </div>
             </label>
 
             <button
@@ -3104,11 +3113,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               class="pf-c-dropdown__toggle-check"
               for="toolbar-stacked-example-bulk-select-toggle-check"
             >
-              <input
-                type="checkbox"
-                id="toolbar-stacked-example-bulk-select-toggle-check"
-                aria-label="Select all"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  id="toolbar-stacked-example-bulk-select-toggle-check"
+                  aria-label="Select all"
+                />
+              </div>
             </label>
 
             <button
@@ -3617,11 +3629,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               class="pf-c-dropdown__toggle-check"
               for="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
             >
-              <input
-                type="checkbox"
-                id="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
-                aria-label="Select all"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  id="toolbar-stacked-collapsed-example-bulk-select-toggle-check"
+                  aria-label="Select all"
+                />
+              </div>
             </label>
 
             <button
@@ -3765,11 +3780,14 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               class="pf-c-dropdown__toggle-check"
               for="toolbar-expanded-elements-example-bulk-select-toggle-check"
             >
-              <input
-                type="checkbox"
-                id="toolbar-expanded-elements-example-bulk-select-toggle-check"
-                aria-label="Select all"
-              />
+              <div class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  id="toolbar-expanded-elements-example-bulk-select-toggle-check"
+                  aria-label="Select all"
+                />
+              </div>
             </label>
 
             <button
@@ -3842,7 +3860,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                 role="listbox"
                 aria-labelledby="toolbar-expanded-elements-example-select-name-label"
                 hidden
-                style="width: 175px"
               >
                 <li role="presentation">
                   <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -3873,7 +3890,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                 </li>
               </ul>
             </div>
-            <div class="pf-c-text-input-group">
+            <div class="pf-c-text-input-group" style="width: auto">
               <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">
@@ -3881,9 +3898,9 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                   </span>
                   <input
                     class="pf-c-text-input-group__text-input"
-                    type="text"
-                    value
+                    type="search"
                     placeholder="Filter by name"
+                    value
                     aria-label="Type to filter"
                   />
                 </span>
@@ -4193,61 +4210,65 @@ As the toolbar component is a hybrid layout and component, some of its elements
 
 ### Usage
 
-| Class                                 | Applied to                                                                                                | Outcome                                                                                                                                                                                                                                     |
-| ------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-toolbar`                       | `<div>`                                                                                                   | Initiates the toolbar component. **Required**                                                                                                                                                                                               |
-| `.pf-c-toolbar__item`                 | `<div>`                                                                                                   | Initiates a toolbar item. **Required**                                                                                                                                                                                                      |
-| `.pf-c-toolbar__group`                | `<div>`                                                                                                   | Initiates a toolbar group.                                                                                                                                                                                                                  |
-| `.pf-c-toolbar__content`              | `<div>`                                                                                                   | Initiates a toolbar content container. **Required**                                                                                                                                                                                         |
-| `.pf-c-toolbar__content-section`      | `<div>`                                                                                                   | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-c-toolbar__content-section` per `.pf-c-toolbar__content` **Required** |
-| `.pf-c-toolbar__expandable-content`   | `<div>`                                                                                                   | Initiates a toolbar expandable content section.                                                                                                                                                                                             |
-| `.pf-m-sticky`                        | `.pf-c-toolbar`                                                                                           | Modifies toolbar component to be sticky to the top of its container.                                                                                                                                                                        |
-| `.pf-m-full-height`                   | `.pf-c-toolbar`                                                                                           | Modifies toolbar component to full height of its container and removes vertical padding.                                                                                                                                                    |
-| `.pf-m-static`                        | `.pf-c-toolbar`                                                                                           | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar.                                                           |
-| `.pf-m-expanded`                      | `.pf-c-toolbar__expandable-content`                                                                       | Modifies expandable content section for the expanded state.                                                                                                                                                                                 |
-| `.pf-m-bulk-select`                   | `.pf-c-toolbar__item`                                                                                     | Initiates bulk select spacing.                                                                                                                                                                                                              |
-| `.pf-m-overflow-menu`                 | `.pf-c-toolbar__item`                                                                                     | Initiates overflow menu spacing.                                                                                                                                                                                                            |
-| `.pf-m-pagination`                    | `.pf-c-toolbar__item`                                                                                     | Initiates pagination spacing and margin.                                                                                                                                                                                                    |
-| `.pf-m-search-filter`                 | `.pf-c-toolbar__item`                                                                                     | Initiates search filter spacing.                                                                                                                                                                                                            |
-| `.pf-m-chip-group`                    | `.pf-c-toolbar__item`                                                                                     | Initiates chip group spacing.                                                                                                                                                                                                               |
-| `.pf-m-expand-all`                    | `.pf-c-toolbar__item`                                                                                     | Initiates an item for an expand all button.                                                                                                                                                                                                 |
-| `.pf-m-expanded`                      | `.pf-c-toolbar__item.pf-m-expand-all`                                                                     | Modifies an expand all button for the expanded state.                                                                                                                                                                                       |
-| `.pf-m-button-group`                  | `.pf-c-toolbar__group`                                                                                    | Initiates button group spacing.                                                                                                                                                                                                             |
-| `.pf-m-icon-button-group`             | `.pf-c-toolbar__group`                                                                                    | Initiates icon button group spacing.                                                                                                                                                                                                        |
-| `.pf-m-filter-group`                  | `.pf-c-toolbar__group`                                                                                    | Initiates filter group spacing.                                                                                                                                                                                                             |
-| `.pf-m-hidden{-on-[breakpoint]}`      | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                         |
-| `.pf-m-visible{-on-[breakpoint]}`     | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                          |
-| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *`                                                                                       | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                       |
-| `.pf-m-align-left{-on-[breakpoint]}`  | `.pf-c-toolbar > *`                                                                                       | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                        |
-| `.pf-m-label`                         | `.pf-c-toolbar__item`                                                                                     | Modifies toolbar item to label.                                                                                                                                                                                                             |
-| `.pf-m-chip-container`                | `.pf-c-toolbar__content`, `.pf-c-toolbar__group`                                                          | Modifies the toolbar element for applied filters layout.                                                                                                                                                                                    |
-| `.pf-m-overflow-container`            | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`                                                             | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation.                                                                                                                               |
-| `.pf-m-expanded`                      | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle`                                              | Modifies the component for the expanded state.                                                                                                                                                                                              |
-| `.pf-m-wrap`                          | `.pf-c-toolbar`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group`                                 | Modifies the toolbar element to wrap.                                                                                                                                                                                                       |
-| `.pf-m-nowrap`                        | `.pf-c-toolbar`, `.pf-c-toolbar__group`                                                                   | Modifies the toolbar element to nowrap.                                                                                                                                                                                                     |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-toolbar` | `<div>` | Initiates the toolbar component. **Required** |
+| `.pf-c-toolbar__item` | `<div>` | Initiates a toolbar item. **Required** |
+| `.pf-c-toolbar__group` | `<div>` | Initiates a toolbar group. |
+| `.pf-c-toolbar__content` | `<div>` | Initiates a toolbar content container. **Required** |
+| `.pf-c-toolbar__content-section` | `<div>` | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-c-toolbar__content-section` per `.pf-c-toolbar__content` **Required** |
+| `.pf-c-toolbar__expandable-content` | `<div>` | Initiates a toolbar expandable content section. |
+| `.pf-m-sticky` | `.pf-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
+| `.pf-m-full-height` | `.pf-c-toolbar` | Modifies toolbar component to full height of its container and removes vertical padding. |
+| `.pf-m-static` | `.pf-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
+| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
+| `.pf-m-bulk-select` | `.pf-c-toolbar__item` | Initiates bulk select spacing. |
+| `.pf-m-overflow-menu` | `.pf-c-toolbar__item` | Initiates overflow menu spacing. |
+| `.pf-m-pagination` | `.pf-c-toolbar__item` | Initiates pagination spacing and margin. |
+| `.pf-m-search-filter` | `.pf-c-toolbar__item` | Initiates search filter spacing. |
+| `.pf-m-chip-group` | `.pf-c-toolbar__item` | Initiates chip group spacing. |
+| `.pf-m-expand-all` | `.pf-c-toolbar__item` | Initiates an item for an expand all button. |
+| `.pf-m-expanded` | `.pf-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
+| `.pf-m-button-group` | `.pf-c-toolbar__group` | Initiates button group spacing. |
+| `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Initiates icon button group spacing. |
+| `.pf-m-filter-group` | `.pf-c-toolbar__group` | Initiates filter group spacing. |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
+| `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
+| `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
+| `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
+| `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
+| `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
+| `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
+| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
+| `.pf-m-wrap` | `.pf-c-toolbar`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element to wrap. |
+| `.pf-m-nowrap` | `.pf-c-toolbar`, `.pf-c-toolbar__group` | Modifies the toolbar element to nowrap. |
 
 ### Accessibility
 
-| Attribute                                    | Applied to                                                                                                  | Outcome                                                                       |
-| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `hidden`                                     | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` | Indicates that the toolbar element is hidden. **Required**                    |
-| `aria-expanded="true"`                       | `.pf-c-toolbar__toggle > .pf-c-button`                                                                      | Indicates that the expandable content is visible. **Required**                |
-| `aria-expanded="false"`                      | `.pf-c-toolbar__toggle > .pf-c-button`                                                                      | Indicates the the expandable content is hidden. **Required**                  |
-| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button`                                                                      | Identifies the expanded content controlled by the toggle button. **Required** |
-| `id="[expandable-content_id]"`               | `.pf-c-toolbar__expandable-content`                                                                         | Provides a reference for toggle button description. **Required**              |
-| `aria-label="Expand all"`                    | `.pf-c-toolbar__item.pf-m-expand-all`                                                                       | Provides an accessible label for the expand all item button. **Required**     |
-| `aria-label="Collapse all"`                  | `.pf-c-toolbar__item.pf-m-expand-all.pf-m-expanded`                                                         | Provides an accessible label for the expand all item button. **Required**     |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `hidden` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`, `.pf-c-toolbar__toggle`, `.pf-c-toolbar__expandable-content` |  Indicates that the toolbar element is hidden. **Required** |
+| `aria-expanded="true"` | `.pf-c-toolbar__toggle > .pf-c-button` |  Indicates that the expandable content is visible. **Required** |
+| `aria-expanded="false"` | `.pf-c-toolbar__toggle > .pf-c-button` |  Indicates the the expandable content is hidden. **Required** |
+| `aria-controls="[id of expandable content]"` | `.pf-c-toolbar__toggle > .pf-c-button` |  Identifies the expanded content controlled by the toggle button. **Required** |
+| `id="[expandable-content_id]"` | `.pf-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
+| `aria-label="Expand all"` | `.pf-c-toolbar__item.pf-m-expand-all` | Provides an accessible label for the expand all item button. **Required** |
+| `aria-label="Collapse all"` | `.pf-c-toolbar__item.pf-m-expand-all.pf-m-expanded` | Provides an accessible label for the expand all item button. **Required** |
 
 ### Toggle group usage
 
-| Class                          | Applied to                                                                    | Outcome                                                                                                                                                                                                                            |
-| ------------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-m-toggle-group`           | `.pf-c-toolbar__group`                                                        | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached.                                                       |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
 | `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
 
 ### Spacer system
 
-| Class                                                        | Applied to                                    | Outcome                                                                                                                                             |
-| ------------------------------------------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}`      | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`                        | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/Tooltip/examples/Tooltip.md

@@ -128,13 +128,13 @@ A tooltip is used to provide contextual information for another component on hov
 
 ### Usage
 
-| Class                       | Applied to               | Outcome                                                                                                                           |
-| --------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-tooltip`             | `<div>`                  | Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required** |
-| `.pf-c-tooltip__arrow`      | `<div>`                  | Creates an arrow pointing towards the element the tooltip describes. **Required**                                                 |
-| `.pf-c-tooltip__content`    | `<div>`                  | Creates the body of the tooltip. **Required**                                                                                     |
-| `.pf-m-left{-top/bottom}`   | `.pf-c-tooltip`          | Positions the tooltip to the left (or left top/left bottom) of the element.                                                       |
-| `.pf-m-right{-top/bottom}`  | `.pf-c-tooltip`          | Positions the tooltip to the right (or right top/right bottom) of the element.                                                    |
-| `.pf-m-top{-left/right}`    | `.pf-c-tooltip`          | Positions the tooltip to the top (or top left/top right) of the element.                                                          |
-| `.pf-m-bottom{-left/right}` | `.pf-c-tooltip`          | Positions the tooltip to the bottom (or bottom left/bottom right) of the element.                                                 |
-| `.pf-m-text-align-left`     | `.pf-c-tooltip__content` | Modifies tooltip content to text align left.                                                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-tooltip` | `<div>` |  Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required**|
+| `.pf-c-tooltip__arrow` | `<div>` |  Creates an arrow pointing towards the element the tooltip describes. **Required** |
+| `.pf-c-tooltip__content` | `<div>` |  Creates the body of the tooltip. **Required** |
+| `.pf-m-left{-top/bottom}` | `.pf-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
+| `.pf-m-right{-top/bottom}` | `.pf-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
+| `.pf-m-top{-left/right}` | `.pf-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
+| `.pf-m-bottom{-left/right}` | `.pf-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
+| `.pf-m-text-align-left` | `.pf-c-tooltip__content` | Modifies tooltip content to text align left. |