@patternfly/patternfly 4.178.0 → 4.179.2

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/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/LabelGroup/examples/LabelGroup.md

@@ -793,7 +793,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 ```
 
-### Mixed labels, dynamic label group
+### Mixed labels (static / editable), dynamic label group
 
 ```html
 <div class="pf-c-label-group pf-m-editable">
@@ -904,6 +904,139 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 ```
 
+### Compact labels
+
+```html
+<div class="pf-c-label-group">
+  <div class="pf-c-label-group__main">
+    <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-compact">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label
+          </span>
+        </span>
+      </li>
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-compact pf-m-blue">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label 2
+          </span>
+        </span>
+      </li>
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-compact pf-m-green">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label 3
+          </span>
+        </span>
+      </li>
+    </ul>
+  </div>
+</div>
+
+```
+
+### Compact labels, overflow
+
+```html
+<div class="pf-c-label-group">
+  <div class="pf-c-label-group__main">
+    <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-compact">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label
+          </span>
+        </span>
+      </li>
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-compact pf-m-blue">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label 2
+          </span>
+        </span>
+      </li>
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-compact pf-m-green">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label 3
+          </span>
+        </span>
+      </li>
+      <li class="pf-c-label-group__list-item">
+        <button class="pf-c-label pf-m-overflow pf-m-compact">
+          <span class="pf-c-label__content">3 more</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>
+
+```
+
+### Compact labels, vertical
+
+```html
+<div class="pf-c-label-group pf-m-vertical">
+  <div class="pf-c-label-group__main">
+    <ul class="pf-c-label-group__list" role="list" aria-label="Group of labels">
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-compact">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label
+          </span>
+        </span>
+      </li>
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-compact pf-m-blue">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label 2
+          </span>
+        </span>
+      </li>
+      <li class="pf-c-label-group__list-item">
+        <span class="pf-c-label pf-m-compact pf-m-green">
+          <span class="pf-c-label__content">
+            <span class="pf-c-label__icon">
+              <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            </span>
+            Label 3
+          </span>
+        </span>
+      </li>
+    </ul>
+  </div>
+</div>
+
+```
+
+## Documentation
+
 ### Accessibility
 
 | Attribute                                                                                                  | Applied to                          | Outcome                                                                                                                                                                                                   |
@@ -926,7 +1059,7 @@ In addition to the JavaScript management of [editable labels](/components/label#
 | `.pf-c-label-group__textarea`  | `<textarea>`                        | Initiates the textarea element in the label group. **Required when label group is editable** |
 | `.pf-c-label-group__label`     | `<span>`                            | Initiates the label to be used in the label group.                                           |
 | `.pf-c-label-group__close`     | `<div>`                             | Initiates the container used for the button to remove the label group.                       |
-| `.pf-m-editable`               | `.pf-c-label-group`                 | Modifies the label group to support editable styling.                                        |
 | `.pf-c-button`                 | `.pf-c-label-group__close <button>` | Initiates the button used to remove the label group.                                         |
+| `.pf-m-editable`               | `.pf-c-label-group`                 | Modifies the label group to support editable styling.                                        |
 | `.pf-m-category`               | `.pf-c-label-group`                 | Modifies the label group to support category styling.                                        |
 | `.pf-m-textarea`               | `.pf-c-label-group__list-item`      | Modifies the label group list item to support textarea.                                      |