From 89ac51fa0929180c33ebb1b077b8538fbe96d1be Mon Sep 17 00:00:00 2001
From: Grzegorz Bach <g.bach90@gmail.com>
Date: Mon, 25 Sep 2023 14:55:15 +0200
Subject: [PATCH] support button children in DropdownMenu component

---
 src/components/DropdownMenu.tsx             | 14 +++++++++++---
 stories/Navigation/DropdownMenu.stories.tsx | 11 ++++++++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
index aefd4d17f..d3909e74f 100644
--- 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
index 80284c35d..a12c331a3 100644
--- 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 />,
+  },
+};