@patternfly/patternfly 4.164.3 → 4.165.2

package/base/_base.scss

@@ -1,3 +1,5 @@
+// stylelint-disable no-invalid-position-at-import-rule
+
 @if $pf-global--load-pf-3 {
   @import url("https://fonts.googleapis.com/css?family=Open+Sans");
   @import url("https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.37.10/css/patternfly.min.css");

package/base/_fa-icons.scss

@@ -5,8 +5,10 @@
 
 @if not($pf-global--disable-fontawesome) {
   @if $pf-global--enable-fontawesome-cdn {
+    // stylelint-disable no-invalid-position-at-import-rule
     @import url("https://use.fontawesome.com/releases/v5.7.2/css/solid.css");
     @import url("https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css");
+    // stylelint-enable no-invalid-position-at-import-rule
   } @else {
     @font-face {
       font-family: "Font Awesome 5 Free";

package/base/_fonts.scss

@@ -1,8 +1,6 @@
-//
 // Fonts
 // --------------------------------------------------
 // PatternFly uses RedHatText - https://github.com/RedHatOfficial/RedHatFont
-//
 
 // stylelint-disable font-family-name-quotes
 
@@ -157,7 +155,9 @@
 
 
 @if $pf-global--enable-font-overpass-cdn {
+  // stylelint-disable no-invalid-position-at-import-rule
   @import url("https://fonts.googleapis.com/css?family=Overpass|Overpass+Mono");
+  // stylelint-enable no-invalid-position-at-import-rule
 } @else {
   @font-face {
     font-family: "overpass";

package/components/ExpandableSection/expandable-section.css

@@ -8,6 +8,7 @@
   --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
   --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
   --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
+  --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
   --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -30,6 +31,7 @@
   --pf-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
   --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
   --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
 }
 .pf-c-expandable-section.pf-m-expanded {
   --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -64,6 +66,9 @@
   content: "";
   background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
 }
+.pf-c-expandable-section.pf-m-indented {
+  --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
+}
 
 .pf-c-expandable-section__toggle {
   display: flex;
@@ -82,6 +87,7 @@
 }
 
 .pf-c-expandable-section__toggle-icon {
+  min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
   color: var(--pf-c-expandable-section__toggle-icon--Color);
   transition: var(--pf-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));

package/components/ExpandableSection/expandable-section.scss

@@ -11,6 +11,7 @@
   --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
 
   // Toggle icon
+  --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
   --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-expandable-section__toggle-icon--Rotate: 0;
@@ -42,6 +43,9 @@
   --pf-c-expandable-section--m-display-lg--after--Width: var(--pf-global--BorderWidth--lg);
   --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
 
+  // Indented
+  --pf-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-c-expandable-section__toggle-text--MarginLeft) + var(--pf-c-expandable-section__toggle-icon--MinWidth));
+
 
   &.pf-m-expanded {
     --pf-c-expandable-section__toggle--Color: var(--pf-c-expandable-section__toggle--m-expanded--Color);
@@ -81,6 +85,10 @@
       background-color: var(--pf-c-expandable-section--m-display-lg--after--BackgroundColor);
     }
   }
+
+  &.pf-m-indented {
+    --pf-c-expandable-section__content--PaddingLeft: var(--pf-c-expandable-section--m-indented__content--PaddingLeft);
+  }
 }
 
 .pf-c-expandable-section__toggle {
@@ -104,6 +112,7 @@
 }
 
 .pf-c-expandable-section__toggle-icon {
+  min-width: var(--pf-c-expandable-section__toggle-icon--MinWidth);
   color: var(--pf-c-expandable-section__toggle-icon--Color);
   transition: var(--pf-c-expandable-section__toggle-icon--Transition);
   transform: rotate(var(--pf-c-expandable-section__toggle-icon--Rotate));

package/components/LogViewer/log-viewer.css

@@ -1,4 +1,5 @@
-.pf-c-log-viewer__header {
+.pf-c-log-viewer__header,
+.pf-c-log-viewer__footer {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -107,7 +108,15 @@
   position: absolute;
   right: 0;
   left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
-  overflow: auto;
+}
+.pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list::before {
+  position: absolute;
+  top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
+  bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
+  left: 0;
+  width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
+  content: "";
+  background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
 }
 .pf-c-log-viewer .pf-c-toolbar {
   --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
@@ -125,10 +134,14 @@
 }
 
 .pf-c-log-viewer__header {
-  color: var(--pf-global--Color--100);
   margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
 }
 
+.pf-c-log-viewer__header,
+.pf-c-log-viewer__footer {
+  color: var(--pf-global--Color--100);
+}
+
 .pf-c-log-viewer__main {
   display: flex;
   flex-direction: column;
@@ -136,18 +149,6 @@
   background-color: var(--pf-c-log-viewer__main--BackgroundColor);
   border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
 }
-.pf-m-line-numbers .pf-c-log-viewer__main {
-  position: relative;
-}
-.pf-m-line-numbers .pf-c-log-viewer__main::before {
-  position: absolute;
-  top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
-  bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
-  left: var(--pf-c-log-viewer__index--Width);
-  width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
-  content: "";
-  background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
-}
 
 .pf-c-log-viewer__scroll-container {
   position: relative;
@@ -188,6 +189,7 @@
   font-family: var(--pf-c-log-viewer__index--FontFamily);
   font-size: var(--pf-c-log-viewer__index--FontSize);
   color: var(--pf-c-log-viewer__index--Color);
+  user-select: none;
   background-color: var(--pf-c-log-viewer__index--BackgroundColor);
 }
 

package/components/LogViewer/log-viewer.scss

@@ -91,7 +91,17 @@
       position: absolute;
       right: 0;
       left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
-      overflow: auto;
+
+      // Divider
+      &::before {
+        position: absolute;
+        top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top); // rename these vars at a breaking change
+        bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
+        left: 0;
+        width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
+        content: "";
+        background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
+      }
     }
   }
 
@@ -116,11 +126,14 @@
 
 // Header
 .pf-c-log-viewer__header {
-  @include pf-t-light;
-
   margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
 }
 
+.pf-c-log-viewer__header,
+.pf-c-log-viewer__footer {
+  @include pf-t-light;
+}
+
 // Main
 .pf-c-log-viewer__main {
   display: flex;
@@ -128,23 +141,6 @@
   min-height: 0;
   background-color: var(--pf-c-log-viewer__main--BackgroundColor);
   border: var(--pf-c-log-viewer__main--BorderWidth) solid var(--pf-c-log-viewer__main--BorderColor);
-
-  // stylelint-disable scss/at-rule-no-unknown
-  @at-root.pf-m-line-numbers & {
-    position: relative;
-
-    // Divider
-    &::before {
-      position: absolute;
-      top: var(--pf-c-log-viewer--m-line-numbers__main--before--Top);
-      bottom: var(--pf-c-log-viewer--m-line-numbers__main--before--Bottom);
-      left: var(--pf-c-log-viewer__index--Width); // share this value so JS can update one value rather than two
-      width: var(--pf-c-log-viewer--m-line-numbers__main--before--Width);
-      content: "";
-      background: var(--pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor);
-    }
-  }
-  // stylelint-enable
 }
 
 .pf-c-log-viewer__scroll-container {
@@ -191,6 +187,7 @@
   font-family: var(--pf-c-log-viewer__index--FontFamily);
   font-size: var(--pf-c-log-viewer__index--FontSize);
   color: var(--pf-c-log-viewer__index--Color);
+  user-select: none;
   background-color: var(--pf-c-log-viewer__index--BackgroundColor);
 }
 

package/components/Login/login.css

@@ -182,6 +182,7 @@
 }
 
 .pf-c-login__main {
+  align-self: start;
   margin-bottom: var(--pf-c-login__main--MarginBottom);
   background-color: var(--pf-c-login__main--BackgroundColor);
   grid-area: main;

package/components/Login/login.scss

@@ -165,6 +165,7 @@
 }
 
 .pf-c-login__main {
+  align-self: start;
   margin-bottom: var(--pf-c-login__main--MarginBottom);
   background-color: var(--pf-c-login__main--BackgroundColor);
   grid-area: main;

package/docs/components/ExpandableSection/examples/ExpandableSection.md

@@ -124,6 +124,27 @@ cssPrefix: pf-c-expandable-section
 
 ```
 
+### Indented
+
+```html
+<div class="pf-c-expandable-section pf-m-expanded pf-m-indented">
+  <button
+    type="button"
+    class="pf-c-expandable-section__toggle"
+    aria-expanded="true"
+  >
+    <span class="pf-c-expandable-section__toggle-icon">
+      <i class="fas fa-angle-right" aria-hidden="true"></i>
+    </span>
+    <span class="pf-c-expandable-section__toggle-text">Show less</span>
+  </button>
+  <div
+    class="pf-c-expandable-section__content"
+  >This content is visible only when the component is expanded.</div>
+</div>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -149,5 +170,6 @@ cssPrefix: pf-c-expandable-section
 | `.pf-m-expanded`                        | `.pf-c-expandable-section`              | Modifies the component for the expanded state.                                                                                                   |
 | `.pf-m-display-lg`                      | `.pf-c-expandable-section`              | Modifies the styling of the component to have large display styling.                                                                             |
 | `.pf-m-detached`                        | `.pf-c-expandable-section`              | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
+| `.pf-m-indented`                        | `.pf-c-expandable-section`              | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy.           |
 | `.pf-m-active`                          | `.pf-c-expandable-section__toggle`      | Forces display of the active state of the toggle.                                                                                                |
 | `.pf-m-expand-top`                      | `.pf-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded.                                                                                              |

package/docs/components/NotificationBadge/examples/NotificationBadge.css

@@ -0,0 +1,3 @@
+.ws-core-c-notification-badge {
+  background: var(--pf-global--BackgroundColor--dark-100);
+}

package/docs/components/NotificationBadge/examples/NotificationBadge.md

@@ -2,123 +2,145 @@
 id: Notification badge
 section: components
 cssPrefix: pf-c-notification-badge
----## Examples
+---import './NotificationBadge.css'
+
+## Examples
 
 ### Basic
 
 ```html
-<button class="pf-c-button pf-m-plain" type="button" aria-label="Notifications">
-  <span class="pf-c-notification-badge pf-m-read">
-    <i class="pf-icon-bell" aria-hidden="true"></i>
-  </span>
-</button>
-
-<button
-  class="pf-c-button pf-m-plain"
-  type="button"
-  aria-label="Unread notifications"
->
-  <span class="pf-c-notification-badge pf-m-unread">
-    <i class="pf-icon-bell" aria-hidden="true"></i>
-  </span>
-</button>
-
-<button
-  class="pf-c-button pf-m-plain"
-  type="button"
-  aria-label="Attention notifications"
->
-  <span class="pf-c-notification-badge pf-m-attention">
-    <i class="pf-icon-attention-bell" aria-hidden="true"></i>
-  </span>
-</button>
-
-<br />
-<br />
-
-<button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
-  <span class="pf-c-notification-badge pf-m-read">
-    <i class="pf-icon-task" aria-hidden="true"></i>
-  </span>
-</button>
-
-<button class="pf-c-button pf-m-plain" type="button" aria-label="Unread tasks">
-  <span class="pf-c-notification-badge pf-m-unread">
-    <i class="pf-icon-task" aria-hidden="true"></i>
-  </span>
-</button>
-
-<button
-  class="pf-c-button pf-m-plain"
-  type="button"
-  aria-label="Attention tasks"
->
-  <span class="pf-c-notification-badge pf-m-attention">
-    <i class="pf-icon-task" aria-hidden="true"></i>
-  </span>
-</button>
+<div class="pf-t-dark">
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="Notifications"
+  >
+    <span class="pf-c-notification-badge pf-m-read">
+      <i class="pf-icon-bell" aria-hidden="true"></i>
+    </span>
+  </button>
+
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="Unread notifications"
+  >
+    <span class="pf-c-notification-badge pf-m-unread">
+      <i class="pf-icon-bell" aria-hidden="true"></i>
+    </span>
+  </button>
+
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="Attention notifications"
+  >
+    <span class="pf-c-notification-badge pf-m-attention">
+      <i class="pf-icon-attention-bell" aria-hidden="true"></i>
+    </span>
+  </button>
+
+  <br />
+  <br />
+
+  <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
+    <span class="pf-c-notification-badge pf-m-read">
+      <i class="pf-icon-task" aria-hidden="true"></i>
+    </span>
+  </button>
+
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="Unread tasks"
+  >
+    <span class="pf-c-notification-badge pf-m-unread">
+      <i class="pf-icon-task" aria-hidden="true"></i>
+    </span>
+  </button>
+
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="Attention tasks"
+  >
+    <span class="pf-c-notification-badge pf-m-attention">
+      <i class="pf-icon-task" aria-hidden="true"></i>
+    </span>
+  </button>
+</div>
 
 ```
 
 ### With count
 
 ```html
-<button class="pf-c-button pf-m-plain" type="button" aria-label="Notifications">
-  <span class="pf-c-notification-badge pf-m-read">
-    <i class="pf-icon-bell" aria-hidden="true"></i>
-    <span class="pf-c-notification-badge__count">24</span>
-  </span>
-</button>
-
-<button
-  class="pf-c-button pf-m-plain"
-  type="button"
-  aria-label="Unread notifications"
->
-  <span class="pf-c-notification-badge pf-m-unread">
-    <i class="pf-icon-bell" aria-hidden="true"></i>
-    <span class="pf-c-notification-badge__count">25</span>
-  </span>
-</button>
-
-<button
-  class="pf-c-button pf-m-plain"
-  type="button"
-  aria-label="Attention notifications"
->
-  <span class="pf-c-notification-badge pf-m-attention">
-    <i class="pf-icon-attention-bell" aria-hidden="true"></i>
-    <span class="pf-c-notification-badge__count">26</span>
-  </span>
-</button>
-
-<br />
-<br />
-
-<button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
-  <span class="pf-c-notification-badge pf-m-read">
-    <i class="pf-icon-task" aria-hidden="true"></i>
-    <span class="pf-c-notification-badge__count">24</span>
-  </span>
-</button>
-
-<button class="pf-c-button pf-m-plain" type="button" aria-label="Unread tasks">
-  <span class="pf-c-notification-badge pf-m-unread">
-    <i class="pf-icon-task" aria-hidden="true"></i>
-    <span class="pf-c-notification-badge__count">25</span>
-  </span>
-</button>
-
-<button
-  class="pf-c-button pf-m-plain"
-  type="button"
-  aria-label="Attention tasks"
->
-  <span class="pf-c-notification-badge pf-m-attention">
-    <i class="pf-icon-task" aria-hidden="true"></i>
-    <span class="pf-c-notification-badge__count">26</span>
-  </span>
-</button>
+<div class="pf-t-dark">
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="Notifications"
+  >
+    <span class="pf-c-notification-badge pf-m-read">
+      <i class="pf-icon-bell" aria-hidden="true"></i>
+      <span class="pf-c-notification-badge__count">24</span>
+    </span>
+  </button>
+
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="Unread notifications"
+  >
+    <span class="pf-c-notification-badge pf-m-unread">
+      <i class="pf-icon-bell" aria-hidden="true"></i>
+      <span class="pf-c-notification-badge__count">25</span>
+    </span>
+  </button>
+
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="Attention notifications"
+  >
+    <span class="pf-c-notification-badge pf-m-attention">
+      <i class="pf-icon-attention-bell" aria-hidden="true"></i>
+      <span class="pf-c-notification-badge__count">26</span>
+    </span>
+  </button>
+
+  <br />
+  <br />
+
+  <button class="pf-c-button pf-m-plain" type="button" aria-label="Tasks">
+    <span class="pf-c-notification-badge pf-m-read">
+      <i class="pf-icon-task" aria-hidden="true"></i>
+      <span class="pf-c-notification-badge__count">24</span>
+    </span>
+  </button>
+
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="Unread tasks"
+  >
+    <span class="pf-c-notification-badge pf-m-unread">
+      <i class="pf-icon-task" aria-hidden="true"></i>
+      <span class="pf-c-notification-badge__count">25</span>
+    </span>
+  </button>
+
+  <button
+    class="pf-c-button pf-m-plain"
+    type="button"
+    aria-label="Attention tasks"
+  >
+    <span class="pf-c-notification-badge pf-m-attention">
+      <i class="pf-icon-task" aria-hidden="true"></i>
+      <span class="pf-c-notification-badge__count">26</span>
+    </span>
+  </button>
+</div>
 
 ```
 
@@ -126,7 +148,9 @@ cssPrefix: pf-c-notification-badge
 
 ### Overview
 
-Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own.
+Always add a modifier class. Never use the class `.pf-c-notification-badge` on its own. This component is designed to be used within a dark component such as the [masthead](../masthead).
+
+Note: The [page component](../page) currently handles the selected state styling of the notification badge using the page header tools item styling. If this component is used elsewhere, custom styling may be needed to correctly indicate the selected state.
 
 ### Accessibility
 

package/docs/pages/contribution.md

@@ -106,4 +106,4 @@ Below are the steps for adding a custom icon to the [pficon icons](/icons) icon
 - Edit `src/patternfly/assets/pficon/pficon.scss` and prefix the `src: url()` paths for the icon font files with the global icon font path (e.g., `url('#{$pf-global--fonticon-path}/pficon.woff2')`).
 - Run `./scripts/iconList.sh` to update `src/site/pages/icons.md`, which serves the pficon icon preview page on the dev server served at `/icons`.
 - Restart the dev server and verify the icons look correct on `/icons`.
-  - **Note**: This step may require clearing your cache.
+  - **Note**: This step may require clearing your cache.

package/layouts/_all.scss

@@ -1,7 +1,7 @@
-@import "./Bullseye/bullseye.scss";
-@import "./Flex/flex.scss";
-@import "./Gallery/gallery.scss";
-@import "./Grid/grid.scss";
-@import "./Level/level.scss";
-@import "./Split/split.scss";
-@import "./Stack/stack.scss";
+@import "./Bullseye/bullseye";
+@import "./Flex/flex";
+@import "./Gallery/gallery";
+@import "./Grid/grid";
+@import "./Level/level";
+@import "./Split/split";
+@import "./Stack/stack";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "4.164.3",
+  "version": "4.165.2",
   "keywords": [],
   "license": "MIT",
   "scripts": {