@patternfly/react-styles 4.19.3 → 4.20.2

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.20.2 (2021-11-10)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 4.20.1 (2021-11-10)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+# 4.20.0 (2021-11-09)
+
+
+### Features
+
+* **Table:** set default sort direction ([#6544](https://github.com/patternfly/patternfly-react/issues/6544)) ([9ee4942](https://github.com/patternfly/patternfly-react/commit/9ee49428c8e1041721f2a09f8176a5aba3335049))
+
+
+
+
+
+## 4.19.4 (2021-11-09)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## 4.19.3 (2021-11-08)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Card/card.css

@@ -55,6 +55,10 @@
   --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
   --pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY: 2;
+  --pf-c-card--m-non-selectable-raised--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+  --pf-c-card--m-non-selectable-raised--before--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-card--m-non-selectable-raised--before--ScaleY: 2;
+  --pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor: var(--pf-global--disabled-color--200);
   --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-card--m-compact__footer--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-card--m-compact--first-child--PaddingTop: var(--pf-global--spacer--md);
@@ -112,10 +116,10 @@
   content: "";
   background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
 }
-.pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised {
+.pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
   position: relative;
 }
-.pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before {
+.pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
   position: absolute;
   right: var(--pf-c-card--m-selectable-raised--before--Right);
   bottom: var(--pf-c-card--m-selectable-raised--before--Bottom);
@@ -133,12 +137,6 @@
 }
 .pf-c-card.pf-m-selectable-raised {
   cursor: pointer;
-  /*
-  &:active {
-    --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
-    --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
-  }
-  */
 }
 .pf-c-card.pf-m-selectable-raised:hover {
   --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--hover--BoxShadow);
@@ -148,7 +146,11 @@
   --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--focus--BoxShadow);
   --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
 }
-.pf-c-card.pf-m-selectable-raised.pf-m-selected-raised, .pf-c-card.pf-m-selectable-raised:active {
+.pf-c-card.pf-m-selectable-raised:active {
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable-raised--active--BoxShadow);
+  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--active--before--BackgroundColor);
+}
+.pf-c-card.pf-m-selectable-raised.pf-m-selected-raised {
   --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--BackgroundColor);
   --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
   --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
@@ -157,6 +159,13 @@
   transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
   transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
 }
+.pf-c-card.pf-m-non-selectable-raised {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--BackgroundColor);
+  --pf-c-card--BoxShadow: none;
+  --pf-c-card--m-flat--BorderColor: var(--pf-c-card--m-flat--m-non-selectable-raised--before--BorderColor);
+  --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-non-selectable-raised--before--BackgroundColor);
+  --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-non-selectable-raised--before--ScaleY);
+}
 .pf-c-card.pf-m-compact {
   --pf-c-card__body--FontSize: var(--pf-c-card--m-compact__body--FontSize);
   --pf-c-card__footer--FontSize: var(--pf-c-card--m-compact__footer--FontSize);

package/css/components/Card/card.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
     "selected": "pf-m-selected",
     "hoverableRaised": "pf-m-hoverable-raised",
     "selectableRaised": "pf-m-selectable-raised",
+    "nonSelectableRaised": "pf-m-non-selectable-raised",
     "selectedRaised": "pf-m-selected-raised",
     "compact": "pf-m-compact",
     "displayLg": "pf-m-display-lg",

package/css/components/Card/card.js

@@ -18,6 +18,7 @@ exports.default = {
     "selected": "pf-m-selected",
     "hoverableRaised": "pf-m-hoverable-raised",
     "selectableRaised": "pf-m-selectable-raised",
+    "nonSelectableRaised": "pf-m-non-selectable-raised",
     "selectedRaised": "pf-m-selected-raised",
     "compact": "pf-m-compact",
     "displayLg": "pf-m-display-lg",

package/css/components/LogViewer/log-viewer.css

@@ -1,4 +1,14 @@
-.pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
+.pf-c-log-viewer__header {
+  --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);
+  --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
+  --pf-global--link--Color: var(--pf-global--link--Color--dark);
+  --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover);
+  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
+}
+
+.pf-c-log-viewer.pf-m-dark {
   --pf-global--Color--100: var(--pf-global--Color--light-100);
   --pf-global--Color--200: var(--pf-global--Color--light-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -7,10 +17,10 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-card {
+.pf-c-log-viewer.pf-m-dark .pf-c-card {
   --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
 }
-.pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main .pf-c-button {
+.pf-c-log-viewer.pf-m-dark .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
   --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
   --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
@@ -38,12 +48,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 +63,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);
@@ -74,22 +91,24 @@
   max-height: var(--pf-c-log-viewer--MaxHeight);
 }
 .pf-c-log-viewer.pf-m-dark {
-  --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
-}
-.pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main {
-  --pf-c-log-viewer__main--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-log-viewer__main--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-log-viewer__text--Color: var(--pf-global--Color--100);
-  --pf-c-log-viewer__index--Color: var(--pf-global--Color--200);
-  --pf-c-log-viewer--m-line-numbers__main--before--BackgroundColor: var(--pf-global--BorderColor--100);
   color: var(--pf-global--Color--100);
+  --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
 }
 .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);
@@ -106,6 +125,7 @@
 }
 
 .pf-c-log-viewer__header {
+  color: var(--pf-global--Color--100);
   margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
 }
 
@@ -130,19 +150,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 +179,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 +188,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 +198,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/css/components/LogViewer/log-viewer.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
   "modifiers": {
     "dark": "pf-m-dark",
     "wrapText": "pf-m-wrap-text",
+    "nowrap": "pf-m-nowrap",
     "lineNumbers": "pf-m-line-numbers",
     "match": "pf-m-match",
     "current": "pf-m-current"

package/css/components/LogViewer/log-viewer.js

@@ -17,6 +17,7 @@ exports.default = {
   "modifiers": {
     "dark": "pf-m-dark",
     "wrapText": "pf-m-wrap-text",
+    "nowrap": "pf-m-nowrap",
     "lineNumbers": "pf-m-line-numbers",
     "match": "pf-m-match",
     "current": "pf-m-current"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.19.3",
+  "version": "4.20.2",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.154.1",
+    "@patternfly/patternfly": "4.156.0",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.0.0"
   },
   "license": "MIT",
-  "gitHead": "b186647128d5712d685ba0de0eaff42b4b75cfd2"
+  "gitHead": "2b543d27472e46aabb3e7c8d7b3769234ea7e138"
 }