@patternfly/patternfly 4.197.0 → 4.198.1

package/components/Card/card.css

@@ -84,6 +84,8 @@
   --pf-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
+  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
   display: flex;
   flex-direction: column;
   background-color: var(--pf-c-card--BackgroundColor);
@@ -310,6 +312,24 @@
   font-size: var(--pf-c-card__footer--FontSize);
 }
 
+.pf-c-card__sr-input:focus + .pf-c-card::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
+}
+
 .pf-m-overpass-font .pf-c-card .pf-c-card__title {
   font-weight: var(--pf-global--FontWeight--normal);
+}
+
+:where(.pf-theme-dark) .pf-c-card {
+  --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
 }

package/components/Card/card.scss

@@ -105,6 +105,10 @@
   --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-card__header--m-toggle-right--actions--MarginRight: 0;
 
+  // Card input
+  --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
+
   display: flex;
   flex-direction: column;
   background-color: var(--pf-c-card--BackgroundColor);
@@ -380,9 +384,26 @@
   font-size: var(--pf-c-card__footer--FontSize);
 }
 
+.pf-c-card__sr-input:focus + .pf-c-card::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border: var(--pf-c-card__input--focus--BorderWidth) solid var(--pf-c-card__input--focus--BorderColor);
+}
+
 // RedHat Font overrides
 @include pf-m-overpass-font {
   .pf-c-card .pf-c-card__title {
     font-weight: var(--pf-global--FontWeight--normal);
   }
 }
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import "themes/dark/card";
+
+@include pf-theme-dark {
+  @include pf-theme-dark-card;
+}

package/components/Card/themes/dark/card.scss

@@ -0,0 +1,13 @@
+@import "../../../../sass-utilities/themes/dark/all";
+
+@mixin pf-theme-dark-card() {
+  .pf-c-card {
+    --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
+
+    // Hoverable/selectable raised
+    --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
+    --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
+    --pf-c-card--m-selectable-raised--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
+    --pf-c-card--m-selectable-raised--active--BoxShadow: var(--pf-global--BoxShadow--lg);
+  }
+}

package/components/Table/table.css

@@ -304,12 +304,14 @@
   border-bottom: 0;
 }
 .pf-c-table.pf-m-sticky-header > thead > tr > * {
+  z-index: var(--pf-global--ZIndex--xs);
+}
+.pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
   position: sticky;
   top: 0;
-  z-index: var(--pf-global--ZIndex--xs);
   background: var(--pf-c-table--BackgroundColor);
 }
-.pf-c-table.pf-m-sticky-header > thead > tr > *::after {
+.pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > *::after {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -317,6 +319,27 @@
   content: "";
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--pf-global--ZIndex--xs);
+  background: var(--pf-c-table--BackgroundColor);
+}
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header > .pf-m-border-row {
+  height: var(--pf-c-table--border-width--base);
+  background-color: var(--pf-c-table--BorderColor);
+}
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) th:not([rowspan]),
+.pf-c-table.pf-m-sticky-header > .pf-m-nested-column-header tr:not(:nth-last-child(2)) td:not([rowspan]) {
+  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+}
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) {
+  border-bottom: 0;
+}
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
+.pf-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
+  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+}
 .pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
 .pf-c-table > .pf-m-striped > tr:nth-child(odd),
 .pf-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -414,13 +437,6 @@
 .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
 }
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) {
-  --pf-c-table--border-width--base: 0;
-}
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) th:not([rowspan]),
-.pf-c-table thead.pf-m-nested-column-header tr:not(:last-child) td:not([rowspan]) {
-  --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
-}
 .pf-c-table thead .pf-c-table__subhead {
   --pf-c-table__sort__button__text--Color: var(--pf-c-table__subhead--Color);
   color: var(--pf-c-table__subhead--Color);

package/components/Table/table.scss

@@ -330,9 +330,15 @@
       border-bottom: 0;
 
       > * {
+        z-index: var(--pf-global--ZIndex--xs); // set z-index here to allow sticky column to override
+      }
+    }
+
+    // standard sticky headers
+    > thead:not(.pf-m-nested-column-header) {
+      > tr > * {
         position: sticky;
         top: 0;
-        z-index: var(--pf-global--ZIndex--xs);
         background: var(--pf-c-table--BackgroundColor);
 
         // stylelint-disable-next-line
@@ -346,6 +352,45 @@
         }
       }
     }
+
+    // nested column header
+    > .pf-m-nested-column-header {
+      position: sticky;
+      top: 0;
+      z-index: var(--pf-global--ZIndex--xs);
+      background: var(--pf-c-table--BackgroundColor);
+
+      > .pf-m-border-row {
+        height: var(--pf-c-table--border-width--base);
+        background-color: var(--pf-c-table--BorderColor);
+      }
+
+      tr:not(:nth-last-child(2)) {
+        // stylelint-disable max-nesting-depth
+        th,
+        td {
+          &:not([rowspan]) {
+            --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+          }
+        }
+        // stylelint-enable
+      }
+    }
+  }
+
+  &:not(.pf-m-sticky-header) > .pf-m-nested-column-header {
+    tr:not(:last-child) {
+      border-bottom: 0; // hard reset tr borders in nested headers
+
+      // stylelint-disable max-nesting-depth
+      th,
+      td {
+        &:not([rowspan]) {
+          --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
+        }
+      }
+      // stylelint-enable
+    }
   }
 
   // For regular and expandable tables
@@ -488,16 +533,6 @@
         }
       }
 
-      tr:not(:last-child) {
-        --pf-c-table--border-width--base: 0; // hard reset tr borders in nested headers
-
-        th,
-        td {
-          &:not([rowspan]) {
-            --pf-c-table--cell--PaddingBottom: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingBottom);
-          }
-        }
-      }
     }
     // stylelint-enable
 

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

@@ -375,6 +375,27 @@ cssPrefix: pf-c-card
 
 ```
 
+### Selectable with a hidden input for improved screen reader accessibility
+
+```html
+<input
+  class="pf-c-card__sr-input pf-screen-reader"
+  type="checkbox"
+  tabindex="-1"
+  aria-label="Checkbox to improve screen reader accessibility of a selectable card"
+/>
+<div
+  class="pf-c-card pf-m-selectable-raised"
+  tabindex="0"
+  id="card-selectable-with-input-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>
+
+```
+
 ### Non selectable
 
 ```html
@@ -886,6 +907,7 @@ A card is a generic rectangular container that can be used to build other compon
 | `.pf-c-card__actions`            | `<div>`                             | Creates an actions element to be used in the card header.                                                                                                                      |
 | `.pf-c-card__header-main`        | `<div>`                             | Creates a wrapper element to be used in the card header when using an image, logo, or text.                                                                                    |
 | `.pf-c-card__expandable-content` | `<div>`                             | Creates the expandable card's expandable content.                                                                                                                              |
+| `.pf-c-card__sr-input`           | `<input>`                           | Creates an input which, when focused, makes a following `.pf-c-card` appear focused.                                                                                           |
 | `.pf-m-compact`                  | `.pf-c-card`                        | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
 | `.pf-m-display-lg`               | `.pf-c-card`                        | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases.                                        |
 | `.pf-m-no-fill`                  | `.pf-c-card__body`                  | Sets a `.pf-c-card__body` to not fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies.                                               |