@patternfly/patternfly 4.156.3 → 4.159.0

package/components/Dropdown/dropdown.css

@@ -15,10 +15,10 @@
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
   --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
   --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
-  --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
@@ -32,9 +32,22 @@
   --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
+  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
@@ -48,6 +61,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 +161,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 +229,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,18 +249,43 @@
 .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:not(.pf-m-action):hover::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:hover::before {
+.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):not(.pf-m-secondary):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);
 }
-.pf-c-dropdown__toggle:not(.pf-m-action):active::before, .pf-c-dropdown__toggle:not(.pf-m-action).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
+.pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before, .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary).pf-m-active::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:active::before {
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-dropdown__toggle--active--before--BorderBottomWidth);
 }
-.pf-c-dropdown__toggle:not(.pf-m-action):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
+.pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before, .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button:focus::before {
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-dropdown__toggle--focus--before--BorderBottomWidth);
 }
-.pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
+.pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-action .pf-c-dropdown__toggle-button::before {
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
   border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
 }
@@ -249,32 +301,57 @@
 .pf-c-dropdown__toggle.pf-m-plain::before {
   border: 0;
 }
-.pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
+.pf-c-dropdown__toggle.pf-m-plain:hover, .pf-c-dropdown__toggle.pf-m-plain:focus, .pf-c-dropdown__toggle.pf-m-plain:active, .pf-c-dropdown__toggle.pf-m-plain.pf-m-active, .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-plain {
   --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
 }
 .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-plain:disabled {
   --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;
 }
 .pf-c-dropdown__toggle.pf-m-primary:hover {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
 }
-.pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
-  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
-}
 .pf-c-dropdown__toggle.pf-m-primary:focus {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
 }
+.pf-c-dropdown__toggle.pf-m-primary:active, .pf-c-dropdown__toggle.pf-m-primary.pf-m-active {
+  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
+}
 .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
 }
+.pf-c-dropdown__toggle.pf-m-secondary {
+  --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
+  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
+  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
+}
+.pf-c-dropdown__toggle.pf-m-secondary::before {
+  border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
+  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
+}
+.pf-c-dropdown__toggle.pf-m-secondary:hover {
+  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
+}
+.pf-c-dropdown__toggle.pf-m-secondary:focus {
+  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
+}
+.pf-c-dropdown__toggle.pf-m-secondary:active, .pf-c-dropdown__toggle.pf-m-secondary.pf-m-active {
+  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
+}
+.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary {
+  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
+  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
+}
 .pf-c-dropdown__toggle > .pf-c-badge {
   --pf-c-dropdown__toggle-icon--MarginLeft: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft);
   --pf-c-dropdown__toggle-icon--MarginRight: var(--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight);

package/components/Dropdown/dropdown.scss

@@ -18,27 +18,46 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200);
   --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300);
   --pf-c-dropdown__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100);
-  --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-dropdown__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-dropdown__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-dropdown__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+
+  // Plain
   --pf-c-dropdown__toggle--m-plain--Color: var(--pf-global--Color--200);
   --pf-c-dropdown__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
   --pf-c-dropdown__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-dropdown__toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-dropdown__toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-dropdown__toggle--m-plain--child--LineHeight: normal; // remove at breaking change
+
+  // Primary
   --pf-c-dropdown__toggle--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-dropdown__toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-dropdown__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
+  --pf-c-dropdown__toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--200);
 
+  // Secondary
+  --pf-c-dropdown__toggle--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-dropdown__toggle--m-secondary--BackgroundColor: transparent;
+  --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
+
   // toggle button
   --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
 
@@ -56,6 +75,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 +212,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 +295,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,15 +327,48 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
     }
   }
 
-  &:not(.pf-m-action):hover,
+  &.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):not(.pf-m-secondary):hover,
   &.pf-m-action .pf-c-dropdown__toggle-button:hover {
     &::before {
       --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--hover--before--BorderBottomColor);
     }
   }
 
-  &:not(.pf-m-action):active,
-  &:not(.pf-m-action).pf-m-active,
+  &:not(.pf-m-action):not(.pf-m-secondary):active,
+  &:not(.pf-m-action):not(.pf-m-secondary).pf-m-active,
   &.pf-m-action .pf-c-dropdown__toggle-button:active {
     &::before {
       --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--active--before--BorderBottomColor);
@@ -301,7 +377,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
     }
   }
 
-  &:not(.pf-m-action):focus,
+  &:not(.pf-m-action):not(.pf-m-secondary):focus,
   &.pf-m-action .pf-c-dropdown__toggle-button:focus {
     &::before {
       --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown__toggle--focus--before--BorderBottomColor);
@@ -310,7 +386,7 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
     }
   }
 
-  .pf-m-expanded > &:not(.pf-m-action),
+  .pf-m-expanded > &:not(.pf-m-action):not(.pf-m-secondary),
   .pf-m-expanded > &.pf-m-action .pf-c-dropdown__toggle-button {
     &::before {
       --pf-c-dropdown__toggle--before--BorderBottomColor: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor);
@@ -336,9 +412,9 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
     }
 
     &:hover,
+    &:focus,
     &:active,
     &.pf-m-active,
-    &:focus,
     .pf-m-expanded > & {
       --pf-c-dropdown__toggle--m-plain--Color: var(--pf-c-dropdown__toggle--m-plain--hover--Color);
     }
@@ -350,8 +426,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);
 
@@ -363,17 +443,47 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
       --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor);
     }
 
+    &:focus {
+      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
+    }
+
     &:active,
     &.pf-m-active {
       --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
     }
 
+    .pf-m-expanded > & {
+      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
+    }
+  }
+
+  &.pf-m-secondary {
+    --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
+    --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
+
+    border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
+
+    &::before {
+      border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
+      border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
+    }
+
+    &:hover {
+      --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth);
+    }
+
     &:focus {
-      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor);
+      --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth);
+    }
+
+    &:active,
+    &.pf-m-active {
+      --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth);
     }
 
     .pf-m-expanded > & {
-      --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
+      --pf-c-dropdown__toggle--m-secondary--before--BorderWidth: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth);
+      --pf-c-dropdown__toggle--m-secondary--before--BorderColor: var(--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor);
     }
   }
 

package/components/Menu/menu.css

@@ -79,7 +79,10 @@
   --pf-c-menu--MinWidth: auto;
   --pf-c-menu--Width: auto;
   --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-menu--Top: auto;
   --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));
@@ -193,14 +196,38 @@
   --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
   --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
   --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  top: var(--pf-c-menu--Top);
   z-index: var(--pf-c-menu--ZIndex);
   width: var(--pf-c-menu--Width);
   min-width: var(--pf-c-menu--MinWidth);
   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--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
+  --pf-c-menu--m-nav__list--PaddingTop: 0;
+  --pf-c-menu--m-nav__list--PaddingBottom: 0;
+  --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
+  --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
+  --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
+  --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
+  --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
+  --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
+  --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
+  --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
+  --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
+  --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
+  --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
+  --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
 }
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
@@ -209,28 +236,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 +286,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 +324,65 @@
   --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.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
+  --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
+  --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
+  --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
+  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
+  --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
+  --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
+  --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
+  --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
+  --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
+  --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
+  --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
+  --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
+  box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
+}
+.pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
+  position: relative;
+  outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
+}
+.pf-c-menu.pf-m-nav .pf-c-menu__item::before, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
+}
+.pf-c-menu.pf-m-nav .pf-c-menu__item:hover::after, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item:hover::after {
+  position: absolute;
+  top: var(--pf-c-menu--m-nav__item--hover--after--Top);
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
+}
+.pf-c-menu.pf-m-nav .pf-c-menu {
+  width: 100%;
+}
+.pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
+  top: var(--pf-c-menu--m-nav--c-menu--Top);
+  left: var(--pf-c-menu--m-nav--c-menu--Left);
+}
+.pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-top {
+  --pf-c-menu--m-nav--c-menu--Top: auto;
+  bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
+}
+.pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-left {
+  --pf-c-menu--m-nav--c-menu--Left: auto;
+  right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
+}
+.pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child {
+  --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
+}
+.pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child .pf-c-menu {
+  --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
+}
 
 .pf-c-menu__breadcrumb {
   display: flex;
@@ -364,6 +449,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);
 }