@patternfly/patternfly 4.157.1 → 4.159.2

package/README.md

@@ -58,7 +58,7 @@ To create 3 new demos named "Test demo", "Test demo 2", and "Test demo 3", run:
 #### Update screenshots
 When making visual changes to a full page example, new example preview screenshots must be generated. To update the screenshots:
 
-- open a terminal and run `yarn build && yarn run serve`
+- open a terminal and run `yarn build && yarn serve`
 - in another terminal, run `yarn screenshots`
 
 ## Guidelines for CSS development
@@ -83,7 +83,7 @@ To run the a11y audit locally:
 
 - install the latest [chromedriver](http://chromedriver.chromium.org/downloads) and ensure its available on your system `$PATH`
   - macOS users can simply `brew cask install chromedriver`
-- open a terminal and run `yarn build && yarn run serve`
+- open a terminal and run `yarn build && yarn serve`
 - in another terminal, run `yarn a11y`
 
 The tool is configured to return WCAG 2.0 AA violations for the full page renderings of all components, layouts, utilities, and demos. The tool will provide feedback about what the violation is and a link to documentation about how to address the violation.

package/RELEASE-NOTES.md

@@ -4,6 +4,36 @@ section: developer-resources
 releaseNoteTOC: true
 ---
 
+## 2021.15 release notes (2021-11-16)
+Packages released:
+- [@patternfly/patternfly@v4.159.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.159.1)
+
+### Components
+- **Card:** Added non-selectable card, updated card view demo ([#4500](https://github.com/patternfly/patternfly/pull/4500))
+- **Dropdown:**
+  - Added secondary variant to dropdown ([#4498](https://github.com/patternfly/patternfly/pull/4498))
+  - Applied primary styling to split ([#4508](https://github.com/patternfly/patternfly/pull/4508))
+- **Dual list selector:** Aligned html/a11y with react ([#4499](https://github.com/patternfly/patternfly/pull/4499))
+- **Form select:** Matched padding with select ([#4490](https://github.com/patternfly/patternfly/pull/4490))
+- **Log viewer:**
+  - Added nowrap variation ([#4455](https://github.com/patternfly/patternfly/pull/4455))
+  - Updated the way dark theme is applied ([#4506](https://github.com/patternfly/patternfly/pull/4506))
+- **Menu toggle:**
+  - Added plain w/text variant ([#4491](https://github.com/patternfly/patternfly/pull/4491))
+  - Added rounded corners to primary ([#4494](https://github.com/patternfly/patternfly/pull/4494))
+- **Menu:** Added nav variant ([#4513](https://github.com/patternfly/patternfly/pull/4513))
+- **Nav:**
+  - Added drilldown menu to nav ([#4458](https://github.com/patternfly/patternfly/pull/4458))
+  - Fixed toggle icon rotation ([#4486](https://github.com/patternfly/patternfly/pull/4486))
+- **Options menu:** Moved text into button in plain text variant ([#4492](https://github.com/patternfly/patternfly/pull/4492))
+- **Table:** Fixed pf-m-truncate alignment ([#4489](https://github.com/patternfly/patternfly/pull/4489))
+- **TextInputGroup:** Added disabled styling ([#4484](https://github.com/patternfly/patternfly/pull/4484))
+- **Tooltip:** Added support for diagonal positioning ([#4470](https://github.com/patternfly/patternfly/pull/4470))
+
+### Other
+- **README:** Updated a11y docs, s/npm run/yarn ([#4496](https://github.com/patternfly/patternfly/pull/4496))
+
+
 ## 2021.14 release notes (2021-10-26)
 Packages released:
 - [@patternfly/patternfly@v4.151.4](https://www.npmjs.com/package/@patternfly/patternfly/v/4.151.4)

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);
@@ -261,18 +274,18 @@
   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: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);
 }
@@ -288,7 +301,7 @@
 .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 {
@@ -308,15 +321,37 @@
 .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);
 
@@ -341,15 +360,15 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
     }
   }
 
-  &:not(.pf-m-action):hover,
+  &: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);
@@ -358,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);
@@ -367,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);
@@ -393,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);
     }
@@ -424,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,6 +79,7 @@
   --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;
@@ -195,11 +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--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;
@@ -299,6 +327,62 @@
 .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;

package/components/Menu/menu.scss

@@ -7,6 +7,7 @@
   --pf-c-menu--MinWidth: auto;
   --pf-c-menu--Width: auto;
   --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-menu--Top: auto;
 
   // 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));
@@ -184,6 +185,7 @@
   --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);
@@ -334,6 +336,113 @@
       overflow-y: auto;
     }
   }
+
+  // Nav variant
+  --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);
+
+  // Nested menus
+  --pf-c-menu--m-nav--c-menu--left-offset: #{pf-size-prem(4px)};
+  --pf-c-menu--m-nav--c-menu--m-left--right-offset: #{pf-size-prem(4px)};
+  --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-m-nav,
+  &.pf-m-nav & {
+    --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);
+
+    // stylelint-disable max-nesting-depth, selector-max-class
+    .pf-c-menu__item {
+      position: relative;
+      outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
+
+      &::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);
+      }
+
+      &: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);
+        }
+      }
+    }
+    // stylelint-enable
+  }
+
+  &.pf-m-nav & {
+    width: 100%;
+  }
+
+  &.pf-m-flyout.pf-m-nav,
+  &.pf-m-flyout.pf-m-nav & {
+    top: var(--pf-c-menu--m-nav--c-menu--Top);
+    left: var(--pf-c-menu--m-nav--c-menu--Left);
+
+    // stylelint-disable selector-max-class
+    &.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-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__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__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);
+    }
+    // stylelint-enable
+  }
 }
 
 // breadcrumb

package/components/MenuToggle/menu-toggle.css

@@ -33,14 +33,28 @@
   --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--BorderRadius: var(--pf-global--BorderRadius--sm);
   --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);
   --pf-c-menu-toggle--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-primary--m-expanded--Color: var(--pf-global--Color--light-100);
+  --pf-c-menu-toggle--m-secondary--Color: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--BorderRadius: var(--pf-global--BorderRadius--sm);
+  --pf-c-menu-toggle--m-secondary--BackgroundColor: transparent;
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu-toggle--m-secondary--hover--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-secondary--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-secondary--active--before--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--hover--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--focus--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--active--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-secondary--m-expanded--Color: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-menu-toggle--m-plain--Color: var(--pf-global--Color--200);
   --pf-c-menu-toggle--m-plain--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-menu-toggle--m-plain--PaddingLeft: var(--pf-global--spacer--md);
@@ -100,6 +114,39 @@
   --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);
 }
+.pf-c-menu-toggle.pf-m-primary, .pf-c-menu-toggle.pf-m-primary::before {
+  border-radius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
+}
+.pf-c-menu-toggle.pf-m-secondary {
+  --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-secondary--Color);
+  --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-secondary--m-expanded--Color);
+}
+.pf-c-menu-toggle.pf-m-secondary, .pf-c-menu-toggle.pf-m-secondary::before {
+  border-radius: var(--pf-c-menu-toggle--m-secondary--BorderRadius);
+}
+.pf-c-menu-toggle.pf-m-secondary::before {
+  border-color: var(--pf-c-menu-toggle--m-secondary--before--BorderColor);
+  border-width: var(--pf-c-menu-toggle--m-secondary--before--BorderWidth);
+}
+.pf-c-menu-toggle.pf-m-secondary::after {
+  border: 0;
+}
+.pf-c-menu-toggle.pf-m-secondary:hover {
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderColor);
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--hover--before--BorderWidth);
+}
+.pf-c-menu-toggle.pf-m-secondary:focus {
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderColor);
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--focus--before--BorderWidth);
+}
+.pf-c-menu-toggle.pf-m-secondary:active {
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-secondary--active--before--BorderColor);
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-secondary--active--before--BorderWidth);
+}
+.pf-c-menu-toggle.pf-m-secondary.pf-m-expanded {
+  --pf-c-menu-toggle--m-secondary--before--BorderColor: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderColor);
+  --pf-c-menu-toggle--m-secondary--before--BorderWidth: var(--pf-c-menu-toggle--m-expanded__toggle--m-secondary--before--BorderWidth);
+}
 .pf-c-menu-toggle.pf-m-plain: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);