@patternfly/patternfly 4.152.1 → 4.155.0

package/components/LogViewer/log-viewer.css

@@ -38,12 +38,14 @@
   --pf-c-log-viewer__main--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-log-viewer__scroll-container--Height: 37.5rem;
+  --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-log-viewer--m-line-numbers__main--before--Top: var(--pf-global--spacer--sm);
   --pf-c-log-viewer--m-line-numbers__main--before--Bottom: var(--pf-global--spacer--sm);
   --pf-c-log-viewer--m-line-numbers__main--before--Width: var(--pf-global--BorderWidth--sm);
   --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
-  --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-log-viewer__list--Height: auto;
+  --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
   --pf-c-log-viewer__index--Display: none;
   --pf-c-log-viewer__index--Width: 4.0625rem;
   --pf-c-log-viewer__index--PaddingRight: var(--pf-global--spacer--xl);
@@ -51,11 +53,16 @@
   --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
   --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
+  --pf-c-log-viewer__index--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-log-viewer__text--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
   --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
+  --pf-c-log-viewer__text--WordBreak: break-all;
+  --pf-c-log-viewer__text--WhiteSpace: break-spaces;
+  --pf-c-log-viewer__text--LineBreak: anywhere;
+  --pf-c-log-viewer--m-nowrap__text--WhiteSpace: nowrap;
   --pf-c-log-viewer__string--m-match--Color: var(--pf-global--palette--gold-700);
   --pf-c-log-viewer__string--m-match--BackgroundColor: var(--pf-global--palette--gold-100);
   --pf-c-log-viewer__string--m-current--Color: var(--pf-global--palette--gold-700);
@@ -87,9 +94,18 @@
 .pf-c-log-viewer.pf-m-wrap-text {
   word-break: break-all;
 }
+.pf-c-log-viewer.pf-m-nowrap {
+  --pf-c-log-viewer__text--WhiteSpace: var(--pf-c-log-viewer--m-nowrap__text--WhiteSpace);
+}
 .pf-c-log-viewer.pf-m-line-numbers {
   --pf-c-log-viewer__index--Display: var(--pf-c-log-viewer--m-line-numbers__index--Display);
 }
+.pf-c-log-viewer.pf-m-line-numbers .pf-c-log-viewer__list {
+  position: absolute;
+  right: 0;
+  left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
+  overflow: auto;
+}
 .pf-c-log-viewer .pf-c-toolbar {
   --pf-c-toolbar--PaddingTop: var(--pf-c-log-viewer--c-toolbar--PaddingTop);
   --pf-c-toolbar--PaddingBottom: var(--pf-c-log-viewer--c-toolbar--PaddingBottom);
@@ -130,19 +146,23 @@
 }
 
 .pf-c-log-viewer__scroll-container {
+  position: relative;
   height: var(--pf-c-log-viewer__scroll-container--Height);
   padding-top: var(--pf-c-log-viewer__scroll-container--PaddingTop);
   padding-bottom: var(--pf-c-log-viewer__scroll-container--PaddingBottom);
   overflow: auto;
+  will-change: transform;
+  direction: ltr;
 }
 
 .pf-c-log-viewer__list {
   position: relative;
+  height: var(--pf-c-log-viewer__list--Height);
 }
 
-.pf-m-line-numbers .pf-c-log-viewer__list-item {
-  display: grid;
-  grid-template-columns: max-content 1fr;
+.pf-c-log-viewer__list-item {
+  left: 0;
+  width: 100%;
 }
 
 .pf-c-log-viewer__string.pf-m-match {
@@ -155,6 +175,8 @@
 }
 
 .pf-c-log-viewer__index {
+  position: fixed;
+  left: 0;
   display: var(--pf-c-log-viewer__index--Display);
   width: var(--pf-c-log-viewer__index--Width);
   padding-right: var(--pf-c-log-viewer__index--PaddingRight);
@@ -162,6 +184,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);
+  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
 }
 
 .pf-c-log-viewer__text {
@@ -171,9 +194,9 @@
   font-family: var(--pf-c-log-viewer__text--FontFamily);
   font-size: var(--pf-c-log-viewer__text--FontSize);
   color: var(--pf-c-log-viewer__text--Color);
-  word-break: break-all;
-  white-space: break-spaces;
-  line-break: anywhere;
+  word-break: var(--pf-c-log-viewer__text--WordBreak);
+  white-space: var(--pf-c-log-viewer__text--WhiteSpace);
+  line-break: var(--pf-c-log-viewer__text--LineBreak);
 }
 
 .pf-c-log-viewer__timestamp {

package/components/LogViewer/log-viewer.scss

@@ -13,6 +13,8 @@
 
   // Scroll container
   --pf-c-log-viewer__scroll-container--Height: #{pf-size-prem(600px)};
+  --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--sm);
 
   // Main ::after
   --pf-c-log-viewer--m-line-numbers__main--before--Top: var(--pf-global--spacer--sm);
@@ -21,11 +23,8 @@
   --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
 
   // List
-  // --pf-c-log-viewer__list--PaddingTop: var(--pf-global--spacer--sm);
-  // --pf-c-log-viewer__list--PaddingBottom: var(--pf-global--spacer--sm);
-
-  --pf-c-log-viewer__scroll-container--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-log-viewer__scroll-container--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-log-viewer__list--Height: auto;
+  --pf-c-log-viewer--m-line-numbers__list--Left: var(--pf-c-log-viewer__index--Width);
 
   // Index
   --pf-c-log-viewer__index--Display: none;
@@ -35,6 +34,7 @@
   --pf-c-log-viewer__index--FontFamily: var(--pf-global--FontFamily--monospace);
   --pf-c-log-viewer__index--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
+  --pf-c-log-viewer__index--BackgroundColor: var(--pf-global--BackgroundColor--100);
 
   // Text
   --pf-c-log-viewer__text--PaddingRight: var(--pf-global--spacer--md);
@@ -42,6 +42,10 @@
   --pf-c-log-viewer__text--FontFamily: var(--pf-global--FontFamily--monospace);
   --pf-c-log-viewer__text--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
+  --pf-c-log-viewer__text--WordBreak: break-all;
+  --pf-c-log-viewer__text--WhiteSpace: break-spaces;
+  --pf-c-log-viewer__text--LineBreak: anywhere;
+  --pf-c-log-viewer--m-nowrap__text--WhiteSpace: nowrap;
   --pf-c-log-viewer__string--m-match--Color: var(--pf-global--palette--gold-700);
   --pf-c-log-viewer__string--m-match--BackgroundColor: var(--pf-global--palette--gold-100);
   --pf-c-log-viewer__string--m-current--Color: var(--pf-global--palette--gold-700);
@@ -85,8 +89,19 @@
     word-break: break-all;
   }
 
+  &.pf-m-nowrap {
+    --pf-c-log-viewer__text--WhiteSpace: var(--pf-c-log-viewer--m-nowrap__text--WhiteSpace);
+  }
+
   &.pf-m-line-numbers {
     --pf-c-log-viewer__index--Display: var(--pf-c-log-viewer--m-line-numbers__index--Display);
+
+    .pf-c-log-viewer__list {
+      position: absolute;
+      right: 0;
+      left: var(--pf-c-log-viewer--m-line-numbers__list--Left);
+      overflow: auto;
+    }
   }
 
   // Nested toolbar
@@ -140,30 +155,24 @@
 }
 
 .pf-c-log-viewer__scroll-container {
+  position: relative;
   height: var(--pf-c-log-viewer__scroll-container--Height);
   padding-top: var(--pf-c-log-viewer__scroll-container--PaddingTop);
   padding-bottom: var(--pf-c-log-viewer__scroll-container--PaddingBottom);
   overflow: auto;
+  will-change: transform;
+  direction: ltr;
 }
 
 // List
 .pf-c-log-viewer__list {
-  // flex: 1 1;
-  // min-height: 0;
-  // overflow: auto;
-  // padding-top: var(--pf-c-log-viewer__list--PaddingTop);
-  // padding-bottom: var(--pf-c-log-viewer__list--PaddingBottom);
-
   position: relative;
+  height: var(--pf-c-log-viewer__list--Height);
 }
 
 .pf-c-log-viewer__list-item {
-  // stylelint-disable scss/at-rule-no-unknown
-  @at-root.pf-m-line-numbers & {
-    display: grid;
-    grid-template-columns: max-content 1fr;
-  }
-  // stylelint-enable
+  left: 0;
+  width: 100%;
 }
 
 .pf-c-log-viewer__string {
@@ -180,6 +189,8 @@
 
 // Index
 .pf-c-log-viewer__index {
+  position: fixed;
+  left: 0;
   display: var(--pf-c-log-viewer__index--Display);
   width: var(--pf-c-log-viewer__index--Width);
   padding-right: var(--pf-c-log-viewer__index--PaddingRight);
@@ -187,6 +198,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);
+  background-color: var(--pf-c-log-viewer__index--BackgroundColor);
 }
 
 // Text
@@ -197,9 +209,9 @@
   font-family: var(--pf-c-log-viewer__text--FontFamily);
   font-size: var(--pf-c-log-viewer__text--FontSize);
   color: var(--pf-c-log-viewer__text--Color);
-  word-break: break-all;
-  white-space: break-spaces;
-  line-break: anywhere;
+  word-break: var(--pf-c-log-viewer__text--WordBreak);
+  white-space: var(--pf-c-log-viewer__text--WhiteSpace);
+  line-break: var(--pf-c-log-viewer__text--LineBreak);
 }
 
 // Timestamp

package/components/MenuToggle/menu-toggle.css

@@ -96,7 +96,7 @@
   --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
   --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
 }
-.pf-c-menu-toggle.pf-m-plain {
+.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
   --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
   --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);

package/components/MenuToggle/menu-toggle.scss

@@ -132,7 +132,7 @@
     --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
   }
 
-  &.pf-m-plain {
+  &.pf-m-plain:not(.pf-m-text) {
     --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
     --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
     --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);

package/components/OptionsMenu/options-menu.css

@@ -110,37 +110,29 @@
   justify-content: space-between;
   min-width: var(--pf-c-options-menu__toggle--MinWidth);
   max-width: 100%;
-  padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
+  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
   line-height: var(--pf-c-options-menu__toggle--LineHeight);
   color: var(--pf-c-options-menu__toggle--Color);
   background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
   border: none;
 }
-.pf-c-options-menu__toggle:not(.pf-m-text) {
-  padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
-  padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
-  padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
-}
 .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
   --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
   border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
 }
-.pf-c-options-menu__toggle.pf-m-plain {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
   --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
   display: inline-block;
-}
-.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
-  justify-content: center;
   color: var(--pf-c-options-menu__toggle--m-plain--Color);
 }
-.pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
   line-height: var(--pf-c-options-menu__toggle--LineHeight);
 }
-.pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
 }
-.pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
 }
 .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {

package/components/OptionsMenu/options-menu.scss

@@ -139,18 +139,12 @@
   justify-content: space-between;
   min-width: var(--pf-c-options-menu__toggle--MinWidth);
   max-width: 100%;
-  padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
+  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
   line-height: var(--pf-c-options-menu__toggle--LineHeight);
   color: var(--pf-c-options-menu__toggle--Color);
   background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
   border: none;
 
-  &:not(.pf-m-text) {
-    padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
-    padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
-    padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
-  }
-
   .pf-c-options-menu.pf-m-expanded > & {
     &::before {
       --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
@@ -159,16 +153,12 @@
     }
   }
 
-  &.pf-m-plain {
+  &.pf-m-plain:not(.pf-m-text) {
     --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
     --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
 
     display: inline-block;
-
-    &:not(.pf-m-text) {
-      justify-content: center;
-      color: var(--pf-c-options-menu__toggle--m-plain--Color);
-    }
+    color: var(--pf-c-options-menu__toggle--m-plain--Color);
 
     .pf-c-options-menu__toggle-button-icon {
       line-height: var(--pf-c-options-menu__toggle--LineHeight);

package/components/TextInputGroup/text-input-group.css

@@ -1,4 +1,5 @@
 .pf-c-text-input-group {
+  --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
   --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -23,12 +24,24 @@
   --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
   position: relative;
   display: flex;
+  color: var(--pf-c-text-input-group--Color, inherit);
+  background-color: var(--pf-c-text-input-group--BackgroundColor);
 }
 .pf-c-text-input-group:hover {
   --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
 }
+.pf-c-text-input-group.pf-m-disabled {
+  --pf-c-text-input-group__text--before--BorderWidth: 0;
+  --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
+  --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
+  --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
+  --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
+  pointer-events: none;
+}
 
 .pf-c-text-input-group__main {
   display: flex;

package/components/TextInputGroup/text-input-group.scss

@@ -1,4 +1,7 @@
 .pf-c-text-input-group {
+  // Component
+  --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
+
   // Base border
   --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -35,12 +38,28 @@
   --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
 
+  // input disabled style
+  --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+
   position: relative;
   display: flex;
+  color: var(--pf-c-text-input-group--Color, inherit);
+  background-color: var(--pf-c-text-input-group--BackgroundColor);
 
   &:hover {
     --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
   }
+
+  &.pf-m-disabled {
+    --pf-c-text-input-group__text--before--BorderWidth: 0;
+    --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
+    --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
+    --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
+    --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
+
+    pointer-events: none;
+  }
 }
 
 .pf-c-text-input-group__main {