@patternfly/patternfly 4.156.1 → 4.157.1

package/components/Dropdown/dropdown.css

@@ -48,6 +48,14 @@
   --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: calc(-1 * var(--pf-global--BorderWidth--sm));
   --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: -0.0625rem;
   --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-global--spacer--md);
@@ -140,6 +148,9 @@
 .pf-c-dropdown.pf-m-full-height:hover .pf-c-dropdown__toggle::before {
   border-bottom-width: var(--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth);
 }
+.pf-c-dropdown.pf-m-expanded {
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
+}
 
 .pf-c-dropdown__toggle {
   position: relative;
@@ -205,6 +216,9 @@
 .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child {
   --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight: 0;
 }
+.pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary > :not(:first-child) {
+  border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
+}
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
   display: flex;
   align-items: center;
@@ -222,6 +236,31 @@
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
   margin-left: var(--pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft);
 }
+.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
+  --pf-c-dropdown__toggle--before--BorderWidth: 0;
+  --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
+}
+.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > * {
+  background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
+  border: 0;
+}
+.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover {
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
+}
+.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus {
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
+}
+.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *.pf-m-active {
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
+}
+.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :first-child {
+  border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+  border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+}
+.pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > :last-child {
+  border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+  border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+}
 .pf-c-dropdown__toggle:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
 }
@@ -256,10 +295,13 @@
   --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--disabled--Color);
 }
 .pf-c-dropdown__toggle.pf-m-primary {
-  --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
+  --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
   border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
 }
+.pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
+  --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+}
 .pf-c-dropdown__toggle.pf-m-primary::before {
   border: 0;
 }

package/components/Dropdown/dropdown.scss

@@ -56,6 +56,18 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY: #{pf-size-prem(-1px)};
   --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft: var(--pf-global--spacer--sm);
 
+  // Split button
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
+
+  // Split button, action, primary
+  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+
   // Toggle Arrow
   --pf-c-dropdown__toggle-icon--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
@@ -181,6 +193,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
       }
     }
   }
+
+  &.pf-m-expanded {
+    --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor);
+  }
 }
 
 .pf-c-dropdown__toggle {
@@ -260,6 +276,14 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
         }
         // stylelint-enable
       }
+
+      &.pf-m-primary {
+        // stylelint-disable max-nesting-depth
+        > :not(:first-child) {
+          border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
+        }
+        // stylelint-enable
+      }
     }
 
     .pf-c-dropdown__toggle-check {
@@ -284,6 +308,39 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
     }
   }
 
+  &.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) {
+    --pf-c-dropdown__toggle--before--BorderWidth: 0;
+    --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: 0;
+
+    > * {
+      background-color: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor);
+      border: 0;
+
+      &:hover {
+        --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor);
+      }
+
+      &:focus {
+        --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
+      }
+
+      &:active,
+      &.pf-m-active {
+        --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor);
+      }
+    }
+
+    > :first-child {
+      border-top-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+      border-bottom-left-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+    }
+
+    > :last-child {
+      border-top-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+      border-bottom-right-radius: var(--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius);
+    }
+  }
+
   &:not(.pf-m-action):hover,
   &.pf-m-action .pf-c-dropdown__toggle-button:hover {
     &::before {
@@ -350,8 +407,12 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 
   &.pf-m-primary {
-    --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
     --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
+    --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+
+    &:not(.pf-m-disabled) {
+      --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+    }
 
     border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
 

package/components/DualListSelector/dual-list-selector.css

@@ -139,6 +139,9 @@
   overflow-anchor: none;
 }
 
+.pf-c-dual-list-selector__list-item:focus {
+  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
+}
 .pf-c-dual-list-selector__list-item.pf-m-expandable {
   --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
 }
@@ -159,9 +162,6 @@
 .pf-c-dual-list-selector__list-item-row:hover {
   --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
 }
-.pf-c-dual-list-selector__list-item-row:focus-within {
-  --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
-}
 .pf-c-dual-list-selector__list-item-row.pf-m-selected {
   --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
 }
@@ -205,9 +205,7 @@
   position: relative;
   width: 100%;
   padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
-  text-align: left;
   cursor: pointer;
-  border: 0;
 }
 
 .pf-c-dual-list-selector__item-count {

package/components/DualListSelector/dual-list-selector.scss

@@ -183,6 +183,10 @@ $pf-c-dual-list-selector__item--MaxNesting: 10;
 }
 
 .pf-c-dual-list-selector__list-item {
+  &:focus {
+    --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
+  }
+
   &.pf-m-expandable {
     --pf-c-dual-list-selector__item--PaddingLeft: var(--pf-c-dual-list-selector__item--m-expandable--PaddingLeft);
   }
@@ -208,10 +212,6 @@ $pf-c-dual-list-selector__item--MaxNesting: 10;
     --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--hover--BackgroundColor);
   }
 
-  &:focus-within {
-    --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
-  }
-
   &.pf-m-selected {
     --pf-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
 
@@ -265,9 +265,7 @@ $pf-c-dual-list-selector__item--MaxNesting: 10;
   position: relative;
   width: 100%;
   padding: var(--pf-c-dual-list-selector__item--PaddingTop) var(--pf-c-dual-list-selector__item--PaddingRight) var(--pf-c-dual-list-selector__item--PaddingBottom) var(--pf-c-dual-list-selector__item--PaddingLeft);
-  text-align: left;
   cursor: pointer;
-  border: 0;
 }
 
 .pf-c-dual-list-selector__item-count {

package/components/FormControl/form-control.css

@@ -100,7 +100,8 @@
   --pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
   --pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
   --pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
-  --pf-c-form-control__select--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
+  --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm) - var(--pf-c-form-control--BorderWidth));
   --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
   --pf-c-form-control__select--BackgroundSize: .625em;
   --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 1px);
@@ -232,10 +233,17 @@
 }
 select.pf-c-form-control {
   --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
+  --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
   background-image: var(--pf-c-form-control__select--BackgroundUrl);
   background-position: var(--pf-c-form-control__select--BackgroundPosition);
   background-size: var(--pf-c-form-control__select--BackgroundSize);
 }
+@-moz-document url-prefix() {
+  select.pf-c-form-control {
+    --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
+    --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
+  }
+}
 select.pf-c-form-control[aria-invalid=true] {
   --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
   --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);

package/components/FormControl/form-control.scss

@@ -148,7 +148,8 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   --pf-c-form-control--m-clock--BackgroundUrl: #{pf-bg-svg($pf-c-form-control--m-clock--Coordinates, $svg-color: $pf-c-form-control--m-clock--Color)};
 
   // Select -- rename __select to --select in a breaking change release
-  --pf-c-form-control__select--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
+  --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm) - var(--pf-c-form-control--BorderWidth));
   --pf-c-form-control__select--BackgroundUrl: #{pf-bg-svg($pf-c-form-control__select--Coordinates, $pf-c-form-control__select--ViewBox)};
   --pf-c-form-control__select--BackgroundSize: .625em; // Calculated from react-icon SVG viewbox
   --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 1px);
@@ -333,11 +334,19 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
 
   @at-root select#{&} {
     --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
+    --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
 
     background-image: var(--pf-c-form-control__select--BackgroundUrl);
     background-position: var(--pf-c-form-control__select--BackgroundPosition);
     background-size: var(--pf-c-form-control__select--BackgroundSize);
 
+    // Firefox's select text has additional padding
+    // stylelint-disable-next-line
+    @-moz-document url-prefix() {
+      --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
+      --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
+    }
+
     &[aria-invalid="true"] {
       --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
       --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition); // drop this declaration and use the __select var directly in the background-position below in breaking change release

package/components/Menu/menu.css

@@ -80,6 +80,8 @@
   --pf-c-menu--Width: auto;
   --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
   --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
+  --pf-c-menu--m-flyout__menu--Right: auto;
+  --pf-c-menu--m-flyout__menu--Bottom: auto;
   --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
   --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
   --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
@@ -199,9 +201,6 @@
   background-color: var(--pf-c-menu--BackgroundColor);
   box-shadow: var(--pf-c-menu--BoxShadow);
 }
-.pf-c-menu .pf-c-menu__content {
-  overflow-y: auto;
-}
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
 }
@@ -209,28 +208,23 @@
   margin-top: var(--pf-c-menu--c-divider--MarginTop);
   margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
 }
-.pf-c-menu.pf-m-flyout {
-  overflow: visible;
-}
-.pf-c-menu.pf-m-flyout .pf-c-menu {
+.pf-c-menu .pf-c-menu.pf-m-flyout, .pf-c-menu.pf-m-flyout .pf-c-menu {
   position: absolute;
   top: var(--pf-c-menu--m-flyout__menu--Top);
-  right: auto;
+  right: var(--pf-c-menu--m-flyout__menu--Right);
+  bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
   left: var(--pf-c-menu--m-flyout__menu--Left);
 }
-.pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-top {
-  top: auto;
-  bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
-}
-.pf-c-menu.pf-m-flyout .pf-c-menu.pf-m-left {
-  right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
-  left: auto;
-}
-.pf-c-menu.pf-m-flyout .pf-c-menu__content {
+.pf-c-menu .pf-c-menu.pf-m-flyout .pf-c-menu__content, .pf-c-menu.pf-m-flyout .pf-c-menu .pf-c-menu__content {
   overflow-y: visible;
 }
-.pf-c-menu.pf-m-flyout .pf-c-menu__list-item {
-  position: relative;
+.pf-c-menu.pf-m-top {
+  --pf-c-menu--m-flyout__menu--Top: auto;
+  --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
+}
+.pf-c-menu.pf-m-left {
+  --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
+  --pf-c-menu--m-flyout__menu--Left: auto;
 }
 .pf-c-menu.pf-m-drilldown {
   display: flex;
@@ -264,6 +258,10 @@
   overflow: hidden;
   transition: var(--pf-c-menu--m-drilldown__list--Transition);
 }
+.pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
+  --pf-c-menu__list--PaddingTop: 0;
+  --pf-c-menu__list--PaddingBottom: 0;
+}
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list-item.pf-m-current-path .pf-c-menu {
   z-index: var(--pf-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex);
 }
@@ -298,6 +296,9 @@
   --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
   --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
 }
+.pf-c-menu.pf-m-scrollable .pf-c-menu__content {
+  overflow-y: auto;
+}
 
 .pf-c-menu__breadcrumb {
   display: flex;
@@ -364,6 +365,7 @@
 
 .pf-c-menu__list-item {
   --pf-hidden-visible--visible--Display: var(--pf-c-menu__list-item--Display);
+  position: relative;
   color: var(--pf-c-menu__list-item--Color);
   background-color: var(--pf-c-menu__list-item--BackgroundColor);
 }

package/components/Menu/menu.scss

@@ -10,6 +10,8 @@
 
   // Flyout
   --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
+  --pf-c-menu--m-flyout__menu--Right: auto;
+  --pf-c-menu--m-flyout__menu--Bottom: auto;
   --pf-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-c-menu--m-flyout__menu--left-offset));
   --pf-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-c-menu__list--PaddingTop) * -1);
   --pf-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-c-menu--m-flyout__menu--m-left--right-offset));
@@ -54,7 +56,6 @@
   --pf-c-menu__header--c-menu__item--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-menu__header--c-menu__item--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
 
-
   // Search
   --pf-c-menu__search--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-menu__search--PaddingRight: var(--pf-global--spacer--md);
@@ -190,8 +191,6 @@
   box-shadow: var(--pf-c-menu--BoxShadow);
 
   .pf-c-menu__content {
-    overflow-y: auto;
-
     & & {
       overflow: visible;
     }
@@ -202,33 +201,29 @@
     margin-bottom: var(--pf-c-menu--c-divider--MarginBottom);
   }
 
-  &.pf-m-flyout {
-    overflow: visible;
-
-    .pf-c-menu {
-      position: absolute;
-      top: var(--pf-c-menu--m-flyout__menu--Top);
-      right: auto;
-      left: var(--pf-c-menu--m-flyout__menu--Left);
-
-      &.pf-m-top {
-        top: auto;
-        bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
-      }
+  // nested flyout menu
+  & &.pf-m-flyout,
+  &.pf-m-flyout & {
+    position: absolute;
+    top: var(--pf-c-menu--m-flyout__menu--Top);
+    right: var(--pf-c-menu--m-flyout__menu--Right);
+    bottom: var(--pf-c-menu--m-flyout__menu--Bottom);
+    left: var(--pf-c-menu--m-flyout__menu--Left);
 
-      &.pf-m-left {
-        right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
-        left: auto;
-      }
-    }
 
     .pf-c-menu__content {
       overflow-y: visible;
     }
+  }
 
-    .pf-c-menu__list-item {
-      position: relative;
-    }
+  &.pf-m-top {
+    --pf-c-menu--m-flyout__menu--Top: auto;
+    --pf-c-menu--m-flyout__menu--Bottom: var(--pf-c-menu--m-flyout__menu--m-top--Bottom);
+  }
+
+  &.pf-m-left {
+    --pf-c-menu--m-flyout__menu--Right: var(--pf-c-menu--m-flyout__menu--m-left--Right);
+    --pf-c-menu--m-flyout__menu--Left: auto;
   }
 
   &.pf-m-drilldown {
@@ -276,6 +271,11 @@
       position: relative;
       overflow: hidden;
       transition: var(--pf-c-menu--m-drilldown__list--Transition);
+
+      & .pf-c-menu__list {
+        --pf-c-menu__list--PaddingTop: 0;
+        --pf-c-menu__list--PaddingBottom: 0;
+      }
     }
 
     // stylelint-disable selector-max-class, max-nesting-depth
@@ -329,6 +329,10 @@
     --pf-c-menu__footer--BoxShadow: var(--pf-c-menu--m-scrollable__footer--BoxShadow);
     --pf-c-menu__footer--after--BorderTopWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderTopWidth);
     --pf-c-menu__footer--after--BorderBottomWidth: var(--pf-c-menu--m-scrollable__footer--after--BorderBottomWidth);
+
+    .pf-c-menu__content {
+      overflow-y: auto;
+    }
   }
 }
 
@@ -414,6 +418,7 @@
 .pf-c-menu__list-item {
   @include pf-hidden-visible(var(--pf-c-menu__list-item--Display));
 
+  position: relative;
   color: var(--pf-c-menu__list-item--Color);
   background-color: var(--pf-c-menu__list-item--BackgroundColor);
 

package/components/MenuToggle/menu-toggle.css

@@ -1,4 +1,5 @@
 .pf-c-menu-toggle {
+  --pf-c-menu-toggle--BorderRadius: 0;
   --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-menu-toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -32,6 +33,7 @@
   --pf-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
   --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+  --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
@@ -69,6 +71,7 @@
   color: var(--pf-c-menu-toggle--Color);
   background-color: var(--pf-c-menu-toggle--BackgroundColor);
   border: 0;
+  border-radius: var(--pf-c-menu-toggle--BorderRadius);
 }
 .pf-c-menu-toggle::before, .pf-c-menu-toggle::after {
   position: absolute;
@@ -88,6 +91,7 @@
   border-bottom: var(--pf-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-c-menu-toggle--after--BorderBottomColor);
 }
 .pf-c-menu-toggle.pf-m-primary {
+  --pf-c-menu-toggle--BorderRadius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-primary--Color);
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-primary--BackgroundColor);
   --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-c-menu-toggle--m-primary--hover--BackgroundColor);

package/components/MenuToggle/menu-toggle.scss

@@ -1,4 +1,5 @@
 .pf-c-menu-toggle {
+  --pf-c-menu-toggle--BorderRadius: 0;
   --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-menu-toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -48,6 +49,7 @@
   --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
 
   // Primary
+  --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
@@ -100,6 +102,7 @@
   color: var(--pf-c-menu-toggle--Color);
   background-color: var(--pf-c-menu-toggle--BackgroundColor);
   border: 0;
+  border-radius: var(--pf-c-menu-toggle--BorderRadius);
 
   &::before,
   &::after {
@@ -123,6 +126,7 @@
   }
 
   &.pf-m-primary {
+    --pf-c-menu-toggle--BorderRadius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
     --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-primary--Color);
     --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-primary--BackgroundColor);
     --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-c-menu-toggle--m-primary--hover--BackgroundColor);