From 43413ecfb1c908674f86737ccafe81cbcbbe6b8d Mon Sep 17 00:00:00 2001
From: mfrances <mfrances@redhat.com>
Date: Fri, 17 Jan 2025 18:23:06 -0500
Subject: [PATCH 1/4] chore(Toolbar): add different gap props to examples

---
 .../components/Toolbar/examples/Toolbar.md    |   2 +-
 .../Toolbar/examples/ToolbarSpacers.tsx       | 246 +++++++++++++++++-
 2 files changed, 233 insertions(+), 15 deletions(-)

diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
index 99ae433ed5c..3d23c574d01 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. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
+Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. 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 19c6a9fabb1..b395fb69613 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
@@ -3,46 +3,264 @@ import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/
 import { Button } from '@patternfly/react-core';
 
 export const ToolbarSpacers: React.FunctionComponent = () => {
-  const items = (
+  const groupGapItems = (
     <React.Fragment>
       <ToolbarGroup variant="action-group">
         <ToolbarItem>
-          <Button variant="secondary">Action</Button>
+          <Button variant="secondary">Default Gap</Button>
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="secondary">Action</Button>
+          <Button variant="secondary">Default Gap</Button>
         </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup variant="action-group" gap={{ default: 'gapNone' }}>
         <ToolbarItem>
-          <Button variant="secondary">Action</Button>
+          <Button variant="secondary">No Gap</Button>
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="secondary">Action</Button>
+          <Button variant="secondary">No Gap</Button>
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup variant="action-group" gap={{ lg: 'gapSm' }}>
+      <ToolbarGroup variant="action-group" gap={{ default: 'gapSm' }}>
         <ToolbarItem>
-          <Button variant="secondary">Action</Button>
+          <Button variant="secondary">Small Gap</Button>
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="primary">Action</Button>
+          <Button variant="secondary">Small Gap</Button>
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup variant="action-group" gap={{ lg: 'gapLg' }}>
+      <ToolbarGroup variant="action-group" gap={{ default: 'gapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const groupColumnGapItems = (
+    <React.Fragment>
+      <ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapNone' }}>
+        <ToolbarItem className="pf-m-wrap">
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapSm' }}>
+        <ToolbarItem className="pf-m-wrap">
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapXl' }}>
+        <ToolbarItem className="pf-m-wrap">
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const groupRowGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapNone' }}>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
         <ToolbarItem>
-          <Button variant="secondary">Action</Button>
+          <Button variant="secondary">Small Row Gap</Button>
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="secondary">Action</Button>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap" variant="action-group">
+        <ToolbarItem gap={{ default: 'gapNone' }}>
+          <Button variant="secondary">No Gap</Button>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem gap={{ default: 'gapSm' }}>
+          <Button variant="secondary">Small Gap</Button>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem gap={{ default: 'gapXl' }}>
+          <Button variant="secondary">Extra Large Gap</Button>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemColumnGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap" variant="action-group">
+        <ToolbarItem columnGap={{ default: 'columnGapNone' }}>
+          <Button variant="secondary">No Column Gap</Button>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem columnGap={{ default: 'columnGapSm' }}>
+          <Button variant="secondary">Small Column Gap</Button>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem columnGap={{ default: 'columnGapXl' }}>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemRowGapItems = (
+    <React.Fragment>
+      <ToolbarGroup variant="action-group">
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
+          <Button variant="secondary">No Row Gap</Button>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
+          <Button variant="secondary">Small Row Gap</Button>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+          <Button variant="secondary">Extra Large Row Gap</Button>
         </ToolbarItem>
       </ToolbarGroup>
     </React.Fragment>
   );
 
   return (
-    <Toolbar id="toolbar-spacers">
-      <ToolbarContent>{items}</ToolbarContent>
-    </Toolbar>
+    <>
+      <strong>Toolbar Group Spacing:</strong>
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupGapItems}</ToolbarContent>
+      </Toolbar>
+      <strong>Using column gap</strong>
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupColumnGapItems}</ToolbarContent>
+      </Toolbar>
+      <strong>Using row gap</strong>
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupRowGapItems}</ToolbarContent>
+      </Toolbar>
+      <br />
+      <strong>Toolbar Item Spacing:</strong>
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemGapItems}</ToolbarContent>
+      </Toolbar>
+      <strong>Using column gap</strong>
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemColumnGapItems}</ToolbarContent>
+      </Toolbar>
+      <strong>Using row gap</strong>
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemRowGapItems}</ToolbarContent>
+      </Toolbar>
+    </>
   );
 };

From 812c1cbe84e4b8cc637159a926a636a30970815d Mon Sep 17 00:00:00 2001
From: mfrances <mfrances@redhat.com>
Date: Thu, 23 Jan 2025 14:14:11 -0500
Subject: [PATCH 2/4] use h4 for example headings

---
 .../Toolbar/examples/ToolbarSpacers.tsx       | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
index b395fb69613..46f042f3482 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
@@ -224,38 +224,46 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
 
   return (
     <>
-      <strong>Toolbar Group Spacing:</strong>
+      <h4>Toolbar group spacing</h4>
+      <br />
+      Using gap
       <br />
       <br />
       <Toolbar id="toolbar-spacers">
         <ToolbarContent>{groupGapItems}</ToolbarContent>
       </Toolbar>
-      <strong>Using column gap</strong>
+      <br />
+      Using column gap
       <br />
       <br />
       <Toolbar id="toolbar-spacers">
         <ToolbarContent>{groupColumnGapItems}</ToolbarContent>
       </Toolbar>
-      <strong>Using row gap</strong>
+      <br />
+      Using row gap
       <br />
       <br />
       <Toolbar id="toolbar-spacers">
         <ToolbarContent>{groupRowGapItems}</ToolbarContent>
       </Toolbar>
       <br />
-      <strong>Toolbar Item Spacing:</strong>
+      <h4>Toolbar item spacing</h4>
+      <br />
+      Using gap
       <br />
       <br />
       <Toolbar id="toolbar-spacers">
         <ToolbarContent>{itemGapItems}</ToolbarContent>
       </Toolbar>
-      <strong>Using column gap</strong>
+      <br />
+      Using column gap
       <br />
       <br />
       <Toolbar id="toolbar-spacers">
         <ToolbarContent>{itemColumnGapItems}</ToolbarContent>
       </Toolbar>
-      <strong>Using row gap</strong>
+      <br />
+      Using row gap
       <br />
       <br />
       <Toolbar id="toolbar-spacers">

From 77716f800ab25a9cc67d583860e75cb53bb02dc3 Mon Sep 17 00:00:00 2001
From: mfrances <mfrances@redhat.com>
Date: Thu, 23 Jan 2025 14:39:55 -0500
Subject: [PATCH 3/4] rm redundant wrap classes

---
 .../src/components/Toolbar/examples/ToolbarSpacers.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
index 46f042f3482..12f88e9c4b1 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
@@ -46,7 +46,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
   const groupColumnGapItems = (
     <React.Fragment>
       <ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapNone' }}>
-        <ToolbarItem className="pf-m-wrap">
+        <ToolbarItem>
           <Button variant="secondary">No Column Gap</Button>
         </ToolbarItem>
         <ToolbarItem>
@@ -55,7 +55,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
       </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
       <ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapSm' }}>
-        <ToolbarItem className="pf-m-wrap">
+        <ToolbarItem>
           <Button variant="secondary">Small Column Gap</Button>
         </ToolbarItem>
         <ToolbarItem>
@@ -64,7 +64,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
       </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
       <ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapXl' }}>
-        <ToolbarItem className="pf-m-wrap">
+        <ToolbarItem>
           <Button variant="secondary">Extra Large Column Gap</Button>
         </ToolbarItem>
         <ToolbarItem>

From fefa4b4136d976bf4e4310bccdc94e9c83fdc007 Mon Sep 17 00:00:00 2001
From: mfrances <mfrances@redhat.com>
Date: Fri, 24 Jan 2025 17:23:10 -0500
Subject: [PATCH 4/4] reformat and restructure examples

---
 .../components/Toolbar/examples/Toolbar.md    |  27 +++--
 ...barSpacers.tsx => ToolbarGroupSpacers.tsx} | 111 ++----------------
 .../Toolbar/examples/ToolbarItemSpacers.tsx   |  91 ++++++++++++++
 3 files changed, 119 insertions(+), 110 deletions(-)
 rename packages/react-core/src/components/Toolbar/examples/{ToolbarSpacers.tsx => ToolbarGroupSpacers.tsx} (57%)
 create mode 100644 packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx

diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
index 3d23c574d01..c855d8485e7 100644
--- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md
+++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -24,16 +24,6 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 ```
 
-### Toolbar item spacers
-
-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 and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
-
-```ts file="./ToolbarSpacers.tsx"
-
-```
-
 ### With adjusted inset
 
 To adjust a toolbar’s inset, use the `inset` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.
@@ -120,3 +110,20 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 ```ts file="./ToolbarStacked.tsx"
 
 ```
+
+## Examples with toolbar spacers
+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 and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
+
+### Toolbar group spacers
+
+```ts file="./ToolbarGroupSpacers.tsx"
+
+```
+
+### Toolbar item spacers
+
+```ts file="./ToolbarItemSpacers.tsx"
+
+```
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx
similarity index 57%
rename from packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
rename to packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx
index 12f88e9c4b1..e32bc246a0f 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
 import { Button } from '@patternfly/react-core';
 
-export const ToolbarSpacers: React.FunctionComponent = () => {
+export const ToolbarGroupSpacers: React.FunctionComponent = () => {
   const groupGapItems = (
     <React.Fragment>
-      <ToolbarGroup variant="action-group">
+      <ToolbarGroup>
         <ToolbarItem>
           <Button variant="secondary">Default Gap</Button>
         </ToolbarItem>
@@ -14,7 +14,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup variant="action-group" gap={{ default: 'gapNone' }}>
+      <ToolbarGroup gap={{ default: 'gapNone' }}>
         <ToolbarItem>
           <Button variant="secondary">No Gap</Button>
         </ToolbarItem>
@@ -23,7 +23,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup variant="action-group" gap={{ default: 'gapSm' }}>
+      <ToolbarGroup gap={{ default: 'gapSm' }}>
         <ToolbarItem>
           <Button variant="secondary">Small Gap</Button>
         </ToolbarItem>
@@ -32,7 +32,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup variant="action-group" gap={{ default: 'gapXl' }}>
+      <ToolbarGroup gap={{ default: 'gapXl' }}>
         <ToolbarItem>
           <Button variant="secondary">Extra Large Gap</Button>
         </ToolbarItem>
@@ -45,7 +45,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
 
   const groupColumnGapItems = (
     <React.Fragment>
-      <ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapNone' }}>
+      <ToolbarGroup columnGap={{ default: 'columnGapNone' }}>
         <ToolbarItem>
           <Button variant="secondary">No Column Gap</Button>
         </ToolbarItem>
@@ -54,7 +54,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapSm' }}>
+      <ToolbarGroup columnGap={{ default: 'columnGapSm' }}>
         <ToolbarItem>
           <Button variant="secondary">Small Column Gap</Button>
         </ToolbarItem>
@@ -63,7 +63,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem variant="separator"></ToolbarItem>
-      <ToolbarGroup variant="action-group" columnGap={{ default: 'columnGapXl' }}>
+      <ToolbarGroup columnGap={{ default: 'columnGapXl' }}>
         <ToolbarItem>
           <Button variant="secondary">Extra Large Column Gap</Button>
         </ToolbarItem>
@@ -76,7 +76,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
 
   const groupRowGapItems = (
     <React.Fragment>
-      <ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapNone' }}>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
         <ToolbarItem>
           <Button variant="secondary">No Row Gap</Button>
         </ToolbarItem>
@@ -103,7 +103,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
         </ToolbarItem>
         <ToolbarItem variant="separator"></ToolbarItem>
       </ToolbarGroup>
-      <ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapSm' }}>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
         <ToolbarItem>
           <Button variant="secondary">Small Row Gap</Button>
         </ToolbarItem>
@@ -130,7 +130,7 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
         </ToolbarItem>
         <ToolbarItem variant="separator"></ToolbarItem>
       </ToolbarGroup>
-      <ToolbarGroup className="pf-m-wrap" variant="action-group" rowGap={{ default: 'rowGapXl' }}>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
         <ToolbarItem>
           <Button variant="secondary">Extra Large Row Gap</Button>
         </ToolbarItem>
@@ -159,87 +159,20 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
     </React.Fragment>
   );
 
-  const itemGapItems = (
-    <React.Fragment>
-      <ToolbarGroup className="pf-m-wrap" variant="action-group">
-        <ToolbarItem gap={{ default: 'gapNone' }}>
-          <Button variant="secondary">No Gap</Button>
-          <Button variant="secondary">No Gap</Button>
-        </ToolbarItem>
-        <ToolbarItem variant="separator"></ToolbarItem>
-        <ToolbarItem gap={{ default: 'gapSm' }}>
-          <Button variant="secondary">Small Gap</Button>
-          <Button variant="secondary">Small Gap</Button>
-        </ToolbarItem>
-        <ToolbarItem variant="separator"></ToolbarItem>
-        <ToolbarItem gap={{ default: 'gapXl' }}>
-          <Button variant="secondary">Extra Large Gap</Button>
-          <Button variant="secondary">Extra Large Gap</Button>
-        </ToolbarItem>
-      </ToolbarGroup>
-    </React.Fragment>
-  );
-
-  const itemColumnGapItems = (
-    <React.Fragment>
-      <ToolbarGroup className="pf-m-wrap" variant="action-group">
-        <ToolbarItem columnGap={{ default: 'columnGapNone' }}>
-          <Button variant="secondary">No Column Gap</Button>
-          <Button variant="secondary">No Column Gap</Button>
-        </ToolbarItem>
-        <ToolbarItem variant="separator"></ToolbarItem>
-        <ToolbarItem columnGap={{ default: 'columnGapSm' }}>
-          <Button variant="secondary">Small Column Gap</Button>
-          <Button variant="secondary">Small Column Gap</Button>
-        </ToolbarItem>
-        <ToolbarItem variant="separator"></ToolbarItem>
-        <ToolbarItem columnGap={{ default: 'columnGapXl' }}>
-          <Button variant="secondary">Extra Large Column Gap</Button>
-          <Button variant="secondary">Extra Large Column Gap</Button>
-        </ToolbarItem>
-      </ToolbarGroup>
-    </React.Fragment>
-  );
-
-  const itemRowGapItems = (
-    <React.Fragment>
-      <ToolbarGroup variant="action-group">
-        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
-          <Button variant="secondary">No Row Gap</Button>
-          <Button variant="secondary">No Row Gap</Button>
-        </ToolbarItem>
-        <ToolbarItem variant="separator"></ToolbarItem>
-        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
-          <Button variant="secondary">Small Row Gap</Button>
-          <Button variant="secondary">Small Row Gap</Button>
-        </ToolbarItem>
-        <ToolbarItem variant="separator"></ToolbarItem>
-        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
-          <Button variant="secondary">Extra Large Row Gap</Button>
-          <Button variant="secondary">Extra Large Row Gap</Button>
-        </ToolbarItem>
-      </ToolbarGroup>
-    </React.Fragment>
-  );
-
   return (
     <>
-      <h4>Toolbar group spacing</h4>
-      <br />
       Using gap
       <br />
       <br />
       <Toolbar id="toolbar-spacers">
         <ToolbarContent>{groupGapItems}</ToolbarContent>
       </Toolbar>
-      <br />
       Using column gap
       <br />
       <br />
       <Toolbar id="toolbar-spacers">
         <ToolbarContent>{groupColumnGapItems}</ToolbarContent>
       </Toolbar>
-      <br />
       Using row gap
       <br />
       <br />
@@ -247,28 +180,6 @@ export const ToolbarSpacers: React.FunctionComponent = () => {
         <ToolbarContent>{groupRowGapItems}</ToolbarContent>
       </Toolbar>
       <br />
-      <h4>Toolbar item spacing</h4>
-      <br />
-      Using gap
-      <br />
-      <br />
-      <Toolbar id="toolbar-spacers">
-        <ToolbarContent>{itemGapItems}</ToolbarContent>
-      </Toolbar>
-      <br />
-      Using column gap
-      <br />
-      <br />
-      <Toolbar id="toolbar-spacers">
-        <ToolbarContent>{itemColumnGapItems}</ToolbarContent>
-      </Toolbar>
-      <br />
-      Using row gap
-      <br />
-      <br />
-      <Toolbar id="toolbar-spacers">
-        <ToolbarContent>{itemRowGapItems}</ToolbarContent>
-      </Toolbar>
     </>
   );
 };
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx
new file mode 100644
index 00000000000..cd711951aa3
--- /dev/null
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarItemSpacers: React.FunctionComponent = () => {
+  const itemGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap">
+        <ToolbarItem gap={{ default: 'gapNone' }}>
+          <Button variant="secondary">No Gap</Button>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem gap={{ default: 'gapSm' }}>
+          <Button variant="secondary">Small Gap</Button>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem gap={{ default: 'gapXl' }}>
+          <Button variant="secondary">Extra Large Gap</Button>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemColumnGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap">
+        <ToolbarItem columnGap={{ default: 'columnGapNone' }}>
+          <Button variant="secondary">No Column Gap</Button>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem columnGap={{ default: 'columnGapSm' }}>
+          <Button variant="secondary">Small Column Gap</Button>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem columnGap={{ default: 'columnGapXl' }}>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemRowGapItems = (
+    <React.Fragment>
+      <ToolbarGroup>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
+          <Button variant="secondary">No Row Gap</Button>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
+          <Button variant="secondary">Small Row Gap</Button>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <>
+      Using gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemGapItems}</ToolbarContent>
+      </Toolbar>
+      Using column gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemColumnGapItems}</ToolbarContent>
+      </Toolbar>
+      Using row gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemRowGapItems}</ToolbarContent>
+      </Toolbar>
+    </>
+  );
+};