support button children in DropdownMenu component

lyytioy · Sep 25, 2023 · 89ac51f · 89ac51f
1 parent db2bdfe
commit 89ac51f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
@@ -9,7 +9,7 @@ import { TypographyProps } from './Typography';
 export interface DropdownProps {
   title: string;
   onSelect: (clickedItem: number) => void;
-  items: Array<{ id: number; title: string; icon?: any; menuItemProps?: Partial<MenuItemProps>  }>;
+  items: Array<{ id: number; title: string; icon?: any; menuItemProps?: Partial<MenuItemProps> }>;
   buttonProps?: Partial<ButtonProps>;
   subtitle?: string;
   menuItemProps?: Partial<MenuItemProps>;
@@ -38,6 +38,8 @@ const DropdownMenu = (props: DropdownProps): JSX.Element => {
     handleClose();
   };
 
+  console.log({ ch: props.buttonProps?.children });
+
   return (
     <>
       <Button
@@ -46,9 +48,15 @@ const DropdownMenu = (props: DropdownProps): JSX.Element => {
         onClick={handleClick}
         {...props.buttonProps}
       >
-        {props.title}
+        {props.buttonProps?.children || props.title}
       </Button>
-      <Menu id="menu-list-grow" anchorEl={anchorEl} open={open} onClose={handleClose} {...props.menuProps}>
+      <Menu
+        id="menu-list-grow"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        {...props.menuProps}
+      >
         {props.subtitle && (
           <ListItemText primaryTypographyProps={{ ...props.textProps }} sx={{ pl: 1.5, pb: 0.5 }}>
             {props.subtitle}

diff --git a/stories/Navigation/DropdownMenu.stories.tsx b/stories/Navigation/DropdownMenu.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 import DropdownMenu, { DropdownProps } from '../../src/components/DropdownMenu';
-import { Calendar, ChevronDown, Radio, Rectangle } from '../../src/icons';
+import { Calendar, ChevronDown, LayoutRows, Radio, Rectangle } from '../../src/icons';
 
 export default {
   title: 'Components/Navigation/Menu',
@@ -47,3 +47,12 @@ DropdownIcons.args = {
   menuItemProps: { sx: { py: 1.5, pl: 3 } },
   textProps: { color: 'primary' },
 };
+
+export const DropdownButtonPropsChildren = Template.bind({});
+DropdownButtonPropsChildren.args = {
+  items: menuItems2,
+  buttonProps: {
+    variant: 'icon',
+    children: <LayoutRows />,
+  },
+};