From 64573c5ee8d9095d6bc983741dd6cd0b585f7cbf Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 22 May 2024 13:40:12 -0400
Subject: [PATCH 1/6] feat(Toolbar): updated spacer props to gap

---
 packages/react-core/package.json              |   2 +-
 .../src/components/Toolbar/ToolbarGroup.tsx   | 246 ++++++++++++++++--
 .../src/components/Toolbar/ToolbarItem.tsx    | 238 ++++++++++++++++-
 .../components/Toolbar/ToolbarToggleGroup.tsx | 246 ++++++++++++++++--
 .../components/Toolbar/examples/Toolbar.md    |   2 +-
 .../Toolbar/examples/ToolbarSpacers.tsx       |  20 +-
 .../examples/NotificationDrawerBasic.tsx      |   2 +-
 .../examples/NotificationDrawerGrouped.tsx    |   2 +-
 packages/react-core/src/helpers/util.ts       |   2 +
 packages/react-docs/package.json              |   2 +-
 packages/react-icons/package.json             |   2 +-
 packages/react-styles/package.json            |   2 +-
 packages/react-tokens/package.json            |   2 +-
 yarn.lock                                     |   8 +-
 14 files changed, 709 insertions(+), 67 deletions(-)

diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index b7dee972d53..b8bd0798070 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -55,7 +55,7 @@
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.135",
+    "@patternfly/patternfly": "6.0.0-alpha.136",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
index 770618fe846..9a0b31d2d93 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
@@ -34,21 +34,225 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment */
   alignSelf?: 'start' | 'center' | 'baseline' | 'default';
-  /** Spacers at various breakpoints. */
-  spacer?: {
-    default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    md?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    lg?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
+  /** Sets both the column and row gap at various breakpoints. */
+  gap?: {
+    default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
   };
-  /** Space items at various breakpoints. */
-  spaceItems?: {
-    default?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
-    md?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
-    lg?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
-    xl?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
-    '2xl'?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
+  /** Sets only the column gap at various breakpoints. */
+  columnGap?: {
+    default?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    md?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    lg?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    xl?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    '2xl'?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+  };
+  /** Sets only the row gap at various breakpoints. */
+  rowGap?: {
+    default?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    md?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    lg?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    xl?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    '2xl'?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+  };
+  /** Sets the margin-inline-start at various breakpoints. */
+  marginInlineStart?: {
+    default?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    md?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    lg?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    xl?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    '2xl'?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+  };
+  /** Sets the margin-inline-end at various breakpoints. */
+  marginInlineEnd?: {
+    default?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    md?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    lg?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    xl?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    '2xl'?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
   };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
@@ -65,8 +269,11 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
       align,
       alignItems,
       alignSelf,
-      spacer,
-      spaceItems,
+      gap,
+      columnGap,
+      rowGap,
+      marginInlineStart,
+      marginInlineEnd,
       className,
       variant,
       children,
@@ -84,8 +291,11 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
-              formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
-              formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(marginInlineStart, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(marginInlineEnd, styles, '', getBreakpoint(width)),
               alignItems === 'start' && styles.modifiers.alignItemsStart,
               alignItems === 'center' && styles.modifiers.alignItemsCenter,
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
index e0134b2b60f..19261704d48 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
@@ -38,13 +38,225 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment */
   alignSelf?: 'start' | 'center' | 'baseline' | 'default';
-  /** Spacers at various breakpoints. */
-  spacer?: {
-    default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    md?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    lg?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
+  /** Sets both the column and row gap at various breakpoints. */
+  gap?: {
+    default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+  };
+  /** Sets only the column gap at various breakpoints. */
+  columnGap?: {
+    default?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    md?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    lg?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    xl?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    '2xl'?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+  };
+  /** Sets only the row gap at various breakpoints. */
+  rowGap?: {
+    default?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    md?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    lg?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    xl?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    '2xl'?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+  };
+  /** Sets the margin-inline-start at various breakpoints. */
+  marginInlineStart?: {
+    default?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    md?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    lg?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    xl?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    '2xl'?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+  };
+  /** Sets the margin-inline-end at various breakpoints. */
+  marginInlineEnd?: {
+    default?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    md?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    lg?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    xl?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    '2xl'?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
   };
   /** id for this data toolbar item */
   id?: string;
@@ -60,7 +272,11 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   className,
   variant,
   visibility,
-  spacer,
+  gap,
+  columnGap,
+  rowGap,
+  marginInlineStart,
+  marginInlineEnd,
   align,
   alignSelf,
   alignItems,
@@ -86,7 +302,11 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
             formatBreakpointMods(align, styles, '', getBreakpoint(width)),
-            formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(marginInlineStart, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(marginInlineEnd, styles, '', getBreakpoint(width)),
             alignItems === 'start' && styles.modifiers.alignItemsStart,
             alignItems === 'center' && styles.modifiers.alignItemsCenter,
             alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
index f6f1d075164..b5a6ca4b866 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
@@ -35,21 +35,225 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
     xl?: 'alignEnd' | 'alignStart';
     '2xl'?: 'alignEnd' | 'alignStart';
   };
-  /** Spacers at various breakpoints. */
-  spacer?: {
-    default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    md?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    lg?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    xl?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
-    '2xl'?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
+  /** Sets both the column and row gap at various breakpoints. */
+  gap?: {
+    default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
   };
-  /** Space items at various breakpoints. */
-  spaceItems?: {
-    default?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
-    md?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
-    lg?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
-    xl?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
-    '2xl'?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
+  /** Sets only the column gap at various breakpoints. */
+  columnGap?: {
+    default?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    md?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    lg?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    xl?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+    '2xl'?:
+      | 'columnGapNone'
+      | 'columnGapXs'
+      | 'columnGapSm'
+      | 'columnGapMd'
+      | 'columnGapLg'
+      | 'columnGapXl'
+      | 'columnGap_2xl'
+      | 'columnGap_3xl'
+      | 'columnGap_4xl';
+  };
+  /** Sets only the row gap at various breakpoints. */
+  rowGap?: {
+    default?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    md?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    lg?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    xl?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+    '2xl'?:
+      | 'rowGapNone'
+      | 'rowGapXs'
+      | 'rowGapSm'
+      | 'rowGapMd'
+      | 'rowGapLg'
+      | 'rowGapXl'
+      | 'rowGap_2xl'
+      | 'rowGao_3xl'
+      | 'rowGap_4xl';
+  };
+  /** Sets the margin-inline-start at various breakpoints. */
+  marginInlineStart?: {
+    default?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    md?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    lg?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    xl?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+    '2xl'?:
+      | 'marginInlineStartNone'
+      | 'marginInlineStartXl'
+      | 'marginInlineStartSm'
+      | 'marginInlineStartMd'
+      | 'marginInlineStartLg'
+      | 'marginInlineStartXl'
+      | 'marginInlineStart2xl'
+      | 'marginInlineStart3xl'
+      | 'marginInlineStart4xl';
+  };
+  /** Sets the margin-inline-end at various breakpoints. */
+  marginInlineEnd?: {
+    default?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    md?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    lg?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    xl?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
+    '2xl'?:
+      | 'marginInlineEndNone'
+      | 'marginInlineEndXs'
+      | 'marginInlineEndSm'
+      | 'marginInlineEndMd'
+      | 'marginInlineEndLg'
+      | 'marginInlineEndXl'
+      | 'marginInlineEnd2xl'
+      | 'marginInlineEnd3xl'
+      | 'marginInlineEnd4xl';
   };
   /** Reference to a chip container group for filters inside the toolbar toggle group */
   chipContainerRef?: React.RefObject<any>;
@@ -79,8 +283,11 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
       visibility,
       breakpoint,
       alignment,
-      spacer,
-      spaceItems,
+      gap,
+      columnGap,
+      rowGap,
+      marginInlineStart,
+      marginInlineEnd,
       className,
       children,
       isExpanded,
@@ -166,8 +373,11 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                           formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
-                          formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
-                          formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+                          formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
+                          formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
+                          formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
+                          formatBreakpointMods(marginInlineStart, styles, '', getBreakpoint(width)),
+                          formatBreakpointMods(marginInlineEnd, styles, '', getBreakpoint(width)),
                           className
                         )}
                         {...props}
diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
index d662a229a4d..0babb575c5c 100644
--- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md
+++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -28,7 +28,7 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
 
-Items are spaced “16px” apart by default. To adjust the size of the space between items, use the `spacer` property of each `<ToolbarItem>`. You can set the `spacer` value at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl". Available `spacer` values include "spacerNone", "spacerSm", "spacerMd", or "spacerLg" into each breakpoint.
+Items are spaced “16px” apart by default via their parents' `gap` or `columnGap` property. To adjust the size of the space between individual items, use the `marginInlineStart` and `marginInlineEnd` properties of each `<ToolbarItem>`. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
 
 ```ts file="./ToolbarSpacers.tsx"
 
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
index 8afb2db24b7..c0c868e7d0b 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
@@ -5,25 +5,25 @@ import { Button } from '@patternfly/react-core';
 export const ToolbarSpacers: React.FunctionComponent = () => {
   const items = (
     <React.Fragment>
-      <ToolbarItem spacer={{ default: 'spacerNone' }}>
+      <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
-      <ToolbarItem spacer={{ default: 'spacerSm' }}>
+      <ToolbarItem marginInlineEnd={{ default: 'marginInlineEndSm' }}>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
-      <ToolbarItem spacer={{ default: 'spacerMd' }}>
+      <ToolbarItem marginInlineEnd={{ default: 'marginInlineEndMd' }}>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
-      <ToolbarItem spacer={{ default: 'spacerLg' }}>
+      <ToolbarItem marginInlineEnd={{ default: 'marginInlineEndLg' }}>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
       <ToolbarItem variant="separator"></ToolbarItem>
       <ToolbarItem
-        spacer={{
-          default: 'spacerNone',
-          md: 'spacerSm',
-          lg: 'spacerMd',
-          xl: 'spacerLg'
+        marginInlineEnd={{
+          default: 'marginInlineEndNone',
+          md: 'marginInlineEndSm',
+          lg: 'marginInlineEndMd',
+          xl: 'marginInlineEndLg'
         }}
       >
         <Button variant="secondary">Action</Button>
@@ -32,7 +32,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
         <Button variant="primary">Action</Button>
       </ToolbarItem>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup spaceItems={{ lg: 'spaceItemsLg' }}>
+      <ToolbarGroup gap={{ lg: 'gapLg' }}>
         <ToolbarItem>
           <Button variant="secondary">Action</Button>
         </ToolbarItem>
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
index b309911b911..a5b7926f9b6 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -176,7 +176,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const headerToolbar = (
     <Toolbar isFullHeight>
       <ToolbarContent>
-        <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }} align={{ default: 'alignEnd' }}>
+        <ToolbarGroup align={{ default: 'alignEnd' }}>
           <ToolbarGroup variant="icon-button-group">
             <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>
               <NotificationBadge
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
index 6df6097432e..e16777f752c 100644
--- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
+++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -226,7 +226,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
   const headerToolbar = (
     <Toolbar isFullHeight>
       <ToolbarContent>
-        <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }} align={{ default: 'alignEnd' }}>
+        <ToolbarGroup align={{ default: 'alignEnd' }}>
           <ToolbarGroup variant="icon-button-group">
             <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>
               <NotificationBadge
diff --git a/packages/react-core/src/helpers/util.ts b/packages/react-core/src/helpers/util.ts
index 88ba6a266ca..a688901585a 100644
--- a/packages/react-core/src/helpers/util.ts
+++ b/packages/react-core/src/helpers/util.ts
@@ -273,12 +273,14 @@ export const setBreakpointCssVars = (
 
 export interface Mods {
   default?: string;
+  xs?: string;
   sm?: string;
   md?: string;
   lg?: string;
   xl?: string;
   '2xl'?: string;
   '3xl'?: string;
+  '4xl'?: string;
 }
 
 /**
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 48f876967b1..83491bf291a 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.135",
+    "@patternfly/patternfly": "6.0.0-alpha.136",
     "@patternfly/react-charts": "^8.0.0-alpha.21",
     "@patternfly/react-code-editor": "^6.0.0-alpha.59",
     "@patternfly/react-core": "^6.0.0-alpha.59",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 79c8ff83971..517ca25b8c6 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@patternfly/patternfly": "6.0.0-alpha.135",
+    "@patternfly/patternfly": "6.0.0-alpha.136",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index d1ae2e42b4f..92480824692 100644
--- a/packages/react-styles/package.json
+++ b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.135",
+    "@patternfly/patternfly": "6.0.0-alpha.136",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index 88a0c0ed191..8b59db756df 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.135",
+    "@patternfly/patternfly": "6.0.0-alpha.136",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
diff --git a/yarn.lock b/yarn.lock
index bd7c6b4a1cf..d427a331756 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2920,10 +2920,10 @@
     puppeteer-cluster "^0.23.0"
     xmldoc "^1.1.2"
 
-"@patternfly/patternfly@6.0.0-alpha.135":
-  version "6.0.0-alpha.135"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.135.tgz#c085ec494b9afba978b971388b78c6923d82d9e0"
-  integrity sha512-e3w5Yh8UWWaIjOvaSCHjZeewK94P0AJtAodf/KweXZET9OyEsDXFb4RhWI5f28HYRbzR6cyRkR+YZY2KYQq0Wg==
+"@patternfly/patternfly@6.0.0-alpha.136":
+  version "6.0.0-alpha.136"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.136.tgz#472b8eb4a841e71f6fa512bff7f6f65d919adc17"
+  integrity sha512-BgXDvKvwedPFX0fxoFAgjbOJW+WFNqbt8LreQKiEZv8ySV+8RLDfe1Nvr/2RB4Q+bkYNucTHnmxcnPUJUcOqiA==
 
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"

From 737e053c09053b9d8a2a3cae1330eaed02b3b696 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 22 May 2024 14:03:45 -0400
Subject: [PATCH 2/6] Updated additional examples/demos

---
 packages/react-core/src/demos/DashboardHeader.tsx               | 2 +-
 packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx   | 2 +-
 packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx   | 2 +-
 .../Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx       | 2 +-
 packages/react-core/src/demos/examples/Nav/NavFlyout.tsx        | 2 +-
 packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx    | 2 +-
 .../src/demos/examples/Nav/NavHorizontalWithSubnav.tsx          | 2 +-
 packages/react-core/src/demos/examples/Nav/NavManual.tsx        | 2 +-
 .../src/demos/examples/Page/PageStickySectionBreadcrumb.tsx     | 2 +-
 .../src/demos/examples/Page/PageStickySectionGroup.tsx          | 2 +-
 .../src/demos/examples/Page/PageStickySectionGroupAlternate.tsx | 2 +-
 packages/react-table/src/demos/DashboardHeader.tsx              | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react-core/src/demos/DashboardHeader.tsx b/packages/react-core/src/demos/DashboardHeader.tsx
index cfc57f6a492..3dd6cf313ab 100644
--- a/packages/react-core/src/demos/DashboardHeader.tsx
+++ b/packages/react-core/src/demos/DashboardHeader.tsx
@@ -101,7 +101,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
             <ToolbarGroup
               variant="icon-button-group"
               align={{ default: 'alignEnd' }}
-              spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+              gap={{ default: 'gapNone', md: 'gapMd' }}
             >
               {notificationBadge ?? (
                 <ToolbarItem>
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
index ec9f5b40933..5b4b2e156fc 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.jsx
@@ -342,7 +342,7 @@ export const PaginatedTableAction = () => {
             <ToolbarGroup
               variant="icon-button-group"
               align={{ default: 'alignEnd' }}
-              spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+              gap={{ default: 'gapNone', md: 'gapMd' }}
             >
               <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
index 8e60337b025..61173162015 100644
--- a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
+++ b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
@@ -366,7 +366,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
             <ToolbarGroup
               variant="icon-button-group"
               align={{ default: 'alignEnd' }}
-              spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+              gap={{ default: 'gapNone', md: 'gapMd' }}
             >
               <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index 1a4de934f38..2d5a6a9ab12 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -383,7 +383,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
         <ToolbarGroup
           variant="icon-button-group"
           align={{ default: 'alignEnd' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
index f181f47ce8b..b9e6cf5ed9d 100644
--- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -130,7 +130,7 @@ export const NavFlyout: React.FunctionComponent = () => {
         <ToolbarGroup
           variant="icon-button-group"
           align={{ default: 'alignEnd' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
index 9da33b2b550..211db676128 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -109,7 +109,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
         <ToolbarGroup
           variant="icon-button-group"
           align={{ default: 'alignEnd' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
index 02b1b9fa24f..e45c2e7960f 100644
--- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -158,7 +158,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
         <ToolbarGroup
           variant="icon-button-group"
           align={{ default: 'alignEnd' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
index af51b03a45e..6576ce96001 100644
--- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx
+++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -125,7 +125,7 @@ export const NavManual: React.FunctionComponent = () => {
         <ToolbarGroup
           variant="icon-button-group"
           align={{ default: 'alignEnd' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index a21f7faaf62..39dff1f8a09 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -121,7 +121,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
         <ToolbarGroup
           variant="icon-button-group"
           align={{ default: 'alignEnd' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index 29cc583798d..1ce3e7bd3e2 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -121,7 +121,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
         <ToolbarGroup
           variant="icon-button-group"
           align={{ default: 'alignEnd' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index 92ffd0064e3..c268083c9c3 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -113,7 +113,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
         <ToolbarGroup
           variant="icon-button-group"
           align={{ default: 'alignEnd' }}
-          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
             <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
diff --git a/packages/react-table/src/demos/DashboardHeader.tsx b/packages/react-table/src/demos/DashboardHeader.tsx
index 347fc665b46..1a6ccc6ab28 100644
--- a/packages/react-table/src/demos/DashboardHeader.tsx
+++ b/packages/react-table/src/demos/DashboardHeader.tsx
@@ -101,7 +101,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
             <ToolbarGroup
               variant="icon-button-group"
               align={{ default: 'alignEnd' }}
-              spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+              gap={{ default: 'gapNone', md: 'gapMd' }}
             >
               {notificationBadge ?? (
                 <ToolbarItem>

From 95c51607ac947543a17bb9d8d7009bef70a96716 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 23 May 2024 12:07:06 -0400
Subject: [PATCH 3/6] Removed margin props

---
 .../src/components/Toolbar/ToolbarGroup.tsx   | 112 +-----------------
 .../src/components/Toolbar/ToolbarItem.tsx    | 110 -----------------
 .../components/Toolbar/ToolbarToggleGroup.tsx | 110 -----------------
 .../components/Toolbar/examples/Toolbar.md    |   2 +-
 .../Toolbar/examples/ToolbarSpacers.tsx       |  15 +--
 5 files changed, 6 insertions(+), 343 deletions(-)

diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
index 9a0b31d2d93..27968ecc0d1 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
@@ -36,7 +36,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
-    default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
+    default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap_3xl' | 'gap_4xl';
     md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
     lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
     xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
@@ -148,112 +148,6 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
       | 'rowGao_3xl'
       | 'rowGap_4xl';
   };
-  /** Sets the margin-inline-start at various breakpoints. */
-  marginInlineStart?: {
-    default?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    md?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    lg?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    xl?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    '2xl'?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-  };
-  /** Sets the margin-inline-end at various breakpoints. */
-  marginInlineEnd?: {
-    default?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    md?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    lg?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    xl?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    '2xl'?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-  };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
   /** Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation. */
@@ -272,8 +166,6 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
       gap,
       columnGap,
       rowGap,
-      marginInlineStart,
-      marginInlineEnd,
       className,
       variant,
       children,
@@ -294,8 +186,6 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
-              formatBreakpointMods(marginInlineStart, styles, '', getBreakpoint(width)),
-              formatBreakpointMods(marginInlineEnd, styles, '', getBreakpoint(width)),
               alignItems === 'start' && styles.modifiers.alignItemsStart,
               alignItems === 'center' && styles.modifiers.alignItemsCenter,
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
index 19261704d48..5d4338a8100 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
@@ -152,112 +152,6 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
       | 'rowGao_3xl'
       | 'rowGap_4xl';
   };
-  /** Sets the margin-inline-start at various breakpoints. */
-  marginInlineStart?: {
-    default?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    md?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    lg?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    xl?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    '2xl'?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-  };
-  /** Sets the margin-inline-end at various breakpoints. */
-  marginInlineEnd?: {
-    default?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    md?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    lg?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    xl?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    '2xl'?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-  };
   /** id for this data toolbar item */
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
@@ -275,8 +169,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   gap,
   columnGap,
   rowGap,
-  marginInlineStart,
-  marginInlineEnd,
   align,
   alignSelf,
   alignItems,
@@ -305,8 +197,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
-            formatBreakpointMods(marginInlineStart, styles, '', getBreakpoint(width)),
-            formatBreakpointMods(marginInlineEnd, styles, '', getBreakpoint(width)),
             alignItems === 'start' && styles.modifiers.alignItemsStart,
             alignItems === 'center' && styles.modifiers.alignItemsCenter,
             alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
index b5a6ca4b866..5c662b67b1a 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
@@ -149,112 +149,6 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
       | 'rowGao_3xl'
       | 'rowGap_4xl';
   };
-  /** Sets the margin-inline-start at various breakpoints. */
-  marginInlineStart?: {
-    default?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    md?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    lg?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    xl?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-    '2xl'?:
-      | 'marginInlineStartNone'
-      | 'marginInlineStartXl'
-      | 'marginInlineStartSm'
-      | 'marginInlineStartMd'
-      | 'marginInlineStartLg'
-      | 'marginInlineStartXl'
-      | 'marginInlineStart2xl'
-      | 'marginInlineStart3xl'
-      | 'marginInlineStart4xl';
-  };
-  /** Sets the margin-inline-end at various breakpoints. */
-  marginInlineEnd?: {
-    default?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    md?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    lg?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    xl?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-    '2xl'?:
-      | 'marginInlineEndNone'
-      | 'marginInlineEndXs'
-      | 'marginInlineEndSm'
-      | 'marginInlineEndMd'
-      | 'marginInlineEndLg'
-      | 'marginInlineEndXl'
-      | 'marginInlineEnd2xl'
-      | 'marginInlineEnd3xl'
-      | 'marginInlineEnd4xl';
-  };
   /** Reference to a chip container group for filters inside the toolbar toggle group */
   chipContainerRef?: React.RefObject<any>;
   /** Optional callback for clearing all filters in the toolbar toggle group */
@@ -286,8 +180,6 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
       gap,
       columnGap,
       rowGap,
-      marginInlineStart,
-      marginInlineEnd,
       className,
       children,
       isExpanded,
@@ -376,8 +268,6 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                           formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
-                          formatBreakpointMods(marginInlineStart, styles, '', getBreakpoint(width)),
-                          formatBreakpointMods(marginInlineEnd, styles, '', getBreakpoint(width)),
                           className
                         )}
                         {...props}
diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
index 0babb575c5c..50a1bd1c7e5 100644
--- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md
+++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -28,7 +28,7 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
 
-Items are spaced “16px” apart by default via their parents' `gap` or `columnGap` property. To adjust the size of the space between individual items, use the `marginInlineStart` and `marginInlineEnd` properties of each `<ToolbarItem>`. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
+Items are spaced “16px” apart by default via their parents' `gap` or `columnGap` property. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
 
 ```ts file="./ToolbarSpacers.tsx"
 
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
index c0c868e7d0b..fc34b5631cd 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
@@ -8,24 +8,17 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
       <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
-      <ToolbarItem marginInlineEnd={{ default: 'marginInlineEndSm' }}>
+      <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
-      <ToolbarItem marginInlineEnd={{ default: 'marginInlineEndMd' }}>
+      <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
-      <ToolbarItem marginInlineEnd={{ default: 'marginInlineEndLg' }}>
+      <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarItem
-        marginInlineEnd={{
-          default: 'marginInlineEndNone',
-          md: 'marginInlineEndSm',
-          lg: 'marginInlineEndMd',
-          xl: 'marginInlineEndLg'
-        }}
-      >
+      <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
       <ToolbarItem>

From a6543ffb6c305a3a868bee6dca5b71d907db3d35 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 23 May 2024 12:09:55 -0400
Subject: [PATCH 4/6] Definitely did not forget to add underscore back

---
 packages/react-core/src/components/Toolbar/ToolbarGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
index 27968ecc0d1..033fd9ce414 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
@@ -36,7 +36,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
-    default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap2xl' | 'gap_3xl' | 'gap_4xl';
+    default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
     md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
     lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
     xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';

From fb84b90d5f3bc66af48b91aa6fdb877e88c759fb Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 23 May 2024 15:37:38 -0400
Subject: [PATCH 5/6] Updated core versions

---
 packages/react-core/package.json   | 2 +-
 packages/react-docs/package.json   | 2 +-
 packages/react-icons/package.json  | 2 +-
 packages/react-styles/package.json | 2 +-
 packages/react-tokens/package.json | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index b8bd0798070..8f0cd49695c 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -55,7 +55,7 @@
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.136",
+    "@patternfly/patternfly": "6.0.0-alpha.139",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 83491bf291a..b4891e491dc 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.136",
+    "@patternfly/patternfly": "6.0.0-alpha.139",
     "@patternfly/react-charts": "^8.0.0-alpha.21",
     "@patternfly/react-code-editor": "^6.0.0-alpha.59",
     "@patternfly/react-core": "^6.0.0-alpha.59",
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
index 517ca25b8c6..2a97cd39a6c 100644
--- a/packages/react-icons/package.json
+++ b/packages/react-icons/package.json
@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@patternfly/patternfly": "6.0.0-alpha.136",
+    "@patternfly/patternfly": "6.0.0-alpha.139",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",
     "rimraf": "^2.6.2",
diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json
index 92480824692..bfb7b327183 100644
--- a/packages/react-styles/package.json
+++ b/packages/react-styles/package.json
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.136",
+    "@patternfly/patternfly": "6.0.0-alpha.139",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json
index 8b59db756df..0ac39171178 100644
--- a/packages/react-tokens/package.json
+++ b/packages/react-tokens/package.json
@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.136",
+    "@patternfly/patternfly": "6.0.0-alpha.139",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
     "glob": "^7.1.2",

From 0ba4415afc906dff6dd484a13c60d3dd1f058828 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 23 May 2024 16:06:37 -0400
Subject: [PATCH 6/6] Updated snapshots

---
 .../ChartBullet/__snapshots__/ChartBullet.test.tsx.snap   | 4 ++--
 .../ChartBulletQualitativeRange.test.tsx.snap             | 6 +++---
 yarn.lock                                                 | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap
index 081c5d999c4..a74b63d5b53 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap
@@ -380,7 +380,7 @@ A 0 0 0 0 1, 312.5, 85
           index="0"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--200, #92c5f9); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
+          style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--200, #e0e0e0); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
         />
       </g>
       <g
@@ -399,7 +399,7 @@ A 0 0 0 0 1, 225, 85
           index="0"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--100, #92c5f9); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
+          style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--100, #f2f2f2); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
         />
       </g>
       <g
diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap
index 5c1318ede2a..6faa4d373ac 100644
--- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap
+++ b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap
@@ -83,7 +83,7 @@ A 0 0 0 0 1, 399.99999999976666, 104.8
           index="0"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--300, #92c5f9); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
+          style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--300, #c7c7c7); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
         />
       </g>
       <g
@@ -102,7 +102,7 @@ A 0 0 0 0 1, 399.9999999995882, 104.8
           index="0"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--200, #92c5f9); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
+          style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--200, #e0e0e0); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
         />
       </g>
       <g
@@ -121,7 +121,7 @@ A 0 0 0 0 1, 399.9999999993, 104.8
           index="0"
           role="presentation"
           shape-rendering="auto"
-          style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--100, #92c5f9); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
+          style="fill: var(--pf-v6-chart-bullet--qualitative-range--ColorScale--100, #f2f2f2); stroke: var(--pf-v6-chart-bar--data--stroke, none); padding: 8px; stroke-width: 0;"
         />
       </g>
     </svg>
diff --git a/yarn.lock b/yarn.lock
index d427a331756..cf158bb14e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2920,10 +2920,10 @@
     puppeteer-cluster "^0.23.0"
     xmldoc "^1.1.2"
 
-"@patternfly/patternfly@6.0.0-alpha.136":
-  version "6.0.0-alpha.136"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.136.tgz#472b8eb4a841e71f6fa512bff7f6f65d919adc17"
-  integrity sha512-BgXDvKvwedPFX0fxoFAgjbOJW+WFNqbt8LreQKiEZv8ySV+8RLDfe1Nvr/2RB4Q+bkYNucTHnmxcnPUJUcOqiA==
+"@patternfly/patternfly@6.0.0-alpha.139":
+  version "6.0.0-alpha.139"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.139.tgz#417d6d3cf5e923a9cff28c99ecd8a3489fa935ff"
+  integrity sha512-RfM0pvIhWwaSzobKh/mjkTqYMnAdeOqC1wH9zg9zTab9GyUQdeGkRkd9gpDEQhuuN/bhNpO03W6jpaqauxfpmA==
 
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"