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

package/README.md

@@ -96,7 +96,7 @@ Ignore the violations that aren’t related to your contribution.
 
 Fix violations related to your contribution.
 
-If there are violations that are not obvious how to fix, then [create an issue](https://github.com/patternfly/patternfly/issues/new) with information about the violation that was found. For example, some violations might require further discussion before they can be addressed. And some violations may not be valid and require changes to the workspace or tooling to stop flagging the violation. 
+If there are violations that are not obvious how to fix, then [create an issue](https://github.com/patternfly/patternfly/issues/new) with information about the violation that was found. For example, some violations might require further discussion before they can be addressed. And some violations may not be valid and require changes to the workspace or tooling to stop flagging the violation.
 
 If you have any suggestions about ways that we can improve how we use this tool, please let us know by opening an issue.
 

package/RELEASE-NOTES.md

@@ -3,6 +3,53 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2023.01 release notes (2023-01-25)
+Packages released:
+- [@patternfly/patternfly@v4.224.2](https://www.npmjs.com/package/@patternfly/patternfly/v/4.224.2)
+
+### Components
+- **Calendar month:** Updated year width to not truncate ([#5316](https://github.com/patternfly/patternfly/pull/5316))
+- **Card:** Removed unnecessary class from labels in demos ([#5306](https://github.com/patternfly/patternfly/pull/5306))
+- **Charts:** Removed dupe vars ([#5312](https://github.com/patternfly/patternfly/pull/5312))
+- **Content:** Added plain list variation ([#5337](https://github.com/patternfly/patternfly/pull/5337))
+- **Tabs:** Removed help action specific styling ([#5330](https://github.com/patternfly/patternfly/pull/5330))
+- **Wizard:** Fixed demo footer layout ([#5317](https://github.com/patternfly/patternfly/pull/5317))
+
+### Other
+- **Icons:** Added data-processor icon ([#5284](https://github.com/patternfly/patternfly/pull/5284))
+- **Workspace:** Cleaned up beta tags for v4 ([#5329](https://github.com/patternfly/patternfly/pull/5329))
+
+
+## 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/assets/icons/iconUnicodes.json

@@ -21,6 +21,7 @@
   "pf-icon-container-node": "E621",
   "pf-icon-cpu": "E927",
   "pf-icon-critical-risk": "E976",
+  "pf-icon-data-processor": "E97B",
   "pf-icon-data-sink": "E978",
   "pf-icon-data-source": "E979",
   "pf-icon-degraded": "E91B",

package/assets/pficon/pficon.scss

@@ -89,6 +89,9 @@
 	@if $filename == critical-risk {
 		$char: '\E976';
 	}
+	@if $filename == data-processor {
+		$char: '\E97B';
+	}
 	@if $filename == data-sink {
 		$char: '\E978';
 	}
@@ -485,6 +488,9 @@
 .pf-icon-critical-risk {
 	@include pf-icon(critical-risk);
 }
+.pf-icon-data-processor {
+	@include pf-icon(data-processor);
+}
 .pf-icon-data-sink {
 	@include pf-icon(data-sink);
 }

package/base/_chart-globals.scss

@@ -164,10 +164,6 @@ $pf-chart-bullet--comparative-measure--warning--Fill--Color: $pf-chart-global--w
 $pf-chart-bullet--comparative-measure--warning--stroke--Color: $pf-chart-global--warning--Color--100;
 $pf-chart-bullet--comparative-measure--warning--stroke--Width: $pf-chart-global--stroke--Width--sm;
 $pf-chart-bullet--comparative-measure--warning--Width: 30;
-$pf-chart-bullet--comparative-measure--Fill--Color: $pf-chart-global--Fill--Color--700;
-$pf-chart-bullet--comparative-measure--stroke--Color: $pf-chart-global--Fill--Color--700;
-$pf-chart-bullet--comparative-measure--stroke--Width: $pf-chart-global--stroke--Width--xs;
-$pf-chart-bullet--comparative-measure--Width: 30;
 $pf-chart-bullet--group-title--divider--Fill--Color: $pf-color-black-200;
 $pf-chart-bullet--group-title--divider--stroke--Color: $pf-color-black-200;
 $pf-chart-bullet--group-title--divider--stroke--Width: $pf-chart-global--stroke--Width--sm;

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/base/patternfly-icons.css

@@ -4190,7 +4190,7 @@
   font-family: "pficon";
   src: url("./assets/pficon/pficon.woff2") format("woff2"), url("./assets/pficon/pficon.woff") format("woff");
 }
-.pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-open-drawer-right:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-data-source:before, .pf-icon-data-sink:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
+.pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-open-drawer-right:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-data-source:before, .pf-icon-data-sink:before, .pf-icon-data-processor:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
   font-family: "pficon";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -4289,6 +4289,10 @@
   content: "\e976";
 }
 
+.pf-icon-data-processor:before {
+  content: "\e97b";
+}
+
 .pf-icon-data-sink:before {
   content: "\e978";
 }

package/base/patternfly-pf-icons.css

@@ -2,7 +2,7 @@
   font-family: "pficon";
   src: url("./assets/pficon/pficon.woff2") format("woff2"), url("./assets/pficon/pficon.woff") format("woff");
 }
-.pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-open-drawer-right:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-data-source:before, .pf-icon-data-sink:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
+.pf-icon-zone:before, .pf-icon-warning-triangle:before, .pf-icon-volume:before, .pf-icon-virtual-machine:before, .pf-icon-users:before, .pf-icon-user:before, .pf-icon-unplugged:before, .pf-icon-unlocked:before, .pf-icon-unknown:before, .pf-icon-trend-up:before, .pf-icon-trend-down:before, .pf-icon-topology:before, .pf-icon-thumb-tack:before, .pf-icon-tenant:before, .pf-icon-task:before, .pf-icon-storage-domain:before, .pf-icon-spinner2:before, .pf-icon-spinner:before, .pf-icon-services:before, .pf-icon-service:before, .pf-icon-service-catalog:before, .pf-icon-server:before, .pf-icon-server-group:before, .pf-icon-security:before, .pf-icon-screen:before, .pf-icon-save:before, .pf-icon-running:before, .pf-icon-resources-full:before, .pf-icon-resources-empty:before, .pf-icon-resources-almost-full:before, .pf-icon-resources-almost-empty:before, .pf-icon-resource-pool:before, .pf-icon-repository:before, .pf-icon-replicator:before, .pf-icon-remove2:before, .pf-icon-registry:before, .pf-icon-regions:before, .pf-icon-rebooting:before, .pf-icon-rebalance:before, .pf-icon-project:before, .pf-icon-process-automation:before, .pf-icon-private:before, .pf-icon-print:before, .pf-icon-port:before, .pf-icon-plugged:before, .pf-icon-pficon-vcenter:before, .pf-icon-pficon-template:before, .pf-icon-pficon-sort-common-desc:before, .pf-icon-pficon-sort-common-asc:before, .pf-icon-pficon-satellite:before, .pf-icon-pficon-network-range:before, .pf-icon-pficon-history:before, .pf-icon-pficon-dragdrop:before, .pf-icon-pending:before, .pf-icon-paused:before, .pf-icon-panel-open:before, .pf-icon-panel-close:before, .pf-icon-package:before, .pf-icon-os-image:before, .pf-icon-orders:before, .pf-icon-optimize:before, .pf-icon-openstack:before, .pf-icon-openshift:before, .pf-icon-open-drawer-right:before, .pf-icon-on:before, .pf-icon-on-running:before, .pf-icon-ok:before, .pf-icon-off:before, .pf-icon-not-started:before, .pf-icon-new-process:before, .pf-icon-network:before, .pf-icon-namespaces:before, .pf-icon-monitoring:before, .pf-icon-module:before, .pf-icon-migration:before, .pf-icon-middleware:before, .pf-icon-messages:before, .pf-icon-memory:before, .pf-icon-maintenance:before, .pf-icon-locked:before, .pf-icon-key:before, .pf-icon-integration:before, .pf-icon-infrastructure:before, .pf-icon-info:before, .pf-icon-in-progress:before, .pf-icon-import:before, .pf-icon-home:before, .pf-icon-history:before, .pf-icon-help:before, .pf-icon-globe-route:before, .pf-icon-folder-open:before, .pf-icon-folder-close:before, .pf-icon-flavor:before, .pf-icon-filter:before, .pf-icon-export:before, .pf-icon-error-circle-o:before, .pf-icon-equalizer:before, .pf-icon-enterprise:before, .pf-icon-enhancement:before, .pf-icon-edit:before, .pf-icon-domain:before, .pf-icon-disconnected:before, .pf-icon-degraded:before, .pf-icon-data-source:before, .pf-icon-data-sink:before, .pf-icon-data-processor:before, .pf-icon-critical-risk:before, .pf-icon-cpu:before, .pf-icon-container-node:before, .pf-icon-connected:before, .pf-icon-cluster:before, .pf-icon-cloud-tenant:before, .pf-icon-cloud-security:before, .pf-icon-close:before, .pf-icon-chat:before, .pf-icon-catalog:before, .pf-icon-bundle:before, .pf-icon-builder-image:before, .pf-icon-build:before, .pf-icon-blueprint:before, .pf-icon-bell:before, .pf-icon-automation:before, .pf-icon-attention-bell:before, .pf-icon-asleep:before, .pf-icon-arrow:before, .pf-icon-applications:before, .pf-icon-ansible-tower:before, .pf-icon-add-circle-o:before {
   font-family: "pficon";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -101,6 +101,10 @@
   content: "\e976";
 }
 
+.pf-icon-data-processor:before {
+  content: "\e97b";
+}
+
 .pf-icon-data-sink:before {
   content: "\e978";
 }

package/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/components/Accordion/accordion.scss

@@ -16,6 +16,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;
 
   // accordion toggle text
   --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
@@ -160,6 +161,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;
 
   &::after {

package/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/components/AppLauncher/app-launcher.scss

@@ -23,6 +23,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;
 
   // Menu input
   --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
@@ -104,6 +105,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;
 
   &:hover {

package/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/components/Breadcrumb/breadcrumb.scss

@@ -15,6 +15,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;
 
   // Heading
   --pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);
@@ -69,6 +70,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);
 
   &:hover {
     --pf-c-breadcrumb__link--Color: var(--pf-c-breadcrumb__link--hover--Color);

package/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/components/CalendarMonth/calendar-month.scss

@@ -8,7 +8,7 @@
 
   // header
   --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; // remove in breaking change

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);
 }