@patternfly/patternfly 5.0.0-alpha.2 → 5.0.0-alpha.21

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/Content/content.css

@@ -127,6 +127,12 @@
 .pf-c-content ul {
   margin: 0;
 }
+.pf-c-content ol.pf-m-plain,
+.pf-c-content ul.pf-m-plain {
+  padding-left: 0;
+  margin-left: 0;
+  list-style: none;
+}
 .pf-c-content h1 {
   margin-top: var(--pf-c-content--h1--MarginTop);
   margin-bottom: var(--pf-c-content--h1--MarginBottom);

package/components/Content/content.scss

@@ -159,6 +159,14 @@
   ol,
   ul {
     margin: 0;
+
+    // stylelint-disable selector-no-qualifying-type
+    &.pf-m-plain {
+      padding-left: 0;
+      margin-left: 0;
+      list-style: none;
+    }
+    // stylelint-enable
   }
 
   h1 {

package/components/ContextSelector/context-selector.css

@@ -26,6 +26,7 @@
   --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
   --pf-c-context-selector__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-context-selector__toggle--BackgroundColor: transparent;
   --pf-c-context-selector__toggle--m-plain--Color: var(--pf-global--Color--200);
   --pf-c-context-selector__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
   --pf-c-context-selector__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
@@ -64,6 +65,7 @@
   --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-context-selector__menu-list-item--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-context-selector__menu-list-item--BackgroundColor: transparent;
   --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
   --pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);
   --pf-c-context-selector__menu-item-icon--Color: var(--pf-global--active-color--100);
@@ -175,6 +177,7 @@
   color: var(--pf-c-context-selector__toggle--Color);
   white-space: nowrap;
   cursor: pointer;
+  background-color: var(--pf-c-context-selector__toggle--BackgroundColor);
   border: none;
 }
 .pf-c-context-selector__toggle::before {
@@ -283,11 +286,12 @@
   padding: var(--pf-c-context-selector__menu-list-item--PaddingTop) var(--pf-c-context-selector__menu-list-item--PaddingRight) var(--pf-c-context-selector__menu-list-item--PaddingBottom) var(--pf-c-context-selector__menu-list-item--PaddingLeft);
   color: var(--pf-c-context-selector__menu-list-item--Color);
   white-space: nowrap;
+  background-color: var(--pf-c-context-selector__menu-list-item--BackgroundColor);
   border: none;
 }
 .pf-c-context-selector__menu-list-item:hover, .pf-c-context-selector__menu-list-item:focus {
+  --pf-c-context-selector__menu-list-item--BackgroundColor: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
   text-decoration: none;
-  background-color: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
 }
 .pf-c-context-selector__menu-list-item.pf-m-disabled, .pf-c-context-selector__menu-list-item:disabled {
   --pf-c-context-selector__menu-list-item--Color: var(--pf-c-context-selector__menu-list-item--disabled--Color);

package/components/ContextSelector/context-selector.scss

@@ -19,6 +19,7 @@
   --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
   --pf-c-context-selector__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-context-selector__toggle--BackgroundColor: transparent;
   --pf-c-context-selector__toggle--m-plain--Color: var(--pf-global--Color--200);
   --pf-c-context-selector__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
   --pf-c-context-selector__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
@@ -71,6 +72,7 @@
   --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-context-selector__menu-list-item--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-context-selector__menu-list-item--BackgroundColor: transparent;
   --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
   --pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);
 
@@ -199,6 +201,7 @@
   color: var(--pf-c-context-selector__toggle--Color);
   white-space: nowrap;
   cursor: pointer;
+  background-color: var(--pf-c-context-selector__toggle--BackgroundColor);
   border: none;
 
   &::before {
@@ -335,13 +338,14 @@
   padding: var(--pf-c-context-selector__menu-list-item--PaddingTop) var(--pf-c-context-selector__menu-list-item--PaddingRight) var(--pf-c-context-selector__menu-list-item--PaddingBottom) var(--pf-c-context-selector__menu-list-item--PaddingLeft);
   color: var(--pf-c-context-selector__menu-list-item--Color);
   white-space: nowrap;
+  background-color: var(--pf-c-context-selector__menu-list-item--BackgroundColor);
   border: none;
 
-
   &:hover,
   &:focus {
+    --pf-c-context-selector__menu-list-item--BackgroundColor: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
+
     text-decoration: none;
-    background-color: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
   }
 
   &.pf-m-disabled,

package/components/DataList/data-list.css

@@ -546,6 +546,7 @@
   --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-data-list__toggle-icon--Rotate: 0;
   --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-c-data-list__item-draggable-button--BackgroundColor: transparent;
   --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
@@ -617,7 +618,6 @@
   font-size: var(--pf-c-data-list--FontSize);
   line-height: var(--pf-c-data-list--LineHeight);
   overflow-wrap: break-word;
-  list-style-type: disc;
   border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
 }
 @media screen and (min-width: 576px) {
@@ -790,6 +790,7 @@
   flex-direction: column;
   padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
   margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
+  background-color: var(--pf-c-data-list__item-draggable-button--BackgroundColor);
   border: 0;
 }
 .pf-c-data-list__item-draggable-button:hover {

package/components/DataList/data-list.scss

@@ -83,6 +83,7 @@
   --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
 
   // draggable button/icon
+  --pf-c-data-list__item-draggable-button--BackgroundColor: transparent;
   --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
@@ -167,7 +168,6 @@
   font-size: var(--pf-c-data-list--FontSize);
   line-height: var(--pf-c-data-list--LineHeight);
   overflow-wrap: break-word;
-  list-style-type: disc;
   border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
 
   &.pf-m-compact {
@@ -349,6 +349,7 @@
   flex-direction: column; // fixes safari alignment
   padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
   margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
+  background-color: var(--pf-c-data-list__item-draggable-button--BackgroundColor);
   border: 0;
 
   &:hover {

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 {
@@ -443,7 +442,7 @@
     --pf-c-drawer__splitter--after--BorderLeftWidth: 0;
   }
   .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border,
-.pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
+  .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
   .pf-c-drawer__splitter {
@@ -532,15 +531,15 @@
 }
 @media (min-width: 768px) {
   .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content,
-.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__content {
+  .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__content {
     flex-shrink: 1;
   }
   .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel,
-.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
+  .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
   .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
-.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
+  .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
   .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content {
@@ -593,15 +592,15 @@
 }
 @media (min-width: 992px) {
   .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content,
-.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
+  .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
     flex-shrink: 1;
   }
   .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel,
-.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
+  .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
   .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
-.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
+  .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
   .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
@@ -654,15 +653,15 @@
 }
 @media (min-width: 1200px) {
   .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content,
-.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
+  .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
     flex-shrink: 1;
   }
   .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel,
-.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
+  .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
   .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
-.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
+  .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
   .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
@@ -715,15 +714,15 @@
 }
 @media (min-width: 1450px) {
   .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content,
-.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
+  .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
     flex-shrink: 1;
   }
   .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel,
-.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
+  .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
   .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
-.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
+  .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
   .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {

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,9 @@
   --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-button--BackgroundColor: transparent;
+  --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,13 +264,19 @@
   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 {
   color: var(--pf-c-dropdown__toggle-button--Color);
+  background-color: var(--pf-c-dropdown__toggle-button--BackgroundColor);
   border: 0;
 }
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
@@ -459,6 +468,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);
@@ -494,51 +511,51 @@
 }
 @media (min-width: 576px) {
   .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-sm,
-.pf-c-dropdown__menu.pf-m-align-right-on-sm {
+  .pf-c-dropdown__menu.pf-m-align-right-on-sm {
     right: 0;
   }
   .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-sm,
-.pf-c-dropdown__menu.pf-m-align-left-on-sm {
+  .pf-c-dropdown__menu.pf-m-align-left-on-sm {
     right: auto;
   }
 }
 @media (min-width: 768px) {
   .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-md,
-.pf-c-dropdown__menu.pf-m-align-right-on-md {
+  .pf-c-dropdown__menu.pf-m-align-right-on-md {
     right: 0;
   }
   .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-md,
-.pf-c-dropdown__menu.pf-m-align-left-on-md {
+  .pf-c-dropdown__menu.pf-m-align-left-on-md {
     right: auto;
   }
 }
 @media (min-width: 992px) {
   .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-lg,
-.pf-c-dropdown__menu.pf-m-align-right-on-lg {
+  .pf-c-dropdown__menu.pf-m-align-right-on-lg {
     right: 0;
   }
   .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-lg,
-.pf-c-dropdown__menu.pf-m-align-left-on-lg {
+  .pf-c-dropdown__menu.pf-m-align-left-on-lg {
     right: auto;
   }
 }
 @media (min-width: 1200px) {
   .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-xl,
-.pf-c-dropdown__menu.pf-m-align-right-on-xl {
+  .pf-c-dropdown__menu.pf-m-align-right-on-xl {
     right: 0;
   }
   .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-xl,
-.pf-c-dropdown__menu.pf-m-align-left-on-xl {
+  .pf-c-dropdown__menu.pf-m-align-left-on-xl {
     right: auto;
   }
 }
 @media (min-width: 1450px) {
   .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-2xl,
-.pf-c-dropdown__menu.pf-m-align-right-on-2xl {
+  .pf-c-dropdown__menu.pf-m-align-right-on-2xl {
     right: 0;
   }
   .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-2xl,
-.pf-c-dropdown__menu.pf-m-align-left-on-2xl {
+  .pf-c-dropdown__menu.pf-m-align-left-on-2xl {
     right: auto;
   }
 }

package/components/Dropdown/dropdown.scss

@@ -61,6 +61,11 @@ $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);
+  --pf-c-dropdown__toggle-button--BackgroundColor: transparent;
+
+  // 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);
@@ -341,15 +346,22 @@ $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));
       }
     }
 
     .pf-c-dropdown__toggle-button {
       color: var(--pf-c-dropdown__toggle-button--Color);
+      background-color: var(--pf-c-dropdown__toggle-button--BackgroundColor);
       border: 0;
     }
 
@@ -624,6 +636,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);