@patternfly/patternfly 4.147.1 → 4.150.0

package/components/Panel/panel.scss

@@ -0,0 +1,99 @@
+.pf-c-panel {
+  --pf-c-panel--Width: auto;
+  --pf-c-panel--MinWidth: auto;
+  --pf-c-panel--MaxWidth: none;
+  --pf-c-panel--ZIndex: auto;
+  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-panel--BoxShadow: none;
+
+  // border
+  --pf-c-panel--before--BorderWidth: 0;
+  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
+
+  // bordered
+  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+
+  // raised
+  --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
+
+  // header
+  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
+
+  // main
+  --pf-c-panel__main--MaxHeight: none;
+  --pf-c-panel__main--Overflow: visible;
+
+  // body
+  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
+
+  // footer
+  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--BoxShadow: none;
+
+  // scrollable
+  --pf-c-panel--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
+  --pf-c-panel--m-scrollable__main--Overflow: auto;
+  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} #{rgba($pf-color-black-1000, .16)}; // insets the shadow so it doesn't show on left/right sides
+
+  position: relative;
+  z-index: var(--pf-c-panel--ZIndex);
+  width: var(--pf-c-panel--Width);
+  min-width: var(--pf-c-panel--MinWidth);
+  max-width: var(--pf-c-panel--MaxWidth);
+  background-color: var(--pf-c-panel--BackgroundColor);
+  box-shadow: var(--pf-c-panel--BoxShadow);
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    content: "";
+    border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
+  }
+
+  &.pf-m-bordered {
+    --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
+  }
+
+  &.pf-m-raised {
+    --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
+    --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
+  }
+
+  &.pf-m-scrollable {
+    --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
+    --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
+    --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
+  }
+}
+
+.pf-c-panel__header {
+  padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
+}
+
+.pf-c-panel__main {
+  max-height: var(--pf-c-panel__main--MaxHeight);
+  overflow: var(--pf-c-panel__main--Overflow);
+}
+
+.pf-c-panel__main-body {
+  padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
+}
+
+.pf-c-panel__footer {
+  padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
+  box-shadow: var(--pf-c-panel__footer--BoxShadow);
+}

package/components/Popover/popover.css

@@ -2,7 +2,17 @@
   --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
   --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
-  --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
+  --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
+  --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
+  --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
+  --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
+  --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
+  --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
+  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
+  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
+  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
@@ -10,7 +20,7 @@
   --pf-c-popover__content--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
   --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
-  --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
   --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-popover__arrow--m-top--TranslateX: -50%;
   --pf-c-popover__arrow--m-top--TranslateY: 50%;
@@ -29,6 +39,12 @@
   --pf-c-popover--c-button--Right: var(--pf-global--spacer--md);
   --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
   --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
   --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
   position: relative;
   min-width: var(--pf-c-popover--MinWidth);
@@ -80,6 +96,26 @@
   right: 0;
   left: auto;
 }
+.pf-c-popover.pf-m-danger {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
+}
+.pf-c-popover.pf-m-warning {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
+}
+.pf-c-popover.pf-m-success {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
+}
+.pf-c-popover.pf-m-default {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
+}
+.pf-c-popover.pf-m-info {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
+}
 
 .pf-c-popover__content {
   position: relative;
@@ -107,6 +143,26 @@
   box-shadow: var(--pf-c-popover__arrow--BoxShadow);
 }
 
+.pf-c-popover__title {
+  flex: 0 0 auto;
+  margin-bottom: var(--pf-c-popover__title--MarginBottom);
+  font-family: var(--pf-c-popover__title--FontFamily);
+  font-size: var(--pf-c-popover__title--FontSize);
+  line-height: var(--pf-c-popover__title--LineHeight);
+}
+.pf-c-popover__title.pf-m-icon {
+  display: flex;
+}
+
+.pf-c-popover__title-icon {
+  margin-right: var(--pf-c-popover__title-icon--MarginRight);
+  color: var(--pf-c-popover__title-icon--Color);
+}
+
+.pf-c-popover__title-text {
+  color: var(--pf-c-popover__title-text--Color, inherit);
+}
+
 .pf-c-popover__body {
   word-wrap: break-word;
 }

package/components/Popover/popover.scss

@@ -3,7 +3,21 @@
   --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + #{pf-size-prem(300px)});
   --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + #{pf-size-prem(300px)});
-  --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
+
+  // Title icon colors for states
+  --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
+  --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
+  --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
+  --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
+  --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
+
+  // Title text colors for states
+  --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
+  --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
+  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
+  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
+  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
 
   // Content
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -15,7 +29,7 @@
   // Arrow
   --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
   --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
-  --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
   --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-popover__arrow--m-top--TranslateX: -50%;
   --pf-c-popover__arrow--m-top--TranslateY: 50%;
@@ -39,6 +53,16 @@
   // Header
   --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
 
+  // Title
+  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
+
+  // Title icon
+  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
+
   // Footer
   --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
 
@@ -132,6 +156,31 @@
       left: auto;
     }
   }
+
+  &.pf-m-danger {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
+  }
+
+  &.pf-m-warning {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
+  }
+
+  &.pf-m-success {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
+  }
+
+  &.pf-m-default {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
+  }
+
+  &.pf-m-info {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
+  }
 }
 
 .pf-c-popover__content {
@@ -139,6 +188,7 @@
   padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
   background-color: var(--pf-c-popover__content--BackgroundColor);
 
+  // Remove in breaking change
   > .pf-c-title {
     margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
   }
@@ -165,6 +215,27 @@
   box-shadow: var(--pf-c-popover__arrow--BoxShadow);
 }
 
+.pf-c-popover__title {
+  flex: 0 0 auto;
+  margin-bottom: var(--pf-c-popover__title--MarginBottom);
+  font-family: var(--pf-c-popover__title--FontFamily);
+  font-size: var(--pf-c-popover__title--FontSize);
+  line-height: var(--pf-c-popover__title--LineHeight);
+
+  &.pf-m-icon {
+    display: flex;
+  }
+}
+
+.pf-c-popover__title-icon {
+  margin-right: var(--pf-c-popover__title-icon--MarginRight);
+  color: var(--pf-c-popover__title-icon--Color);
+}
+
+.pf-c-popover__title-text {
+  color: var(--pf-c-popover__title-text--Color, inherit);
+}
+
 // Body
 .pf-c-popover__body {
   word-wrap: break-word;

package/components/Tooltip/tooltip.css

@@ -2,14 +2,14 @@
   --pf-c-tooltip--MaxWidth: 18.75rem;
   --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-tooltip__arrow--Width: var(--pf-global--arrow--width);
-  --pf-c-tooltip__arrow--Height: var(--pf-global--arrow--width);
+  --pf-c-tooltip__arrow--Width: 0.5rem;
+  --pf-c-tooltip__arrow--Height: 0.5rem;
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;

package/components/Tooltip/tooltip.scss

@@ -5,16 +5,16 @@
 
   // Content variables
   --pf-c-tooltip__content--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tooltip__content--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
 
   // Arrow variables
-  --pf-c-tooltip__arrow--Width: var(--pf-global--arrow--width);
-  --pf-c-tooltip__arrow--Height: var(--pf-global--arrow--width);
+  --pf-c-tooltip__arrow--Width: #{pf-size-prem(8px)};
+  --pf-c-tooltip__arrow--Height: #{pf-size-prem(8px)};
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;

package/components/_all.scss

@@ -58,6 +58,7 @@
 @import "./OverflowMenu/overflow-menu.scss";
 @import "./Page/page.scss";
 @import "./Pagination/pagination.scss";
+@import "./Panel/panel.scss";
 @import "./Popover/popover.scss";
 @import "./Progress/progress.scss";
 @import "./ProgressStepper/progress-stepper.scss";

package/docs/components/CodeBlock/examples/CodeBlock.md

@@ -1,6 +1,5 @@
 ---
 id: 'Code block'
-beta: true
 section: components
 cssPrefix: pf-c-code-block
 ---## Examples

package/docs/components/ContextSelector/examples/context-selector.md

@@ -774,3 +774,5 @@ cssPrefix: pf-c-context-selector
 | `.pf-m-plain.pf-m-text`                  | `.pf-c-context-selector__toggle`          | Modifies the context selector toggle for plain text styles.                     |
 | `.pf-m-disabled`                         | `a.pf-c-context-selector__menu-list-item` | Modifies an item for the disabled state.                                        |
 | `.pf-m-full-height`                      | `.pf-c-context-selector`                  | Modifies a context selector to full height of parent. See masthead for use.     |
+| `.pf-m-large`                            | `.pf-c-context-selector`                  | Modifies toggle height to be large.                                             |
+| `.pf-m-page-insets`                      | `.pf-c-context-selector`                  | Modifies toggle and menu insets to match the responsive page chrome insets.     |

package/docs/components/HelperText/examples/HelperText.md

@@ -1,6 +1,5 @@
 ---
 id: 'Helper text'
-beta: true
 section: components
 cssPrefix: pf-c-helper-text
 ---## Examples

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

@@ -1,7 +1,6 @@
 ---
 id: Menu
 section: components
-beta: true
 cssPrefix: pf-c-menu
 ---import './Menu.css'
 
@@ -286,7 +285,7 @@ cssPrefix: pf-c-menu
 
 ### With flyout
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-flyout">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -408,7 +407,7 @@ cssPrefix: pf-c-menu
 
 ### With flyout menu top
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-flyout">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -530,7 +529,7 @@ cssPrefix: pf-c-menu
 
 ### With flyout menu left
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-flyout">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -652,7 +651,7 @@ cssPrefix: pf-c-menu
 
 ### With flyout menu left top
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-flyout">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -774,7 +773,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -1154,7 +1153,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown level two
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown pf-m-drilled-in">
   <div class="pf-c-menu__content" style="--pf-c-menu__content--Height: 193px;">
     <ul class="pf-c-menu__list">
@@ -1534,7 +1533,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown level three
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown pf-m-drilled-in">
   <div class="pf-c-menu__content" style="--pf-c-menu__content--Height: 233px;">
     <ul class="pf-c-menu__list">
@@ -1914,7 +1913,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown level four
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown pf-m-drilled-in">
   <div class="pf-c-menu__content" style="--pf-c-menu__content--Height: 193px;">
     <ul class="pf-c-menu__list">
@@ -2294,7 +2293,7 @@ cssPrefix: pf-c-menu
 
 ### Scrollable drilldown
 
-```html
+```html isBeta
 <div
   class="pf-c-menu pf-m-drilldown pf-m-scrollable"
   style="--pf-c-menu__content--MaxHeight: 100px;"
@@ -2677,7 +2676,7 @@ cssPrefix: pf-c-menu
 
 ### Width modified drilldown
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown" style="--pf-c-menu--Width: 350px;">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -3057,7 +3056,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown with breadcrumbs - level 1
 
-```html
+```html isBeta
 <div class="pf-c-menu pf-m-drilldown">
   <div class="pf-c-menu__content">
     <ul class="pf-c-menu__list">
@@ -3188,7 +3187,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown with breadcrumbs - level 2
 
-```html
+```html isBeta
 <div
   class="pf-c-menu pf-m-drilldown pf-m-drilled-in"
   style="--pf-c-menu__content--Height: 96px;"
@@ -3347,7 +3346,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown with breadcrumbs - level 3
 
-```html
+```html isBeta
 <div
   class="pf-c-menu pf-m-drilldown pf-m-drilled-in"
   style="--pf-c-menu__content--Height: 136px;"
@@ -3542,7 +3541,7 @@ cssPrefix: pf-c-menu
 
 ### Drilldown with breadcrumbs - level 4
 
-```html
+```html isBeta
 <div
   class="pf-c-menu pf-m-drilldown pf-m-drilled-in"
   style="--pf-c-menu__content--Height: 216px;"
@@ -3744,27 +3743,27 @@ cssPrefix: pf-c-menu
 
 <!--
 ### Drilldown managed height
-```hbs
+```hbs isBeta
 {{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height" menu--Drilldown--menu--attribute='style="--pf-c-menu--MaxHeight: 120px; --pf-c-menu__content--Height: 216px;"'}}
 ```
 
 ### Drilldown managed height level two
-```hbs
+```hbs isBeta
 {{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-2" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--menu--attribute='style="--pf-c-menu--MaxHeight: 120px; --pf-c-menu__content--Height: 193px;"'}}
 ```
 
 ### Drilldown managed height level three
-```hbs
+```hbs isBeta
 {{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-3" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--IsDrilledIn--list-2="true" menu--Drilldown--menu--attribute='style="--pf-c-menu--MaxHeight: 120px; --pf-c-menu__content--Height: 233px;"'}}
 ```
 
 ### Drilldown managed height level four
-```hbs
+```hbs isBeta
 {{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-4" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--IsDrilledIn--list-2="true" menu--Drilldown--IsDrilledIn--list-3="true" menu--Drilldown--menu--attribute='style="--pf-c-menu--MaxHeight: 120px; --pf-c-menu__content--Height: 216px;"'}}
 ```
 
 ### Drilldown with breadcrumbs and managed height - level 4
-```hbs
+```hbs isBeta
 {{#> menu menu--id="drilldown-with-breadcrumbs-and-managed-height-level-4" menu--modifier="pf-m-drilldown pf-m-drilled-in" menu--attribute='style="--pf-c-menu--MaxHeight: 120px; --pf-c-menu__content--Height: 216px;"'}}
   {{> menu-breadcrumbs--Drilldown breadcrumb--id="drilldown-with-breadcrumbs-level-4" menu-breadcrumbs--Drilldown--IsLevel4="true"}}
   {{> menu-content--Breadcrumbs menu-content--Breadcrumbs--level2="true" menu-content--Breadcrumbs--level3="true" menu-content--Breadcrumbs--level4="true"}}

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

@@ -17,6 +17,10 @@
   background-color: var(--pf-global--BackgroundColor--dark-300);
 }
 
+#ws-core-c-navigation-expandable-third-level .pf-c-nav {
+  background-color: var(--pf-global--BackgroundColor--dark-300);
+}
+
 #ws-core-c-navigation-horizontal-in-masthead,
 #ws-core-c-navigation-horizontal-in-masthead-overflow {
   padding: 0;

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

@@ -301,6 +301,119 @@ cssPrefix: pf-c-nav
 
 ```
 
+### Expandable, third level
+
+```html
+<nav class="pf-c-nav" aria-label="Global">
+  <ul class="pf-c-nav__list">
+    <li class="pf-c-nav__item">
+      <a href="#" class="pf-c-nav__link">Clusters</a>
+    </li>
+    <li class="pf-c-nav__item pf-m-current">
+      <a href="#" class="pf-c-nav__link">Overview</a>
+    </li>
+    <li class="pf-c-nav__item">
+      <a href="#" class="pf-c-nav__link">Releases</a>
+    </li>
+    <li class="pf-c-nav__item pf-m-expandable">
+      <button
+        class="pf-c-nav__link"
+        id="expandable-third-level-example-example-1"
+        aria-expanded="false"
+      >
+        Subscriptions
+        <span class="pf-c-nav__toggle">
+          <span class="pf-c-nav__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+      <section
+        class="pf-c-nav__subnav"
+        aria-labelledby="expandable-third-level-example-example-1"
+        hidden
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Subnav link 1</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Subnav link 2</a>
+          </li>
+        </ul>
+      </section>
+    </li>
+    <li class="pf-c-nav__item pf-m-expandable pf-m-expanded">
+      <button
+        class="pf-c-nav__link"
+        id="expandable-third-level-example-example-2"
+        aria-expanded="true"
+      >
+        Cost management
+        <span class="pf-c-nav__toggle">
+          <span class="pf-c-nav__toggle-icon">
+            <i class="fas fa-angle-right" aria-hidden="true"></i>
+          </span>
+        </span>
+      </button>
+      <section
+        class="pf-c-nav__subnav"
+        aria-labelledby="expandable-third-level-example-example-2"
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Overview</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Openshift</a>
+          </li>
+          <li class="pf-c-nav__item pf-m-expandable pf-m-expanded">
+            <button
+              class="pf-c-nav__link"
+              id="expandable-third-level-example-sub-example-1"
+              aria-expanded="true"
+            >
+              Public clouds
+              <span class="pf-c-nav__toggle">
+                <span class="pf-c-nav__toggle-icon">
+                  <i class="fas fa-angle-right" aria-hidden="true"></i>
+                </span>
+              </span>
+            </button>
+            <section
+              class="pf-c-nav__subnav"
+              aria-labelledby="expandable-third-level-example-sub-example-1"
+            >
+              <ul class="pf-c-nav__list">
+                <li class="pf-c-nav__item">
+                  <a href="#" class="pf-c-nav__link">Amazon Web Services</a>
+                </li>
+                <li class="pf-c-nav__item">
+                  <a href="#" class="pf-c-nav__link">Microsoft Azure</a>
+                </li>
+                <li class="pf-c-nav__item">
+                  <a href="#" class="pf-c-nav__link">Google Cloud Services</a>
+                </li>
+              </ul>
+            </section>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Cost Models</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Cost Explorer</a>
+          </li>
+        </ul>
+      </section>
+    </li>
+    <li class="pf-c-nav__item">
+      <a href="#" class="pf-c-nav__link">Support Cases</a>
+    </li>
+  </ul>
+</nav>
+
+```
+
 ### Horizontal
 
 ```html