@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

package/components/EmptyState/empty-state.scss

@@ -3,38 +3,51 @@
   --pf-c-empty-state--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-empty-state--PaddingBottom: var(--pf-global--spacer--xl);
   --pf-c-empty-state--PaddingLeft: var(--pf-global--spacer--xl);
+  --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
+
+  // Content
   --pf-c-empty-state__content--MaxWidth: none;
+  --pf-c-empty-state--m-xs__content--MaxWidth: #{pf-size-prem(350px)};
+  --pf-c-empty-state--m-sm__content--MaxWidth: #{pf-size-prem(400px)};
+  --pf-c-empty-state--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
+
+  // Icon
   --pf-c-empty-state__icon--MarginBottom: var(--pf-global--spacer--lg);
   --pf-c-empty-state__icon--FontSize: var(--pf-global--icon--FontSize--xl);
   --pf-c-empty-state__icon--Color: var(--pf-global--icon--Color--light);
-  --pf-c-empty-state__content--c-title--m-lg--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
+  --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
+  --pf-c-empty-state--m-xl__icon--FontSize: #{pf-size-prem(100px)};
+
+  // Title text
+  --pf-c-empty-state__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-empty-state__title-text--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-empty-state__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-empty-state__title-text--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-empty-state--m-xs__title-text--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-empty-state--m-xl__title-text--FontSize: var(--pf-global--FontSize--4xl);
+  --pf-c-empty-state--m-xl__title-text--LineHeight: var(--pf-global--LineHeight--sm);
+
+  // Body
   --pf-c-empty-state__body--MarginTop: var(--pf-global--spacer--md);
   --pf-c-empty-state__body--Color: var(--pf-global--Color--200);
-  --pf-c-empty-state__primary--MarginTop: var(--pf-global--spacer--xl);
-  --pf-c-empty-state__primary--secondary--MarginTop: var(--pf-global--spacer--sm);
-  --pf-c-empty-state__secondary--MarginTop: var(--pf-global--spacer--xl);
-  --pf-c-empty-state__secondary--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-empty-state__secondary--child--MarginRight: calc(var(--pf-global--spacer--xs) / 2);
-  --pf-c-empty-state__secondary--child--MarginBottom: var(--pf-global--spacer--xs);
-  --pf-c-empty-state__secondary--child--MarginLeft: calc(var(--pf-global--spacer--xs) / 2);
-  --pf-c-empty-state--m-xs__content--MaxWidth: #{pf-size-prem(350px)};
+  --pf-c-empty-state--body--FontSize: var(--pf-global--FontSize--md);
   --pf-c-empty-state--m-xs__body--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-empty-state--m-xs--button--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-empty-state--m-xs--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs__icon--MarginBottom: var(--pf-global--spacer--md);
   --pf-c-empty-state--m-xs__body--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs__primary--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-xs__secondary--MarginTop: var(--pf-global--spacer--md);
-  --pf-c-empty-state--m-sm__content--MaxWidth: #{pf-size-prem(400px)};
-  --pf-c-empty-state--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
   --pf-c-empty-state--m-xl__body--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-empty-state--m-xl__body--MarginTop: var(--pf-global--spacer--lg);
-  --pf-c-empty-state--m-xl__icon--MarginBottom: var(--pf-global--spacer--xl);
-  --pf-c-empty-state--m-xl__icon--FontSize: #{pf-size-prem(100px)};
-  --pf-c-empty-state--m-xl--c-button__secondary--MarginTop: var(--pf-global--spacer--md);
+
+  // Footer
+  --pf-c-empty-state__footer--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-empty-state__footer--MarginTop: var(--pf-global--spacer--xl);
+  --pf-c-empty-state--m-xs__footer--MarginTop: var(--pf-global--spacer--md);
+
+  // Actions
+  --pf-c-empty-state__actions--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-empty-state__actions--ColumnGap: var(--pf-global--spacer--xs);
 
   display: flex;
   align-items: center;
@@ -47,19 +60,12 @@
     --pf-c-empty-state--PaddingRight: var(--pf-c-empty-state--m-xs--PaddingRight);
     --pf-c-empty-state--PaddingBottom: var(--pf-c-empty-state--m-xs--PaddingBottom);
     --pf-c-empty-state--PaddingLeft: var(--pf-c-empty-state--m-xs--PaddingLeft);
+    --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xs__title-text--FontSize);
     --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-xs__content--MaxWidth);
     --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xs__icon--MarginBottom);
     --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xs__body--MarginTop);
-    --pf-c-empty-state__primary--MarginTop: var(--pf-c-empty-state--m-xs__primary--MarginTop);
-    --pf-c-empty-state__secondary--MarginTop: var(--pf-c-empty-state--m-xs__secondary--MarginTop);
-
-    .pf-c-empty-state__body {
-      font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
-    }
-
-    .pf-c-button {
-      --pf-c-button--FontSize: var(--pf-c-empty-state--m-xs--button--FontSize);
-    }
+    --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xs__body--FontSize);
+    --pf-c-empty-state__footer--MarginTop: var(--pf-c-empty-state--m-xs__footer--MarginTop);
   }
 
   &.pf-m-sm {
@@ -72,13 +78,11 @@
 
   &.pf-m-xl {
     --pf-c-empty-state__body--MarginTop: var(--pf-c-empty-state--m-xl__body--MarginTop);
+    --pf-c-empty-state--body--FontSize: var(--pf-c-empty-state--m-xl__body--FontSize);
     --pf-c-empty-state__icon--MarginBottom: var(--pf-c-empty-state--m-xl__icon--MarginBottom);
     --pf-c-empty-state__icon--FontSize: var(--pf-c-empty-state--m-xl__icon--FontSize);
-    --pf-c-empty-state--c-button__secondary--MarginTop: var(--pf-c-empty-state--m-xl--c-button__secondary--MarginTop);
-
-    .pf-c-empty-state__body {
-      font-size: var(--pf-c-empty-state--m-xl__body--FontSize);
-    }
+    --pf-c-empty-state__title-text--FontSize: var(--pf-c-empty-state--m-xl__title-text--FontSize);
+    --pf-c-empty-state__title-text--LineHeight: var(--pf-c-empty-state--m-xl__title-text--LineHeight);
   }
 
   &.pf-m-full-height {
@@ -88,51 +92,39 @@
 
 .pf-c-empty-state__content {
   max-width: var(--pf-c-empty-state__content--MaxWidth);
-
-  > .pf-c-title.pf-m-lg {
-    font-size: var(--pf-c-empty-state__content--c-title--m-lg--FontSize);
-  }
 }
 
 .pf-c-empty-state__icon {
   margin-bottom: var(--pf-c-empty-state__icon--MarginBottom);
   font-size: var(--pf-c-empty-state__icon--FontSize);
+  line-height: 1;
   color: var(--pf-c-empty-state__icon--Color);
 }
 
+.pf-c-empty-state__title-text {
+  font-family: var(--pf-c-empty-state__title-text--FontFamily);
+  font-size: var(--pf-c-empty-state__title-text--FontSize);
+  font-weight: var(--pf-c-empty-state__title-text--FontWeight);
+  line-height: var(--pf-c-empty-state__title-text--LineHeight);
+}
+
 .pf-c-empty-state__body {
   margin-top: var(--pf-c-empty-state__body--MarginTop);
+  font-size: var(--pf-c-empty-state--body--FontSize);
   color: var(--pf-c-empty-state__body--Color);
 }
 
-@at-root .pf-c-empty-state__content > .pf-c-button.pf-m-primary,
-.pf-c-empty-state__primary {
-  margin-top: var(--pf-c-empty-state__primary--MarginTop);
-
-  + .pf-c-empty-state__secondary {
-    margin-top: var(--pf-c-empty-state__primary--secondary--MarginTop);
-  }
+.pf-c-empty-state__footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: var(--pf-c-empty-state__footer--RowGap);
+  margin-top: var(--pf-c-empty-state__footer--MarginTop);
 }
 
-.pf-c-empty-state__secondary {
+.pf-c-empty-state__actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  margin-top: var(--pf-c-empty-state__secondary--MarginTop);
-  margin-bottom: var(--pf-c-empty-state__secondary--MarginBottom);
-
-  > * {
-    margin-right: var(--pf-c-empty-state__secondary--child--MarginRight);
-    margin-bottom: var(--pf-c-empty-state__secondary--child--MarginBottom);
-    margin-left: var(--pf-c-empty-state__secondary--child--MarginLeft);
-  }
-}
-
-// RedHat Font overrides
-@include pf-m-overpass-font {
-  .pf-c-empty-state {
-    .pf-c-empty-state__content > .pf-c-title.pf-m-lg {
-      font-size: var(--pf-global--FontSize--lg);
-    }
-  }
+  gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
 }

package/components/ExpandableSection/expandable-section.css

@@ -126,8 +126,4 @@
   padding-bottom: var(--pf-c-expandable-section__content--PaddingBottom);
   padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
   margin-top: var(--pf-c-expandable-section__content--MarginTop);
-}
-
-.pf-m-overpass-font .pf-c-expandable-section__toggle {
-  font-weight: var(--pf-global--FontWeight--semi-bold);
 }

package/components/ExpandableSection/expandable-section.scss

@@ -161,10 +161,3 @@
   padding-left: var(--pf-c-expandable-section__content--PaddingLeft);
   margin-top: var(--pf-c-expandable-section__content--MarginTop);
 }
-
-// RedHat Font overrides
-@include pf-m-overpass-font {
-  .pf-c-expandable-section__toggle {
-    font-weight: var(--pf-global--FontWeight--semi-bold);
-  }
-}

package/components/Form/form.css

@@ -369,7 +369,6 @@
 }
 .pf-c-form__helper-text.pf-m-inactive {
   display: none;
-  visibility: hidden;
 }
 .pf-c-form__helper-text.pf-m-hidden {
   visibility: hidden;

package/components/Form/form.scss

@@ -365,7 +365,6 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
 
   &.pf-m-inactive {
     display: none;
-    visibility: hidden;
   }
 
   &.pf-m-hidden {

package/components/InlineEdit/inline-edit.css

@@ -4,7 +4,7 @@
   --pf-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-global--link--Color--hover);
   --pf-c-inline-edit__action--m-icon-group--item--MarginRight: 0;
   --pf-c-inline-edit__group--m-footer--MarginTop: var(--pf-global--spacer--xl);
-  --pf-c-inline-edit__label--m-bold--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-inline-edit__label--m-bold--FontWeight: var(--pf-global--FontWeight--bold);
 }
 
 .pf-c-inline-edit__group {
@@ -43,22 +43,12 @@
 .pf-c-inline-edit__action,
 .pf-c-inline-edit__group.pf-m-action-group {
   display: none;
-  visibility: hidden;
 }
 
 .pf-c-inline-edit__action.pf-m-enable-editable {
   display: inline-block;
-  visibility: visible;
 }
 
-.pf-c-inline-edit.pf-m-inline-editable .pf-c-inline-edit__input,
-.pf-c-inline-edit.pf-m-inline-editable .pf-c-inline-edit__action,
-.pf-c-inline-edit.pf-m-inline-editable .pf-c-inline-edit__group.pf-m-action-group,
-.pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__input,
-.pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__action,
-.pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__group.pf-m-action-group {
-  visibility: visible;
-}
 .pf-c-inline-edit.pf-m-inline-editable .pf-c-inline-edit__input,
 .pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__input {
   display: block;
@@ -76,7 +66,6 @@
 .pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__value,
 .pf-c-inline-edit .pf-m-inline-editable .pf-c-inline-edit__action.pf-m-enable-editable {
   display: none;
-  visibility: hidden;
 }
 
 .pf-c-inline-edit__label + .pf-c-inline-edit__action.pf-m-enable > .pf-c-button {

package/components/InlineEdit/inline-edit.scss

@@ -13,7 +13,7 @@
   --pf-c-inline-edit__group--m-footer--MarginTop: var(--pf-global--spacer--xl);
 
   // Label
-  --pf-c-inline-edit__label--m-bold--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-inline-edit__label--m-bold--FontWeight: var(--pf-global--FontWeight--bold);
 }
 
 // Group
@@ -65,25 +65,17 @@
 .pf-c-inline-edit__action,
 .pf-c-inline-edit__group.pf-m-action-group {
   display: none;
-  visibility: hidden;
 }
 
 // Enable groups
 .pf-c-inline-edit__action.pf-m-enable-editable {
   display: inline-block;
-  visibility: visible;
 }
 
 // Editable
 .pf-c-inline-edit.pf-m-inline-editable,
 .pf-c-inline-edit .pf-m-inline-editable {
   // Expose inputs, input groups, actions and action groups
-  .pf-c-inline-edit__input,
-  .pf-c-inline-edit__action,
-  .pf-c-inline-edit__group.pf-m-action-group {
-    visibility: visible;
-  }
-
   // Input
   .pf-c-inline-edit__input {
     display: block;
@@ -103,7 +95,6 @@
   .pf-c-inline-edit__value,
   .pf-c-inline-edit__action.pf-m-enable-editable {
     display: none;
-    visibility: hidden;
   }
 }
 

package/components/JumpLinks/jump-links.css

@@ -1,6 +1,5 @@
 .pf-c-jump-links {
   --pf-c-jump-links__list--Display: flex;
-  --pf-c-jump-links__list--Visibility: visible;
   --pf-c-jump-links__list--PaddingTop: 0;
   --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-jump-links__list--PaddingBottom: 0;
@@ -43,14 +42,12 @@
   --pf-c-jump-links__item--m-current__link-text--Color: var(--pf-global--Color--100);
   --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
   --pf-c-jump-links__label--Display: block;
-  --pf-c-jump-links__label--Visibility: visible;
   --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
   --pf-c-jump-links__toggle--MarginBottom--base: calc(-1 * var(--pf-global--spacer--form-element));
   --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links__toggle--MarginBottom--base);
   --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
   --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
   --pf-c-jump-links__toggle--Display: none;
-  --pf-c-jump-links__toggle--Visibility: hidden;
   --pf-c-jump-links__toggle-icon--Color: currentcolor;
   --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-jump-links__toggle-icon--Rotate: 0;
@@ -80,113 +77,76 @@
 }
 .pf-c-jump-links.pf-m-expandable {
   --pf-c-jump-links__list--Display: none;
-  --pf-c-jump-links__list--Visibility: hidden;
   --pf-c-jump-links__toggle--Display: block;
-  --pf-c-jump-links__toggle--Visibility: visible;
   --pf-c-jump-links__label--Display: none;
-  --pf-c-jump-links__label--Visibility: hidden;
 }
 .pf-c-jump-links.pf-m-non-expandable {
   --pf-c-jump-links__list--Display: flex;
-  --pf-c-jump-links__list--Visibility: visible;
   --pf-c-jump-links__toggle--Display: none;
-  --pf-c-jump-links__toggle--Visibility: hidden;
   --pf-c-jump-links__label--Display: block;
-  --pf-c-jump-links__label--Visibility: visible;
 }
 @media (min-width: 576px) {
   .pf-c-jump-links.pf-m-expandable-on-sm {
     --pf-c-jump-links__list--Display: none;
-    --pf-c-jump-links__list--Visibility: hidden;
     --pf-c-jump-links__toggle--Display: block;
-    --pf-c-jump-links__toggle--Visibility: visible;
     --pf-c-jump-links__label--Display: none;
-    --pf-c-jump-links__label--Visibility: hidden;
   }
   .pf-c-jump-links.pf-m-non-expandable-on-sm {
     --pf-c-jump-links__list--Display: flex;
-    --pf-c-jump-links__list--Visibility: visible;
     --pf-c-jump-links__toggle--Display: none;
-    --pf-c-jump-links__toggle--Visibility: hidden;
     --pf-c-jump-links__label--Display: block;
-    --pf-c-jump-links__label--Visibility: visible;
   }
 }
 @media (min-width: 768px) {
   .pf-c-jump-links.pf-m-expandable-on-md {
     --pf-c-jump-links__list--Display: none;
-    --pf-c-jump-links__list--Visibility: hidden;
     --pf-c-jump-links__toggle--Display: block;
-    --pf-c-jump-links__toggle--Visibility: visible;
     --pf-c-jump-links__label--Display: none;
-    --pf-c-jump-links__label--Visibility: hidden;
   }
   .pf-c-jump-links.pf-m-non-expandable-on-md {
     --pf-c-jump-links__list--Display: flex;
-    --pf-c-jump-links__list--Visibility: visible;
     --pf-c-jump-links__toggle--Display: none;
-    --pf-c-jump-links__toggle--Visibility: hidden;
     --pf-c-jump-links__label--Display: block;
-    --pf-c-jump-links__label--Visibility: visible;
   }
 }
 @media (min-width: 992px) {
   .pf-c-jump-links.pf-m-expandable-on-lg {
     --pf-c-jump-links__list--Display: none;
-    --pf-c-jump-links__list--Visibility: hidden;
     --pf-c-jump-links__toggle--Display: block;
-    --pf-c-jump-links__toggle--Visibility: visible;
     --pf-c-jump-links__label--Display: none;
-    --pf-c-jump-links__label--Visibility: hidden;
   }
   .pf-c-jump-links.pf-m-non-expandable-on-lg {
     --pf-c-jump-links__list--Display: flex;
-    --pf-c-jump-links__list--Visibility: visible;
     --pf-c-jump-links__toggle--Display: none;
-    --pf-c-jump-links__toggle--Visibility: hidden;
     --pf-c-jump-links__label--Display: block;
-    --pf-c-jump-links__label--Visibility: visible;
   }
 }
 @media (min-width: 1200px) {
   .pf-c-jump-links.pf-m-expandable-on-xl {
     --pf-c-jump-links__list--Display: none;
-    --pf-c-jump-links__list--Visibility: hidden;
     --pf-c-jump-links__toggle--Display: block;
-    --pf-c-jump-links__toggle--Visibility: visible;
     --pf-c-jump-links__label--Display: none;
-    --pf-c-jump-links__label--Visibility: hidden;
   }
   .pf-c-jump-links.pf-m-non-expandable-on-xl {
     --pf-c-jump-links__list--Display: flex;
-    --pf-c-jump-links__list--Visibility: visible;
     --pf-c-jump-links__toggle--Display: none;
-    --pf-c-jump-links__toggle--Visibility: hidden;
     --pf-c-jump-links__label--Display: block;
-    --pf-c-jump-links__label--Visibility: visible;
   }
 }
 @media (min-width: 1450px) {
   .pf-c-jump-links.pf-m-expandable-on-2xl {
     --pf-c-jump-links__list--Display: none;
-    --pf-c-jump-links__list--Visibility: hidden;
     --pf-c-jump-links__toggle--Display: block;
-    --pf-c-jump-links__toggle--Visibility: visible;
     --pf-c-jump-links__label--Display: none;
-    --pf-c-jump-links__label--Visibility: hidden;
   }
   .pf-c-jump-links.pf-m-non-expandable-on-2xl {
     --pf-c-jump-links__list--Display: flex;
-    --pf-c-jump-links__list--Visibility: visible;
     --pf-c-jump-links__toggle--Display: none;
-    --pf-c-jump-links__toggle--Visibility: hidden;
     --pf-c-jump-links__label--Display: block;
-    --pf-c-jump-links__label--Visibility: visible;
   }
 }
 .pf-c-jump-links.pf-m-expanded {
   --pf-c-jump-links__list--Display: flex;
-  --pf-c-jump-links__list--Visibility: visible;
   --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
   --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
   --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
@@ -200,7 +160,6 @@
   padding-right: var(--pf-c-jump-links__list--PaddingRight);
   padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
   padding-left: var(--pf-c-jump-links__list--PaddingLeft);
-  visibility: var(--pf-c-jump-links__list--Visibility);
 }
 .pf-c-jump-links__list::before {
   position: absolute;
@@ -269,7 +228,6 @@
 .pf-c-jump-links__label {
   display: var(--pf-c-jump-links__label--Display);
   margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
-  visibility: var(--pf-c-jump-links__label--Visibility);
 }
 
 .pf-c-jump-links__main {
@@ -282,7 +240,6 @@
   margin-top: var(--pf-c-jump-links__toggle--MarginTop);
   margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
   margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
-  visibility: var(--pf-c-jump-links__toggle--Visibility);
 }
 .pf-c-jump-links__toggle .pf-c-button {
   display: flex;

package/components/JumpLinks/jump-links.scss

@@ -3,7 +3,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
 .pf-c-jump-links {
   // list
   --pf-c-jump-links__list--Display: flex;
-  --pf-c-jump-links__list--Visibility: visible;
   --pf-c-jump-links__list--PaddingTop: 0;
   --pf-c-jump-links__list--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-jump-links__list--PaddingBottom: 0;
@@ -54,7 +53,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
   // label
   --pf-c-jump-links__label--MarginBottom: var(--pf-global--spacer--md);
   --pf-c-jump-links__label--Display: block;
-  --pf-c-jump-links__label--Visibility: visible;
 
   // toggle
   --pf-c-jump-links__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element));
@@ -63,7 +61,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
   --pf-c-jump-links--m-expanded__toggle--MarginBottom: calc(var(--pf-c-jump-links__toggle--MarginBottom--base) + var(--pf-global--spacer--md));
   --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
   --pf-c-jump-links__toggle--Display: none;
-  --pf-c-jump-links__toggle--Visibility: hidden;
 
   // toggle icon
   --pf-c-jump-links__toggle-icon--Color: currentcolor;
@@ -107,27 +104,20 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
     @include pf-apply-breakpoint($breakpoint) {
       &.pf-m-expandable#{$breakpoint-name} {
         --pf-c-jump-links__list--Display: none;
-        --pf-c-jump-links__list--Visibility: hidden;
         --pf-c-jump-links__toggle--Display: block;
-        --pf-c-jump-links__toggle--Visibility: visible;
         --pf-c-jump-links__label--Display: none;
-        --pf-c-jump-links__label--Visibility: hidden;
       }
 
       &.pf-m-non-expandable#{$breakpoint-name} {
         --pf-c-jump-links__list--Display: flex;
-        --pf-c-jump-links__list--Visibility: visible;
         --pf-c-jump-links__toggle--Display: none;
-        --pf-c-jump-links__toggle--Visibility: hidden;
         --pf-c-jump-links__label--Display: block;
-        --pf-c-jump-links__label--Visibility: visible;
       }
     }
   }
 
   &.pf-m-expanded {
     --pf-c-jump-links__list--Display: flex;
-    --pf-c-jump-links__list--Visibility: visible;
     --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom);
     --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate);
     --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color);
@@ -142,7 +132,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
   padding-right: var(--pf-c-jump-links__list--PaddingRight);
   padding-bottom: var(--pf-c-jump-links__list--PaddingBottom);
   padding-left: var(--pf-c-jump-links__list--PaddingLeft);
-  visibility: var(--pf-c-jump-links__list--Visibility);
 
   &::before {
     position: absolute;
@@ -220,7 +209,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
 .pf-c-jump-links__label {
   display: var(--pf-c-jump-links__label--Display);
   margin-bottom: var(--pf-c-jump-links__label--MarginBottom);
-  visibility: var(--pf-c-jump-links__label--Visibility);
 }
 
 .pf-c-jump-links__main {
@@ -233,7 +221,6 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
   margin-top: var(--pf-c-jump-links__toggle--MarginTop);
   margin-bottom: var(--pf-c-jump-links__toggle--MarginBottom);
   margin-left: var(--pf-c-jump-links__toggle--MarginLeft);
-  visibility: var(--pf-c-jump-links__toggle--Visibility);
 
   .pf-c-button {
     display: flex;

package/components/Label/label.css

@@ -311,9 +311,6 @@
   --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
 }
-.pf-c-label.pf-m-editable-active .pf-c-button {
-  visibility: hidden;
-}
 .pf-c-label .pf-c-button {
   --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
   --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);

package/components/Label/label.scss

@@ -372,10 +372,6 @@
     --pf-c-label--m-editable--Cursor: var(--pf-c-label--m-editable--m-editable-active--Cursor);
     --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
     --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
-
-    .pf-c-button {
-      visibility: hidden; // use visibility hidden to retain positioning
-    }
   }
 
   .pf-c-button {