fix(RHINENG-9686): border-radius in toggle group

This PR fixes the issue with the rounded edges of the ToggleGroupItems when a Tooltip is wrapped around the items. Adding the `triggerRef` removes the `<div>` that breaks the component.
RedHatInsights · May 6, 2024 · 83017f2 · 83017f2
1 parent a14c486
commit 83017f2
Showing 1 changed file with 49 additions and 32 deletions.
diff --git a/src/routes/InventoryComponents/InventoryPageHeader.js b/src/routes/InventoryComponents/InventoryPageHeader.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef } from 'react';
 import PropTypes from 'prop-types';
 import {
   Split,
@@ -20,37 +20,54 @@ import { pageContents } from '../InventoryPage';
 import { AccountStatContext } from '../../Routes';
 import FontAwesomeImageIcon from '../../components/FontAwesomeImageIcon';
 
-const InventoryContentToggle = ({ changeMainContent, mainContent }) => (
-  <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 InventoryContentToggle = ({ changeMainContent, mainContent }) => {
+  const viewBySystemsToggle = useRef(null);
+  const viewByImagesToggle = useRef(null);
+
+  return (
+    <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"
+            triggerRef={viewBySystemsToggle}
+          >
+            <ToggleGroupItem
+              ref={viewBySystemsToggle}
+              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"
+            triggerRef={viewByImagesToggle}
+          >
+            <ToggleGroupItem
+              ref={viewByImagesToggle}
+              icon={<FontAwesomeImageIcon />}
+              aria-label="Bifrost"
+              isSelected={mainContent === pageContents.bifrost.key}
+              onChange={() => changeMainContent(pageContents.bifrost.key)}
+            />
+          </Tooltip>
+        </ToggleGroup>
+      </SplitItem>
+    </Split>
+  );
+};
 
 const InventoryPageHeader = (toggleProps) => {
   const isBifrostEnabled = useFeatureFlag('hbi.ui.bifrost');