fix more styles

Author: jivey

src/components/Menu.stories.tsx

@@ -4,6 +4,10 @@ import { Info } from './svgs/Info';
 
 export const Default = () =>
   <>
+    <Menu buttonLabel="Menu">
+      <button>Example button</button>
+      <button>Another button</button>
+    </Menu>
     <Menu buttonLabel="Test menu" buttonIcon={Info}>
       <button>Example button</button>
       <button>Another button</button>

src/components/Menu.tsx

@@ -5,6 +5,12 @@ import { Button, ButtonProps, Dialog, DialogTrigger, Popover, PopoverProps } fro
 export const MenuButton = styled(Button)`
   border: none;
   background: none;
+  padding: 0;
+  min-height: 4.2rem;
+  min-width: 4.2rem;
+  display: inline-flex;
+  place-content: center;
+  align-items: center;
 `;
 
 export const MenuPopover = styled(Popover)`
@@ -16,7 +22,7 @@ export const MenuPopover = styled(Popover)`
 
 export interface MenuProps {
   buttonLabel: string;
-  buttonIcon: string | React.ReactNode;
+  buttonIcon?: string | React.ReactNode;
   buttonProps?: ButtonProps;
   popoverProps?: PopoverProps;
 }
@@ -25,8 +31,8 @@ export const Menu = ({ buttonLabel, buttonIcon, ...props }: React.PropsWithChild
   return (
     <DialogTrigger>
       <MenuButton aria-label={buttonLabel} {...props.buttonProps}>
-        {typeof buttonIcon === 'string' ?
-          <img aria-hidden='true' src={buttonIcon} alt='' /> : buttonIcon}
+        {buttonIcon ? (typeof buttonIcon === 'string' ?
+          <img aria-hidden='true' src={buttonIcon} alt='' /> : buttonIcon) : buttonLabel}
       </MenuButton>
       <MenuPopover {...props.popoverProps}>
         <Dialog>