From c9d584d26fa5bf221013e0f949955e08dd4e8c50 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:29:02 -0400
Subject: [PATCH] refactor split and flex instances in favor of toolbar
 components

---
 .../topologyPackageDemo/OptionsContextBar.tsx | 111 +++++++++---------
 .../content/examples/TopologyLayoutsDemo.tsx  |  12 +-
 2 files changed, 59 insertions(+), 64 deletions(-)

diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
index f82e6918..d7fb7c73 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import {
   Button,
-  Flex,
-  FlexItem,
   MenuToggle,
   MenuToggleElement,
   Select,
@@ -227,66 +225,65 @@ const OptionsContextBar: React.FC = observer(() => {
   };
 
   return (
+    <>
       <ToolbarItem variant="label">Nodes:</ToolbarItem>
       <ToolbarItem>
-              <TextInput
-                aria-label="nodes"
-                type="number"
-                value={numNodes || ''}
-                onChange={(_event, val: string) =>
-                  val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null)
-                }
-              />
-            </ToolbarItem>>
-          <ToolbarItem variant="label">Edges:</ToolbarItem>
-          <ToolbarItem>
-              <TextInput
-                aria-label="edges"
-                type="number"
-                value={numEdges === null ? '' : numEdges}
-                onChange={(_event, val: string) =>
-                  val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null)
-                }
-              />
-            </ToolbarItem>
-          <ToolbarItem variant="label">Groups:</ToolbarItem>
-              <TextInput
-                aria-label="groups"
-                type="number"
-                value={numGroups === null ? '' : numGroups}
-                onChange={(_event, val: string) =>
-                  val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null)
-                }
-              />
-              </ToolbarItem>
-          <ToolbarItem variant="label">Nesting Depth:</ToolbarItem>
-              <TextInput
-                aria-label="nesting depth"
-                type="number"
-                value={nestedLevel === null ? '' : nestedLevel}
-                onChange={(_event, val: string) =>
-                  val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null)
-                }
-              />
-            </Flex>
-          </FlexItem>
-          <FlexItem>
-            <Button
-              variant="link"
-              isDisabled={numNodes === undefined || numNodes < 1 || numEdges === undefined || numGroups === undefined}
-              onClick={() => options.setCreationCounts({ numNodes, numEdges, numGroups, nestedLevel })}
-            >
-              Apply
-            </Button>
-          </FlexItem>
-        </Flex>
+        <TextInput
+          aria-label="nodes"
+          type="number"
+          value={numNodes || ''}
+          onChange={(_event, val: string) =>
+            val ? updateValue(parseInt(val), 0, 9999, setNumNodes) : setNumNodes(null)
+          }
+        />
+      </ToolbarItem>
+      <ToolbarItem variant="label">Edges:</ToolbarItem>
+      <ToolbarItem>
+        <TextInput
+          aria-label="edges"
+          type="number"
+          value={numEdges === null ? '' : numEdges}
+          onChange={(_event, val: string) =>
+            val ? updateValue(parseInt(val), 0, 200, setNumEdges) : setNumEdges(null)
+          }
+        />
+      </ToolbarItem>
+      <ToolbarItem variant="label">Groups:</ToolbarItem>
+      <ToolbarItem>
+        <TextInput
+          aria-label="groups"
+          type="number"
+          value={numGroups === null ? '' : numGroups}
+          onChange={(_event, val: string) =>
+            val ? updateValue(parseInt(val), 0, 100, setNumGroups) : setNumGroups(null)
+          }
+        />
+      </ToolbarItem>
+      <ToolbarItem variant="label">Nesting Depth:</ToolbarItem>
+      <ToolbarItem>
+        <TextInput
+          aria-label="nesting depth"
+          type="number"
+          value={nestedLevel === null ? '' : nestedLevel}
+          onChange={(_event, val: string) =>
+            val ? updateValue(parseInt(val), 0, 5, setNestedLevel) : setNestedLevel(null)
+          }
+        />
+        <ToolbarItem>
+          <Button
+            variant="link"
+            isDisabled={numNodes === undefined || numNodes < 1 || numEdges === undefined || numGroups === undefined}
+            onClick={() => options.setCreationCounts({ numNodes, numEdges, numGroups, nestedLevel })}
+          >
+            Apply
+          </Button>
+        </ToolbarItem>
       </ToolbarItem>
       <ToolbarItem>
-        <Flex gap={{ default: 'gapMd' }}>
-          {renderNodeOptionsDropdown()}
-          {renderEdgeOptionsDropdown()}
-        </Flex>
+        {renderNodeOptionsDropdown()}
+        {renderEdgeOptionsDropdown()}
       </ToolbarItem>
+    </>
   );
 });
 
diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
index b236b8f1..6ac8bc7d 100644
--- a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
+++ b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx
@@ -257,11 +257,9 @@ export const LayoutsDemo: React.FC = () => {
   }, [controller, layout]);
 
   const layoutDropdown = (
-    <Split>
-      <SplitItem>
-        <label className="pf-v6-u-display-inline-block pf-v6-u-mr-md pf-v6-u-mt-sm">Layout</label>
-      </SplitItem>
-      <SplitItem>
+    <>
+      <ToolbarItem variant="label">Layout</ToolbarItem>
+      <ToolbarItem>
         <Dropdown
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle ref={toggleRef} onClick={() => setLayoutDropdownOpen(!layoutDropdownOpen)}>
@@ -317,8 +315,8 @@ export const LayoutsDemo: React.FC = () => {
             </DropdownItem>
           </DropdownList>
         </Dropdown>
-      </SplitItem>
-    </Split>
+      </ToolbarItem>
+    </>
   );
 
   return (