@patternfly/react-styles 5.0.0-alpha.1 → 5.0.0-alpha.3

package/CHANGELOG.md

@@ -3,7 +3,65 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [5.0.0-alpha.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@4.91.6...@patternfly/react-styles@5.0.0-alpha.1) (2023-01-10)
+# 5.0.0-alpha.3 (2023-02-15)
+
+### Bug Fixes
+
+- **deps:** updated to the latest core alpha ([#8688](https://github.com/patternfly/patternfly-react/issues/8688)) ([5f81928](https://github.com/patternfly/patternfly-react/commit/5f819288d7baaa3806b23c0da8fb26dd4ec12d6b))
+
+# 5.0.0-alpha.2 (2023-02-08)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## 4.92.6 (2023-01-23)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## 4.92.5 (2023-01-19)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## 4.92.4 (2023-01-18)
+
+### Bug Fixes
+
+- **Tabs:** Removed isHelpAction prop from TabsAction ([#8560](https://github.com/patternfly/patternfly-react/issues/8560)) ([05fa1b0](https://github.com/patternfly/patternfly-react/commit/05fa1b0acfe886f09c5bdf4ad9f8e27878ee817e))
+
+## 4.92.3 (2022-12-08)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## 4.92.2 (2022-12-07)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## 4.92.1 (2022-12-01)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# 4.92.0 (2022-11-16)
+
+### Features
+
+- **Tabs:** add TabAction, update core ver ([#8348](https://github.com/patternfly/patternfly-react/issues/8348)) ([8c584b4](https://github.com/patternfly/patternfly-react/commit/8c584b48f8e545cf226f785b873ee11eda505724))
+
+## 4.91.10 (2022-10-27)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## 4.91.9 (2022-10-26)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## [4.91.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@4.91.7...@patternfly/react-styles@4.91.8) (2022-10-17)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## 4.91.7 (2022-10-14)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+## 4.91.6 (2022-10-05)
 
 ### Bug Fixes
 

package/css/components/Accordion/accordion.css

@@ -23,6 +23,7 @@
   --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
   --pf-c-accordion__toggle--after--Width: var(--pf-global--BorderWidth--lg);
   --pf-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-accordion__toggle--BackgroundColor: transparent;
   --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
   --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
   --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
@@ -137,6 +138,7 @@
   padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
   font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
   font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
+  background-color: var(--pf-c-accordion__toggle--BackgroundColor);
   border: 0;
 }
 .pf-c-accordion__toggle::after {

package/css/components/AppLauncher/app-launcher.css

@@ -17,6 +17,7 @@
   --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
   --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
+  --pf-c-app-launcher__toggle--BackgroundColor: transparent;
   --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
@@ -79,6 +80,7 @@
 .pf-c-app-launcher__toggle {
   padding: var(--pf-c-app-launcher__toggle--PaddingTop) var(--pf-c-app-launcher__toggle--PaddingRight) var(--pf-c-app-launcher__toggle--PaddingBottom) var(--pf-c-app-launcher__toggle--PaddingLeft);
   color: var(--pf-c-app-launcher__toggle--Color);
+  background-color: var(--pf-c-app-launcher__toggle--BackgroundColor);
   border: none;
 }
 .pf-c-app-launcher__toggle:hover {

package/css/components/Breadcrumb/breadcrumb.css

@@ -10,6 +10,7 @@
   --pf-c-breadcrumb__link--hover--Color: var(--pf-global--link--Color--hover);
   --pf-c-breadcrumb__link--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
   --pf-c-breadcrumb__link--m-current--Color: var(--pf-global--Color--100);
+  --pf-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-c-breadcrumb__item--MarginRight) * -1);
@@ -52,6 +53,7 @@
   color: var(--pf-c-breadcrumb__link--Color);
   text-decoration: var(--pf-c-breadcrumb__link--TextDecoration);
   word-break: break-word;
+  background-color: var(--pf-c-breadcrumb__link--BackgroundColor);
 }
 .pf-c-breadcrumb__link:hover {
   --pf-c-breadcrumb__link--Color: var(--pf-c-breadcrumb__link--hover--Color);

package/css/components/CalendarMonth/calendar-month.css

@@ -16,7 +16,7 @@
   --pf-c-calendar-month--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-calendar-month--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-calendar-month__header--MarginBottom: var(--pf-global--spacer--md);
-  --pf-c-calendar-month__header-year--Width: 8ch;
+  --pf-c-calendar-month__header-year--Width: 8.5ch;
   --pf-c-calendar-month__header-nav-control--MarginRight: 0;
   --pf-c-calendar-month__header-nav-control--MarginLeft: 0;
   --pf-c-calendar-month__header-nav-control--m-prev-month--MarginRight: 0;

package/css/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/css/components/Card/card.d.ts

@@ -6,6 +6,7 @@ declare const _default: {
   "cardExpandableContent": "pf-c-card__expandable-content",
   "cardFooter": "pf-c-card__footer",
   "cardHeader": "pf-c-card__header",
+  "cardHeaderMain": "pf-c-card__header-main",
   "cardHeaderToggle": "pf-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
   "cardSrInput": "pf-c-card__sr-input",

package/css/components/Card/card.js

@@ -8,6 +8,7 @@ exports.default = {
   "cardExpandableContent": "pf-c-card__expandable-content",
   "cardFooter": "pf-c-card__footer",
   "cardHeader": "pf-c-card__header",
+  "cardHeaderMain": "pf-c-card__header-main",
   "cardHeaderToggle": "pf-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
   "cardSrInput": "pf-c-card__sr-input",

package/css/components/Card/card.mjs

@@ -6,6 +6,7 @@ export default {
   "cardExpandableContent": "pf-c-card__expandable-content",
   "cardFooter": "pf-c-card__footer",
   "cardHeader": "pf-c-card__header",
+  "cardHeaderMain": "pf-c-card__header-main",
   "cardHeaderToggle": "pf-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
   "cardSrInput": "pf-c-card__sr-input",

package/css/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/css/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/css/components/Content/content.d.ts

@@ -2,7 +2,8 @@ import './content.css';
 declare const _default: {
   "content": "pf-c-content",
   "modifiers": {
-    "visited": "pf-m-visited"
+    "visited": "pf-m-visited",
+    "plain": "pf-m-plain"
   }
 };
 export default _default;

package/css/components/Content/content.js

@@ -4,6 +4,7 @@ require('./content.css');
 exports.default = {
   "content": "pf-c-content",
   "modifiers": {
-    "visited": "pf-m-visited"
+    "visited": "pf-m-visited",
+    "plain": "pf-m-plain"
   }
 };

package/css/components/Content/content.mjs

@@ -2,6 +2,7 @@ import './content.css';
 export default {
   "content": "pf-c-content",
   "modifiers": {
-    "visited": "pf-m-visited"
+    "visited": "pf-m-visited",
+    "plain": "pf-m-plain"
   }
 };

package/css/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/css/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/css/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/css/components/Dropdown/dropdown.css

@@ -50,6 +50,7 @@
   --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);
@@ -275,6 +276,7 @@
 }
 .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 {
@@ -509,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;
   }
 }