@patternfly/patternfly 4.164.2 → 4.165.1

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/Label/label.css

@@ -93,6 +93,7 @@
   --pf-c-label--m-compact--PaddingBottom: 0;
   --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
   --pf-c-label__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
   --pf-c-label__text--MaxWidth: 16ch;
@@ -107,6 +108,18 @@
   --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label__editable-text--MaxWidth: 16ch;
+  --pf-c-label__editable-text--BorderWidth: 0;
+  --pf-c-label--m-editable--Cursor: pointer;
+  --pf-c-label--m-editable--TextDecoration: underline;
+  --pf-c-label--m-editable--TextDecorationStyle: dashed;
+  --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-editable--TextDecorationOffset: 0.25rem;
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
+  --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
   --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -125,6 +138,7 @@
   --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
   --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
   --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
+  --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
 }
 .pf-c-label.pf-m-blue {
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor);
@@ -215,7 +229,23 @@
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-outline__content--link--focus--before--BorderColor);
 }
 
+.pf-c-label.pf-m-editable {
+  text-decoration: var(--pf-c-label--m-editable--TextDecoration);
+  cursor: var(--pf-c-label--m-editable--Cursor);
+  text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
+  text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
+  text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
+  text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+}
+.pf-c-label.pf-m-editable:hover {
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
+}
+.pf-c-label.pf-m-editable:focus {
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
+}
 .pf-c-label.pf-m-editable-active {
+  --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
+  --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
   --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
   --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -223,6 +253,13 @@
 .pf-c-label.pf-m-editable-active .pf-c-button {
   visibility: hidden;
 }
+.pf-c-label .pf-c-label__editable-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: var(--pf-c-label__editable-text--MaxWidth);
+  border-width: var(--pf-c-label__editable-text--BorderWidth);
+}
 .pf-c-label .pf-c-button {
   --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
   --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);

package/components/Label/label.scss

@@ -118,6 +118,7 @@
   --pf-c-label--m-compact--PaddingBottom: 0;
   --pf-c-label--m-compact--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label--m-compact--m-editable--TextDecorationOffset: #{pf-size-prem(1px)};
 
   // Content
   --pf-c-label__content--Color: var(--pf-global--Color--100);
@@ -142,6 +143,21 @@
   --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
 
   // Editable
+  --pf-c-label__editable-text--MaxWidth: 16ch;
+  --pf-c-label__editable-text--BorderWidth: 0;
+  --pf-c-label--m-editable--Cursor: pointer;
+  --pf-c-label--m-editable--TextDecoration: underline;
+  --pf-c-label--m-editable--TextDecorationStyle: dashed;
+  --pf-c-label--m-editable--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-label--m-editable--TextDecorationOffset: #{pf-size-prem(4px)};
+  --pf-c-label--m-editable--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-label--m-editable--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-label--m-editable--focus--TextDecorationColor: var(--pf-global--Color--100);
+
+
+  // Editable active
+  --pf-c-label--m-editable--m-editable-active--Cursor: auto;
+  --pf-c-label--m-editable--m-editable-active--TextDecoration: none;
   --pf-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
@@ -161,6 +177,7 @@
     --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom);
     --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft);
     --pf-c-label--FontSize: var(--pf-c-label--m-compact--FontSize);
+    --pf-c-label--m-editable--TextDecorationOffset: var(--pf-c-label--m-compact--m-editable--TextDecorationOffset);
   }
 
   &.pf-m-blue {
@@ -267,7 +284,26 @@
     }
   }
 
+  &.pf-m-editable {
+    text-decoration: var(--pf-c-label--m-editable--TextDecoration);
+    cursor: var(--pf-c-label--m-editable--Cursor);
+    text-decoration-style: var(--pf-c-label--m-editable--TextDecorationStyle);
+    text-decoration-thickness: var(--pf-c-label--m-editable--TextDecorationThickness);
+    text-underline-offset: var(--pf-c-label--m-editable--TextDecorationOffset);
+    text-decoration-color: var(--pf-c-label--m-editable--TextDecorationColor);
+
+    &:hover {
+      --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--hover--TextDecorationColor);
+    }
+
+    &:focus {
+      --pf-c-label--m-editable--TextDecorationColor: var(--pf-c-label--m-editable--focus--TextDecorationColor);
+    }
+  }
+
   &.pf-m-editable-active {
+    --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
+    --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
     --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
     --pf-c-label__content--before--BorderWidth: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderWidth);
     --pf-c-label__content--before--BorderColor: var(--pf-c-label--m-editable--m-editable-active__content--before--BorderColor);
@@ -277,6 +313,13 @@
     }
   }
 
+  .pf-c-label__editable-text {
+    @include pf-text-overflow;
+
+    max-width: var(--pf-c-label__editable-text--MaxWidth);
+    border-width: var(--pf-c-label__editable-text--BorderWidth);
+  }
+
   .pf-c-button {
     --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
     --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);

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/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.                                                                                              |