@patternfly/react-core 6.0.0-alpha.59 → 6.0.0-alpha.60

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.58","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.59","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.58","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.59","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.58","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.59","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.59",
+  "version": "6.0.0-alpha.60",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.21",
-    "@patternfly/react-styles": "^6.0.0-alpha.21",
-    "@patternfly/react-tokens": "^6.0.0-alpha.21",
+    "@patternfly/react-icons": "^6.0.0-alpha.22",
+    "@patternfly/react-styles": "^6.0.0-alpha.22",
+    "@patternfly/react-tokens": "^6.0.0-alpha.22",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.135",
+    "@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",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "6101cfe558acec0474dd1c0649e44c38bf01383f"
+  "gitHead": "a104a4b6124ea9ba1a0581bd983c6c48471fd8cd"
 }

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -34,21 +34,119 @@ 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';
   };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
@@ -65,8 +163,9 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
       align,
       alignItems,
       alignSelf,
-      spacer,
-      spaceItems,
+      gap,
+      columnGap,
+      rowGap,
       className,
       variant,
       children,
@@ -84,8 +183,9 @@ 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)),
               alignItems === 'start' && styles.modifiers.alignItemsStart,
               alignItems === 'center' && styles.modifiers.alignItemsCenter,
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,

package/src/components/Toolbar/ToolbarItem.tsx

@@ -38,13 +38,119 @@ 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';
   };
   /** id for this data toolbar item */
   id?: string;
@@ -60,7 +166,9 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   className,
   variant,
   visibility,
-  spacer,
+  gap,
+  columnGap,
+  rowGap,
   align,
   alignSelf,
   alignItems,
@@ -86,7 +194,9 @@ 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)),
             alignItems === 'start' && styles.modifiers.alignItemsStart,
             alignItems === 'center' && styles.modifiers.alignItemsCenter,
             alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -35,21 +35,119 @@ 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';
   };
   /** Reference to a chip container group for filters inside the toolbar toggle group */
   chipContainerRef?: React.RefObject<any>;
@@ -79,8 +177,9 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
       visibility,
       breakpoint,
       alignment,
-      spacer,
-      spaceItems,
+      gap,
+      columnGap,
+      rowGap,
       className,
       children,
       isExpanded,
@@ -166,8 +265,9 @@ 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)),
                           className
                         )}
                         {...props}

package/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. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
 
 ```ts file="./ToolbarSpacers.tsx"
 

package/src/components/Toolbar/examples/ToolbarSpacers.tsx

@@ -5,34 +5,27 @@ 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>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
-      <ToolbarItem spacer={{ default: 'spacerMd' }}>
+      <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
-      <ToolbarItem spacer={{ default: 'spacerLg' }}>
+      <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarItem
-        spacer={{
-          default: 'spacerNone',
-          md: 'spacerSm',
-          lg: 'spacerMd',
-          xl: 'spacerLg'
-        }}
-      >
+      <ToolbarItem>
         <Button variant="secondary">Action</Button>
       </ToolbarItem>
       <ToolbarItem>
         <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>

package/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>

package/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

package/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

package/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>

package/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>

package/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 />} />

package/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={() => {}} />

package/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={() => {}} />