@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

package/components/Table/table-grid.scss

@@ -174,7 +174,6 @@
   // Thead
   thead {
     display: none;
-    visibility: hidden;
   }
 
   // Tbody
@@ -394,7 +393,6 @@
 
     &:not(.pf-m-expanded) {
       display: none;
-      visibility: hidden;
     }
 
     .pf-c-table__expandable-row-content {

package/components/Table/table-tree-view.css

@@ -82,7 +82,6 @@
 
 .pf-c-table__tree-view-details-toggle {
   display: none;
-  visibility: hidden;
 }
 
 .pf-m-tree-view-grid.pf-c-table {
@@ -144,7 +143,6 @@
 }
 .pf-m-tree-view-grid.pf-c-table thead th {
   display: none;
-  visibility: none;
 }
 .pf-m-tree-view-grid.pf-c-table td {
   display: none;
@@ -171,12 +169,10 @@
 }
 .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-title-header-cell {
   display: block;
-  visibility: visible;
 }
 .pf-m-tree-view-grid.pf-c-table .pf-c-table__tree-view-details-toggle,
 .pf-m-tree-view-grid.pf-c-table .pf-c-table__action {
   display: inline-block;
-  visibility: visible;
 }
 .pf-m-tree-view-grid.pf-c-table .pf-c-table__action {
   --pf-c-table--cell--Width: auto;
@@ -287,7 +283,6 @@
   }
   .pf-m-tree-view-grid-md.pf-c-table thead th {
     display: none;
-    visibility: none;
   }
   .pf-m-tree-view-grid-md.pf-c-table td {
     display: none;
@@ -314,12 +309,10 @@
   }
   .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-title-header-cell {
     display: block;
-    visibility: visible;
   }
   .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__tree-view-details-toggle,
 .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
     display: inline-block;
-    visibility: visible;
   }
   .pf-m-tree-view-grid-md.pf-c-table .pf-c-table__action {
     --pf-c-table--cell--Width: auto;
@@ -431,7 +424,6 @@
   }
   .pf-m-tree-view-grid-lg.pf-c-table thead th {
     display: none;
-    visibility: none;
   }
   .pf-m-tree-view-grid-lg.pf-c-table td {
     display: none;
@@ -458,12 +450,10 @@
   }
   .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-title-header-cell {
     display: block;
-    visibility: visible;
   }
   .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__tree-view-details-toggle,
 .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
     display: inline-block;
-    visibility: visible;
   }
   .pf-m-tree-view-grid-lg.pf-c-table .pf-c-table__action {
     --pf-c-table--cell--Width: auto;
@@ -575,7 +565,6 @@
   }
   .pf-m-tree-view-grid-xl.pf-c-table thead th {
     display: none;
-    visibility: none;
   }
   .pf-m-tree-view-grid-xl.pf-c-table td {
     display: none;
@@ -602,12 +591,10 @@
   }
   .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-title-header-cell {
     display: block;
-    visibility: visible;
   }
   .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__tree-view-details-toggle,
 .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
     display: inline-block;
-    visibility: visible;
   }
   .pf-m-tree-view-grid-xl.pf-c-table .pf-c-table__action {
     --pf-c-table--cell--Width: auto;
@@ -719,7 +706,6 @@
   }
   .pf-m-tree-view-grid-2xl.pf-c-table thead th {
     display: none;
-    visibility: none;
   }
   .pf-m-tree-view-grid-2xl.pf-c-table td {
     display: none;
@@ -746,12 +732,10 @@
   }
   .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-title-header-cell {
     display: block;
-    visibility: visible;
   }
   .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__tree-view-details-toggle,
 .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
     display: inline-block;
-    visibility: visible;
   }
   .pf-m-tree-view-grid-2xl.pf-c-table .pf-c-table__action {
     --pf-c-table--cell--Width: auto;

package/components/Table/table-tree-view.scss

@@ -82,7 +82,6 @@ $pf-c-tree-view--MaxDepth: 10;
 
 .pf-c-table__tree-view-details-toggle {
   display: none;
-  visibility: hidden;
 }
 
 // stylelint-disable
@@ -204,7 +203,6 @@ $pf-c-tree-view--MaxDepth: 10;
 
   thead th {
     display: none;
-    visibility: none;
   }
 
   td {
@@ -242,13 +240,11 @@ $pf-c-tree-view--MaxDepth: 10;
 
   .pf-c-table__tree-view-title-header-cell {
     display: block;
-    visibility: visible;
   }
 
   .pf-c-table__tree-view-details-toggle,
   .pf-c-table__action {
     display: inline-block;
-    visibility: visible;
   }
 
   .pf-c-table__action {

package/components/Table/table.css

@@ -9,66 +9,51 @@
 }
 
 .pf-c-table tr > * {
-  --pf-hidden-visible--visible--Visibility: visible;
   --pf-hidden-visible--hidden--Display: none;
-  --pf-hidden-visible--hidden--Visibility: hidden;
   --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-  --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   display: var(--pf-hidden-visible--Display);
-  visibility: var(--pf-hidden-visible--Visibility);
 }
 .pf-c-table tr > .pf-m-hidden {
   --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-  --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
 }
 @media screen and (min-width: 576px) {
   .pf-c-table tr > .pf-m-hidden-on-sm {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
   }
   .pf-c-table tr > .pf-m-visible-on-sm {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   }
 }
 @media screen and (min-width: 768px) {
   .pf-c-table tr > .pf-m-hidden-on-md {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
   }
   .pf-c-table tr > .pf-m-visible-on-md {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   }
 }
 @media screen and (min-width: 992px) {
   .pf-c-table tr > .pf-m-hidden-on-lg {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
   }
   .pf-c-table tr > .pf-m-visible-on-lg {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   }
 }
 @media screen and (min-width: 1200px) {
   .pf-c-table tr > .pf-m-hidden-on-xl {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
   }
   .pf-c-table tr > .pf-m-visible-on-xl {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   }
 }
 @media screen and (min-width: 1450px) {
   .pf-c-table tr > .pf-m-hidden-on-2xl {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--hidden--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--hidden--Visibility);
   }
   .pf-c-table tr > .pf-m-visible-on-2xl {
     --pf-hidden-visible--Display: var(--pf-hidden-visible--visible--Display);
-    --pf-hidden-visible--Visibility: var(--pf-hidden-visible--visible--Visibility);
   }
 }
 
@@ -946,7 +931,6 @@
 }
 .pf-c-table__expandable-row:not(.pf-m-expanded) {
   display: none;
-  visibility: hidden;
 }
 
 .pf-c-table__compound-expansion-toggle.pf-m-expanded:first-child,

package/components/Table/table.scss

@@ -1229,7 +1229,6 @@
 
   &:not(.pf-m-expanded) {
     display: none;
-    visibility: hidden;
   }
 }
 

package/components/Tabs/tabs.css

@@ -24,7 +24,6 @@
   --pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
   --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-tabs__list--Display: flex;
-  --pf-c-tabs__list--Visibility: visible;
   --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-tabs__link--Color: var(--pf-global--Color--200);
   --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
@@ -94,7 +93,6 @@
   --pf-c-tabs__item--ScrollSnapAlign: end;
   --pf-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
   --pf-c-tabs__toggle--Display: flex;
-  --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;
@@ -117,6 +115,7 @@
   --pf-c-tabs__item-action--last-child--c-button--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-tabs__item-action--c-button--OutlineOffset: -0.1875rem;
   --pf-c-tabs__item-action-icon--MarginTop: 0.125rem;
+  --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
   --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
   --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
@@ -181,14 +180,10 @@
   margin-left: 0;
   transform: translateX(0);
 }
-.pf-c-tabs.pf-m-secondary, .pf-c-tabs.pf-m-no-border-bottom {
+.pf-c-tabs.pf-m-no-border-bottom {
   --pf-c-tabs--before--BorderBottomWidth: 0;
   --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
 }
-.pf-c-tabs.pf-m-border-bottom {
-  --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
-  --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
-}
 .pf-c-tabs.pf-m-box .pf-c-tabs__link, .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
   --pf-c-tabs__link--after--BorderBottomWidth: 0;
 }
@@ -283,89 +278,64 @@
 }
 .pf-c-tabs.pf-m-vertical.pf-m-expandable {
   --pf-c-tabs__list--Display: none;
-  --pf-c-tabs__list--Visibility: hidden;
   --pf-c-tabs__toggle--Display: flex;
-  --pf-c-tabs__toggle--Visibility: visible;
 }
 .pf-c-tabs.pf-m-vertical.pf-m-non-expandable {
   --pf-c-tabs__list--Display: flex;
-  --pf-c-tabs__list--Visibility: visible;
   --pf-c-tabs__toggle--Display: none;
-  --pf-c-tabs__toggle--Visibility: hidden;
 }
 @media (min-width: 576px) {
   .pf-c-tabs.pf-m-vertical.pf-m-expandable-on-sm {
     --pf-c-tabs__list--Display: none;
-    --pf-c-tabs__list--Visibility: hidden;
     --pf-c-tabs__toggle--Display: flex;
-    --pf-c-tabs__toggle--Visibility: visible;
   }
   .pf-c-tabs.pf-m-vertical.pf-m-non-expandable-on-sm {
     --pf-c-tabs__list--Display: flex;
-    --pf-c-tabs__list--Visibility: visible;
     --pf-c-tabs__toggle--Display: none;
-    --pf-c-tabs__toggle--Visibility: hidden;
   }
 }
 @media (min-width: 768px) {
   .pf-c-tabs.pf-m-vertical.pf-m-expandable-on-md {
     --pf-c-tabs__list--Display: none;
-    --pf-c-tabs__list--Visibility: hidden;
     --pf-c-tabs__toggle--Display: flex;
-    --pf-c-tabs__toggle--Visibility: visible;
   }
   .pf-c-tabs.pf-m-vertical.pf-m-non-expandable-on-md {
     --pf-c-tabs__list--Display: flex;
-    --pf-c-tabs__list--Visibility: visible;
     --pf-c-tabs__toggle--Display: none;
-    --pf-c-tabs__toggle--Visibility: hidden;
   }
 }
 @media (min-width: 992px) {
   .pf-c-tabs.pf-m-vertical.pf-m-expandable-on-lg {
     --pf-c-tabs__list--Display: none;
-    --pf-c-tabs__list--Visibility: hidden;
     --pf-c-tabs__toggle--Display: flex;
-    --pf-c-tabs__toggle--Visibility: visible;
   }
   .pf-c-tabs.pf-m-vertical.pf-m-non-expandable-on-lg {
     --pf-c-tabs__list--Display: flex;
-    --pf-c-tabs__list--Visibility: visible;
     --pf-c-tabs__toggle--Display: none;
-    --pf-c-tabs__toggle--Visibility: hidden;
   }
 }
 @media (min-width: 1200px) {
   .pf-c-tabs.pf-m-vertical.pf-m-expandable-on-xl {
     --pf-c-tabs__list--Display: none;
-    --pf-c-tabs__list--Visibility: hidden;
     --pf-c-tabs__toggle--Display: flex;
-    --pf-c-tabs__toggle--Visibility: visible;
   }
   .pf-c-tabs.pf-m-vertical.pf-m-non-expandable-on-xl {
     --pf-c-tabs__list--Display: flex;
-    --pf-c-tabs__list--Visibility: visible;
     --pf-c-tabs__toggle--Display: none;
-    --pf-c-tabs__toggle--Visibility: hidden;
   }
 }
 @media (min-width: 1450px) {
   .pf-c-tabs.pf-m-vertical.pf-m-expandable-on-2xl {
     --pf-c-tabs__list--Display: none;
-    --pf-c-tabs__list--Visibility: hidden;
     --pf-c-tabs__toggle--Display: flex;
-    --pf-c-tabs__toggle--Visibility: visible;
   }
   .pf-c-tabs.pf-m-vertical.pf-m-non-expandable-on-2xl {
     --pf-c-tabs__list--Display: flex;
-    --pf-c-tabs__list--Visibility: visible;
     --pf-c-tabs__toggle--Display: none;
-    --pf-c-tabs__toggle--Visibility: hidden;
   }
 }
 .pf-c-tabs.pf-m-vertical.pf-m-expanded {
   --pf-c-tabs__list--Display: flex;
-  --pf-c-tabs__list--Visibility: visible;
   --pf-c-tabs__toggle--MarginBottom: var(--pf-c-tabs--m-expanded__toggle--MarginBottom);
   --pf-c-tabs__toggle-icon--Color: var(--pf-c-tabs--m-expanded__toggle-icon--Color);
   --pf-c-tabs__toggle-icon--Rotate: var(--pf-c-tabs--m-expanded__toggle-icon--Rotate);
@@ -421,7 +391,6 @@
   display: var(--pf-c-tabs__toggle--Display);
   align-items: center;
   margin-bottom: var(--pf-c-tabs__toggle--MarginBottom);
-  visibility: var(--pf-c-tabs__toggle--Visibility);
 }
 
 .pf-c-tabs__toggle-button {
@@ -458,7 +427,6 @@
   overflow-x: auto;
   scroll-behavior: smooth;
   scroll-snap-type: var(--pf-c-tabs__list--ScrollSnapType);
-  visibility: var(--pf-c-tabs__list--Visibility);
   -webkit-overflow-scrolling: touch;
 }
 .pf-c-tabs__list::-webkit-scrollbar {
@@ -621,6 +589,9 @@
   --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-action--c-button--PaddingLeft);
   outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
 }
+.pf-c-tabs__item-action.pf-m-help {
+  --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
+}
 .pf-c-tabs__item-action:last-child {
   --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
 }

package/components/Tabs/tabs.scss

@@ -37,7 +37,6 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
   // List
   --pf-c-tabs__list--Display: flex;
-  --pf-c-tabs__list--Visibility: visible;
 
   // Item
   --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
@@ -123,7 +122,6 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
   // Expandable
   --pf-c-tabs__toggle--Display: flex;
-  --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;
@@ -149,6 +147,9 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   --pf-c-tabs__item-action--c-button--OutlineOffset: #{pf-size-prem(-3px)};
   --pf-c-tabs__item-action-icon--MarginTop: #{pf-size-prem(2px)};
 
+  // Item help
+  --pf-c-tabs__item-action--m-help--c-button--PaddingLeft: var(--pf-global--spacer--xs);
+
   // Add button
   --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
@@ -232,17 +233,11 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
     }
   }
 
-  &.pf-m-secondary,
   &.pf-m-no-border-bottom {
     --pf-c-tabs--before--BorderBottomWidth: 0;
     --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
   }
 
-  &.pf-m-border-bottom {
-    --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
-    --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
-  }
-
   // Remove bottom border for variants
   &.pf-m-box,
   &.pf-m-vertical {
@@ -381,16 +376,12 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
         // stylelint-disable max-nesting-depth
         &.pf-m-expandable#{$breakpoint-name} {
           --pf-c-tabs__list--Display: none;
-          --pf-c-tabs__list--Visibility: hidden;
           --pf-c-tabs__toggle--Display: flex;
-          --pf-c-tabs__toggle--Visibility: visible;
         }
 
         &.pf-m-non-expandable#{$breakpoint-name} {
           --pf-c-tabs__list--Display: flex;
-          --pf-c-tabs__list--Visibility: visible;
           --pf-c-tabs__toggle--Display: none;
-          --pf-c-tabs__toggle--Visibility: hidden;
         }
         // stylelint-enable
       }
@@ -398,7 +389,6 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
     &.pf-m-expanded {
       --pf-c-tabs__list--Display: flex;
-      --pf-c-tabs__list--Visibility: visible;
       --pf-c-tabs__toggle--MarginBottom: var(--pf-c-tabs--m-expanded__toggle--MarginBottom);
       --pf-c-tabs__toggle-icon--Color: var(--pf-c-tabs--m-expanded__toggle-icon--Color);
       --pf-c-tabs__toggle-icon--Rotate: var(--pf-c-tabs--m-expanded__toggle-icon--Rotate);
@@ -478,7 +468,6 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   display: var(--pf-c-tabs__toggle--Display);
   align-items: center;
   margin-bottom: var(--pf-c-tabs__toggle--MarginBottom);
-  visibility: var(--pf-c-tabs__toggle--Visibility);
 }
 
 .pf-c-tabs__toggle-button {
@@ -519,7 +508,6 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
   overflow-x: auto;
   scroll-behavior: smooth;
   scroll-snap-type: var(--pf-c-tabs__list--ScrollSnapType);
-  visibility: var(--pf-c-tabs__list--Visibility);
   -webkit-overflow-scrolling: touch;
 }
 
@@ -719,6 +707,10 @@ $pf-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
     outline-offset: var(--pf-c-tabs__item-action--c-button--OutlineOffset);
   }
 
+  &.pf-m-help {
+    --pf-c-tabs__item-action--c-button--PaddingLeft: var(--pf-c-tabs__item-action--m-help--c-button--PaddingLeft);
+  }
+
   &:last-child {
     --pf-c-tabs__item-action--c-button--PaddingRight: var(--pf-c-tabs__item-action--last-child--c-button--PaddingRight);
   }

package/components/Title/title.css

@@ -50,9 +50,4 @@
   font-size: var(--pf-c-title--m-md--FontSize);
   font-weight: var(--pf-c-title--m-md--FontWeight);
   line-height: var(--pf-c-title--m-md--LineHeight);
-}
-
-.pf-m-overpass-font .pf-c-title {
-  --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--semi-bold);
-  --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--semi-bold);
 }

package/components/Title/title.scss

@@ -70,11 +70,3 @@
     line-height: var(--pf-c-title--m-md--LineHeight);
   }
 }
-
-// RedHat Font overrides
-@include pf-m-overpass-font {
-  .pf-c-title {
-    --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--semi-bold);
-    --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--semi-bold);
-  }
-}