Ensure left slot spacing is consistent

seek-oss · Dec 18, 2024 · f5cd653 · f5cd653
1 parent da3ced3
commit f5cd653
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 45 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
@@ -173,6 +173,43 @@ export function useMenuItem<MenuItemElement extends HTMLElement>({
   } as const;
 }
 
+export function MenuItemLeftSlot({ children }: { children?: ReactNode }) {
+  const menuRendererContext = useContext(MenuRendererContext);
+
+  assert(
+    menuRendererContext !== null,
+    `MenuItem must be rendered as an immediate child of a menu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/MenuItem`,
+  );
+
+  const { size } = menuRendererContext;
+  const iconSpace = useBraidTheme().legacy ? 'small' : iconSlotSpace;
+  return (
+    <Box
+      component="span"
+      paddingRight={iconSpace}
+      flexShrink={0}
+      minWidth={0}
+      position="relative"
+    >
+      <Box component="span" display="block" className={iconSize({ size })}>
+        &nbsp;
+      </Box>
+      {children ? (
+        <Box
+          position="absolute"
+          left={0}
+          top={0}
+          bottom={0}
+          display="flex"
+          alignItems="center"
+        >
+          {children}
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
 export interface MenuItemChildrenProps {
   children: ReactNode;
   tone: MenuItemTone;
@@ -188,9 +225,7 @@ function MenuItemChildren({
   formElement = false,
 }: MenuItemChildrenProps) {
   const menuRendererContext = useContext(MenuRendererContext);
-  const legacy = useBraidTheme().legacy;
-  const iconSpace = legacy ? 'small' : iconSlotSpace;
-  const badgeSpace = legacy ? 'small' : badgeSlotSpace;
+  const badgeSpace = useBraidTheme().legacy ? 'small' : badgeSlotSpace;
 
   assert(
     menuRendererContext !== null,
@@ -205,28 +240,17 @@ function MenuItemChildren({
 
   const { size, reserveIconSpace } = menuRendererContext;
 
-  const leftSlot =
-    !formElement && (icon || reserveIconSpace) ? (
-      <Text size={size} tone={tone === 'critical' ? tone : undefined}>
-        {icon || (
-          <Box component="span" display="block" className={iconSize({ size })}>
-            &nbsp;
-          </Box>
-        )}
-      </Text>
-    ) : null;
-
   return (
     <Box component="span" display="flex" alignItems="center" minWidth={0}>
-      {leftSlot ? (
-        <Box
-          component="span"
-          paddingRight={iconSpace}
-          flexShrink={0}
-          minWidth={0}
-        >
-          {leftSlot}
-        </Box>
+      {!formElement && (icon || reserveIconSpace) ? (
+        <MenuItemLeftSlot>
+          <Text
+            size={size}
+            tone={tone && tone === 'critical' ? tone : undefined}
+          >
+            {icon}
+          </Text>
+        </MenuItemLeftSlot>
       ) : 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,9 +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 { useMenuItem } from '../MenuItem/useMenuItem';
-import { iconSlotSpace } from '../private/iconSlotSpace';
-import { useBraidTheme } from '../BraidProvider/BraidThemeContext';
+import { MenuItemLeftSlot, useMenuItem } from '../MenuItem/useMenuItem';
 
 import * as styles from './MenuItemCheckbox.css';
 
@@ -28,8 +26,6 @@ export const MenuItemCheckbox = ({
     data,
     id,
   });
-  const legacy = useBraidTheme().legacy;
-  const iconSpace = legacy ? 'xsmall' : iconSlotSpace;
 
   return (
     <Box
@@ -41,28 +37,29 @@ export const MenuItemCheckbox = ({
       display="flex"
       alignItems="center"
     >
-      <Box
-        component="span"
-        borderRadius="standard"
-        boxShadow="borderField"
-        position="relative"
-        background={{ lightMode: 'surface' }}
-        marginRight={iconSpace}
-        flexShrink={0}
-        className={styles.checkboxSize}
-      >
+      <MenuItemLeftSlot>
         <Box
           component="span"
-          position="absolute"
-          inset={0}
-          background="formAccent"
           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}