From ae7795508a9a737129b368c44b25cd5b00467f02 Mon Sep 17 00:00:00 2001
From: Felix Habib <fhabib@seek.com.au>
Date: Mon, 23 Dec 2024 14:26:02 +1100
Subject: [PATCH] Refactor

---
 .../lib/components/MenuItem/useMenuItem.tsx   | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/braid-design-system/src/lib/components/MenuItem/useMenuItem.tsx b/packages/braid-design-system/src/lib/components/MenuItem/useMenuItem.tsx
index 4c532448712..af5a01c65b5 100644
--- a/packages/braid-design-system/src/lib/components/MenuItem/useMenuItem.tsx
+++ b/packages/braid-design-system/src/lib/components/MenuItem/useMenuItem.tsx
@@ -26,7 +26,6 @@ import { iconSlotSpace } from '../private/iconSlotSpace';
 import { badgeSlotSpace } from '../private/badgeSlotSpace';
 import { virtualTouchable } from '../private/touchable/virtualTouchable.css';
 import { DefaultBadgePropsProvider } from '../Badge/defaultBadgeProps';
-import { Inline } from '../Inline/Inline';
 
 const {
   MENU_ITEM_UP,
@@ -181,19 +180,25 @@ export function MenuItemLeftSlot({ children }: { children?: ReactNode }) {
   const iconSpace = useBraidTheme().legacy ? 'small' : iconSlotSpace;
 
   return (
-    <Box position="relative" paddingRight={iconSpace}>
-      <Inline component="span" alignY="center" space="none">
-        <Box className={styles.menuItemLeftSlot}>
-          <Box component="span" display="block" className={iconSize({ size })}>
-            &nbsp;
-          </Box>
+    <Box
+      component="span"
+      position="relative"
+      display="flex"
+      alignItems="center"
+      paddingRight={iconSpace}
+    >
+      <Box
+        component="span"
+        display="block"
+        className={[iconSize({ size }), styles.menuItemLeftSlot]}
+      >
+        &nbsp;
+      </Box>
+      {children ? (
+        <Box component="span" position="absolute" display="flex">
+          {children}
         </Box>
-        {children ? (
-          <Box position="absolute" display="flex">
-            {children}
-          </Box>
-        ) : null}
-      </Inline>
+      ) : null}
     </Box>
   );
 }
@@ -229,7 +234,7 @@ function MenuItemChildren({
   const { size, reserveIconSpace } = menuRendererContext;
 
   return (
-    <Inline component="span" alignY="center" space="none">
+    <Box component="span" display="flex" alignItems="center" minWidth={0}>
       {!formElement && (icon || reserveIconSpace) ? (
         <MenuItemLeftSlot>
           <Text
@@ -259,6 +264,6 @@ function MenuItemChildren({
           <DefaultBadgePropsProvider bleedY>{badge}</DefaultBadgePropsProvider>
         </Box>
       ) : null}
-    </Inline>
+    </Box>
   );
 }