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

package/docs/components/Dropdown/examples/Dropdown.md

@@ -1,6 +1,7 @@
 ---
 id: Dropdown
 section: components
+subsection: menus
 cssPrefix: pf-c-dropdown
 ---import './Dropdown.css'
 
@@ -818,12 +819,15 @@ cssPrefix: pf-c-dropdown
       class="pf-c-dropdown__toggle-check"
       for="dropdown-split-button-disabled-toggle-check"
     >
-      <input
-        type="checkbox"
-        id="dropdown-split-button-disabled-toggle-check"
-        disabled
-        aria-label="Select all"
-      />
+      <div class="pf-c-check pf-m-standalone">
+        <input
+          class="pf-c-check__input"
+          type="checkbox"
+          disabled
+          id="dropdown-split-button-disabled-toggle-check"
+          aria-label="Select all"
+        />
+      </div>
     </label>
 
     <button
@@ -859,11 +863,14 @@ cssPrefix: pf-c-dropdown
       class="pf-c-dropdown__toggle-check"
       for="dropdown-split-button-toggle-check"
     >
-      <input
-        type="checkbox"
-        id="dropdown-split-button-toggle-check"
-        aria-label="Select all"
-      />
+      <div class="pf-c-check pf-m-standalone">
+        <input
+          class="pf-c-check__input"
+          type="checkbox"
+          id="dropdown-split-button-toggle-check"
+          aria-label="Select all"
+        />
+      </div>
     </label>
 
     <button
@@ -898,11 +905,14 @@ cssPrefix: pf-c-dropdown
       class="pf-c-dropdown__toggle-check"
       for="dropdown-split-button-expanded-toggle-check"
     >
-      <input
-        type="checkbox"
-        id="dropdown-split-button-expanded-toggle-check"
-        aria-label="Select all"
-      />
+      <div class="pf-c-check pf-m-standalone">
+        <input
+          class="pf-c-check__input"
+          type="checkbox"
+          id="dropdown-split-button-expanded-toggle-check"
+          aria-label="Select all"
+        />
+      </div>
     </label>
 
     <button
@@ -943,13 +953,16 @@ cssPrefix: pf-c-dropdown
       class="pf-c-dropdown__toggle-check"
       for="dropdown-split-button-text-toggle-check"
     >
-      <input
-        type="checkbox"
-        id="dropdown-split-button-text-toggle-check"
-        aria-label="Select all"
-        checked
-        aria-labelledby="dropdown-split-button-text-toggle-check dropdown-split-button-text-toggle-check-text"
-      />
+      <div class="pf-c-check pf-m-standalone">
+        <input
+          class="pf-c-check__input"
+          type="checkbox"
+          checked
+          id="dropdown-split-button-text-toggle-check"
+          aria-label="Select all"
+          aria-labelledby="dropdown-split-button-text-toggle-check dropdown-split-button-text-toggle-check-text"
+        />
+      </div>
       <span
         class="pf-c-dropdown__toggle-text"
         aria-hidden="true"
@@ -984,18 +997,21 @@ cssPrefix: pf-c-dropdown
 
 ### Split button (progress checkbox)
 
-```html isBeta
+```html
 <div class="pf-c-dropdown">
   <div class="pf-c-dropdown__toggle pf-m-split-button">
     <label
       class="pf-c-dropdown__toggle-check"
       for="dropdown-split-button-progress-toggle-check"
     >
-      <input
-        type="checkbox"
-        id="dropdown-split-button-progress-toggle-check"
-        aria-label="Select all"
-      />
+      <div class="pf-c-check pf-m-standalone">
+        <input
+          class="pf-c-check__input"
+          type="checkbox"
+          id="dropdown-split-button-progress-toggle-check"
+          aria-label="Select all"
+        />
+      </div>
       <span class="pf-c-dropdown__toggle-progress">
         <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
           <circle
@@ -1041,12 +1057,15 @@ cssPrefix: pf-c-dropdown
       class="pf-c-dropdown__toggle-check pf-m-in-progress"
       for="dropdown-split-button-in-progress-toggle-check"
     >
-      <input
-        type="checkbox"
-        id="dropdown-split-button-in-progress-toggle-check"
-        disabled
-        aria-label="Select all"
-      />
+      <div class="pf-c-check pf-m-standalone">
+        <input
+          class="pf-c-check__input"
+          type="checkbox"
+          disabled
+          id="dropdown-split-button-in-progress-toggle-check"
+          aria-label="Select all"
+        />
+      </div>
       <span class="pf-c-dropdown__toggle-progress">
         <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
           <circle
@@ -1092,13 +1111,16 @@ cssPrefix: pf-c-dropdown
       class="pf-c-dropdown__toggle-check"
       for="dropdown-split-button-progress-text-toggle-check"
     >
-      <input
-        type="checkbox"
-        id="dropdown-split-button-progress-text-toggle-check"
-        aria-label="Select all"
-        checked
-        aria-labelledby="dropdown-split-button-progress-text-toggle-check dropdown-split-button-progress-text-toggle-check-text"
-      />
+      <div class="pf-c-check pf-m-standalone">
+        <input
+          class="pf-c-check__input"
+          type="checkbox"
+          checked
+          id="dropdown-split-button-progress-text-toggle-check"
+          aria-label="Select all"
+          aria-labelledby="dropdown-split-button-progress-text-toggle-check dropdown-split-button-progress-text-toggle-check-text"
+        />
+      </div>
       <span class="pf-c-dropdown__toggle-progress">
         <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
           <circle
@@ -1145,14 +1167,17 @@ cssPrefix: pf-c-dropdown
       class="pf-c-dropdown__toggle-check pf-m-in-progress"
       for="dropdown-split-button-in-progress-text-toggle-check"
     >
-      <input
-        type="checkbox"
-        id="dropdown-split-button-in-progress-text-toggle-check"
-        disabled
-        aria-label="Select all"
-        checked
-        aria-labelledby="dropdown-split-button-in-progress-text-toggle-check dropdown-split-button-in-progress-text-toggle-check-text"
-      />
+      <div class="pf-c-check pf-m-standalone">
+        <input
+          class="pf-c-check__input"
+          type="checkbox"
+          checked
+          disabled
+          id="dropdown-split-button-in-progress-text-toggle-check"
+          aria-label="Select all"
+          aria-labelledby="dropdown-split-button-in-progress-text-toggle-check dropdown-split-button-in-progress-text-toggle-check-text"
+        />
+      </div>
       <span class="pf-c-dropdown__toggle-progress">
         <svg class="pf-c-spinner" role="progressbar" viewBox="0 0 100 100">
           <circle
@@ -2270,56 +2295,56 @@ The dropdown menu can contain either links or buttons, depending on the expected
 
 ### Accessibility
 
-| Attribute                                          | Applied                                                                                                            | Outcome                                                                                                                                    |
-| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| `aria-expanded="false"`                            | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button`                          | Indicates that the menu is hidden.                                                                                                         |
-| `aria-expanded="true"`                             | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button`                          | Indicates that the menu is visible.                                                                                                        |
-| `aria-label="Actions"`                             | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button`                          | Provides an accessible name for the dropdown when an icon is used instead of text. **Required when icon is used with no supporting text**. |
-| `aria-hidden="true"`                               | `.pf-c-dropdown__toggle-icon`, `<i>`, `.pf-c-dropdown__toggle-check .pf-c-dropdown__toggle-text`                   | Hides the icon from assistive technologies.                                                                                                |
-| `hidden`                                           | `.pf-c-dropdown__menu`                                                                                             | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies.                         |
-| `aria-labelledby="{toggle button id}"`             | `.pf-c-dropdown__menu`                                                                                             | Gives the menu an accessible name by referring to the element that toggles the menu.                                                       |
-| `aria-labelledby="{checkbox id} {toggle text id}"` | `.pf-m-split-button .pf-c-dropdown__toggle-check > input[type="checkbox"]`                                         | Gives the checkbox an accessible name by referring to the element by which it is described.                                                |
-| `disabled`                                         | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-button`, `.pf-c-dropdown__toggle-check > input[type="checkbox"]` | Disables the dropdown toggle and removes it from keyboard focus.                                                                           |
-| `disabled`                                         | `button.pf-c-dropdown__menu-item`                                                                                  | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.                             |
-| `aria-disabled="true"`                             | `a.pf-c-dropdown__menu-item`                                                                                       | When the menu item uses a link element, indicates that it is unavailable.                                                                  |
-| `tabindex="-1"`                                    | `a.pf-c-dropdown__menu-item`                                                                                       | When the menu item uses a link element, removes it from keyboard focus.                                                                    |
+| Attribute | Applied | Outcome |
+| -- | -- | -- |
+| `aria-expanded="false"` | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button` |  Indicates that the menu is hidden. |
+| `aria-expanded="true"` | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button` |  Indicates that the menu is visible. |
+| `aria-label="Actions"` | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-check`, `.pf-c-dropdown__toggle-button` | Provides an accessible name for the dropdown when an icon is used instead of text. **Required when icon is used with no supporting text**. |
+| `aria-hidden="true"` | `.pf-c-dropdown__toggle-icon`, `<i>`, `.pf-c-dropdown__toggle-check .pf-c-dropdown__toggle-text` | Hides the icon from assistive technologies. |
+| `hidden` | `.pf-c-dropdown__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `aria-labelledby="{toggle button id}"` | `.pf-c-dropdown__menu` | Gives the menu an accessible name by referring to the element that toggles the menu. |
+| `aria-labelledby="{checkbox id} {toggle text id}"` | `.pf-m-split-button .pf-c-dropdown__toggle-check > input[type="checkbox"]` | Gives the checkbox an accessible name by referring to the element by which it is described. |
+| `disabled` | `.pf-c-dropdown__toggle`, `.pf-c-dropdown__toggle-button`, `.pf-c-dropdown__toggle-check > input[type="checkbox"]` | Disables the dropdown toggle and removes it from keyboard focus. |
+| `disabled` | `button.pf-c-dropdown__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `aria-disabled="true"` | `a.pf-c-dropdown__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
+| `tabindex="-1"` | `a.pf-c-dropdown__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
 
 ### Usage
 
-| Class                                   | Applied                                    | Outcome                                                                                                                                                                                                                                                                                                |
-| --------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `.pf-c-dropdown`                        | `<div>`                                    | Defines the parent wrapper of the dropdown.                                                                                                                                                                                                                                                            |
-| `.pf-c-dropdown__toggle`                | `<button>`                                 | Defines the dropdown toggle.                                                                                                                                                                                                                                                                           |
-| `.pf-c-dropdown__toggle-icon`           | `<span>`                                   | Defines the dropdown toggle icon.                                                                                                                                                                                                                                                                      |
-| `.pf-c-dropdown__toggle-text`           | `<span>`                                   | Defines the dropdown toggle text. **Required when text is present, adds truncation**.                                                                                                                                                                                                                  |
-| `.pf-c-dropdown__toggle-check`          | `<label>`                                  | Defines a checkbox in the toggle area of a split button dropdown.                                                                                                                                                                                                                                      |
-| `.pf-c-dropdown__toggle-button`         | `<button>`                                 | Defines the toggle button for a split button dropdown.                                                                                                                                                                                                                                                 |
-| `.pf-c-dropdown__toggle-progress`       | `<span>`                                   | Defines the progress element to indicate a dropdown action is in progress.                                                                                                                                                                                                                             |
-| `.pf-c-dropdown__menu`                  | `<ul>`, `<div>`                            | Defines the parent wrapper of the menu items.                                                                                                                                                                                                                                                          |
-| `.pf-c-dropdown__menu-item`             | `<a>`                                      | Defines a menu item that navigates to another page.                                                                                                                                                                                                                                                    |
-| `.pf-c-dropdown__menu-item-icon`        | `<span>`                                   | Defines the wrapper for the menu item icon.                                                                                                                                                                                                                                                            |
-| `.pf-c-dropdown__menu-item-description` | `<div>`                                    | Defines the wrapper for the menu item description.                                                                                                                                                                                                                                                     |
-| `.pf-c-dropdown__menu-item-main`        | `<div>`                                    | Defines the wrapper for the menu item main element. Use when the description element is present.                                                                                                                                                                                                       |
-| `.pf-c-dropdown__toggle-image`          | `<span>`                                   | Defines the wrapper for the dropdown toggle button image.                                                                                                                                                                                                                                              |
-| `.pf-c-dropdown__menu-item`             | `<button>`                                 | Defines a menu item that performs an action on the current page.                                                                                                                                                                                                                                       |
-| `.pf-c-dropdown__group`                 | `<section>`                                | Defines a group of items in a dropdown. **Required when there is more than one group in a dropdown**.                                                                                                                                                                                                  |
-| `.pf-c-dropdown__group-title`           | `<h1>`                                     | Defines the title for a group of items in the dropdown menu.                                                                                                                                                                                                                                           |
-| `.pf-m-expanded`                        | `.pf-c-dropdown`                           | Modifies for the expanded state.                                                                                                                                                                                                                                                                       |
-| `.pf-m-top`                             | `.pf-c-dropdown`                           | Modifies to display the menu above the toggle.                                                                                                                                                                                                                                                         |
-| `.pf-m-align-left{-on-[breakpoint]}`    | `.pf-c-dropdown__menu`                     | Modifies to display the menu aligned to the left edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                       |
-| `.pf-m-align-right{-on-[breakpoint]}`   | `.pf-c-dropdown__menu`                     | Modifies to display the menu aligned to the right edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                                                      |
-| `.pf-m-static`                          | `.pf-c-dropdown__menu`                     | Modifies a dropdown menu to be statically positioned to support custom positioning.                                                                                                                                                                                                                    |
-| `.pf-m-split-button`                    | `.pf-c-dropdown__toggle`                   | Modifies the dropdown toggle area to allow for interactive elements.                                                                                                                                                                                                                                   |
-| `.pf-m-action`                          | `.pf-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown.                                                                                                                                                                                           |
-| `.pf-m-text`                            | `.pf-c-dropdown__menu-item`                | Modifies a menu item to be non-interactive text.                                                                                                                                                                                                                                                       |
-| `.pf-m-plain`                           | `.pf-c-dropdown__toggle`                   | Modifies to display the toggle with no border.                                                                                                                                                                                                                                                         |
-| `.pf-m-text`                            | `.pf-c-dropdown__toggle`                   | Modifies the dropdown toggle for the text variation.                                                                                                                                                                                                                                                   |
-| `.pf-m-primary`                         | `.pf-c-dropdown__toggle`                   | Modifies to display the toggle with primary styles.                                                                                                                                                                                                                                                    |
-| `.pf-m-secondary`                       | `.pf-c-dropdown__toggle`                   | Modifies to display the toggle with secondary styles.                                                                                                                                                                                                                                                  |
-| `.pf-m-full-height`                     | `.pf-c-dropdown`                           | Modifies a dropdown to full height of parent. See masthead for use.                                                                                                                                                                                                                                    |
-| `.pf-m-disabled`                        | `a.pf-c-dropdown__menu-item`               | Modifies to display the menu item as disabled. This applies to `a.pf-c-dropdown__menu-item` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__menu-item`.                                                                                                           |
-| `.pf-m-disabled`                        | `div.pf-c-dropdown__toggle`                | Modifies to display the dropdown toggle as disabled. This applies to `div.pf-c-dropdown__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-c-dropdown__toggle`. |
-| `.pf-m-icon`                            | `.pf-c-dropdown__menu-item`                | Modifies an item to support adding an icon.                                                                                                                                                                                                                                                            |
-| `.pf-m-active`                          | `.pf-c-dropdown__toggle`                   | Modifies the dropdown menu toggle for the active state.                                                                                                                                                                                                                                                |
-| `.pf-m-description`                     | `.pf-c-dropdown__menu-item`                | Modifies an item to support adding a description.                                                                                                                                                                                                                                                      |
-| `.pf-m-in-progress`                     | `.pf-c-dropdown__toggle-check`             | Modifies a toggle check element to indicate the check action is in progress.                                                                                                                                                                                                                           |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-dropdown` | `<div>` | Defines the parent wrapper of the dropdown. |
+| `.pf-c-dropdown__toggle` | `<button>` | Defines the dropdown toggle. |
+| `.pf-c-dropdown__toggle-icon` | `<span>` | Defines the dropdown toggle icon. |
+| `.pf-c-dropdown__toggle-text` | `<span>` | Defines the dropdown toggle text. **Required when text is present, adds truncation**. |
+| `.pf-c-dropdown__toggle-check` | `<label>` | Defines a checkbox in the toggle area of a split button dropdown. |
+| `.pf-c-dropdown__toggle-button` | `<button>` | Defines the toggle button for a split button dropdown. |
+| `.pf-c-dropdown__toggle-progress` | `<span>` | Defines the progress element to indicate a dropdown action is in progress. |
+| `.pf-c-dropdown__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. |
+| `.pf-c-dropdown__menu-item` | `<a>` | Defines a menu item that navigates to another page. |
+| `.pf-c-dropdown__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
+| `.pf-c-dropdown__menu-item-description` | `<div>` | Defines the wrapper for the menu item description. |
+| `.pf-c-dropdown__menu-item-main` | `<div>` | Defines the wrapper for the menu item main element. Use when the description element is present. |
+| `.pf-c-dropdown__toggle-image` | `<span>` | Defines the wrapper for the dropdown toggle button image. |
+| `.pf-c-dropdown__menu-item` | `<button>` | Defines a menu item that performs an action on the current page. |
+| `.pf-c-dropdown__group` | `<section>` | Defines a group of items in a dropdown. **Required when there is more than one group in a dropdown**. |
+| `.pf-c-dropdown__group-title` | `<h1>` | Defines the title for a group of items in the dropdown menu. |
+| `.pf-m-expanded` | `.pf-c-dropdown` | Modifies for the expanded state. |
+| `.pf-m-top` | `.pf-c-dropdown` | Modifies to display the menu above the toggle. |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-dropdown__menu` | Modifies to display the menu aligned to the left edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-dropdown__menu` | Modifies to display the menu aligned to the right edge of the toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-static` | `.pf-c-dropdown__menu` | Modifies a dropdown menu to be statically positioned to support custom positioning. |
+| `.pf-m-split-button` | `.pf-c-dropdown__toggle` | Modifies the dropdown toggle area to allow for interactive elements. |
+| `.pf-m-action` | `.pf-c-dropdown__toggle.pf-m-split-button` | Modifies the dropdown toggle for when an action is placed beside a toggle button in a split button dropdown. |
+| `.pf-m-text` | `.pf-c-dropdown__menu-item` | Modifies a menu item to be non-interactive text. |
+| `.pf-m-plain` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with no border. |
+| `.pf-m-text` | `.pf-c-dropdown__toggle` | Modifies the dropdown toggle for the text variation. |
+| `.pf-m-primary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with primary styles. |
+| `.pf-m-secondary` | `.pf-c-dropdown__toggle` | Modifies to display the toggle with secondary styles. |
+| `.pf-m-full-height` | `.pf-c-dropdown` | Modifies a dropdown to full height of parent. See masthead for use. |
+| `.pf-m-disabled` | `a.pf-c-dropdown__menu-item` | Modifies to display the menu item as disabled. This applies to `a.pf-c-dropdown__menu-item` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__menu-item`. |
+| `.pf-m-disabled` | `div.pf-c-dropdown__toggle` | Modifies to display the dropdown toggle as disabled. This applies to `div.pf-c-dropdown__toggle` and should not be used in lieu of the `disabled` attribute on `button.pf-c-dropdown__toggle`. When this is used, `disabled` should also be added to any form elements in `div.pf-c-dropdown__toggle`. |
+| `.pf-m-icon` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding an icon. |
+| `.pf-m-active` | `.pf-c-dropdown__toggle` | Modifies the dropdown menu toggle for the active state. |
+| `.pf-m-description` | `.pf-c-dropdown__menu-item` | Modifies an item to support adding a description. |
+| `.pf-m-in-progress` | `.pf-c-dropdown__toggle-check` | Modifies a toggle check element to indicate the check action is in progress. |