Refactor: Move MenuItemLeftSlot to MenuItemChildren prop

seek-oss · Dec 23, 2024 · 8cbe1b9 · 8cbe1b9
1 parent dccd24d
commit 8cbe1b9
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 67 deletions.
diff --git a/packages/braid-design-system/src/lib/components/MenuItem/MenuItem.tsx b/packages/braid-design-system/src/lib/components/MenuItem/MenuItem.tsx
@@ -10,7 +10,7 @@ export interface MenuItemProps
   extends Pick<UseMenuItemProps, 'tone' | 'onClick' | 'data' | 'id'> {
   children: ReactNode;
   badge?: MenuItemChildrenProps['badge'];
-  icon?: MenuItemChildrenProps['icon'];
+  icon?: MenuItemChildrenProps['leftSlot'];
 }
 export const MenuItem = ({
   children,
@@ -30,7 +30,7 @@ export const MenuItem = ({
 
   return (
     <Box {...menuItemProps} component="button" type="button">
-      <MenuItemChildren tone={tone} icon={icon} badge={badge}>
+      <MenuItemChildren tone={tone} leftSlot={icon} badge={badge}>
         {children}
       </MenuItemChildren>
     </Box>

diff --git a/packages/braid-design-system/src/lib/components/MenuItem/MenuItemLink.tsx b/packages/braid-design-system/src/lib/components/MenuItem/MenuItemLink.tsx
@@ -36,7 +36,7 @@ export const MenuItemLink = ({
       target={target}
       rel={rel}
     >
-      <MenuItemChildren tone={tone} icon={icon} badge={badge}>
+      <MenuItemChildren tone={tone} leftSlot={icon} badge={badge}>
         {children}
       </MenuItemChildren>
     </Box>

diff --git a/packages/braid-design-system/src/lib/components/MenuItem/useMenuItem.tsx b/packages/braid-design-system/src/lib/components/MenuItem/useMenuItem.tsx
@@ -174,51 +174,23 @@ export function useMenuItem<MenuItemElement extends HTMLElement>({
   } as const;
 }
 
-export function MenuItemLeftSlot({ children }: { children?: ReactNode }) {
-  const menuRendererContext = useContext(MenuRendererContext);
-  const size = menuRendererContext?.size;
-  const iconSpace = useBraidTheme().legacy ? 'small' : iconSlotSpace;
-
-  return (
-    <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>
-      ) : null}
-    </Box>
-  );
-}
-
 export interface MenuItemChildrenProps {
   children: ReactNode;
   tone: MenuItemTone;
   badge: ReactElement<BadgeProps> | undefined;
-  icon: ReactNode | undefined;
-  formElement?: boolean;
+  leftSlot: ReactNode | undefined;
+  isCheckbox?: boolean;
 }
 function MenuItemChildren({
-  icon,
+  leftSlot,
   tone,
   children,
   badge,
-  formElement = false,
+  isCheckbox = false,
 }: MenuItemChildrenProps) {
   const menuRendererContext = useContext(MenuRendererContext);
   const badgeSpace = useBraidTheme().legacy ? 'small' : badgeSlotSpace;
+  const iconSpace = useBraidTheme().legacy ? 'small' : iconSlotSpace;
 
   assert(
     menuRendererContext !== null,
@@ -235,15 +207,36 @@ function MenuItemChildren({
 
   return (
     <Box component="span" display="flex" alignItems="center" minWidth={0}>
-      {!formElement && (icon || reserveIconSpace) ? (
-        <MenuItemLeftSlot>
-          <Text
-            size={size}
-            tone={tone && tone === 'critical' ? tone : undefined}
+      {leftSlot || reserveIconSpace ? (
+        <Box
+          component="span"
+          position="relative"
+          display="flex"
+          alignItems="center"
+          paddingRight={iconSpace}
+        >
+          <Box
+            component="span"
+            display="block"
+            className={[iconSize({ size }), styles.menuItemLeftSlot]}
           >
-            {icon}
-          </Text>
-        </MenuItemLeftSlot>
+            &nbsp;
+          </Box>
+          {leftSlot ? (
+            <Box component="span" position="absolute">
+              {isCheckbox ? (
+                leftSlot
+              ) : (
+                <Text
+                  size={size}
+                  tone={tone && tone === 'critical' ? tone : undefined}
+                >
+                  {leftSlot}
+                </Text>
+              )}
+            </Box>
+          ) : null}
+        </Box>
       ) : null}
       <Box component="span" minWidth={0}>
         <Text

diff --git a/packages/braid-design-system/src/lib/components/MenuItemCheckbox/MenuItemCheckbox.tsx b/packages/braid-design-system/src/lib/components/MenuItemCheckbox/MenuItemCheckbox.tsx
@@ -2,7 +2,7 @@ import React, { type ReactNode } from 'react';
 import { Box } from '../Box/Box';
 import { IconTick } from '../icons/IconTick/IconTick';
 import type { MenuItemProps } from '../MenuItem/MenuItem';
-import { MenuItemLeftSlot, useMenuItem } from '../MenuItem/useMenuItem';
+import { useMenuItem } from '../MenuItem/useMenuItem';
 
 import * as styles from './MenuItemCheckbox.css';
 
@@ -37,34 +37,34 @@ export const MenuItemCheckbox = ({
       display="flex"
       alignItems="center"
     >
-      <MenuItemLeftSlot>
-        <Box
-          component="span"
-          borderRadius="standard"
-          boxShadow="borderField"
-          position="relative"
-          background={{ lightMode: 'surface' }}
-          flexShrink={0}
-          className={styles.checkboxSize}
-        >
+      <MenuItemChildren
+        tone={undefined}
+        leftSlot={
           <Box
             component="span"
-            position="absolute"
-            inset={0}
-            background="formAccent"
+            display="block"
             borderRadius="standard"
-            transition="fast"
-            opacity={checked ? undefined : 0}
+            boxShadow="borderField"
+            position="relative"
+            background={{ lightMode: 'surface' }}
+            flexShrink={0}
+            className={styles.checkboxSize}
           >
-            <IconTick size="fill" />
+            <Box
+              component="span"
+              position="absolute"
+              inset={0}
+              background="formAccent"
+              borderRadius="standard"
+              transition="fast"
+              opacity={checked ? undefined : 0}
+            >
+              <IconTick size="fill" />
+            </Box>
           </Box>
-        </Box>
-      </MenuItemLeftSlot>
-      <MenuItemChildren
-        tone={undefined}
-        icon={undefined}
+        }
         badge={badge}
-        formElement={true}
+        isCheckbox={true}
       >
         {children}
       </MenuItemChildren>