@patternfly/patternfly 5.0.0-alpha.1 → 5.0.0-alpha.11

package/RELEASE-NOTES.md

@@ -3,6 +3,36 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.16 release notes (2022-12-09)
+Packages released:
+- [@patternfly/patternfly@v4.222.4](https://www.npmjs.com/package/@patternfly/patternfly/v/4.222.4)
+
+### Components
+- **Dropdown:** Added loading state for split button checkbox ([#5269](https://github.com/patternfly/patternfly/pull/5269))
+- **Form control:** Fixed select dark theme icon ([#5242](https://github.com/patternfly/patternfly/pull/5242))
+- **Menu:** Prevented hidden drilldown items from being focusable ([#5271](https://github.com/patternfly/patternfly/pull/5271))
+- **Slider:** Updated value input styling ([#5249](https://github.com/patternfly/patternfly/pull/5249))
+- **Tabs:**
+  - Updated nested demo heading levels ([#5246](https://github.com/patternfly/patternfly/pull/5246))
+  - Removed pagination from demo, exposed tags ([#5259](https://github.com/patternfly/patternfly/pull/5259))
+
+### Other
+- **Workspace:**
+  - Cleaned up demos, added path as way to include partials ([#5135](https://github.com/patternfly/patternfly/pull/5135))
+  - Removed test code from #5135 ([#5255](https://github.com/patternfly/patternfly/pull/5255))
+
+
+## 2022.15 release notes (2022-11-18)
+Packages released:
+- [@patternfly/patternfly@v4.221.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.221.2)
+
+### Components
+- **Pagination:** Added support for insets ([#5207](https://github.com/patternfly/patternfly/pull/5207))
+- **Tabs:** Added help popover, refactored tab action ([#5213](https://github.com/patternfly/patternfly/pull/5213))
+
+### Other
+- **Icons:** Added data-sink and data-source ([#5228](https://github.com/patternfly/patternfly/pull/5228))
+
 ## 2022.14 release notes (2022-10-28)
 Packages released:
 - [@patternfly/patternfly@v4.219.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.219.2)

package/base/_common.scss

@@ -1,26 +1,4 @@
 // Set common reset styles for patternfly components
-// remove in breaking change. this should come from globals, and can be opted out
-[class*="pf-c-"] {
-  &,
-  &::before,
-  &::after {
-    padding: 0;
-    margin: 0;
-    background-color: transparent;
-  }
-}
-
-// remove in breaking change
-@if $pf-global--unset-root-font-size {
-  // Since PF3 sets root font size to 10px, we need to unset it.
-  // This doesn't affect PF3.
-  // https://github.com/twbs/bootstrap/blob/v3.4.0/less/scaffolding.less#L23
-  // stylelint-disable
-  html {
-    font-size: var(--pf-global--root--FontSize, unset) !important; // the important is needed because we don't know if pf3 will be loaded after pfnext
-  }
-  // stylelint-enable
-}
 
 .pf-screen-reader {
   @include pf-u-screen-reader; // for use with assistive technologies

package/base/patternfly-common.css

@@ -1,13 +1,3 @@
-[class*=pf-c-], [class*=pf-c-]::before, [class*=pf-c-]::after {
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-}
-
-html {
-  font-size: var(--pf-global--root--FontSize, unset) !important;
-}
-
 .pf-screen-reader {
   position: fixed;
   top: 0;

package/components/Card/card.css

@@ -13,7 +13,9 @@
   --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-card__header-toggle--MarginRight: var(--pf-global--spacer--xs);
   --pf-c-card__header-toggle--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
@@ -84,7 +86,6 @@
   --pf-c-card--m-plain--BackgroundColor: transparent;
   --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;
@@ -230,13 +231,11 @@
   --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
   --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
 }
-.pf-c-card__header.pf-m-toggle-right .pf-c-card__actions {
-  --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
-}
 .pf-c-card__header.pf-m-toggle-right .pf-c-card__header-toggle {
   order: 2;
 }
-.pf-c-card__header.pf-m-toggle-right .pf-c-card__title {
+
+.pf-c-card__header-main {
   flex: 1;
 }
 
@@ -262,10 +261,8 @@
   align-self: flex-start;
   order: 1;
   padding-left: var(--pf-c-card__actions--PaddingLeft);
-  margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
-}
-.pf-c-card__actions > * + * {
-  margin-left: var(--pf-c-card__actions--child--MarginLeft);
+  margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
+  gap: var(--pf-c-card__actions--Gap);
 }
 .pf-c-card__actions + .pf-c-card__title,
 .pf-c-card__actions + .pf-c-card__body,
@@ -273,8 +270,8 @@
   padding: 0;
 }
 .pf-c-card__actions.pf-m-no-offset {
-  --pf-c-card__header-toggle--MarginTop: 0;
-  --pf-c-card__header-toggle--MarginBottom: 0;
+  --pf-c-card__actions--MarginTop: 0;
+  --pf-c-card__actions--MarginBottom: 0;
 }
 
 .pf-c-card__header,

package/components/Card/card.scss

@@ -13,7 +13,9 @@
   --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-card__actions--child--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--Gap: var(--pf-global--spacer--sm);
+  --pf-c-card__actions--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
+  --pf-c-card__actions--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
 
   // Expandable
   --pf-c-card__header-toggle--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
@@ -104,7 +106,6 @@
   // Toggle right
   --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;
 
   // Card input
   --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
@@ -295,20 +296,16 @@
     --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--toggle--MarginRight);
     --pf-c-card__header-toggle--MarginLeft: var(--pf-c-card__header--m-toggle-right--toggle--MarginLeft);
 
-    .pf-c-card__actions {
-      --pf-c-card__header-toggle--MarginRight: var(--pf-c-card__header--m-toggle-right--actions--MarginRight);
-    }
-
     .pf-c-card__header-toggle {
       order: 2;
     }
-
-    .pf-c-card__title {
-      flex: 1;
-    }
   }
 }
 
+.pf-c-card__header-main {
+  flex: 1;
+}
+
 .pf-c-card__header-toggle {
   align-self: flex-start;
   margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) var(--pf-c-card__header-toggle--MarginLeft);
@@ -331,11 +328,8 @@
   align-self: flex-start;
   order: 1;
   padding-left: var(--pf-c-card__actions--PaddingLeft);
-  margin: var(--pf-c-card__header-toggle--MarginTop) var(--pf-c-card__header-toggle--MarginRight) var(--pf-c-card__header-toggle--MarginBottom) auto;
-
-  > * + * {
-    margin-left: var(--pf-c-card__actions--child--MarginLeft);
-  }
+  margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
+  gap: var(--pf-c-card__actions--Gap);
 
   + .pf-c-card__title,
   + .pf-c-card__body,
@@ -344,8 +338,8 @@
   }
 
   &.pf-m-no-offset {
-    --pf-c-card__header-toggle--MarginTop: 0;
-    --pf-c-card__header-toggle--MarginBottom: 0;
+    --pf-c-card__actions--MarginTop: 0;
+    --pf-c-card__actions--MarginBottom: 0;
   }
 }
 

package/components/ChipGroup/chip-group.css

@@ -10,28 +10,39 @@
 
 .pf-c-chip-group {
   color: var(--pf-global--Color--100);
-  --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-chip-group--PaddingTop: 0;
+  --pf-c-chip-group--PaddingRight: 0;
+  --pf-c-chip-group--PaddingBottom: 0;
+  --pf-c-chip-group--PaddingLeft: 0;
+  --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group--ColumnGap: 0;
+  --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-chip-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm);
   --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-chip-group__label--MaxWidth: 18ch;
   --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
   max-width: 100%;
+  padding-top: var(--pf-c-chip-group--PaddingTop);
+  padding-right: var(--pf-c-chip-group--PaddingRight);
+  padding-bottom: var(--pf-c-chip-group--PaddingBottom);
+  padding-left: var(--pf-c-chip-group--PaddingLeft);
+  row-gap: var(--pf-c-chip-group--RowGap);
+  column-gap: var(--pf-c-chip-group--ColumnGap);
 }
 .pf-c-chip-group.pf-m-category {
-  padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
-  padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
-  padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
-  padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
+  --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
+  --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
+  --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
+  --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
   background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
   border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
 }
@@ -42,11 +53,8 @@
   flex-wrap: wrap;
   align-items: baseline;
   min-width: 0;
-}
-
-.pf-c-chip-group__list {
-  margin-right: var(--pf-c-chip-group__list--MarginRight);
-  margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
+  row-gap: var(--pf-c-chip-group__main--RowGap);
+  column-gap: var(--pf-c-chip-group__main--ColumnGap);
 }
 
 .pf-c-chip-group,
@@ -57,11 +65,14 @@
   min-width: 0;
 }
 
+.pf-c-chip-group__list {
+  row-gap: var(--pf-c-chip-group__list--RowGap);
+  column-gap: var(--pf-c-chip-group__list--ColumnGap);
+}
+
 .pf-c-chip-group__list-item {
   display: inline-flex;
   min-width: 0;
-  margin-right: var(--pf-c-chip-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
 }
 
 .pf-c-chip-group__label {
@@ -69,7 +80,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: var(--pf-c-chip-group__label--MaxWidth);
-  margin-right: var(--pf-c-chip-group__label--MarginRight);
   font-size: var(--pf-c-chip-group__label--FontSize);
 }
 

package/components/ChipGroup/chip-group.scss

@@ -1,11 +1,24 @@
 .pf-c-chip-group {
   @include pf-t-light; // force the container follow the light theme
 
-  // Chip group list
-  --pf-c-chip-group__list--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__list--MarginRight: calc(var(--pf-global--spacer--xs) * -1);
+  // Chip group - spaces main and close
+  // column-gap spacer supports legacy chip group
+  --pf-c-chip-group--PaddingTop: 0;
+  --pf-c-chip-group--PaddingRight: 0;
+  --pf-c-chip-group--PaddingBottom: 0;
+  --pf-c-chip-group--PaddingLeft: 0;
+  --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group--ColumnGap: 0;
 
-  // Category
+  // Chip group main - spaces the category label and list
+  --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
+
+  // Chip group list - spaces the chips
+  --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
+  --pf-c-chip-group__list--ColumnGap: var(--pf-global--spacer--xs);
+
+  // Category modifier
   --pf-c-chip-group--m-category--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-chip-group--m-category--PaddingBottom: var(--pf-global--spacer--xs);
@@ -14,25 +27,27 @@
   --pf-c-chip-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200);
 
   // Label in group
-  --pf-c-chip-group__label--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-chip-group__label--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-chip-group__label--MaxWidth: 18ch;
 
-  // Chip group close
+  // Chip group close - negative margin stretches height for click area
   --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
 
-  // Chip
-  --pf-c-chip-group__list-item--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-chip-group__list-item--MarginBottom: var(--pf-global--spacer--xs);
-
   max-width: 100%;
+  padding-top: var(--pf-c-chip-group--PaddingTop);
+  padding-right: var(--pf-c-chip-group--PaddingRight);
+  padding-bottom: var(--pf-c-chip-group--PaddingBottom);
+  padding-left: var(--pf-c-chip-group--PaddingLeft);
+  row-gap: var(--pf-c-chip-group--RowGap);
+  column-gap: var(--pf-c-chip-group--ColumnGap);
 
   &.pf-m-category {
-    padding-top: var(--pf-c-chip-group--m-category--PaddingTop);
-    padding-right: var(--pf-c-chip-group--m-category--PaddingRight);
-    padding-bottom: var(--pf-c-chip-group--m-category--PaddingBottom);
-    padding-left: var(--pf-c-chip-group--m-category--PaddingLeft);
+    --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
+    --pf-c-chip-group--PaddingRight: var(--pf-c-chip-group--m-category--PaddingRight);
+    --pf-c-chip-group--PaddingBottom: var(--pf-c-chip-group--m-category--PaddingBottom);
+    --pf-c-chip-group--PaddingLeft: var(--pf-c-chip-group--m-category--PaddingLeft);
+
     background-color: var(--pf-c-chip-group--m-category--BackgroundColor);
     border-radius: var(--pf-c-chip-group--m-category--BorderRadius);
   }
@@ -44,11 +59,8 @@
   flex-wrap: wrap;
   align-items: baseline;
   min-width: 0;
-}
-
-.pf-c-chip-group__list {
-  margin-right: var(--pf-c-chip-group__list--MarginRight);
-  margin-bottom: var(--pf-c-chip-group__list--MarginBottom);
+  row-gap: var(--pf-c-chip-group__main--RowGap);
+  column-gap: var(--pf-c-chip-group__main--ColumnGap);
 }
 
 .pf-c-chip-group,
@@ -59,18 +71,20 @@
   min-width: 0;
 }
 
+.pf-c-chip-group__list {
+  row-gap: var(--pf-c-chip-group__list--RowGap);
+  column-gap: var(--pf-c-chip-group__list--ColumnGap);
+}
+
 .pf-c-chip-group__list-item {
   display: inline-flex;
   min-width: 0;
-  margin-right: var(--pf-c-chip-group__list-item--MarginRight);
-  margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
 }
 
 .pf-c-chip-group__label {
   @include pf-text-overflow;
 
   max-width: var(--pf-c-chip-group__label--MaxWidth);
-  margin-right: var(--pf-c-chip-group__label--MarginRight);
   font-size: var(--pf-c-chip-group__label--FontSize);
 }
 

package/components/Drawer/drawer.css

@@ -281,7 +281,6 @@
 }
 
 .pf-c-drawer__body {
-  min-height: 0;
   padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft);
 }
 .pf-c-drawer__body.pf-m-no-padding {

package/components/Drawer/drawer.scss

@@ -345,7 +345,6 @@ $pf-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
 // Modified content children
 .pf-c-drawer__body {
-  min-height: 0;
   padding: var(--pf-c-drawer--child--PaddingTop) var(--pf-c-drawer--child--PaddingRight) var(--pf-c-drawer--child--PaddingBottom) var(--pf-c-drawer--child--PaddingLeft);
 
   // No padding

package/components/Dropdown/dropdown.css

@@ -50,6 +50,8 @@
   --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
+  --pf-c-dropdown__toggle-progress--Visibility: hidden;
+  --pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingBottom: var(--pf-global--spacer--form-element);
@@ -261,9 +263,14 @@
   align-items: center;
   cursor: pointer;
 }
+.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check.pf-m-in-progress {
+  --pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility: hidden;
+  --pf-c-dropdown__toggle-progress--Visibility: visible;
+}
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check > input,
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check .pf-c-check {
   cursor: pointer;
+  visibility: var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
   transform: translateY(var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
 }
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button {
@@ -459,6 +466,14 @@
   --pf-c-dropdown__toggle-image--MarginRight: 0;
 }
 
+.pf-c-dropdown__toggle-progress {
+  position: absolute;
+  visibility: var(--pf-c-dropdown__toggle-progress--Visibility);
+}
+.pf-c-dropdown__toggle-progress .pf-c-spinner {
+  --pf-c-spinner--diameter: var(--pf-c-dropdown__toggle-progress--c-spinner--diameter);
+}
+
 .pf-c-dropdown__menu {
   position: absolute;
   top: var(--pf-c-dropdown__menu--Top);

package/components/Dropdown/dropdown.scss

@@ -62,6 +62,10 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   // toggle button
   --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
 
+  // toggle progress
+  --pf-c-dropdown__toggle-progress--Visibility: hidden;
+  --pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm); // should match the checkbox input size
+
   // split buttons
   --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingRight: var(--pf-global--spacer--xs);
@@ -341,9 +345,15 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
       align-items: center;
       cursor: pointer;
 
+      &.pf-m-in-progress {
+        --pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility: hidden;
+        --pf-c-dropdown__toggle-progress--Visibility: visible;
+      }
+
       > input,
       .pf-c-check {
         cursor: pointer;
+        visibility: var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
         transform: translateY(var(--pf-c-dropdown__toggle--m-split-button__toggle-check__input--TranslateY));
       }
     }
@@ -624,6 +634,16 @@ $pf-c-dropdown--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "
   }
 }
 
+// Loading spinner
+.pf-c-dropdown__toggle-progress {
+  position: absolute;
+  visibility: var(--pf-c-dropdown__toggle-progress--Visibility);
+
+  .pf-c-spinner {
+    --pf-c-spinner--diameter: var(--pf-c-dropdown__toggle-progress--c-spinner--diameter);
+  }
+}
+
 .pf-c-dropdown__menu {
   position: absolute;
   top: var(--pf-c-dropdown__menu--Top);

package/components/EmptyState/empty-state.css

@@ -3,38 +3,39 @@
   --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);
   --pf-c-empty-state__content--MaxWidth: none;
+  --pf-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
+  --pf-c-empty-state--m-sm__content--MaxWidth: 25rem;
+  --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
   --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: 6.25rem;
+  --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);
   --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: 21.875rem;
+  --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: 25rem;
-  --pf-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
   --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: 6.25rem;
-  --pf-c-empty-state--m-xl--c-button__secondary--MarginTop: var(--pf-global--spacer--md);
+  --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);
+  --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;
   justify-content: center;
@@ -46,17 +47,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.pf-m-xs .pf-c-empty-state__body {
-  font-size: var(--pf-c-empty-state--m-xs__body--FontSize);
-}
-.pf-c-empty-state.pf-m-xs .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-c-empty-state.pf-m-sm {
   --pf-c-empty-state__content--MaxWidth: var(--pf-c-empty-state--m-sm__content--MaxWidth);
@@ -66,12 +62,11 @@
 }
 .pf-c-empty-state.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.pf-m-xl .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-c-empty-state.pf-m-full-height {
   height: 100%;
@@ -80,39 +75,38 @@
 .pf-c-empty-state__content {
   max-width: var(--pf-c-empty-state__content--MaxWidth);
 }
-.pf-c-empty-state__content > .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);
 }
 
-.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__content > .pf-c-button.pf-m-primary + .pf-c-empty-state__secondary,
-.pf-c-empty-state__primary + .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);
-}
-.pf-c-empty-state__secondary > * {
-  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);
+  gap: var(--pf-c-empty-state__actions--RowGap) var(--pf-c-empty-state__actions--ColumnGap);
 }