@patternfly/patternfly 4.177.0 → 4.179.1

package/components/Nav/themes/dark/nav.scss

@@ -0,0 +1,42 @@
+@mixin nav() {
+  .pf-c-nav {
+    --pf-c-nav__item--item__link--after--Top: -1px;
+    --pf-c-nav__item--before--BorderColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav__link--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-nav__link--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-nav__link--active--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-nav__link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-nav__link--before--BorderColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav--m-tertiary__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav__section-title--Color: var(--pf-global--Color--200);
+    --pf-c-nav__section-title--BorderBottomColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav__scroll-button--before--BorderColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav--c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
+    --pf-c-nav__link--hover--before--BorderBottomWidth: 0;
+    --pf-c-nav__link--focus--before--BorderBottomWidth: 0;
+    --pf-c-nav__link--active--before--BorderBottomWidth: 0;
+    --pf-c-nav__link--m-current--before--BorderBottomWidth: 0;
+  }
+
+  .pf-c-nav__link {
+    &::before {
+      bottom: 0;
+    }
+
+    &::after {
+      top: var(--pf-c-nav__item--item__link--after--Top);
+    }
+  }
+
+  .pf-c-nav__item + .pf-c-nav__item {
+    --pf-c-nav__link--after--Top: var(--pf-c-nav__item--item__link--after--Top);
+  }
+
+  .pf-c-nav__subnav {
+    --pf-c-nav__item--item__link--after--Top: 0;
+  }
+
+  .pf-c-nav__section {
+    --pf-c-nav__item--item__link--after--Top: 0;
+  }
+}

package/components/NotificationBadge/themes/dark/notification-badge.scss

@@ -0,0 +1,5 @@
+@mixin notification-badge() {
+  .pf-c-notification-badge {
+    --pf-c-notification-badge--m-unread--after--BackgroundColor: var(--pf-global--primary-color--300);
+  }
+}

package/components/NotificationDrawer/themes/dark/notification-drawer.scss

@@ -0,0 +1,12 @@
+@mixin notification-drawer() {
+  .pf-c-notification-drawer {
+    --pf-c-notification-drawer--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-notification-drawer__header--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-notification-drawer__list-item--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-notification-drawer__list-item--BoxShadow: none;
+    --pf-c-notification-drawer__list-item--BorderBottomColor: var(--pf-global--BorderColor--100);
+    --pf-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-global--BackgroundColor--100);
+    --pf-c-notification-drawer__list-item--list-item--m-read--BoxShadow: none;
+    --pf-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}

package/components/OptionsMenu/themes/dark/options-menu.scss

@@ -0,0 +1,21 @@
+@mixin options-menu() {
+  .pf-c-options-menu {
+    --pf-c-options-menu__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-options-menu__toggle--BorderTopColor: transparent;
+    --pf-c-options-menu__toggle--BorderRightColor: transparent;
+    --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-global--BorderColor--400);
+    --pf-c-options-menu__toggle--BorderLeftColor: transparent;
+    --pf-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+    --pf-c-options-menu__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-options-menu__group-title--FontSize: var(--pf-global--FontSize--xs);
+    --pf-c-options-menu__group-title--FontWeight: var(--pf-global--FontWeight--bold);
+    --pf-c-options-menu__menu--Top: 100%;
+  }
+
+  .pf-c-options-menu__toggle {
+    &.pf-m-plain {
+      background: transparent;
+    }
+  }
+}

package/components/Page/themes/dark/page.scss

@@ -0,0 +1,62 @@
+@mixin page() {
+  .pf-c-page {
+    --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-page__sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
+    --pf-c-page__header--BackgroundColor: var(--pf-global--palette--black-1000);
+  }
+
+  .pf-c-page__header-tools-item {
+    &.pf-m-selected {
+      .pf-c-button {
+        color: var(--pf-global--Color--100);
+
+        // stylelint-disable
+        .pf-c-notification-badge {
+          &:hover {
+            &::before {
+              background-color: var(--pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor);
+            }
+          }
+        }
+        // stylelint-enable
+      }
+    }
+  }
+
+  .pf-c-page__main-nav {
+    &.pf-m-sticky-top,
+    &.pf-m-sticky-bottom {
+      --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    }
+  }
+
+  .pf-c-page__main-breadcrumb {
+    &.pf-m-sticky-top,
+    &.pf-m-sticky-bottom {
+      --pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    }
+  }
+
+  .pf-c-page__main-group {
+    &.pf-m-sticky-top,
+    &.pf-m-sticky-bottom {
+      --pf-c-page__main-section--m-light--BackgroundColor: var(--pf-global--BackgroundColor--300);
+      --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--300);
+      --pf-c-page__main-breadcrumb--BackgroundColor: var(--pf-global--BackgroundColor--300);
+      --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    }
+  }
+
+  .pf-c-page__main-section {
+    &.pf-m-sticky-top,
+    &.pf-m-sticky-bottom {
+      --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    }
+  }
+
+  .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
+  .pf-c-page__main-section[class*="pf-m-dark-"],
+  .pf-c-page__header {
+    @include pf-t-dark;
+  }
+}

package/components/Pagination/themes/dark/pagination.scss

@@ -0,0 +1,5 @@
+@mixin pagination() {
+  .pf-c-pagination {
+    --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}

package/components/Popover/popover.scss

@@ -244,4 +244,3 @@
 .pf-c-popover__footer {
   margin-top: var(--pf-c-popover__footer--MarginTop);
 }
-

package/components/Popover/themes/dark/popover.scss

@@ -0,0 +1,15 @@
+@mixin popover() {
+  .pf-c-popover {
+    --pf-c-popover--BoxShadow: none;
+    --pf-c-popover__arrow--BoxShadow: none;
+    --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
+    --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
+    --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
+    --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
+
+    &,
+    .pf-c-popover__arrow {
+      border: 4px solid var(--pf-global--BorderColor--400);
+    }
+  }
+}

package/components/Progress/progress.scss

@@ -200,4 +200,3 @@
   height: var(--pf-c-progress__indicator--Height);
   background-color: var(--pf-c-progress__indicator--BackgroundColor);
 }
-

package/components/Progress/themes/dark/progress.scss

@@ -0,0 +1,7 @@
+@mixin progress() {
+  .pf-c-progress {
+    --pf-c-progress--m-inside__measure--Color: var(--pf-global--palette--black-900);
+    --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--palette--black-900);
+    --pf-c-progress--m-warning--m-inside__measure--Color: var(--pf-global--palette--black-900);
+  }
+}

package/components/SearchInput/themes/dark/search-input.scss

@@ -0,0 +1,14 @@
+@mixin search-input() {
+  .pf-c-search-input {
+    --pf-c-search-input__text--before--BorderColor: transparent;
+    --pf-c-search-input__text--after--BorderBottomColor: var(--pf-global--BorderColor--400);
+
+    background-color: var(--pf-global--BackgroundColor--400);
+  }
+
+  .pf-c-search-input__text {
+    &::before {
+      border-bottom-color: var(--pf-global--BorderColor--400);
+    }
+  }
+}

package/components/Select/themes/dark/select.scss

@@ -0,0 +1,21 @@
+@mixin select() {
+  .pf-c-select {
+    --pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--palette--black-500);
+    --pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-select__toggle--before--BorderTopColor: transparent;
+    --pf-c-select__toggle--before--BorderRightColor: transparent;
+    --pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--400);
+    --pf-c-select__toggle--before--BorderLeftColor: transparent;
+    --pf-c-select__menu--Top: 100%;
+    --pf-c-select__menu--m-top--TranslateY: -100%;
+    --pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+
+  .pf-c-select__toggle {
+    &:disabled,
+    &.pf-m-disabled {
+      color: var(--pf-global--palette--black-100);
+    }
+  }
+}

package/components/SimpleList/themes/dark/simple-list.scss

@@ -0,0 +1,12 @@
+@mixin simple-list() {
+  .pf-c-simple-list {
+    --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--active-color--100);
+    --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
+    --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
+    --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--400);
+    --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
+    --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--400);
+  }
+}

package/components/Skeleton/themes/dark/skeleton.scss

@@ -0,0 +1,8 @@
+@mixin skeleton() {
+  .pf-c-skeleton {
+    --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-600);
+    --pf-c-skeleton--after--LinearGradientColorStop1: var(--pf-global--palette--black-600);
+    --pf-c-skeleton--after--LinearGradientColorStop2: var(--pf-global--palette--black-500);
+    --pf-c-skeleton--after--LinearGradientColorStop3: var(--pf-global--palette--black-600);
+  }
+}

package/components/Switch/themes/dark/switch.scss

@@ -0,0 +1,8 @@
+@mixin switch() {
+  .pf-c-switch {
+    --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
+    --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
+    --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
+    --pf-c-switch__toggle--before--BoxShadow: none;
+  }
+}

package/components/Table/table.css

@@ -967,7 +967,8 @@
 .pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > *:last-child {
   --pf-c-table--cell--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
 }
-.pf-c-table.pf-m-compact thead th {
+.pf-c-table.pf-m-compact thead th,
+.pf-c-table.pf-m-compact thead .pf-c-table__toggle {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
   --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
 }

package/components/Table/table.scss

@@ -85,8 +85,8 @@
   // ============================================================ //
 
   // Table cell - toggle
-  --pf-c-table__toggle--c-button--MarginTop: calc(#{pf-size-prem(6px)} * -1);
-  --pf-c-table__toggle--c-button--MarginBottom: calc(#{pf-size-prem(6px)} * -1);
+  --pf-c-table__toggle--c-button--MarginTop: calc(#{pf-size-prem(6px)} * -1); // use var(--pf-global--spacer--form-element) at breaking change
+  --pf-c-table__toggle--c-button--MarginBottom: calc(#{pf-size-prem(6px)} * -1); // use var(--pf-global--spacer--form-element) at breaking change
   --pf-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
   --pf-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
@@ -1255,9 +1255,12 @@
   }
 
   // Thead only
-  thead th {
-    --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
-    --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
+  thead {
+    th,
+    .pf-c-table__toggle {
+      --pf-c-table--cell--PaddingTop: var(--pf-c-table--m-compact-th--PaddingTop);
+      --pf-c-table--cell--PaddingBottom: var(--pf-c-table--m-compact-th--PaddingBottom);
+    }
   }
 
   .pf-c-table__action {

package/components/Table/themes/dark/table.scss

@@ -0,0 +1,10 @@
+@mixin table() {
+  .pf-c-table__favorite {
+    .pf-c-button {
+      &:hover,
+      &:focus {
+        --pf-c-button--m-plain--Color: var(--pf-global--palette--gold-100);
+      }
+    }
+  }
+}

package/components/Tabs/themes/dark/tabs.scss

@@ -0,0 +1,7 @@
+@mixin tabs() {
+  .pf-c-tabs {
+    --pf-c-tabs__scroll-button--BackgroundColor: transparent;
+    --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+    --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  }
+}

package/components/Tile/themes/dark/tile.scss

@@ -0,0 +1,8 @@
+@mixin tile() {
+  .pf-c-tile {
+    --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+    --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--300);
+    --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--300);
+    --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
+  }
+}

package/components/ToggleGroup/themes/dark/toggle-group.scss

@@ -0,0 +1,9 @@
+@mixin toggle-group() {
+  .pf-c-toggle-group {
+    --pf-c-toggle-group__button--hover--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-toggle-group__button--focus--BackgroundColor: var(--pf-global--palette--black-700);
+    --pf-c-toggle-group__button--disabled--BackgroundColor: var(--pf-global--palette--black-600);
+    --pf-c-toggle-group__button--disabled--Color: var(--pf-global--palette--black-100);
+    --pf-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-global--primary-color--300);
+  }
+}

package/components/Tooltip/themes/dark/tooltip.scss

@@ -0,0 +1,6 @@
+@mixin tooltip() {
+  .pf-c-tooltip {
+    --pf-c-tooltip--BoxShadow: none;
+    --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}

package/components/TreeView/themes/dark/tree-view.scss

@@ -0,0 +1,6 @@
+@mixin tree-view() {
+  .pf-c-tree-view {
+    --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+}

package/components/Wizard/themes/dark/wizard.scss

@@ -0,0 +1,12 @@
+@mixin wizard() {
+  .pf-c-wizard {
+    --pf-c-wizard__nav-link--m-disabled--Color: var(--pf-global--disabled-color--300);
+    --pf-c-wizard__nav-link--m-disabled--before--Color: var(--pf-global--disabled-color--300);
+    --pf-c-wizard__nav--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-wizard__outer-wrap--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  }
+
+  .pf-c-wizard__header {
+    @include pf-t-dark;
+  }
+}

package/docs/components/CalendarMonth/examples/CalendarMonth.md

@@ -744,7 +744,7 @@ cssPrefix: pf-c-calendar-month
           >28</button>
         </td>
         <td
-          class="pf-c-calendar-month__dates-cell pf-m-in-range pf-m-end-range"
+          class="pf-c-calendar-month__dates-cell pf-m-selected pf-m-in-range pf-m-end-range"
         >
           <button
             class="pf-c-calendar-month__date pf-m-hover"
@@ -1001,7 +1001,7 @@ cssPrefix: pf-c-calendar-month
           >10</button>
         </td>
         <td
-          class="pf-c-calendar-month__dates-cell pf-m-start-range pf-m-in-range"
+          class="pf-c-calendar-month__dates-cell pf-m-selected pf-m-start-range pf-m-in-range"
         >
           <button
             class="pf-c-calendar-month__date pf-m-focus"

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

@@ -2,6 +2,7 @@
 #ws-core-c-navigation-basic,
 #ws-core-c-navigation-grouped,
 #ws-core-c-navigation-grouped-nav,
+#ws-core-c-navigation-grouped-nav-no-titles,
 #ws-core-c-navigation-expanded,
 #ws-core-c-navigation-expanded-with-subnav-titles,
 #ws-core-c-navigation-mixed,
@@ -13,7 +14,8 @@
 #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-flyout .pf-c-nav,
+#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
   padding: 0;
   background-color: var(--pf-global--BackgroundColor--dark-300);
 }

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

@@ -72,6 +72,83 @@ cssPrefix: pf-c-nav
 
 ```
 
+### Grouped nav, no titles
+
+```html
+<nav class="pf-c-nav" aria-label="Global">
+  <section class="pf-c-nav__section pf-m-no-title" aria-label="Section one">
+    <ul class="pf-c-nav__list">
+      <li class="pf-c-nav__item">
+        <a href="#" class="pf-c-nav__link">Link 1</a>
+      </li>
+      <li class="pf-c-nav__item">
+        <a href="#" class="pf-c-nav__link">Link 2</a>
+      </li>
+      <li class="pf-c-nav__item">
+        <a href="#" class="pf-c-nav__link">Link 3</a>
+      </li>
+    </ul>
+  </section>
+  <hr class="pf-c-divider" />
+  <section class="pf-c-nav__section pf-m-no-title" aria-label="Section two">
+    <ul class="pf-c-nav__list">
+      <li class="pf-c-nav__item">
+        <a href="#" class="pf-c-nav__link">Section 2, link 1</a>
+      </li>
+      <li class="pf-c-nav__item">
+        <a
+          href="#"
+          class="pf-c-nav__link pf-m-current"
+          aria-current="page"
+        >Current link</a>
+      </li>
+      <li class="pf-c-nav__item">
+        <a href="#" class="pf-c-nav__link">Link 3</a>
+      </li>
+    </ul>
+  </section>
+</nav>
+
+```
+
+### Grouped nav, no titles, no margin top
+
+```html
+<nav class="pf-c-nav" aria-label="Global">
+  <section class="pf-c-nav__section pf-m-no-title" aria-label="Section one">
+    <ul class="pf-c-nav__list">
+      <li class="pf-c-nav__item">
+        <a href="#" class="pf-c-nav__link">Link 1</a>
+      </li>
+      <li class="pf-c-nav__item">
+        <a href="#" class="pf-c-nav__link">Link 2</a>
+      </li>
+      <li class="pf-c-nav__item">
+        <a href="#" class="pf-c-nav__link">Link 3</a>
+      </li>
+    </ul>
+  </section>
+  <section class="pf-c-nav__section pf-m-no-title" aria-label="Section two">
+    <ul class="pf-c-nav__list">
+      <li class="pf-c-nav__item">
+        <a href="#" class="pf-c-nav__link">Section 2, link 1</a>
+      </li>
+      <li class="pf-c-nav__item">
+        <a
+          href="#"
+          class="pf-c-nav__link pf-m-current"
+          aria-current="page"
+        >Current link</a>
+      </li>
+      <li class="pf-c-nav__item">
+        <a href="#" class="pf-c-nav__link">Link 3</a>
+      </li>
+    </ul>
+  </section>
+</nav>
+
+```
+
 ### Expanded
 
 ```html
@@ -1996,6 +2073,7 @@ The navigation system relies on several different sub-components:
 | Attribute                                                | Applied to                 | Outcome                                                                                                                                   |
 | -------------------------------------------------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | `aria-label="[landmark description]"`                    | `.pf-c-nav`                | Describes `<nav>` landmark.                                                                                                               |
+| `aria-label="[section title]"`                           | `.pf-c-nav__section`       | Describes a nav `<section>`, where a `.pf-c-nav__section-title` is not present.                                                           |
 | `aria-labelledby="[id value of link describing subnav]"` | `.pf-c-nav__subnav`        | Gives the subnav `<section>` landmark an accessible name by referring to the element that provides the subnav `<section>` landmark title. |
 | `aria-expanded="false"`                                  | `.pf-c-nav__link`          | Indicates that subnav section is hidden.                                                                                                  |
 | `aria-expanded="true"`                                   | `.pf-c-nav__link`          | Indicates that subnav section is visible.                                                                                                 |
@@ -2019,6 +2097,7 @@ The navigation system relies on several different sub-components:
 | `.pf-c-nav__toggle-icon`   | `<span>`                                       | Initiates a nav toggle icon wrapper.                                                                                                                                         |
 | `.pf-c-nav__scroll-button` | `<button>`                                     | Initiates a nav scroll button. **Required for horizontal navs**                                                                                                              |
 | `.pf-m-horizontal`         | `.pf-c-nav`                                    | Modifies nav for the horizontal variation.                                                                                                                                   |
+| `.pf-m-no-title`           | `.pf-c-nav__section`                           | Modifies nav section margin top to 0.                                                                                                                                        |
 | `.pf-m-horizontal-subnav`  | `.pf-c-nav`                                    | Modifies nav for the horizontal subnav variation.                                                                                                                            |
 | `.pf-m-tertiary`           | `.pf-c-nav`                                    | Modifies nav for the tertiary variation.                                                                                                                                     |
 | `.pf-m-light`              | `.pf-c-nav`                                    | Modifies nav for the light variation. **Note: only for use with vertical navs, and requires `.pf-m-light` on the page component's sidebar element (`.pf-c-page__sidebar`)**. |

package/docs/components/Table/examples/Table.md

@@ -5644,7 +5644,18 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 >
   <thead>
     <tr role="row">
-      <td></td>
+      <td class="pf-c-table__toggle" role="cell">
+        <button
+          class="pf-c-button pf-m-plain"
+          id="table-compact-expandable-expandable-toggle-thead"
+          aria-label="Expand all"
+        >
+          <div class="pf-c-table__toggle-icon">
+            <i class="fas fa-angle-down" aria-hidden="true"></i>
+          </div>
+        </button>
+      </td>
+
       <td class="pf-c-table__check" role="cell">
         <label>
           <input

package/docs/demos/Alert/examples/Alert.md

@@ -54,7 +54,7 @@ section: components
             type="button"
             aria-label="Help"
           >
-            <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
           </button>
         </div>
       </div>
@@ -422,7 +422,7 @@ section: components
             type="button"
             aria-label="Help"
           >
-            <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
           </button>
         </div>
       </div>
@@ -795,7 +795,7 @@ section: components
             type="button"
             aria-label="Help"
           >
-            <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
           </button>
         </div>
       </div>