@patternfly/patternfly 4.164.4 → 4.166.0

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/Button/button.css

@@ -144,6 +144,7 @@
   --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm));
   --pf-c-button__progress--Opacity: 0;
   --pf-c-button__progress--TranslateY: -50%;
+  --pf-c-button__progress--TranslateX: 0;
   --pf-c-button__progress--Top: 50%;
   --pf-c-button__progress--Left: var(--pf-global--spacer--md);
   --pf-c-button--m-progress--TransitionProperty: padding;
@@ -152,6 +153,9 @@
   --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
   --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
+  --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
+  --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
   position: relative;
   display: inline-block;
   padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
@@ -437,10 +441,18 @@
   --pf-c-button--PaddingLeft: var(--pf-c-button--m-progress--PaddingLeft);
   transition: var(--pf-c-button--m-progress--TransitionProperty) var(--pf-c-button--m-progress--TransitionDuration);
 }
-.pf-c-button.pf-m-in-progress {
+.pf-c-button.pf-m-in-progress:not(.pf-m-plain) {
   --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
   --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
 }
+.pf-c-button.pf-m-in-progress.pf-m-plain {
+  --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
+  --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
+  --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
+}
+.pf-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-c-button__progress) {
+  opacity: 0;
+}
 
 .pf-c-button__icon.pf-m-start {
   margin-right: var(--pf-c-button__icon--m-start--MarginRight);
@@ -454,7 +466,7 @@
   top: var(--pf-c-button__progress--Top);
   left: var(--pf-c-button__progress--Left);
   line-height: 1;
-  transform: translateY(var(--pf-c-button__progress--TranslateY));
+  transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
 }
 .pf-c-button__progress .pf-c-spinner {
   --pf-c-spinner--Color: currentColor;

package/components/Button/button.scss

@@ -179,6 +179,7 @@
   --pf-c-button__progress--width: calc(var(--pf-global--icon--FontSize--md) + var(--pf-global--spacer--sm)); // matches medium spinner diameter plus a spacer
   --pf-c-button__progress--Opacity: 0;
   --pf-c-button__progress--TranslateY: -50%;
+  --pf-c-button__progress--TranslateX: 0;
   --pf-c-button__progress--Top: 50%;
   --pf-c-button__progress--Left: var(--pf-global--spacer--md);
   --pf-c-button--m-progress--TransitionProperty: padding;
@@ -187,6 +188,9 @@
   --pf-c-button--m-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width) / 2);
   --pf-c-button--m-in-progress--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-button--m-in-progress--PaddingLeft: calc(var(--pf-global--spacer--md) + var(--pf-c-button__progress--width));
+  --pf-c-button--m-in-progress--m-plain--Color: var(--pf-global--primary-color--100);
+  --pf-c-button--m-in-progress--m-plain__progress--Left: 50%;
+  --pf-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
 
   position: relative;
   display: inline-block;
@@ -577,8 +581,20 @@
   }
 
   &.pf-m-in-progress {
-    --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
-    --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
+    &:not(.pf-m-plain) {
+      --pf-c-button--PaddingRight: var(--pf-c-button--m-in-progress--PaddingRight);
+      --pf-c-button--PaddingLeft: var(--pf-c-button--m-in-progress--PaddingLeft);
+    }
+
+    &.pf-m-plain {
+      --pf-c-button--m-plain--Color: var(--pf-c-button--m-in-progress--m-plain--Color);
+      --pf-c-button__progress--Left: var(--pf-c-button--m-in-progress--m-plain__progress--Left);
+      --pf-c-button__progress--TranslateX: var(--pf-c-button--m-in-progress--m-plain__progress--TranslateX);
+
+      > :not(.pf-c-button__progress) {
+        opacity: 0;
+      }
+    }
   }
 }
 
@@ -597,7 +613,7 @@
   top: var(--pf-c-button__progress--Top);
   left: var(--pf-c-button__progress--Left);
   line-height: 1;
-  transform: translateY(var(--pf-c-button__progress--TranslateY));
+  transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
 
   .pf-c-spinner {
     --pf-c-spinner--Color: currentColor;

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

@@ -404,6 +404,29 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
   Secondary loading
 </button>
 
+<button class="pf-c-button pf-m-plain" type="button" aria-label="Upload">
+  <i class="fas fa-upload" aria-hidden="true"></i>
+</button>
+
+<button
+  class="pf-c-button pf-m-plain pf-m-in-progress"
+  type="button"
+  aria-label="Upload"
+>
+  <i class="fas fa-upload" aria-hidden="true"></i>
+  <span class="pf-c-button__progress">
+    <span
+      class="pf-c-spinner pf-m-md"
+      role="progressbar"
+      aria-label="Loading..."
+    >
+      <span class="pf-c-spinner__clipper"></span>
+      <span class="pf-c-spinner__lead-ball"></span>
+      <span class="pf-c-spinner__tail-ball"></span>
+    </span>
+  </span>
+</button>
+
 ```
 
 ## Documentation
@@ -453,5 +476,5 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-small`            | `.pf-c-button`                          | Modifies the button so that it has small font size.                                                                                                                                                                         |
 | `.pf-m-aria-disabled`    | `.pf-c-button`                          | Modifies a button to be visually disabled, yet is still focusable.                                                                                                                                                          |
 | `.pf-m-display-lg`       | `.pf-c-button`, `pf-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles.                                                                                           |
-| `.pf-m-progress`         | `.pf-c-button`                          | Indicates that the button supports the progress state.                                                                                                                                                                      |
+| `.pf-m-progress`         | `.pf-c-button`                          | Indicates that the button supports the progress state. **Note:** Not used with the plain variation.                                                                                                                         |
 | `.pf-m-in-progress`      | `.pf-c-button`                          | Indicates that the button is in the in progress state.                                                                                                                                                                      |

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);
+}