@patternfly/patternfly 4.202.1 → 4.203.1

package/components/Sidebar/sidebar.css

@@ -172,27 +172,21 @@
   .pf-c-sidebar__panel.pf-m-width-default-on-sm {
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
   }
-
   .pf-c-sidebar__panel.pf-m-width-25-on-sm {
     --pf-c-sidebar__panel--FlexBasis: 25%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-33-on-sm {
     --pf-c-sidebar__panel--FlexBasis: 33%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-50-on-sm {
     --pf-c-sidebar__panel--FlexBasis: 50%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-66-on-sm {
     --pf-c-sidebar__panel--FlexBasis: 66%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-75-on-sm {
     --pf-c-sidebar__panel--FlexBasis: 75%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-100-on-sm {
     --pf-c-sidebar__panel--FlexBasis: 100%;
   }
@@ -201,27 +195,21 @@
   .pf-c-sidebar__panel.pf-m-width-default-on-md {
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
   }
-
   .pf-c-sidebar__panel.pf-m-width-25-on-md {
     --pf-c-sidebar__panel--FlexBasis: 25%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-33-on-md {
     --pf-c-sidebar__panel--FlexBasis: 33%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-50-on-md {
     --pf-c-sidebar__panel--FlexBasis: 50%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-66-on-md {
     --pf-c-sidebar__panel--FlexBasis: 66%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-75-on-md {
     --pf-c-sidebar__panel--FlexBasis: 75%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-100-on-md {
     --pf-c-sidebar__panel--FlexBasis: 100%;
   }
@@ -230,27 +218,21 @@
   .pf-c-sidebar__panel.pf-m-width-default-on-lg {
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
   }
-
   .pf-c-sidebar__panel.pf-m-width-25-on-lg {
     --pf-c-sidebar__panel--FlexBasis: 25%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-33-on-lg {
     --pf-c-sidebar__panel--FlexBasis: 33%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-50-on-lg {
     --pf-c-sidebar__panel--FlexBasis: 50%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-66-on-lg {
     --pf-c-sidebar__panel--FlexBasis: 66%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-75-on-lg {
     --pf-c-sidebar__panel--FlexBasis: 75%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-100-on-lg {
     --pf-c-sidebar__panel--FlexBasis: 100%;
   }
@@ -259,27 +241,21 @@
   .pf-c-sidebar__panel.pf-m-width-default-on-xl {
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
   }
-
   .pf-c-sidebar__panel.pf-m-width-25-on-xl {
     --pf-c-sidebar__panel--FlexBasis: 25%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-33-on-xl {
     --pf-c-sidebar__panel--FlexBasis: 33%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-50-on-xl {
     --pf-c-sidebar__panel--FlexBasis: 50%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-66-on-xl {
     --pf-c-sidebar__panel--FlexBasis: 66%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-75-on-xl {
     --pf-c-sidebar__panel--FlexBasis: 75%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-100-on-xl {
     --pf-c-sidebar__panel--FlexBasis: 100%;
   }
@@ -288,27 +264,21 @@
   .pf-c-sidebar__panel.pf-m-width-default-on-2xl {
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--FlexBasis--base);
   }
-
   .pf-c-sidebar__panel.pf-m-width-25-on-2xl {
     --pf-c-sidebar__panel--FlexBasis: 25%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-33-on-2xl {
     --pf-c-sidebar__panel--FlexBasis: 33%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-50-on-2xl {
     --pf-c-sidebar__panel--FlexBasis: 50%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-66-on-2xl {
     --pf-c-sidebar__panel--FlexBasis: 66%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-75-on-2xl {
     --pf-c-sidebar__panel--FlexBasis: 75%;
   }
-
   .pf-c-sidebar__panel.pf-m-width-100-on-2xl {
     --pf-c-sidebar__panel--FlexBasis: 100%;
   }

package/components/Spinner/spinner.css

@@ -101,7 +101,7 @@ span.pf-c-spinner {
 }
 .pf-c-spinner__lead-ball::after {
   position: absolute;
-  top: calc(50% - (var(--pf-c-spinner__ball--after--Height) / 2));
+  top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
   right: 0;
   width: var(--pf-c-spinner__ball--after--Width);
   height: var(--pf-c-spinner__ball--after--Height);
@@ -132,7 +132,7 @@ span.pf-c-spinner {
 }
 .pf-c-spinner__tail-ball::after {
   position: absolute;
-  top: calc(50% - (var(--pf-c-spinner__ball--after--Height) / 2));
+  top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
   right: 0;
   width: var(--pf-c-spinner__ball--after--Width);
   height: var(--pf-c-spinner__ball--after--Height);

package/components/Table/table.css

@@ -180,10 +180,10 @@
   --pf-c-table__sort__button--Color: var(--pf-global--Color--100);
   --pf-c-table__sort--m-selected__button--Color: var(--pf-global--active-color--100);
   --pf-c-table__sort--m-help--MinWidth: 15ch;
-  --pf-c-table__sort__button__text--Color: currentColor;
-  --pf-c-table__sort__button--hover__text--Color: currentColor;
-  --pf-c-table__sort__button--focus__text--Color: currentColor;
-  --pf-c-table__sort__button--active__text--Color: currentColor;
+  --pf-c-table__sort__button__text--Color: currentcolor;
+  --pf-c-table__sort__button--hover__text--Color: currentcolor;
+  --pf-c-table__sort__button--focus__text--Color: currentcolor;
+  --pf-c-table__sort__button--active__text--Color: currentcolor;
   --pf-c-table__sort-indicator--Color: var(--pf-global--disabled-color--200);
   --pf-c-table__sort-indicator--MarginLeft: var(--pf-global--spacer--md);
   --pf-c-table__sort--m-selected__sort-indicator--Color: var(--pf-global--active-color--100);
@@ -906,7 +906,7 @@
   --pf-c-table__sort__button--hover__text--Color: var(--pf-c-table__sort--m-favorite__button--hover__text--Color);
   --pf-c-table__sort__button--focus__text--Color: var(--pf-c-table__sort--m-favorite__button--focus__text--Color);
   --pf-c-table__sort__button--active__text--Color: var(--pf-c-table__sort--m-favorite__button--active__text--Color);
-  --pf-c-table__sort--m-selected__button__text--Color: currentColor;
+  --pf-c-table__sort--m-selected__button__text--Color: currentcolor;
 }
 
 .pf-c-table__sort-indicator {

package/components/Table/table.scss

@@ -177,10 +177,10 @@
   --pf-c-table__sort--m-help--MinWidth: 15ch;
 
   // Sort text
-  --pf-c-table__sort__button__text--Color: currentColor;
-  --pf-c-table__sort__button--hover__text--Color: currentColor;
-  --pf-c-table__sort__button--focus__text--Color: currentColor;
-  --pf-c-table__sort__button--active__text--Color: currentColor;
+  --pf-c-table__sort__button__text--Color: currentcolor;
+  --pf-c-table__sort__button--hover__text--Color: currentcolor;
+  --pf-c-table__sort__button--focus__text--Color: currentcolor;
+  --pf-c-table__sort__button--active__text--Color: currentcolor;
 
   // Sort indicator
   --pf-c-table__sort-indicator--Color: var(--pf-global--disabled-color--200);
@@ -1174,7 +1174,7 @@
     --pf-c-table__sort__button--hover__text--Color: var(--pf-c-table__sort--m-favorite__button--hover__text--Color);
     --pf-c-table__sort__button--focus__text--Color: var(--pf-c-table__sort--m-favorite__button--focus__text--Color);
     --pf-c-table__sort__button--active__text--Color: var(--pf-c-table__sort--m-favorite__button--active__text--Color);
-    --pf-c-table__sort--m-selected__button__text--Color: currentColor;
+    --pf-c-table__sort--m-selected__button__text--Color: currentcolor;
   }
 }
 

package/components/Tabs/tabs.css

@@ -97,7 +97,7 @@
   --pf-c-tabs__toggle--Visibility: hidden;
   --pf-c-tabs__toggle--MarginBottom: 0;
   --pf-c-tabs--m-expanded__toggle--MarginBottom: var(--pf-global--spacer--md);
-  --pf-c-tabs__toggle-icon--Color: currentColor;
+  --pf-c-tabs__toggle-icon--Color: currentcolor;
   --pf-c-tabs__toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-tabs__toggle-icon--Rotate: 0;
   --pf-c-tabs__toggle-text--MarginLeft: 0;

package/components/Tabs/tabs.scss

@@ -126,7 +126,7 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   --pf-c-tabs__toggle--Visibility: hidden;
   --pf-c-tabs__toggle--MarginBottom: 0;
   --pf-c-tabs--m-expanded__toggle--MarginBottom: var(--pf-global--spacer--md);
-  --pf-c-tabs__toggle-icon--Color: currentColor;
+  --pf-c-tabs__toggle-icon--Color: currentcolor;
   --pf-c-tabs__toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-tabs__toggle-icon--Rotate: 0;
   --pf-c-tabs__toggle-text--MarginLeft: 0;

package/components/TreeView/tree-view.css

@@ -20,8 +20,14 @@
   --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
   --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
   --pf-c-tree-view__node-toggle--Position: absolute;
+  --pf-c-tree-view__node-toggle--Color--base: var(--pf-global--Color--200);
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
+  --pf-c-tree-view__node-toggle--hover--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__node-toggle--focus--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__node-toggle--active--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
-  --pf-c-tree-view__node-toggle-icon--Transition: var(--pf-global--Transition);
+  --pf-c-tree-view__node-toggle-icon--Transition: transform var(--pf-global--TransitionDuration) var(--pf-global--TimingFunction);
   --pf-c-tree-view__node-toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-tree-view__node-toggle-button--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -222,8 +228,10 @@
 
 .pf-c-tree-view__list-item .pf-c-tree-view__list-item {
   --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate);
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
 }
 .pf-c-tree-view__list-item.pf-m-expanded {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__list-item--m-expanded__node-toggle--Color);
   --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
 }
 
@@ -256,6 +264,21 @@
 .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read {
   --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
 }
+.pf-c-tree-view__node.pf-m-selectable .pf-c-tree-view__node-toggle {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
+}
+.pf-c-tree-view__node:hover,
+.pf-c-tree-view__node .pf-c-tree-view__node-toggle:hover {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover__icon--Color);
+}
+.pf-c-tree-view__node:focus,
+.pf-c-tree-view__node .pf-c-tree-view__node-toggle:focus {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus__icon--Color);
+}
+.pf-c-tree-view__node:active,
+.pf-c-tree-view__node .pf-c-tree-view__node-toggle:active {
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active__icon--Color);
+}
 
 .pf-c-tree-view__node-container {
   display: var(--pf-c-tree-view__node-container--Display);
@@ -285,6 +308,7 @@
   padding: var(--pf-c-tree-view__node-toggle-button--PaddingTop) var(--pf-c-tree-view__node-toggle-button--PaddingRight) var(--pf-c-tree-view__node-toggle-button--PaddingBottom) var(--pf-c-tree-view__node-toggle-button--PaddingLeft);
   margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
   margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
+  color: var(--pf-c-tree-view__node-toggle--Color);
   border: 0;
   transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
 }
@@ -304,6 +328,10 @@
   white-space: nowrap;
 }
 
+label.pf-c-tree-view__node-text {
+  cursor: pointer;
+}
+
 .pf-c-tree-view__node-title {
   font-weight: var(--pf-c-tree-view__node-title--FontWeight);
 }

package/components/TreeView/tree-view.scss

@@ -36,10 +36,16 @@ $pf-c-tree-view--MaxNesting: 10;
 
   // Toggle
   --pf-c-tree-view__node-toggle--Position: absolute;
+  --pf-c-tree-view__node-toggle--Color--base: var(--pf-global--Color--200);
+  --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base);
+  --pf-c-tree-view__node-toggle--hover--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__node-toggle--focus--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__node-toggle--active--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-global--Color--100);
 
   // Toggle icon
   --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
-  --pf-c-tree-view__node-toggle-icon--Transition: var(--pf-global--Transition);
+  --pf-c-tree-view__node-toggle-icon--Transition: transform var(--pf-global--TransitionDuration) var(--pf-global--TimingFunction);
   --pf-c-tree-view__node-toggle-button--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-tree-view__node-toggle-button--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-tree-view__node-toggle-button--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -331,10 +337,12 @@ $pf-c-tree-view--MaxNesting: 10;
 // stylelint-disable
 .pf-c-tree-view__list-item {
   .pf-c-tree-view__list-item {
-    --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate); // reset nested icons
+    --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__node-toggle-icon--base--Rotate); // reset nested toggle icon rotate
+    --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base); // reset nested toggle color
   }
 
   &.pf-m-expanded {
+    --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__list-item--m-expanded__node-toggle--Color);
     --pf-c-tree-view__node-toggle-icon--Rotate: var(--pf-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
   }
 }
@@ -373,6 +381,25 @@ $pf-c-tree-view--MaxNesting: 10;
       --pf-c-badge--m-read--BackgroundColor: var(--pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor);
     }
   }
+
+  &.pf-m-selectable .pf-c-tree-view__node-toggle {
+    --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--Color--base); // resets hover/focus/active color when node triggers hover/focus/active color change
+  }
+
+  &,
+  .pf-c-tree-view__node-toggle {
+    &:hover {
+      --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--hover__icon--Color);
+    }
+
+    &:focus {
+      --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--focus__icon--Color);
+    }
+
+    &:active {
+      --pf-c-tree-view__node-toggle--Color: var(--pf-c-tree-view__node-toggle--active__icon--Color);
+    }
+  }
 }
 
 .pf-c-tree-view__node-container {
@@ -405,6 +432,7 @@ $pf-c-tree-view--MaxNesting: 10;
   padding: var(--pf-c-tree-view__node-toggle-button--PaddingTop) var(--pf-c-tree-view__node-toggle-button--PaddingRight) var(--pf-c-tree-view__node-toggle-button--PaddingBottom) var(--pf-c-tree-view__node-toggle-button--PaddingLeft);
   margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
   margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
+  color: var(--pf-c-tree-view__node-toggle--Color);
   border: 0;
   transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
 }
@@ -424,6 +452,12 @@ $pf-c-tree-view--MaxNesting: 10;
   }
 }
 
+.pf-c-tree-view__node-text {
+  @at-root label#{&} {
+    cursor: pointer;
+  }
+}
+
 .pf-c-tree-view__node-title {
   font-weight: var(--pf-c-tree-view__node-title--FontWeight);
 }

package/docs/components/Table/examples/Table.md

@@ -22288,8 +22288,8 @@ For sticky columns to function correctly, the parent table's width must be contr
           scope="col"
         >Visual designers</th>
       </tr>
-      <tr class="pf-m-border-row">
-        <td colspan="9" aria-hidden="true" tabindex="-1"></td>
+      <tr class="pf-m-border-row" aria-hidden="true">
+        <td colspan="9"></td>
       </tr>
     </thead>
 
@@ -23467,8 +23467,8 @@ For sticky columns to function correctly, the parent table's width must be contr
           </button>
         </th>
       </tr>
-      <tr class="pf-m-border-row">
-        <td colspan="9" aria-hidden="true" tabindex="-1"></td>
+      <tr class="pf-m-border-row" aria-hidden="true">
+        <td colspan="9"></td>
       </tr>
     </thead>
 
@@ -23999,6 +23999,12 @@ For sticky columns to function correctly, the parent table's width must be contr
 
 ```
 
+### Accessibility
+
+| Attribute            | Applied to         | Outcome                                                   |
+| -------------------- | ------------------ | --------------------------------------------------------- |
+| `aria-hidden="true"` | `.pf-m-border-row` | Hides table row from assistive technologies. **Required** |
+
 ### Nested column header modifier usage
 
 | Class                        | Applied to                                              | Outcome                                                                                     |