@patternfly/patternfly 4.154.1 → 4.156.2

package/README.md

@@ -21,8 +21,8 @@ Any of the files above are meant for use in consuming the library. The recommend
 To setup the PatternFly 4 development environment:
 
 - clone the project
-- run `npm install` from the project root
-- run `npm start`
+- run `yarn install` from the project root
+- run `yarn start`
 - open your browser to `http://localhost:8001`
 
 After working on your contribution, check for [accessibility violations](#testing-for-accessibility).
@@ -58,8 +58,8 @@ To create 3 new demos named "Test demo", "Test demo 2", and "Test demo 3", run:
 #### Update screenshots
 When making visual changes to a full page example, new example preview screenshots must be generated. To update the screenshots:
 
-- open a terminal and run `npm run build` and `npm run serve`
-- in another terminal, run `npm run screenshots`
+- open a terminal and run `yarn build && yarn run serve`
+- in another terminal, run `yarn screenshots`
 
 ## Guidelines for CSS development
 
@@ -80,14 +80,15 @@ PatternFly uses [aXe: The Accessibility Engine](https://www.deque.com/axe/) to c
 aXe is available as either a browser extension or npm script.
 
 To run the a11y audit locally:
+
 - install the latest [chromedriver](http://chromedriver.chromium.org/downloads) and ensure its available on your system `$PATH`
   - macOS users can simply `brew cask install chromedriver`
-- run `npm run dev`
-- run `npm run a11y` (in another console)
+- open a terminal and run `yarn build && yarn run serve`
+- in another terminal, run `yarn a11y`
 
 The tool is configured to return WCAG 2.0 AA violations for the full page renderings of all components, layouts, utilities, and demos. The tool will provide feedback about what the violation is and a link to documentation about how to address the violation.
 
-The same tool is also available as a browser extension for [Chrome](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/).
+The same tool is also available as a browser extension for [Chrome](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/).
 
 ### Fixing violations
 
@@ -102,11 +103,11 @@ If you have any suggestions about ways that we can improve how we use this tool,
 ## FAQ
 
 #### CSS Variables
-[How do I use CSS variables to customize
-the library?](https://pf4.patternfly.org/guidelines#variables)
+[How do I use CSS variables to customize the library?](https://pf4.patternfly.org/guidelines#variables)
 
 #### Browser support
 PatternFly 4 is supported on the latest two major versions of the following browsers:
+
 - Chrome
 - Firefox
 - Safari

package/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/components/Card/card.scss

@@ -61,6 +61,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);
 
   // Compact
   --pf-c-card--m-compact__body--FontSize: var(--pf-global--FontSize--sm);
@@ -143,7 +147,8 @@
   }
 
   &.pf-m-hoverable-raised,
-  &.pf-m-selectable-raised {
+  &.pf-m-selectable-raised,
+  &.pf-m-non-selectable-raised {
     position: relative;
 
     &::before {
@@ -180,15 +185,12 @@
       --pf-c-card--m-selectable-raised--before--BackgroundColor: var(--pf-c-card--m-selectable-raised--focus--before--BackgroundColor);
     }
 
-    /*
     &: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-m-selected-raised,
-    &:active {
+    &.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); // moves before down when selected - same amount and speed as the selected card moves up
@@ -200,6 +202,14 @@
     }
   }
 
+  &.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-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/components/FormControl/form-control.css

@@ -100,7 +100,8 @@
   --pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
   --pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
   --pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
-  --pf-c-form-control__select--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
+  --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm) - var(--pf-c-form-control--BorderWidth));
   --pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
   --pf-c-form-control__select--BackgroundSize: .625em;
   --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 1px);
@@ -232,10 +233,17 @@
 }
 select.pf-c-form-control {
   --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
+  --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
   background-image: var(--pf-c-form-control__select--BackgroundUrl);
   background-position: var(--pf-c-form-control__select--BackgroundPosition);
   background-size: var(--pf-c-form-control__select--BackgroundSize);
 }
+@-moz-document url-prefix() {
+  select.pf-c-form-control {
+    --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
+    --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
+  }
+}
 select.pf-c-form-control[aria-invalid=true] {
   --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
   --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition);

package/components/FormControl/form-control.scss

@@ -148,7 +148,8 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
   --pf-c-form-control--m-clock--BackgroundUrl: #{pf-bg-svg($pf-c-form-control--m-clock--Coordinates, $svg-color: $pf-c-form-control--m-clock--Color)};
 
   // Select -- rename __select to --select in a breaking change release
-  --pf-c-form-control__select--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
+  --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm) - var(--pf-c-form-control--BorderWidth));
   --pf-c-form-control__select--BackgroundUrl: #{pf-bg-svg($pf-c-form-control__select--Coordinates, $pf-c-form-control__select--ViewBox)};
   --pf-c-form-control__select--BackgroundSize: .625em; // Calculated from react-icon SVG viewbox
   --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md) + 1px);
@@ -333,11 +334,19 @@ $pf-c-form-control--m-clock--Coordinates: "M256 8C119 8 8 119 8 256s111 248 248
 
   @at-root select#{&} {
     --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--PaddingRight);
+    --pf-c-form-control--PaddingLeft: var(--pf-c-form-control__select--PaddingLeft);
 
     background-image: var(--pf-c-form-control__select--BackgroundUrl);
     background-position: var(--pf-c-form-control__select--BackgroundPosition);
     background-size: var(--pf-c-form-control__select--BackgroundSize);
 
+    // Firefox's select text has additional padding
+    // stylelint-disable-next-line
+    @-moz-document url-prefix() {
+      --pf-c-form-control--PaddingRight: calc(var(--pf-c-form-control__select--PaddingRight) - 1px);
+      --pf-c-form-control--PaddingLeft: calc(var(--pf-c-form-control__select--PaddingLeft) - 4px);
+    }
+
     &[aria-invalid="true"] {
       --pf-c-form-control--PaddingRight: var(--pf-c-form-control__select--invalid--PaddingRight);
       --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control__select--invalid--BackgroundPosition); // drop this declaration and use the __select var directly in the background-position below in breaking change release

package/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/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);
@@ -61,19 +65,10 @@
   // Dark theme
   --pf-c-log-viewer--m-dark__main--BorderWidth: 0;
 
-
   &.pf-m-dark {
-    --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
+    @include pf-t-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);
-
-      @include pf-t-dark;
-    }
+    --pf-c-log-viewer__main--BorderWidth: var(--pf-c-log-viewer--m-dark__main--BorderWidth);
   }
 
   display: flex;
@@ -85,8 +80,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
@@ -110,6 +116,8 @@
 
 // Header
 .pf-c-log-viewer__header {
+  @include pf-t-light;
+
   margin-bottom: var(--pf-c-log-viewer__header--MarginBottom);
 }
 
@@ -140,30 +148,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 +182,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 +191,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 +202,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

@@ -1,4 +1,5 @@
 .pf-c-menu-toggle {
+  --pf-c-menu-toggle--BorderRadius: 0;
   --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-menu-toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -32,6 +33,7 @@
   --pf-c-menu-toggle--m-expanded--after--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-menu-toggle--disabled--Color: var(--pf-global--disabled-color--100);
   --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
+  --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
@@ -69,6 +71,7 @@
   color: var(--pf-c-menu-toggle--Color);
   background-color: var(--pf-c-menu-toggle--BackgroundColor);
   border: 0;
+  border-radius: var(--pf-c-menu-toggle--BorderRadius);
 }
 .pf-c-menu-toggle::before, .pf-c-menu-toggle::after {
   position: absolute;
@@ -88,6 +91,7 @@
   border-bottom: var(--pf-c-menu-toggle--after--BorderBottomWidth) solid var(--pf-c-menu-toggle--after--BorderBottomColor);
 }
 .pf-c-menu-toggle.pf-m-primary {
+  --pf-c-menu-toggle--BorderRadius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-primary--Color);
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-primary--BackgroundColor);
   --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-c-menu-toggle--m-primary--hover--BackgroundColor);

package/components/MenuToggle/menu-toggle.scss

@@ -1,4 +1,5 @@
 .pf-c-menu-toggle {
+  --pf-c-menu-toggle--BorderRadius: 0;
   --pf-c-menu-toggle--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-menu-toggle--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -48,6 +49,7 @@
   --pf-c-menu-toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
 
   // Primary
+  --pf-c-menu-toggle--m-primary--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-menu-toggle--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-menu-toggle--m-primary--BackgroundColor: var(--pf-global--primary-color--100);
   --pf-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
@@ -100,6 +102,7 @@
   color: var(--pf-c-menu-toggle--Color);
   background-color: var(--pf-c-menu-toggle--BackgroundColor);
   border: 0;
+  border-radius: var(--pf-c-menu-toggle--BorderRadius);
 
   &::before,
   &::after {
@@ -123,6 +126,7 @@
   }
 
   &.pf-m-primary {
+    --pf-c-menu-toggle--BorderRadius: var(--pf-c-menu-toggle--m-primary--BorderRadius);
     --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-primary--Color);
     --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--m-primary--BackgroundColor);
     --pf-c-menu-toggle--hover--BackgroundColor: var(--pf-c-menu-toggle--m-primary--hover--BackgroundColor);

package/docs/components/Card/examples/Card.md

@@ -375,6 +375,20 @@ cssPrefix: pf-c-card
 
 ```
 
+### Non selectable
+
+```html
+<div
+  class="pf-c-card pf-m-non-selectable-raised"
+  id="card-non-selectable-example"
+>
+  <div class="pf-c-card__title">Title</div>
+  <div class="pf-c-card__body">Body</div>
+  <div class="pf-c-card__footer">Footer</div>
+</div>
+
+```
+
 ### Hoverable (legacy)
 
 ```html
@@ -878,6 +892,7 @@ A card is a generic rectangular container that can be used to build other compon
 | `.pf-m-hoverable-raised`         | `.pf-c-card`                        | Modifies the card to include hover styles on `:hover`.                                                                                                                         |
 | `.pf-m-selectable-raised`        | `.pf-c-card`                        | Modifies a selectable card so that it is selectable.                                                                                                                           |
 | `.pf-m-selected-raised`          | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state.                                                                                                                             |
+| `.pf-m-non-selectable-raised`    | `.pf-c-card`                        | Modifies a selectable card so that it is not selectable.                                                                                                                       |
 | `.pf-m-flat`                     | `.pf-c-card`                        | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background.                                         |
 | `.pf-m-rounded`                  | `.pf-c-card`                        | Modifies the card to have rounded corners.                                                                                                                                     |
 | `.pf-m-plain`                    | `.pf-c-card`                        | Modifies the card to have no box shadow and no background color.                                                                                                               |