feat: add divider to radixMenuItemRenderProps

AirLabsTeam · Dec 15, 2021 · 34a8c5d · 34a8c5d
1 parent 88e4c1c
commit 34a8c5d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/zephyr/src/RadixMenu/components/RadixMenuItem.tsx b/packages/zephyr/src/RadixMenu/components/RadixMenuItem.tsx
@@ -15,7 +15,8 @@ import { RadixMenuItemDivider } from './RadixMenuItemDivider';
 export type RadixMenuItemRenderProps =
   | { children: ReactNode }
   | { label: ReactNode; description?: ReactNode }
-  | { title: string };
+  | { title: string }
+  | { divider: boolean };
 
 export type RadixMenuItemProps = Pick<BoxProps, 'tx' | 'id' | 'onClick'> & {
   /**
@@ -234,8 +235,7 @@ export const RadixMenuItem = memo(
       return (
         <Text
           tx={{
-            marginTop: 10,
-            marginBottom: 8,
+            marginY: 8,
             paddingX: size === 'small' ? 6 : 8,
             color: 'pigeon500',
             fontWeight: 'bold',
@@ -251,6 +251,8 @@ export const RadixMenuItem = memo(
       );
     }
 
+    if ('divider' in renderProps) return <RadixMenuItemDivider tx={{ my: 0 }} />;
+
     if (!!subOptions && subOptions.length) {
       return (
         <Box tx={menuItemStyle}>

diff --git a/packages/zephyr/src/RadixMenu/components/RadixMenuItemDivider.tsx b/packages/zephyr/src/RadixMenu/components/RadixMenuItemDivider.tsx
@@ -3,13 +3,14 @@ import { Separator } from '@radix-ui/react-dropdown-menu';
 
 import { Box } from '../../Box';
 import { MenuVariantName } from '../../theme/variants/menus';
+import { BoxProps } from '../..';
 
-export interface RadixMenuItemDividerProps {
+export interface RadixMenuItemDividerProps extends Pick<BoxProps, 'tx'> {
   isTop?: boolean;
   variant?: MenuVariantName;
 }
 
-export const RadixMenuItemDivider = memo(({ isTop, variant }: RadixMenuItemDividerProps) => {
+export const RadixMenuItemDivider = memo(({ isTop, variant, tx }: RadixMenuItemDividerProps) => {
   return (
     <Box
       as={Separator as FC<Omit<ComponentProps<typeof Separator>, 'as' | 'ref'>>}
@@ -19,6 +20,7 @@ export const RadixMenuItemDivider = memo(({ isTop, variant }: RadixMenuItemDivid
         border: 0,
         mt: isTop ? 0 : 8,
         mb: 8,
+        ...tx,
       }}
     />
   );