@patternfly/patternfly 5.0.0-alpha.13 → 5.0.0-alpha.18

package/docs/components/Tabs/examples/Tabs.md

@@ -96,10 +96,10 @@ cssPrefix: pf-c-tabs
 
 ### Default tabs usage
 
-| Class                 | Applied to          | Outcome                                                                     |
-| --------------------- | ------------------- | --------------------------------------------------------------------------- |
-| `.pf-m-disabled`      | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles.                                   |
-| `.pf-m-aria-disabled` | `.pf-c-tabs__link`  | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
+| `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
 
 ## Overflow
 
@@ -213,10 +213,10 @@ cssPrefix: pf-c-tabs
 
 ### Overflow beginning of list usage
 
-| Class                       | Applied to   | Outcome                                   |
-| --------------------------- | ------------ | ----------------------------------------- |
-| `.pf-m-scrollable`          | `.pf-c-tabs` | Enables the directional scroll buttons.   |
-| `.pf-c-tabs__scroll-button` | `<button>`   | Initiates a tabs component scroll button. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-scrollable` | `.pf-c-tabs` | Enables the directional scroll buttons. |
+| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
 
 ### Horizontal overflow example
 
@@ -1653,10 +1653,10 @@ cssPrefix: pf-c-tabs
 
 ### Insets usage
 
-| Class                                                                     | Applied to   | Outcome                                                                                           |
-| ------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------- |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
 | `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
-| `.pf-m-page-insets`                                                       | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements.             |
+| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
 
 ## Icons
 
@@ -2318,9 +2318,9 @@ cssPrefix: pf-c-tabs
 
 ### Filled usage
 
-| Class        | Applied to   | Outcome                                                     |
-| ------------ | ------------ | ----------------------------------------------------------- |
-| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. **Required** |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-fill`  | `.pf-c-tabs` | Modifies the tabs to fill the available space. **Required** |
 
 ## Tabs as navigation
 
@@ -7551,36 +7551,36 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
 
 ### Usage
 
-| Class                                                            | Applied to          | Outcome                                                                                                                                                                                                         |
-| ---------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-tabs`                                                     | `<nav>`, `<div>`    | Initiates the tabs component. **Required**                                                                                                                                                                      |
-| `.pf-c-tabs__list`                                               | `<ul>`              | Initiates a tabs component list. **Required**                                                                                                                                                                   |
-| `.pf-c-tabs__item`                                               | `<li>`              | Initiates a tabs component item. **Required**                                                                                                                                                                   |
-| `.pf-c-tabs__item-text`                                          | `<span>`            | Initiates a tabs component item icon. **Required**                                                                                                                                                              |
-| `.pf-c-tabs__item-icon`                                          | `<span>`            | Initiates a tabs component item text. **Required**                                                                                                                                                              |
-| `.pf-c-tabs__item-close`                                         | `<span>`            | Initiates a tabs component item close.                                                                                                                                                                          |
-| `.pf-c-tabs__item-close-icon`                                    | `<span>`            | Initiates a tabs component item close icon.                                                                                                                                                                     |
-| `.pf-c-tabs__link`                                               | `<button>`, `<a>`   | Initiates a tabs component link. **Required**                                                                                                                                                                   |
-| `.pf-c-tabs__scroll-button`                                      | `<button>`          | Initiates a tabs component scroll button.                                                                                                                                                                       |
-| `.pf-c-tabs__add`                                                | `<span>`            | Initiates a tabs component add button.                                                                                                                                                                          |
-| `.pf-c-tabs__toggle`                                             | `<div>`             | Initiates a tabs expandable toggle.                                                                                                                                                                             |
-| `.pf-c-tabs__toggle-button`                                      | `<button>`          | Initiates a tabs expandable toggle button.                                                                                                                                                                      |
-| `.pf-c-tabs__toggle-icon`                                        | `<span>`            | Initiates a tabs expandable toggle icon.                                                                                                                                                                        |
-| `.pf-c-tabs__toggle-text`                                        | `<span>`            | Initiates a tabs expandable toggle text.                                                                                                                                                                        |
-| `.pf-m-secondary`                                                | `.pf-c-tabs`        | Applies secondary styling to the tab component.                                                                                                                                                                 |
-| `.pf-m-no-border-bottom`                                         | `.pf-c-tabs`        | Removes bottom border from a tab component.                                                                                                                                                                     |
-| `.pf-m-box`                                                      | `.pf-c-tabs`        | Applies box styling to the tab component.                                                                                                                                                                       |
-| `.pf-m-vertical`                                                 | `.pf-c-tabs`        | Applies vertical styling to the tab component.                                                                                                                                                                  |
-| `.pf-m-fill`                                                     | `.pf-c-tabs`        | Modifies the tabs to fill the available space.                                                                                                                                                                  |
-| `.pf-m-current`                                                  | `.pf-c-tabs__item`  | Indicates that a tab item is currently selected.                                                                                                                                                                |
-| `.pf-m-action`                                                   | `.pf-c-tabs__item`  | Indicates that a tab item contains actions other than the tab link.                                                                                                                                             |
-| `.pf-m-overflow`                                                 | `.pf-c-tabs__item`  | Applies overflow menu styling to a tab item.                                                                                                                                                                    |
-| `.pf-m-expanded`                                                 | `.pf-c-tabs__item`  | Applies expanded styling to the overflow menu tab item.                                                                                                                                                         |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs`        | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                   |
-| `.pf-m-page-insets`                                              | `.pf-c-tabs`        | Modifies the tabs component padding/inset to visually match padding of page elements.                                                                                                                           |
-| `.pf-m-color-scheme--light-300`                                  | `.pf-c-tabs`        | Modifies the tabs component tab background colors.                                                                                                                                                              |
-| `.pf-m-expandable{-on-[breakpoint]}`                             | `.pf-c-tabs`        | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
-| `.pf-m-non-expandable{-on-[breakpoint]}`                         | `.pf-c-tabs`        | Modifies the tabs component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                   |
-| `.pf-m-expanded`                                                 | `.pf-c-tabs`        | Modifies the expandable tabs component for the expanded state.                                                                                                                                                  |
-| `.pf-m-disabled`                                                 | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles.                                                                                                                                                                       |
-| `.pf-m-aria-disabled`                                            | `.pf-c-tabs__link`  | Modifies a tabs link for disabled styles, but is still hoverable/focusable.                                                                                                                                     |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required** |
+| `.pf-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required** |
+| `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required** |
+| `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required** |
+| `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required** |
+| `.pf-c-tabs__item-close` | `<span>` | Initiates a tabs component item close. |
+| `.pf-c-tabs__item-close-icon` | `<span>` | Initiates a tabs component item close icon. |
+| `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
+| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
+| `.pf-c-tabs__add` | `<span>` | Initiates a tabs component add button. |
+| `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
+| `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
+| `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
+| `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
+| `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component. |
+| `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component. |
+| `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component. |
+| `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component. |
+| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
+| `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
+| `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
+| `.pf-m-overflow` | `.pf-c-tabs__item` | Applies overflow menu styling to a tab item. |
+| `.pf-m-expanded` | `.pf-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
+| `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
+| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
+| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-expanded` | `.pf-c-tabs` | Modifies the expandable tabs component for the expanded state. |
+| `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
+| `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |

package/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -34,9 +34,9 @@ cssPrefix: pf-c-text-input-group
       <input
         class="pf-c-text-input-group__text-input"
         type="text"
-        value="Disabled"
         disabled
-        aria-label="Type to filter"
+        value="Disabled"
+        aria-label="Disabled text input group example input"
       />
     </span>
   </div>
@@ -530,9 +530,9 @@ cssPrefix: pf-c-text-input-group
       </span>
       <input
         class="pf-c-text-input-group__text-input"
-        type="text"
-        value
+        type="search"
         placeholder="Find by name"
+        value
         aria-label="Type to filter"
       />
     </span>
@@ -552,9 +552,9 @@ cssPrefix: pf-c-text-input-group
       </span>
       <input
         class="pf-c-text-input-group__text-input"
-        type="text"
-        value="Joh"
+        type="search"
         placeholder="Find by name"
+        value="Joh"
         aria-label="Type to filter"
       />
     </span>
@@ -583,9 +583,9 @@ cssPrefix: pf-c-text-input-group
       </span>
       <input
         class="pf-c-text-input-group__text-input"
-        type="text"
-        value="John Doe"
+        type="search"
         placeholder="Find by name"
+        value="John Doe"
         aria-label="Type to filter"
       />
     </span>
@@ -615,9 +615,9 @@ cssPrefix: pf-c-text-input-group
       </span>
       <input
         class="pf-c-text-input-group__text-input"
-        type="text"
-        value="John Doe"
+        type="search"
         placeholder="Find by name"
+        value="John Doe"
         aria-label="Type to filter"
       />
     </span>
@@ -659,9 +659,9 @@ cssPrefix: pf-c-text-input-group
         </span>
         <input
           class="pf-c-text-input-group__text-input"
-          type="text"
-          value
+          type="search"
           placeholder="Search"
+          value
           aria-label="Type to filter"
         />
       </span>
@@ -686,9 +686,9 @@ cssPrefix: pf-c-text-input-group
         </span>
         <input
           class="pf-c-text-input-group__text-input"
-          type="text"
-          value
+          type="search"
           placeholder="Find by name"
+          value
           aria-label="Type to filter"
         />
       </span>
@@ -713,7 +713,7 @@ cssPrefix: pf-c-text-input-group
         </span>
         <input
           class="pf-c-text-input-group__text-input"
-          type="text"
+          type="search"
           value="username:root firstname:ned"
           aria-label="Type to filter"
         />
@@ -756,7 +756,7 @@ cssPrefix: pf-c-text-input-group
         </span>
         <input
           class="pf-c-text-input-group__text-input"
-          type="text"
+          type="search"
           value="username:root firstname:ned"
           aria-label="Type to filter"
         />
@@ -879,7 +879,7 @@ cssPrefix: pf-c-text-input-group
       </span>
       <input
         class="pf-c-text-input-group__text-input"
-        type="text"
+        type="search"
         value="app"
         aria-label="Type to filter"
       />
@@ -944,7 +944,7 @@ cssPrefix: pf-c-text-input-group
       </span>
       <input
         class="pf-c-text-input-group__text-input pf-m-hint"
-        type="text"
+        type="search"
         value="appleseed"
         disabled
         aria-hidden="true"
@@ -991,7 +991,7 @@ cssPrefix: pf-c-text-input-group
           </span>
           <input
             class="pf-c-text-input-group__text-input"
-            type="text"
+            type="search"
             value="username:root firstname:n"
             aria-label="Type to filter"
           />

package/docs/components/Tile/examples/Tile.md

@@ -872,21 +872,21 @@ cssPrefix: pf-c-tile
 
 ### Accessibility
 
-| Attribute       | Applied to   | Outcome                                                                               |
-| --------------- | ------------ | ------------------------------------------------------------------------------------- |
-| `tabindex="0"`  | `.pf-c-tile` | Inserts the tile into the tab order of the page so that it is focusable. **Required** |
-| `tabindex="-1"` | `.pf-c-tile` | Removes the tile from keyboard focus when it is disabled.                             |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `tabindex="0"` | `.pf-c-tile` | Inserts the tile into the tab order of the page so that it is focusable. **Required** |
+| `tabindex="-1"` | `.pf-c-tile` | Removes the tile from keyboard focus when it is disabled. |
 
 ### Usage
 
-| Class                | Applied to           | Outcome                                            |
-| -------------------- | -------------------- | -------------------------------------------------- |
-| `.pf-c-tile`         | `<div>`              | Initiates a tile. **Required**                     |
-| `.pf-c-tile__header` | `<div>`              | Initiates the tile header.                         |
-| `.pf-c-tile__title`  | `<div>`              | Initiates the tile title.                          |
-| `.pf-c-tile__icon`   | `<div>`              | Initiates the tile icon or image.                  |
-| `.pf-c-tile__body`   | `<div>`              | Initiates the tile body.                           |
-| `.pf-m-selected`     | `.pf-c-tile`         | Modifies the tile for the selected state.          |
-| `.pf-m-disabled`     | `.pf-c-tile`         | Modifies the tile for the disabled state.          |
-| `.pf-m-stacked`      | `.pf-c-tile__header` | Modifies the tile header to be stacked vertically. |
-| `.pf-m-display-lg`   | `.pf-c-tile`         | Modifies the tile to have large display styling.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-tile` | `<div>` | Initiates a tile. **Required**  |
+| `.pf-c-tile__header` | `<div>` | Initiates the tile header. |
+| `.pf-c-tile__title` | `<div>` | Initiates the tile title. |
+| `.pf-c-tile__icon` | `<div>` | Initiates the tile icon or image. |
+| `.pf-c-tile__body` | `<div>` | Initiates the tile body. |
+| `.pf-m-selected` | `.pf-c-tile` | Modifies the tile for the selected state. |
+| `.pf-m-disabled` | `.pf-c-tile` | Modifies the tile for the disabled state. |
+| `.pf-m-stacked` | `.pf-c-tile__header` | Modifies the tile header to be stacked vertically. |
+| `.pf-m-display-lg` | `.pf-c-tile` | Modifies the tile to have large display styling. |

package/docs/components/Timestamp/examples/Timestamp.md

@@ -55,8 +55,8 @@ cssPrefix: pf-c-timestamp
 
 ### Usage
 
-| Class                   | Applied to        | Outcome                                                |
-| ----------------------- | ----------------- | ------------------------------------------------------ |
-| `.pf-c-timestamp`       | `<span>`          | Creates a timestamp. **Required**                      |
-| `.pf-c-timestamp__text` | `<time>`          | Creates the visual text of the timestamp. **Required** |
-| `.pf-m-help-text`       | `.pf-c-timestamp` | Modifies styling for a timestamp that has help text.   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-timestamp` | `<span>` | Creates a timestamp. **Required** |
+| `.pf-c-timestamp__text` | `<time>` | Creates the visual text of the timestamp. **Required** |
+| `.pf-m-help-text`| `.pf-c-timestamp` | Modifies styling for a timestamp that has help text. |

package/docs/components/Title/examples/Title.md

@@ -24,23 +24,23 @@ The title component styles font-size, font-weight, and line-height to titles.
 
 The content component defines margin on headers. To regain the same spacing use, spacer utility classes:
 
-| Title | Margin top    | Margin bottom |
-| ----- | ------------- | ------------- |
-| 4xl   | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
-| 3xl   | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
-| 2xl   | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
-| xl    | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
-| lg    | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
-| md    | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
+| Title | Margin top | Margin bottom |
+| -- | -- | -- |
+| 4xl | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
+| 3xl | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
+| 2xl | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
+| xl | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
+| lg | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
+| md | `.pf-u-mt-lg` | `.pf-u-mb-sm` |
 
 ### Usage
 
-| Class         | Applied       | Outcome                                                 |
-| ------------- | ------------- | ------------------------------------------------------- |
-| `.pf-c-title` | `*`           | Initiates a title. Always use it with a modifier class. |
-| `.pf-m-4xl`   | `.pf-c-title` | Modifies for 4xl size                                   |
-| `.pf-m-3xl`   | `.pf-c-title` | Modifies for 3xl size                                   |
-| `.pf-m-2xl`   | `.pf-c-title` | Modifies for 2xl size                                   |
-| `.pf-m-xl`    | `.pf-c-title` | Modifies for xl size                                    |
-| `.pf-m-lg`    | `.pf-c-title` | Modifies for lg size                                    |
-| `.pf-m-md`    | `.pf-c-title` | Modifies for md size                                    |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-title` | `*` |  Initiates a title. Always use it with a modifier class. |
+| `.pf-m-4xl` | `.pf-c-title` | Modifies for 4xl size |
+| `.pf-m-3xl` | `.pf-c-title` | Modifies for 3xl size |
+| `.pf-m-2xl` | `.pf-c-title` | Modifies for 2xl size |
+| `.pf-m-xl` | `.pf-c-title` | Modifies for xl size |
+| `.pf-m-lg` | `.pf-c-title` | Modifies for lg size |
+| `.pf-m-md` | `.pf-c-title` | Modifies for md size |

package/docs/components/ToggleGroup/examples/toggle-group.md

@@ -319,19 +319,19 @@ cssPrefix: pf-c-toggle-group
 
 ### Accessibility
 
-| Attribute                          | Applied to                   | Outcome                                                                                                                                  |
-| ---------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `aria-label="[button label text]"` | `.pf-c-toggle-group__button` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text**  |
-| `disabled`                         | `.pf-c-toggle-group__button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-label="[button label text]"` | `.pf-c-toggle-group__button` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
+| `disabled` | `.pf-c-toggle-group__button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |
 
 ### Usage
 
-| Class                        | Applied to                   | Outcome                                                         |
-| ---------------------------- | ---------------------------- | --------------------------------------------------------------- |
-| `.pf-c-toggle-group`         | `<div>`                      | Initiates the toggle group. **Required**                        |
-| `.pf-c-toggle-group__button` | `<button>`                   | Initiates the toggle group button. **Required**                 |
-| `.pf-c-toggle-group__item`   | `<div>`                      | Initiates the toggle group item wrapper. **Required**           |
-| `.pf-c-toggle-group__text`   | `<span>`                     | Initiates the toggle button text element.                       |
-| `.pf-c-toggle-group__icon`   | `<span>`                     | Initiates the toggle button icon element.                       |
-| `.pf-m-compact`              | `.pf-c-toggle-group`         | Modifies the toggle group for compact styles.                   |
-| `.pf-m-selected`             | `.pf-c-toggle-group__button` | Modifies the toggle button group button for the selected state. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-toggle-group` | `<div>` | Initiates the toggle group. **Required** |
+| `.pf-c-toggle-group__button` | `<button>` | Initiates the toggle group button. **Required** |
+| `.pf-c-toggle-group__item` | `<div>` | Initiates the toggle group item wrapper. **Required** |
+| `.pf-c-toggle-group__text` | `<span>` | Initiates the toggle button text element. |
+| `.pf-c-toggle-group__icon` | `<span>` | Initiates the toggle button icon element. |
+| `.pf-m-compact` | `.pf-c-toggle-group` | Modifies the toggle group for compact styles. |
+| `.pf-m-selected` | `.pf-c-toggle-group__button` | Modifies the toggle button group button for the selected state. |