@patternfly/patternfly 4.180.0 → 4.182.0

package/components/MenuToggle/menu-toggle.scss

@@ -84,6 +84,7 @@
   --pf-c-menu-toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-menu-toggle--m-plain--m-expanded--Color: var(--pf-global--Color--100);
 
+
   // Icon
   --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
 
@@ -110,6 +111,45 @@
   --pf-c-menu-toggle--m-full-height--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
   --pf-c-menu-toggle--m-full-height--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--xl);
 
+  // Split button
+  --pf-c-menu-toggle--m-split-button--BackgroundColor: var(--pf-global--BackgroundColor--100);
+
+  // Split button, child
+  --pf-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-global--Color--dark-200);
+  --pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+  --pf-c-menu-toggle--m-split-button--first-child--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-menu-toggle--m-split-button--last-child--PaddingLeft: 0;
+
+  // Split button, action
+  --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-global--BorderColor--300);
+  --pf-c-menu-toggle--m-split-button--m-action--child--after--Left: 0;
+  --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-global--BorderColor--200);
+  --pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-global--BorderRadius--sm);
+
+  // Split button action, primary
+  --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-global--primary-color--200);
+  --pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-global--primary-color--200);
+
+  // Split button action, secondary
+  --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
+
+  // Split button, controls, check
+  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
+
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -153,7 +193,6 @@
     --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
     --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
 
-
     &,
     &::before {
       border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
@@ -203,17 +242,12 @@
     --pf-c-menu-toggle__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain__toggle-icon--Color);
 
     &:not(.pf-m-text) {
-      --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
-      --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
-      --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
-      --pf-c-menu-toggle--active--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
-      --pf-c-menu-toggle--disabled--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
       --pf-c-menu-toggle--PaddingRight: var(--pf-c-menu-toggle--m-plain--PaddingRight);
       --pf-c-menu-toggle--PaddingLeft: var(--pf-c-menu-toggle--m-plain--PaddingLeft);
       --pf-c-menu-toggle--disabled--BackgroundColor: transparent;
-      --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
 
       display: inline-block;
+      color: var(--pf-c-menu-toggle--m-plain--Color);
     }
   }
 
@@ -222,6 +256,7 @@
     --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--hover--after--BorderBottomWidth);
     --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--hover--after--BorderBottomColor);
     --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--hover__toggle-icon--Color);
+    --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
   }
 
   &:focus {
@@ -229,6 +264,7 @@
     --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
     --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
     --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--focus__toggle-icon--Color);
+    --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--focus--Color);
   }
 
   &:active {
@@ -236,6 +272,7 @@
     --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--active--after--BorderBottomWidth);
     --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--active--after--BorderBottomColor);
     --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--active__toggle-icon--Color);
+    --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--active--Color);
   }
 
   &.pf-m-expanded {
@@ -244,11 +281,14 @@
     --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomWidth);
     --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--m-expanded--after--BorderBottomColor);
     --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-c-menu-toggle--m-plain--m-expanded__toggle-icon--Color);
+    --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--m-expanded--Color);
   }
 
-  &:disabled {
+  &:disabled,
+  &.pf-m-disabled {
     --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--disabled--Color);
     --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--disabled--BackgroundColor);
+    --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--disabled--Color);
 
     pointer-events: none;
   }
@@ -273,6 +313,166 @@
 
     height: 100%;
   }
+
+  &.pf-m-split-button {
+    --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
+
+    padding: 0; // pass padding to children
+
+    > * {
+      position: relative;
+      padding: var(--pf-c-menu-toggle--PaddingTop) var(--pf-c-menu-toggle--PaddingRight) var(--pf-c-menu-toggle--PaddingBottom) var(--pf-c-menu-toggle--PaddingLeft);
+
+      &:first-child {
+        padding-right: var(--pf-c-menu-toggle--m-split-button--first-child--PaddingRight);
+      }
+    }
+
+    &:where(:not(.pf-m-action)) {
+      > :last-child {
+        padding-left: var(--pf-c-menu-toggle--m-split-button--last-child--PaddingLeft);
+      }
+    }
+
+    > .pf-c-check {
+      --pf-c-menu-toggle--PaddingRight: 0;
+      --pf-c-check__input--MarginTop: 0;
+      --pf-c-check__label--Color: var(--pf-c-check__label--Color, inherit);
+
+      align-items: center;
+      align-self: stretch;
+    }
+
+    // Split button, active
+    &.pf-m-action {
+      // stylelint-disable max-nesting-depth
+      &:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > * {
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: var(--pf-c-menu-toggle--m-split-button--m-action--child--after--Left);
+          pointer-events: none;
+          content: "";
+          border-bottom: var(--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth) solid var(--pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor);
+        }
+
+        &:hover {
+          --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomWidth);
+          --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--hover--after--BorderBottomColor);
+        }
+
+        &:focus {
+          --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomWidth);
+          --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--focus--after--BorderBottomColor);
+        }
+
+        &:active,
+        &.pf-m-active {
+          --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: var(--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomWidth);
+          --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomColor: var(--pf-c-menu-toggle--m-split-button--m-action--child--active--after--BorderBottomColor);
+        }
+      }
+      // stylelint-enable
+
+      // Split button, primary
+      &.pf-m-primary {
+        --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor);
+        --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
+
+        // stylelint-disable max-nesting-depth, selector-max-class
+        > :where(:not(.pf-m-disabled):not([disabled])) {
+          background-color: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor);
+
+          &:hover {
+            --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor);
+          }
+
+          &:focus {
+            --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--focus--BackgroundColor);
+          }
+
+          &:active,
+          &.pf-m-active {
+            --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor);
+          }
+        }
+
+        &.pf-m-expanded {
+          --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor);
+        }
+        // stylelint-enable
+      }
+
+      // Split button, secondary
+      &.pf-m-secondary {
+        --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor);
+      }
+
+      &.pf-m-primary,
+      &.pf-m-secondary {
+        --pf-c-menu-toggle--m-split-button--m-action--child--after--BorderBottomWidth: 0;
+
+        // stylelint-disable max-nesting-depth
+        > :first-child {
+          border-top-left-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+          border-bottom-left-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+        }
+
+        > :last-child {
+          border-top-right-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+          border-bottom-right-radius: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderRadius);
+        }
+
+        // enable-disable
+      }
+
+      // all subsequent buttons
+      > :not(:first-child) {
+        --pf-c-menu-toggle--m-split-button--m-action--child--after--Left: calc(var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) * -1);
+
+        border-left: var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) solid var(--pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor);
+      }
+
+      &:not(.pf-m-expanded) {
+        --pf-c-menu-toggle--after--BorderBottomColor: transparent; // leave bottom border unchanged for expanded state
+      }
+    }
+
+    // disable accent border
+    &.pf-m-disabled,
+    &:disabled {
+      --pf-c-menu-toggle--m-split-button--child--BackgroundColor: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
+      --pf-c-menu-toggle--m-split-button--child--Color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
+      --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
+
+      &::before,
+      &::after {
+        content: none;
+      }
+    }
+
+    // disabled styles for children
+    > .pf-m-disabled,
+    > :disabled {
+      --pf-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: transparent;
+
+      color: var(--pf-c-menu-toggle--m-split-button--child--disabled--Color);
+      background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
+    }
+  }
+}
+
+.pf-c-menu-toggle__button {
+  color: inherit;
+  border: 0;
+
+  .pf-c-menu-toggle__controls {
+    padding-left: 0;
+    margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
+    margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
+  }
 }
 
 .pf-c-menu-toggle__icon {

package/docs/components/FormControl/examples/FormControl.md

@@ -281,6 +281,156 @@ cssPrefix: pf-c-form-control
 
 ```
 
+### Icon sprite
+
+**Note:** The icons for the success, invalid, calendar, etc varations in form control elemements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `.pf-m-icon-sprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
+
+```html isBeta
+<input
+  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
+  type="text"
+  value="Success"
+  id="input-success"
+  aria-label="Success state input example"
+/>
+<br />
+<br />
+<input
+  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
+  type="text"
+  value="Warning"
+  id="input-warning"
+  aria-label="Warning state input example"
+/>
+<br />
+<br />
+<input
+  class="pf-c-form-control pf-m-icon-sprite"
+  required
+  type="text"
+  value="Error"
+  id="input-error"
+  aria-invalid="true"
+  aria-label="Error state input example"
+/>
+<br />
+<br />
+<input
+  class="pf-c-form-control pf-m-search pf-m-icon-sprite"
+  type="search"
+  value="Search"
+  id="input-search"
+  name="search-input"
+  aria-label="Search input example"
+/>
+<br />
+<br />
+<input
+  class="pf-c-form-control pf-m-icon pf-m-calendar pf-m-icon-sprite"
+  type="text"
+  value="Calendar"
+  id="input-calendar"
+  name="input-calendar"
+  aria-label="Calendar input example"
+/>
+<br />
+<br />
+<input
+  class="pf-c-form-control pf-m-icon pf-m-clock pf-m-icon-sprite"
+  type="text"
+  value="Clock"
+  id="input-clock"
+  name="input-clock"
+  aria-label="Clock input example"
+/>
+<br />
+<br />
+<select
+  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
+  id="select-group-success"
+  name="select-group-success"
+  aria-label="Success state select group example"
+>
+  <option value>Valid option</option>
+  <optgroup label="Group 1">
+    <option value="Option 1">The first option</option>
+    <option value="Option 2">The second option</option>
+  </optgroup>
+  <optgroup label="Group 2">
+    <option value="Option 3">The third option</option>
+    <option value="Option 4">The fourth option</option>
+  </optgroup>
+</select>
+<br />
+<br />
+<select
+  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
+  id="select-group-warning"
+  name="select-group-warning"
+  aria-label="Warning state select group example"
+>
+  <option value>Warning option</option>
+  <optgroup label="Group 1">
+    <option value="Option 1">The first option</option>
+    <option value="Option 2">The second option</option>
+  </optgroup>
+  <optgroup label="Group 2">
+    <option value="Option 3">The third option</option>
+    <option value="Option 4">The fourth option</option>
+  </optgroup>
+</select>
+<br />
+<br />
+<select
+  class="pf-c-form-control"
+  required
+  aria-invalid="true"
+  id="select-group-error"
+  name="select-group-error"
+  aria-label="Error state select group example"
+>
+  <option value>Invalid option</option>
+  <optgroup label="Group 1">
+    <option value="Option 1">The first option</option>
+    <option value="Option 2">The second option</option>
+  </optgroup>
+  <optgroup label="Group 2">
+    <option value="Option 3">The third option</option>
+    <option value="Option 4">The fourth option</option>
+  </optgroup>
+</select>
+<br />
+<br />
+<textarea
+  class="pf-c-form-control pf-m-success pf-m-icon-sprite"
+  name="textarea-success"
+  id="textarea-success"
+  aria-label="Success state textarea example"
+>Success
+</textarea>
+<br />
+<br />
+<textarea
+  class="pf-c-form-control pf-m-warning pf-m-icon-sprite"
+  name="textarea-warning"
+  id="textarea-warning"
+  aria-label="Warning state textarea example"
+>Warning
+</textarea>
+<br />
+<br />
+<textarea
+  class="pf-c-form-control"
+  required
+  name="textarea-error"
+  id="textarea-error"
+  aria-label="Error state textarea example"
+  aria-invalid="true"
+>Error
+</textarea>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -301,6 +451,7 @@ cssPrefix: pf-c-form-control
 | `.pf-m-resize-horizontal` | `textarea.pf-m-form-control`       | Modifies a `textarea.pf-c-form-control` element so it can only be resized horizontally along the x-axis.                                                                                    |
 | `.pf-m-success`           | `.pf-c-form-control`               | Modifies a form control for the success state.                                                                                                                                              |
 | `.pf-m-warning`           | `.pf-c-form-control`               | Modifies a form control for the warning state.                                                                                                                                              |
+| `.pf-m-icon-sprite`       | `.pf-c-form-control`               | Modifies form control element to use an external SVG sprite instead of embedded data URIs for icons. For use with apps whose content security policies disallow the use of data URIs.       |
 | `.pf-m-icon`              | `input.pf-c-form-control`          | Modifies a form control text input to be able to specify a custom SVG background via `--pf-c-form-control--m-icon--BackgroundUrl`, and other optional vars for other background properties. |
 | `.pf-m-calendar`          | `.pf-c-form-control.pf-m-icon`     | Modifies a form control to support the calendar icon.                                                                                                                                       |
 | `.pf-m-clock`             | `.pf-c-form-control.pf-m-icon`     | Modifies a form control to support the clock icon.                                                                                                                                          |

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

@@ -94,6 +94,70 @@ cssPrefix: pf-c-menu
 
 ```
 
+### With checkbox
+
+```html
+<div class="pf-c-menu">
+  <div class="pf-c-menu__content">
+    <ul class="pf-c-menu__list" role="menu">
+      <li class="pf-c-menu__list-item" role="menuitem">
+        <label class="pf-c-menu__item" for="with-checkbox-example-check-1">
+          <span class="pf-c-menu__item-main">
+            <span class="pf-c-menu__item-check">
+              <span class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  id="with-checkbox-example-check-1"
+                  name="with-checkbox-example-check-1"
+                />
+              </span>
+            </span>
+            <span class="pf-c-menu__item-text">Checkbox 1</span>
+          </span>
+        </label>
+      </li>
+      <li class="pf-c-menu__list-item" role="menuitem">
+        <label class="pf-c-menu__item" for="with-checkbox-example-check-2">
+          <span class="pf-c-menu__item-main">
+            <span class="pf-c-menu__item-check">
+              <span class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  id="with-checkbox-example-check-2"
+                  name="with-checkbox-example-check-2"
+                />
+              </span>
+            </span>
+            <span class="pf-c-menu__item-text">Checkbox 2</span>
+          </span>
+        </label>
+      </li>
+      <li class="pf-c-menu__list-item pf-m-disabled" role="menuitem">
+        <label class="pf-c-menu__item" for="with-checkbox-example-check-3">
+          <span class="pf-c-menu__item-main">
+            <span class="pf-c-menu__item-check">
+              <span class="pf-c-check pf-m-standalone">
+                <input
+                  class="pf-c-check__input"
+                  type="checkbox"
+                  id="with-checkbox-example-check-3"
+                  name="with-checkbox-example-check-3"
+                  disabled
+                />
+              </span>
+            </span>
+            <span class="pf-c-menu__item-text">Checkbox 3</span>
+          </span>
+        </label>
+      </li>
+    </ul>
+  </div>
+</div>
+
+```
+
 ### Scrollable
 
 ```html
@@ -5967,7 +6031,7 @@ cssPrefix: pf-c-menu
 | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
 | `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`                                                                                                                                        | Assigns `.pf-c-menu__item` as an option in a set of choices contained by a menu.                               |
+| `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.                                        |
@@ -5986,9 +6050,10 @@ cssPrefix: pf-c-menu
 | `.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>`                                        | Initiates the menu 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.                                                                                                                 |