@patternfly/patternfly 4.197.1 → 4.198.2

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,16 @@
   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);
 }

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,6 +384,16 @@
   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 {

package/components/ProgressStepper/progress-stepper.css

@@ -223,6 +223,7 @@
   font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
   color: var(--pf-c-progress-stepper__step-title--Color);
   text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
+  border: 0;
 }
 .pf-c-progress-stepper__step-title.pf-m-help-text {
   text-decoration: underline;

package/components/ProgressStepper/progress-stepper.scss

@@ -272,6 +272,7 @@
   font-weight: var(--pf-c-progress-stepper__step-title--FontWeight);
   color: var(--pf-c-progress-stepper__step-title--Color);
   text-align: var(--pf-c-progress-stepper__step-title--TextAlign);
+  border: 0;
 
   &.pf-m-help-text {
     text-decoration: underline;

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

package/docs/components/ProgressStepper/examples/ProgressStepper.md

@@ -470,12 +470,10 @@ cssPrefix: pf-c-progress-stepper
       </span>
     </div>
     <div class="pf-c-progress-stepper__step-main">
-      <span
+      <button
         class="pf-c-progress-stepper__step-title pf-m-help-text"
-        role="button"
         type="button"
-        tabindex="0"
-      >First step</span>
+      >First step</button>
     </div>
   </li>
   <li
@@ -488,12 +486,10 @@ cssPrefix: pf-c-progress-stepper
       </span>
     </div>
     <div class="pf-c-progress-stepper__step-main">
-      <span
+      <button
         class="pf-c-progress-stepper__step-title pf-m-help-text"
-        role="button"
         type="button"
-        tabindex="0"
-      >Second step</span>
+      >Second step</button>
     </div>
   </li>
   <li
@@ -506,12 +502,10 @@ cssPrefix: pf-c-progress-stepper
       </span>
     </div>
     <div class="pf-c-progress-stepper__step-main">
-      <span
+      <button
         class="pf-c-progress-stepper__step-title pf-m-help-text"
-        role="button"
         type="button"
-        tabindex="0"
-      >Third step</span>
+      >Third step</button>
     </div>
   </li>
   <li
@@ -555,7 +549,7 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, and
 | `.progress-stepper__step-connector`   | `<div>`                              | Creates the connecting line between steps **Required**                                                                                                             |
 | `.progress-stepper__step-icon`        | `<span>`                             | Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. **Required** |
 | `.progress-stepper__step-main`        | `<div>`                              | Contains the main text content of the step. This element is required, but may be empty if title and description are not used. **Required**                         |
-| `.progress-stepper__step-title`       | `<div>`                              | Contains the title of the step.                                                                                                                                    |
+| `.progress-stepper__step-title`       | `<div>`, `<button>`                  | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text.            |
 | `.progress-stepper__step-description` | `<div>`                              | Contains the description of the step.                                                                                                                              |
 | `.pf-m-center`                        | `.pf-c-progress-stepper`             | Modifies to center each step.                                                                                                                                      |
 | `.pf-m-vertical`                      | `.pf-c-progress-stepper`             | Modifies for vertical orientation.                                                                                                                                 |