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

package/docs/components/Login/examples/Login.md

@@ -104,7 +104,7 @@ wrapperTag: div
         </form>
       </div>
       <footer class="pf-c-login__main-footer">
-        <ul class="pf-c-login__main-footer-links">
+        <ul class="pf-c-login__main-footer-links" role="list">
           <li class="pf-c-login__main-footer-links-item">
             <a
               href="#"
@@ -204,7 +204,7 @@ wrapperTag: div
     </main>
     <footer class="pf-c-login__footer">
       <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
-      <ul class="pf-c-list pf-m-inline">
+      <ul class="pf-c-list pf-m-inline" role="list">
         <li>
           <a href="#">Terms of use</a>
         </li>
@@ -326,7 +326,7 @@ wrapperTag: div
         </form>
       </div>
       <footer class="pf-c-login__main-footer">
-        <ul class="pf-c-login__main-footer-links">
+        <ul class="pf-c-login__main-footer-links" role="list">
           <li class="pf-c-login__main-footer-links-item">
             <a
               href="#"
@@ -426,7 +426,7 @@ wrapperTag: div
     </main>
     <footer class="pf-c-login__footer">
       <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
-      <ul class="pf-c-list pf-m-inline">
+      <ul class="pf-c-list pf-m-inline" role="list">
         <li>
           <a href="#">Terms of use</a>
         </li>
@@ -553,7 +553,7 @@ wrapperTag: div
         </form>
       </div>
       <footer class="pf-c-login__main-footer">
-        <ul class="pf-c-login__main-footer-links">
+        <ul class="pf-c-login__main-footer-links" role="list">
           <li class="pf-c-login__main-footer-links-item">
             <a
               href="#"
@@ -653,7 +653,7 @@ wrapperTag: div
     </main>
     <footer class="pf-c-login__footer">
       <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
-      <ul class="pf-c-list pf-m-inline">
+      <ul class="pf-c-list pf-m-inline" role="list">
         <li>
           <a href="#">Terms of use</a>
         </li>
@@ -780,7 +780,7 @@ wrapperTag: div
         </form>
       </div>
       <footer class="pf-c-login__main-footer">
-        <ul class="pf-c-login__main-footer-links">
+        <ul class="pf-c-login__main-footer-links" role="list">
           <li class="pf-c-login__main-footer-links-item">
             <a
               href="#"
@@ -880,7 +880,7 @@ wrapperTag: div
     </main>
     <footer class="pf-c-login__footer">
       <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
-      <ul class="pf-c-list pf-m-inline">
+      <ul class="pf-c-list pf-m-inline" role="list">
         <li>
           <a href="#">Terms of use</a>
         </li>
@@ -1042,7 +1042,7 @@ wrapperTag: div
         </form>
       </div>
       <footer class="pf-c-login__main-footer">
-        <ul class="pf-c-login__main-footer-links">
+        <ul class="pf-c-login__main-footer-links" role="list">
           <li class="pf-c-login__main-footer-links-item">
             <a
               href="#"
@@ -1142,7 +1142,7 @@ wrapperTag: div
     </main>
     <footer class="pf-c-login__footer">
       <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
-      <ul class="pf-c-list pf-m-inline">
+      <ul class="pf-c-list pf-m-inline" role="list">
         <li>
           <a href="#">Terms of use</a>
         </li>
@@ -1163,25 +1163,25 @@ wrapperTag: div
 
 ### Usage
 
-| Class                                                                 | Applied to                      | Outcome                                                                                                        |
-| --------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-login`                                                         | `<div>`                         | Initializes the login component. **Required**                                                                  |
-| `.pf-c-login__container`                                              | `<div>`                         | Positions the login component content. **Required**                                                            |
-| `.pf-c-login__header`                                                 | `<header>`                      | Positions the login header. **Required**                                                                       |
-| `.pf-c-login__header .pf-c-brand`                                     | `<img>`                         | Creates a brand image inside of login header. **Required**                                                     |
-| `.pf-c-login__main`                                                   | `<main>`                        | Positions the login main area. **Required**                                                                    |
-| `.pf-c-login__main-header`                                            | `<header>`                      | Creates the header of the main area. **Required**                                                              |
-| `.pf-c-login__main-header .pf-c-title`                                | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required**                                                          |
-| `.pf-c-login__main-header-desc`                                       | `<p>`                           | Creates the description in the main area header.                                                               |
-| `.pf-c-login__main-header-utilities`                                  | `<div>`                         | Creates a utilities section in the main header area. **Note:** For use with a language selector menu.          |
-| `.pf-c-login__main-body`                                              | `<div>`                         | Creates the body of the main area. **Required**                                                                |
-| `.pf-c-login__main-body .pf-c-form`                                   | `<form>`                        | Creates the login form in the main body area. **Required**                                                     |
-| `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error` | `<form>`                        | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden.` **Required** |
-| `.pf-c-login__main-footer`                                            | `<footer>`                      | Creates the footer of the main area. **Required**                                                              |
-| `.pf-c-login__main-footer-links`                                      | `<ul>`                          | Creates a list of links in the main footer. **Required**                                                       |
-| `.pf-c-login__main-footer-links-item`                                 | `<li>`                          | Creates proper spacing for links in the main footer. **Required**                                              |
-| `.pf-c-login__main-footer-links-item-link`                            | `<a>`                           | Creates link in links list in footer. **Required**                                                             |
-| `.pf-c-login__main-footer-band`                                       | `<div>`                         | Styles a band in the footer.                                                                                   |
-| `.pf-c-login__main-footer-band-item`                                  | `<p>`                           | Adds information to the band in the footer.                                                                    |
-| `.pf-c-login__footer`                                                 | `<footer>`                      | Positions the login footer. **Required**                                                                       |
-| `.pf-c-login__footer .pf-c-list`                                      | `<ul>`                          | Creates a list of links in the login footer. **Required**                                                      |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-login` | `<div>` | Initializes the login component. **Required**|
+| `.pf-c-login__container` | `<div>` | Positions the login component content. **Required**|
+| `.pf-c-login__header` | `<header>` | Positions the login header. **Required**|
+| `.pf-c-login__header .pf-c-brand` | `<img>` | Creates a brand image inside of login header. **Required** |
+| `.pf-c-login__main` | `<main>` | Positions the login main area. **Required** |
+| `.pf-c-login__main-header` | `<header>` | Creates the header of the main area. **Required** |
+| `.pf-c-login__main-header .pf-c-title` | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required** |
+| `.pf-c-login__main-header-desc` | `<p>` | Creates the description in the main area header. |
+| `.pf-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
+| `.pf-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
+| `.pf-c-login__main-body .pf-c-form` | `<form>` | Creates the login form in the main body area. **Required**|
+| `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden.` **Required** |
+| `.pf-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
+| `.pf-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
+| `.pf-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |
+| `.pf-c-login__main-footer-links-item-link` | `<a>` | Creates link in links list in footer. **Required** |
+| `.pf-c-login__main-footer-band` | `<div>` | Styles a band in the footer. |
+| `.pf-c-login__main-footer-band-item` | `<p>` | Adds information to the band in the footer. |
+| `.pf-c-login__footer` | `<footer>` | Positions the login footer. **Required** |
+| `.pf-c-login__footer .pf-c-list` | `<ul>` | Creates a list of links in the login footer. **Required** |

package/docs/components/Masthead/examples/masthead.md

@@ -200,13 +200,13 @@ cssPrefix: pf-c-masthead
 
 ### Usage
 
-| Class                                                       | Applied to       | Outcome                                                                                                                                           |
-| ----------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-masthead`                                            | `<header>`       | Initiates the masthead component. **Required**                                                                                                    |
-| `.pf-c-masthead__main`                                      | `<div>`          | Initiates the masthead main component. **Required**                                                                                               |
-| `.pf-c-masthead__toggle`                                    | `<span>`         | Initiates the masthead toggle component.                                                                                                          |
-| `.pf-c-masthead__brand`                                     | `<a>, <div>`     | Initiates the masthead content component.                                                                                                         |
-| `.pf-c-masthead__content`                                   | `<div>`          | Initiates the masthead content component.                                                                                                         |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-masthead` | `<header>` | Initiates the masthead component. **Required** |
+| `.pf-c-masthead__main` | `<div>` | Initiates the masthead main component. **Required** |
+| `.pf-c-masthead__toggle` | `<span>` | Initiates the masthead toggle component. |
+| `.pf-c-masthead__brand` | `<a>, <div>` | Initiates the masthead content component. |
+| `.pf-c-masthead__content` | `<div>` | Initiates the masthead content component. |
 | `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-light`                                               | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--100`.                               |
-| `.pf-m-light-200`                                           | `.pf-c-masthead` | Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--200`.                               |
+| `.pf-m-light` | `.pf-c-masthead` |  Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--100`. |
+| `.pf-m-light-200` | `.pf-c-masthead` |  Modifies a masthead component to have a light theme with a background color of `--pf-global--BackgroundColor--200`. |

package/docs/components/Menu/examples/Menu.md

@@ -178,9 +178,9 @@ cssPrefix: pf-c-menu
                 <input
                   class="pf-c-check__input"
                   type="checkbox"
+                  disabled
                   id="with-checkbox-example-check-3"
                   name="with-checkbox-example-check-3"
-                  disabled
                 />
               </span>
             </span>
@@ -4140,7 +4140,7 @@ cssPrefix: pf-c-menu
 >
   <div class="pf-c-menu__breadcrumb">
     <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-      <ol class="pf-c-breadcrumb__list">
+      <ol class="pf-c-breadcrumb__list" role="list">
         <li class="pf-c-breadcrumb__item">
           <span class="pf-c-breadcrumb__item-divider">
             <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -4334,7 +4334,7 @@ cssPrefix: pf-c-menu
 >
   <div class="pf-c-menu__breadcrumb">
     <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-      <ol class="pf-c-breadcrumb__list">
+      <ol class="pf-c-breadcrumb__list" role="list">
         <li class="pf-c-breadcrumb__item">
           <span class="pf-c-breadcrumb__item-divider">
             <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -4564,7 +4564,7 @@ cssPrefix: pf-c-menu
 >
   <div class="pf-c-menu__breadcrumb">
     <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-      <ol class="pf-c-breadcrumb__list">
+      <ol class="pf-c-breadcrumb__list" role="list">
         <li class="pf-c-breadcrumb__item">
           <span class="pf-c-breadcrumb__item-divider">
             <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -4932,17 +4932,18 @@ cssPrefix: pf-c-menu
 <div class="pf-c-menu pf-m-scrollable">
   <div class="pf-c-menu__search">
     <div class="pf-c-menu__search-input">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
@@ -5051,17 +5052,18 @@ cssPrefix: pf-c-menu
 <div class="pf-c-menu">
   <div class="pf-c-menu__search">
     <div class="pf-c-menu__search-input">
-      <div class="pf-c-search-input">
-        <div class="pf-c-search-input__bar">
-          <span class="pf-c-search-input__text">
-            <span class="pf-c-search-input__icon">
-              <i class="fas fa-search fa-fw" aria-hidden="true"></i>
+      <div class="pf-c-text-input-group">
+        <div class="pf-c-text-input-group__main pf-m-icon">
+          <span class="pf-c-text-input-group__text">
+            <span class="pf-c-text-input-group__icon">
+              <i class="fas fa-fw fa-search"></i>
             </span>
             <input
-              class="pf-c-search-input__text-input"
-              type="text"
+              class="pf-c-text-input-group__text-input"
+              type="search"
               placeholder="Search"
-              aria-label="Search"
+              value
+              aria-label="Filter menu items"
             />
           </span>
         </div>
@@ -6063,66 +6065,66 @@ cssPrefix: pf-c-menu
 
 ### Accessibility
 
-| Attribute                  | Applied                                                                                                                                                   | Outcome                                                                                                        |
-| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| `role="menu"`              | `.pf-c-menu__list`                                                                                                                                        | Declares `.pf-c-menu__list` as a menu.                                                                         |
-| `disabled`                 | `button.pf-c-menu__item`                                                                                                                                  | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
-| `role="menuitem"`          | `.pf-c-menu__item`, `.pf-c-menu__list-item` (checkbox)                                                                                                    | Assigns `.pf-c-menu__item` as an option in a set of choices contained by a menu.                               |
-| `role="none"`              | `.pf-c-menu__list-item`                                                                                                                                   | Removes semantic meaning from `.pf-c-menu__list-item`.                                                         |
-| `aria-disabled="true"`     | `a.pf-c-menu__item`                                                                                                                                       | When the menu item uses a link element, removes it from keyboard focus.                                        |
-| `tabindex="-1"`            | `a.pf-c-menu__item`                                                                                                                                       | When the menu item uses a link element, removes it from keyboard focus.                                        |
-| `aria-hidden="true"`       | `.pf-c-menu__item-icon`, `.pf-c-menu__item-action-icon`, `.pf-c-menu__item-external-icon`, `.pf-c-menu__item-toggle-icon`, `.pf-c-menu__item-select-icon` | Hides the icon from assistive technologies.                                                                    |
-| `aria-label="Not starred"` | `.pf-c-menu__item-action-icon.pf-m-favorite`                                                                                                              | Provides an accessible label indicating that the favorite action is not selected.                              |
-| `aria-label="Starred"`     | `.pf-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited`                                                                                               | Provides an accessible label indicating that the favorite action is selected.                                  |
+| Attribute | Applied | Outcome |
+| -- | -- | -- |
+| `role="menu"` | `.pf-c-menu__list` | Declares `.pf-c-menu__list` as a menu. |
+| `disabled` | `button.pf-c-menu__item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `role="menuitem"` | `.pf-c-menu__item`, `.pf-c-menu__list-item` (checkbox) | Assigns `.pf-c-menu__item` as an option in a set of choices contained by a menu. |
+| `role="none"` | `.pf-c-menu__list-item` | Removes semantic meaning from `.pf-c-menu__list-item`. |
+| `aria-disabled="true"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
+| `tabindex="-1"` | `a.pf-c-menu__item` | When the menu item uses a link element, removes it from keyboard focus. |
+| `aria-hidden="true"` | `.pf-c-menu__item-icon`, `.pf-c-menu__item-action-icon`, `.pf-c-menu__item-external-icon`, `.pf-c-menu__item-toggle-icon`, `.pf-c-menu__item-select-icon` | Hides the icon from assistive technologies. |
+| `aria-label="Not starred"` | `.pf-c-menu__item-action-icon.pf-m-favorite` | Provides an accessible label indicating that the favorite action is not selected. |
+| `aria-label="Starred"` | `.pf-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited` | Provides an accessible label indicating that the favorite action is selected. |
 
 ### Usage
 
-| Class                                               | Applied to                                                        | Outcome                                                                                                                                              |
-| --------------------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-c-menu`                                        | `<div>`                                                           | Initiates the menu. **Required**                                                                                                                     |
-| `.pf-c-menu__header`                                | `<div>`                                                           | Initiates the menu header container.                                                                                                                 |
-| `.pf-c-menu__search`                                | `<div>`                                                           | Initiates the menu search container. Use for filtering.                                                                                              |
-| `.pf-c-menu__search-input`                          | `<div>`                                                           | Initiates the menu search input container.                                                                                                           |
-| `.pf-c-menu__content`                               | `<div>`                                                           | Initiates the menu content. Use for lists. **Required**                                                                                              |
-| `.pf-c-menu__list`                                  | `<ul>`                                                            | Initiates the menu list. **Required**                                                                                                                |
-| `.pf-c-menu__list-item`                             | `<li>`                                                            | Initiates the menu list item. **Required**                                                                                                           |
-| `.pf-c-menu__item`                                  | `<button>`, `<a>`, `<div>`, `<label>`                             | Initiates the menu item. **Required**                                                                                                                |
-| `.pf-c-menu__item-main`                             | `<span>`                                                          | Initiates the menu item main container. **Required**                                                                                                 |
-| `.pf-c-menu__item-text`                             | `<span>`                                                          | Initiates the menu item text. **Required**                                                                                                           |
-| `.pf-c-menu__item-check`                            | `<span>`                                                          | Initiates a menu label.                                                                                                                              |
-| `.pf-c-menu__item-description`                      | `<span>`                                                          | Initiates the menu item description.                                                                                                                 |
-| `.pf-c-menu__item-group`                            | `<section>`                                                       | Initiates the menu item group.                                                                                                                       |
-| `.pf-c-menu__item-group-title`                      | `<h1>`                                                            | Initiates the menu item group title.                                                                                                                 |
-| `.pf-c-menu__item-icon`                             | `<span>`                                                          | Initiates the menu item icon.                                                                                                                        |
-| `.pf-c-menu__item-toggle-icon`                      | `<span>`                                                          | Initiates the menu item toggle icon.                                                                                                                 |
-| `.pf-c-menu__item-select-icon`                      | `<span>`                                                          | Initiates the menu item select icon.                                                                                                                 |
-| `.pf-c-menu__item-action`                           | `<button>`                                                        | Initiates the menu item action.                                                                                                                      |
-| `.pf-c-menu__item-action-icon`                      | `<span>`                                                          | Initiates the menu item action icon.                                                                                                                 |
-| `.pf-c-menu__item-external-icon`                    | `<span>`                                                          | Initiates the menu item external icon.                                                                                                               |
-| `.pf-c-menu__footer`                                | `<div>`                                                           | Initiates the menu footer.                                                                                                                           |
-| `.pf-m-hidden{-on-[breakpoint]}`                    | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group`  | Modifies a menu element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).   |
-| `.pf-m-visible{-on-[breakpoint]}`                   | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group`  | Modifies a menu element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).    |
-| `.pf-m-favorite`                                    | `.pf-c-menu__item-action`                                         | Modifies the menu item action to handle the favorite icon.                                                                                           |
-| `.pf-m-favorited`                                   | `.pf-c-menu__item-action.pf-m-favorite`                           | Modifies the menu item action icon to be favorited.                                                                                                  |
-| `.pf-m-selected`                                    | `.pf-c-menu__item`                                                | Modifies the menu item to be selected.                                                                                                               |
-| `.pf-m-drill-up`                                    | `.pf-c-menu__list-item`                                           | Flags the menu item as a drill up button.                                                                                                            |
-| `.pf-m-flyout`                                      | `.pf-c-menu`                                                      | Modifies the menu so that all nested `.pf-c-menu` elements "flyout".                                                                                 |
-| `.pf-m-nav`                                         | `.pf-c-menu`                                                      | Modifies the menu for nav variant.                                                                                                                   |
-| `.pf-m-top`                                         | `.pf-c-menu`                                                      | Modifies a flyout menu to expand to the top.                                                                                                         |
-| `.pf-m-left`                                        | `.pf-c-menu`                                                      | Modifies a flyout menu to expand to the left.                                                                                                        |
-| `.pf-m-plain`                                       | `.pf-c-menu`                                                      | Modifies the menu component for use in the page instead of as a dropdown.                                                                            |
-| `.pf-m-scrollable`                                  | `.pf-c-menu`                                                      | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting `--pf-c-menu__content--MaxHeight`. |
-| `.pf-m-current`                                     | `.pf-c-menu__list-item`                                           | Modifies a list item for current styles.                                                                                                             |
-| `.pf-m-load`                                        | `.pf-c-menu__list-item`                                           | Modifies a list item for "load more" styles.                                                                                                         |
-| `.pf-m-loading`                                     | `.pf-c-menu__list-item`                                           | Modifies a list item for loading styles.                                                                                                             |
-| `.pf-m-drilldown`                                   | `.pf-c-menu`                                                      | Modifies the menu so that all nested `.pf-c-menu` elements "drill down".                                                                             |
-| `.pf-m-current-path`                                | `.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item`                 | Modifies the menu list item for current path state.                                                                                                  |
-| `.pf-m-drilled-in`                                  | `.pf-c-menu.pf-m-drilldown, .pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled in state.                                                                                                         |
-| `.pf-m-static`                                      | `.pf-c-menu.pf-m-drilldown .pf-c-menu`                            | Modifies the menu list for drilled static state.                                                                                                     |
-| `.pf-m-danger`                                      | `pf-c-menu__item-text`                                            | Modifies a list item for danger styles.                                                                                                              |
-| `--pf-c-menu--Width: {width}`                       | `.pf-c-menu`                                                      | Modifies the width of the menu. The default value is `auto`.                                                                                         |
-| `--pf-c-menu__content--MaxHeight: {height}`         | `.pf-c-menu__content`                                             | Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed.                              |
-| `--pf-c-menu__content--Height: {height}`            | `.pf-c-menu`                                                      | Modifies the height of the drilldown menu content. The default value is `auto`.                                                                      |
-| `--pf-c-menu--m-flyout__menu--top-offset`           | `.pf-c-menu`                                                      | Modifies the menu to allow for an offset to the top positioning.                                                                                     |
-| `--pf-c-menu--m-flyout__menu--left-offset`          | `.pf-c-menu`                                                      | Modifies the menu to allow for an offset to the left positioning.                                                                                    |
-| `--pf-c-menu--m-flyout__menu--m-left--right-offset` | `.pf-c-menu.pf-m-flyout > .pf-c-menu`                             | Modifies the menu to allow for an offset to the right positioning.                                                                                   |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-menu` | `<div>` | Initiates the menu. **Required** |
+| `.pf-c-menu__header` | `<div>` | Initiates the menu header container. |
+| `.pf-c-menu__search` | `<div>` | Initiates the menu search container. Use for filtering. |
+| `.pf-c-menu__search-input` | `<div>` | Initiates the menu search input container. |
+| `.pf-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
+| `.pf-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
+| `.pf-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
+| `.pf-c-menu__item` | `<button>`, `<a>`, `<div>`, `<label>` | Initiates the menu item. **Required** |
+| `.pf-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
+| `.pf-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
+| `.pf-c-menu__item-check` | `<span>` | Initiates a menu label. |
+| `.pf-c-menu__item-description` | `<span>` | Initiates the menu item description. |
+| `.pf-c-menu__item-group` | `<section>` | Initiates the menu item group. |
+| `.pf-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
+| `.pf-c-menu__item-icon` | `<span>` | Initiates the menu item icon. |
+| `.pf-c-menu__item-toggle-icon` | `<span>` | Initiates the menu item toggle icon. |
+| `.pf-c-menu__item-select-icon` | `<span>` | Initiates the menu item select icon. |
+| `.pf-c-menu__item-action` | `<button>` | Initiates the menu item action. |
+| `.pf-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
+| `.pf-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
+| `.pf-c-menu__footer` | `<div>` | Initiates the menu footer. |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-menu__list`, `.pf-c-menu__list-item`, `.pf-c-menu__group` | Modifies a menu element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-favorite` | `.pf-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
+| `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
+| `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected. |
+| `.pf-m-drill-up` | `.pf-c-menu__list-item` | Flags the menu item as a drill up button. |
+| `.pf-m-flyout` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "flyout". |
+| `.pf-m-nav` | `.pf-c-menu` | Modifies the menu for nav variant. |
+| `.pf-m-top` | `.pf-c-menu` | Modifies a flyout menu to expand to the top. |
+| `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
+| `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
+| `.pf-m-scrollable` | `.pf-c-menu` | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting `--pf-c-menu__content--MaxHeight`. |
+| `.pf-m-current` | `.pf-c-menu__list-item` | Modifies a list item for current styles. |
+| `.pf-m-load` | `.pf-c-menu__list-item` | Modifies a list item for "load more" styles. |
+| `.pf-m-loading` | `.pf-c-menu__list-item` | Modifies a list item for loading styles. |
+| `.pf-m-drilldown` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "drill down". |
+| `.pf-m-current-path` | `.pf-c-menu.pf-m-drilldown .pf-c-menu__list-item` | Modifies the menu list item for current path state. |
+| `.pf-m-drilled-in` | `.pf-c-menu.pf-m-drilldown, .pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled in state. |
+| `.pf-m-static` | `.pf-c-menu.pf-m-drilldown .pf-c-menu` | Modifies the menu list for drilled static state. |
+| `.pf-m-danger` | `pf-c-menu__item-text` | Modifies a list item for danger styles. |
+| `--pf-c-menu--Width: {width}` | `.pf-c-menu` | Modifies the width of the menu. The default value is `auto`. |
+| `--pf-c-menu__content--MaxHeight: {height}` | `.pf-c-menu__content` | Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed. |
+| `--pf-c-menu__content--Height: {height}` | `.pf-c-menu` | Modifies the height of the drilldown menu content. The default value is `auto`. |
+| `--pf-c-menu--m-flyout__menu--top-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the top positioning. |
+| `--pf-c-menu--m-flyout__menu--left-offset` | `.pf-c-menu` | Modifies the menu to allow for an offset to the left positioning. |
+| `--pf-c-menu--m-flyout__menu--m-left--right-offset` | `.pf-c-menu.pf-m-flyout > .pf-c-menu` | Modifies the menu to allow for an offset to the right positioning. |

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -273,10 +273,10 @@ cssPrefix: pf-c-menu-toggle
     <input
       class="pf-c-check__input"
       type="checkbox"
+      disabled
       id="split-button-checkbox-disabled-example-input"
       name="split-button-checkbox-disabled-example-input"
       aria-label="Standalone input"
-      disabled
     />
   </label>
   <button
@@ -358,9 +358,9 @@ cssPrefix: pf-c-menu-toggle
     <input
       class="pf-c-check__input"
       type="checkbox"
+      disabled
       id="split-button-checkbox-with-toggle-text-disabled-example-input"
       name="split-button-checkbox-with-toggle-text-disabled-example-input"
-      disabled
     />
     <span class="pf-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -449,9 +449,9 @@ cssPrefix: pf-c-menu-toggle
     <input
       class="pf-c-check__input"
       type="checkbox"
+      disabled
       id="split-button-checkbox-primary-disabled-example-input"
       name="split-button-checkbox-primary-disabled-example-input"
-      disabled
     />
     <span class="pf-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -537,9 +537,9 @@ cssPrefix: pf-c-menu-toggle
     <input
       class="pf-c-check__input"
       type="checkbox"
+      disabled
       id="split-button-checkbox-secondary-disabled-example-input"
       name="split-button-checkbox-secondary-disabled-example-input"
-      disabled
     />
     <span class="pf-c-check__label pf-m-disabled">10 selected</span>
   </label>
@@ -958,30 +958,30 @@ cssPrefix: pf-c-menu-toggle
 
 ### Accessibility
 
-| Class                           | Applied to                                       | Outcome                                                             |
-| ------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------- |
-| `aria-expanded="true"`          | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state.  |
-| `aria-expanded="false"`         | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
-| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain`                   | Gives the plain menu toggle component an accessible label.          |
-| `disabled`                      | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is disabled.               |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `aria-expanded="true"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
+| `aria-expanded="false"` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
+| `aria-label="Descriptive text"` | `.pf-c-menu-toggle.pf-m-plain` | Gives the plain menu toggle component an accessible label. |
+| `disabled` | `.pf-c-menu-toggle`, `.pf-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
 
 ### Usage
 
-| Class                            | Applied                               | Outcome                                                                    |
-| -------------------------------- | ------------------------------------- | -------------------------------------------------------------------------- |
-| `.pf-c-menu-toggle`              | `<button>`                            | Initiates the menu toggle component.                                       |
-| `.pf-c-menu-toggle__icon`        | `<span>`                              | Defines the menu toggle component icon/image.                              |
-| `.pf-c-menu-toggle__text`        | `<span>`                              | Defines the menu toggle component text.                                    |
-| `.pf-c-menu-toggle__count`       | `<span>`                              | Defines the menu toggle component count.                                   |
-| `.pf-c-menu-toggle__controls`    | `<span>`                              | Defines the menu toggle component controls.                                |
-| `.pf-c-menu-toggle__toggle-icon` | `<span>`                              | Defines the menu toggle component toggle/arrow icon.                       |
-| `.pf-c-menu-toggle__button`      | `<button>`                            | Initiates the menu toggle button.                                          |
-| `.pf-m-split-button`             | `.pf-c-menu-toggle`                   | Modifies the menu toggle component for the split button variation.         |
-| `.pf-m-action`                   | `.pf-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
-| `.pf-m-disabled`                 | `.pf-c-menu-toggle`                   | Modifies the menu toggle component for the disabled variation.             |
-| `.pf-m-primary`                  | `.pf-c-menu-toggle`                   | Modifies the menu toggle component for the primary variation.              |
-| `.pf-m-secondary`                | `.pf-c-menu-toggle`                   | Modifies the menu toggle component for the secondary variation.            |
-| `.pf-m-text`                     | `.pf-c-menu-toggle`                   | Modifies the menu toggle component for the text variation.                 |
-| `.pf-m-plain`                    | `.pf-c-menu-toggle`                   | Modifies the menu toggle component for the plain variation.                |
-| `.pf-m-expanded`                 | `.pf-c-menu-toggle`                   | Modifies the menu toggle component for the expanded state.                 |
-| `.pf-m-full-height`              | `.pf-c-menu-toggle`                   | Modifies the menu toggle component to full height of parent.               |
+| Class | Applied | Outcome |
+| -- | -- | -- |
+| `.pf-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
+| `.pf-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
+| `.pf-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
+| `.pf-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
+| `.pf-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
+| `.pf-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
+| `.pf-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
+| `.pf-m-split-button` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
+| `.pf-m-action` | `.pf-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
+| `.pf-m-disabled` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
+| `.pf-m-primary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
+| `.pf-m-secondary` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
+| `.pf-m-text` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
+| `.pf-m-plain` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
+| `.pf-m-expanded` | `.pf-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
+| `.pf-m-full-height` | `.pf-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |