feat: Split items

RedHatInsights · Apr 26, 2024 · 7c6b875 · 7c6b875
1 parent 3f2132c
commit 7c6b875
Showing 1 changed file with 31 additions and 26 deletions.
diff --git a/src/routes/InventoryComponents/InventoryPageHeader.js b/src/routes/InventoryComponents/InventoryPageHeader.js
@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import {
+  Split,
+  SplitItem,
   ToggleGroup,
   ToggleGroupItem,
   Text,
@@ -19,32 +21,35 @@ import { AccountStatContext } from '../../Routes';
 import FontAwesomeImageIcon from '../../components/FontAwesomeImageIcon';
 
 const InventoryContentToggle = ({ changeMainContent, mainContent }) => (
-  <ToggleGroup aria-label="Inventory content toggle">
-    <TextContent>
-      <Text
-        style={{ paddingTop: '5px', paddingRight: '16px' }}
-        component={TextVariants.h4}
-      >
-        View by
-      </Text>
-    </TextContent>
-    <Tooltip content="View by systems" position="top-end">
-      <ToggleGroupItem
-        icon={<DesktopIcon />}
-        aria-label="Hybrid inventory"
-        isSelected={mainContent === pageContents.hybridInventory.key}
-        onChange={() => changeMainContent(pageContents.hybridInventory.key)}
-      />
-    </Tooltip>
-    <Tooltip content="View by images" position="top-end">
-      <ToggleGroupItem
-        icon={<FontAwesomeImageIcon />}
-        aria-label="Bifrost"
-        isSelected={mainContent === pageContents.bifrost.key}
-        onChange={() => changeMainContent(pageContents.bifrost.key)}
-      />
-    </Tooltip>
-  </ToggleGroup>
+  <Split hasGutter>
+    <SplitItem>
+      <TextContent>
+        <Text style={{ paddingTop: '5px' }} component={TextVariants.h4}>
+          View by
+        </Text>
+      </TextContent>
+    </SplitItem>
+    <SplitItem>
+      <ToggleGroup aria-label="Inventory content toggle">
+        <Tooltip content="View by systems" position="top-end">
+          <ToggleGroupItem
+            icon={<DesktopIcon />}
+            aria-label="Hybrid inventory"
+            isSelected={mainContent === pageContents.hybridInventory.key}
+            onChange={() => changeMainContent(pageContents.hybridInventory.key)}
+          />
+        </Tooltip>
+        <Tooltip content="View by images" position="top-end">
+          <ToggleGroupItem
+            icon={<FontAwesomeImageIcon />}
+            aria-label="Bifrost"
+            isSelected={mainContent === pageContents.bifrost.key}
+            onChange={() => changeMainContent(pageContents.bifrost.key)}
+          />
+        </Tooltip>
+      </ToggleGroup>
+    </SplitItem>
+  </Split>
 );
 
 const InventoryPageHeader = (toggleProps) => {