@patternfly/patternfly 4.158.0 → 4.160.0

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/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/Nav/nav.css

@@ -724,14 +724,14 @@
   border-color: var(--pf-c-nav__link--after--BorderColor);
   border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
 }
-.pf-c-nav__link:hover {
+.pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
   color: var(--pf-c-nav__link--hover--Color);
   background-color: var(--pf-c-nav__link--hover--BackgroundColor);
 }
-.pf-c-nav__link:hover::before {
+.pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
   border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
 }
-.pf-c-nav__link:hover::after {
+.pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
   border-color: var(--pf-c-nav__link--hover--after--BorderColor);
   border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
 }

package/components/Nav/nav.scss

@@ -894,7 +894,8 @@
 
   // States
   // Set states property explicitly to override with modifiers without having to wrap updates with :state { update }
-  &:hover {
+  &:hover,
+  &.pf-m-hover {
     color: var(--pf-c-nav__link--hover--Color);
     background-color: var(--pf-c-nav__link--hover--BackgroundColor);
 

package/components/Table/table.css

@@ -227,8 +227,8 @@
   --pf-c-table--m-compact__expandable-row-content--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-table--m-compact__expandable-row-content--PaddingBottom: var(--pf-global--spacer--lg);
   --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
+  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
   --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
   --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
@@ -716,7 +716,7 @@
 .pf-c-table__check {
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 }
-.pf-c-table__check > input {
+.pf-c-table__check > input:not([disabled]) {
   cursor: pointer;
 }
 

package/components/Table/table.scss

@@ -240,8 +240,8 @@
   --pf-c-table--m-compact__expandable-row-content--PaddingLeft: var(--pf-global--spacer--lg);
 
   // Nested table
-  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--3xl);
-  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--3xl);
+  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
+  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
 
   // Modifier - expandable row expanded
   --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
@@ -902,7 +902,7 @@
 .pf-c-table__check {
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 
-  > input {
+  > input:not([disabled]) {
     cursor: pointer;
   }
 }

package/components/Toolbar/toolbar.css

@@ -112,6 +112,8 @@
   --pf-c-toolbar__item--m-chip-group--spacer: var(--pf-global--spacer--sm);
   --pf-c-toolbar__item--m-label--spacer: var(--pf-c-toolbar__item--spacer);
   --pf-c-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-global--spacer--sm));
+  --pf-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
   --pf-c-toolbar--c-divider--m-vertical--spacer: var(--pf-c-toolbar--spacer--base);
   --pf-c-toolbar--m-full-height--PaddingTop: 0;
@@ -379,8 +381,8 @@
   grid-row-gap: var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap);
 }
 .pf-c-toolbar__expandable-content .pf-m-label {
-  display: none;
-  visibility: hidden;
+  margin-bottom: var(--pf-c-toolbar__expandable-content__item--m-label--MarginBottom);
+  font-size: var(--pf-c-toolbar__expandable-content__item--m-label--FontSize);
 }
 
 .pf-c-toolbar__content.pf-m-chip-container,

package/components/Toolbar/toolbar.scss

@@ -99,6 +99,10 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   --pf-c-toolbar__item--m-label--spacer: var(--pf-c-toolbar__item--spacer);
   --pf-c-toolbar__item--m-label--FontWeight: var(--pf-global--FontWeight--bold);
 
+  // Label in expanded content
+  --pf-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-global--spacer--sm));
+  --pf-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-global--FontSize--sm);
+
   // Toggle
   --pf-c-toolbar__toggle--m-expanded__c-button--m-plain--Color: var(--pf-global--Color--100);
 
@@ -382,8 +386,8 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
   }
 
   .pf-m-label {
-    display: none;
-    visibility: hidden;
+    margin-bottom: var(--pf-c-toolbar__expandable-content__item--m-label--MarginBottom);
+    font-size: var(--pf-c-toolbar__expandable-content__item--m-label--FontSize);
   }
 }
 

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

@@ -5080,6 +5080,7 @@ cssPrefix: pf-c-menu
 | `.pf-m-favorited`                                   | `.pf-c-menu__item-action.pf-m-favorite`                           | Modifies the menu item action icon to be favorited.                                                                                                  |
 | `.pf-m-selected`                                    | `.pf-c-menu__item`                                                | Modifies the menu item to be selected.                                                                                                               |
 | `.pf-m-flyout`                                      | `.pf-c-menu`                                                      | Modifies the menu so that all nested `.pf-c-menu` elements "flyout".                                                                                 |
+| `.pf-m-nav`                                         | `.pf-c-menu`                                                      | Modifies the menu for nav variant.                                                                                                                   |
 | `.pf-m-top`                                         | `.pf-c-menu`                                                      | Modifies a flyout menu to expand to the top.                                                                                                         |
 | `.pf-m-left`                                        | `.pf-c-menu`                                                      | Modifies a flyout menu to expand to the left.                                                                                                        |
 | `.pf-m-plain`                                       | `.pf-c-menu`                                                      | Modifies the menu component for use in the page instead of as a dropdown.                                                                            |

package/docs/components/Nav/examples/Navigation.css

@@ -13,8 +13,7 @@
 #ws-core-c-navigation-nav-with-drilldown-menu .pf-c-nav,
 #ws-core-c-navigation-level-2-drilldown,
 #ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-nav-with-flyout .pf-c-nav,
-#ws-core-c-navigation-nav-with-menu-and-flyout .pf-c-nav {
+#ws-core-c-navigation-nav-with-flyout .pf-c-nav {
   padding: 0;
   background-color: var(--pf-global--BackgroundColor--dark-300);
 }
@@ -47,7 +46,16 @@
 }
 
 #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
-[id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html,
-#ws-core-c-navigation-nav-with-menu-and-flyout .ws-preview-html {
+[id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
   width: 260px;
 }
+
+#ws-core-c-navigation-nav-with-flyout .ws-preview-html {
+  position: relative;
+}
+
+#ws-core-c-navigation-nav-with-flyout .pf-c-menu.pf-m-flyout.pf-m-nav {
+  position: absolute;
+  top: 168px;
+  left: 256px;
+}