fix: simple menu with icon (#1758)

Author: madhurisandbhor

.changeset/beige-rings-destroy.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+simple menu with icon should work now as expected

docs/stories/SimpleMenu.mdx

@@ -24,6 +24,10 @@ import { SimpleMenu, MenuItem } from '@strapi/design-system';
 
 <Canvas of={SimpleMenuStories.Basic} />
 
+### With Icons
+
+<Canvas of={SimpleMenuStories.WithIcons} />
+
 ### Using Links & Routing Libraries
 
 By default you can define links in your menu by providing either the `isLink` or `isExternal` prop, the former infers an

docs/stories/SimpleMenu.stories.tsx

@@ -5,6 +5,9 @@ import { Bell } from '@strapi/icons';
 const meta: Meta<typeof SimpleMenu> = {
   title: 'Design System/Components/SimpleMenu',
   component: SimpleMenu,
+  parameters: {
+    chromatic: { disableSnapshot: false },
+  },
 };
 
 export default meta;
@@ -28,17 +31,16 @@ export const Basic = {
   name: 'basic',
 } satisfies Story;
 
-// export const WithIcons = {
-//   render: () => (
-//     // @ts-expect-error the as prop does not correctly infer props.
-//     <SimpleMenu aria-label="Notifications" icon={<Bell />}>
-//       <MenuItem onSelect={() => console.log('view notification')}>Your review has been requested!</MenuItem>
-//       <MenuItem onSelect={() => console.log('view notification')}>There was an error with your billing.</MenuItem>
-//     </SimpleMenu>
-//   ),
+export const WithIcons = {
+  render: () => (
+    <SimpleMenu label="Notifications" tag={IconButton} icon={<Bell />}>
+      <MenuItem onSelect={() => console.log('view notification')}>Your review has been requested!</MenuItem>
+      <MenuItem onSelect={() => console.log('view notification')}>There was an error with your billing.</MenuItem>
+    </SimpleMenu>
+  ),
 
-//   name: 'with icons',
-// } satisfies Story;
+  name: 'with icons',
+} satisfies Story;
 
 export const WithLinks = {
   render: () => (

packages/design-system/src/components/Breadcrumbs/CrumbSimpleMenu.tsx

@@ -14,11 +14,11 @@ const StyledButton = styled(SimpleMenu)`
   }
 `;
 
-export interface CrumbSimpleMenuProps extends SimpleMenuProps {
+export type CrumbSimpleMenuProps = SimpleMenuProps & {
   'aria-label': string;
   icon?: React.ReactElement;
   endIcon?: React.ReactNode;
-}
+};
 
 export const CrumbSimpleMenu = React.forwardRef<HTMLButtonElement, CrumbSimpleMenuProps>(
   ({ children, ...props }, forwardedRef) => (

packages/design-system/src/components/SimpleMenu/Menu.tsx

@@ -10,6 +10,7 @@ import { Flex, FlexComponent, FlexProps } from '../../primitives/Flex';
 import { Typography, TypographyComponent, TypographyProps } from '../../primitives/Typography';
 import { BaseLink } from '../BaseLink';
 import { Button, ButtonProps } from '../Button';
+import { IconButton } from '../IconButton';
 import { Link, LinkProps } from '../Link';
 
 /* -------------------------------------------------------------------------------------------------
@@ -24,23 +25,48 @@ const MenuRoot = DropdownMenu.Root;
  * MenuTrigger
  * -----------------------------------------------------------------------------------------------*/
 
-interface TriggerProps extends ButtonProps {}
+type TriggerPropsBase = Omit<ButtonProps, 'tag'> & {
+  endIcon?: React.ReactNode;
+  label?: React.ReactNode | string;
+};
+
+type TriggerPropsWithButton = TriggerPropsBase & {
+  tag?: typeof Button;
+  icon?: React.ReactNode;
+};
+
+type TriggerPropsWithIconButton = TriggerPropsBase & {
+  tag: typeof IconButton;
+  icon: React.ReactNode;
+};
+
+type TriggerProps = TriggerPropsWithButton | TriggerPropsWithIconButton;
 
 const MenuTrigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
-  ({ size, endIcon = <CaretDown width="0.6rem" height="0.4rem" aria-hidden />, ...props }, ref) => {
+  (
+    { label, size, endIcon = <CaretDown width="1.2rem" height="1.2rem" aria-hidden />, tag = Button, icon, ...rest },
+    ref,
+  ) => {
+    const props: ButtonProps = {
+      ...rest,
+      ref,
+      type: 'button',
+      variant: 'ghost',
+      paddingTop: size === 'S' ? 1 : 2,
+      paddingBottom: size === 'S' ? 1 : 2,
+      paddingLeft: size === 'S' ? 3 : 4,
+      paddingRight: size === 'S' ? 3 : 4,
+    };
+
     return (
       <DropdownMenu.Trigger asChild>
-        <Button
-          ref={ref}
-          type="button"
-          variant="ghost"
-          endIcon={endIcon}
-          paddingTop={size === 'S' ? 1 : 2}
-          paddingBottom={size === 'S' ? 1 : 2}
-          paddingLeft={size === 'S' ? 3 : 4}
-          paddingRight={size === 'S' ? 3 : 4}
-          {...props}
-        />
+        {tag === IconButton ? (
+          <IconButton label={label as string} {...props}>
+            {icon}
+          </IconButton>
+        ) : (
+          <Button endIcon={endIcon} {...props} />
+        )}
       </DropdownMenu.Trigger>
     );
   },
@@ -68,8 +94,6 @@ const MenuContent = React.forwardRef<HTMLDivElement, ContentProps>(
           <Viewport
             ref={ref}
             direction="column"
-            borderStyle="solid"
-            borderWidth="1px"
             borderColor="neutral150"
             hasRadius
             background="neutral0"

packages/design-system/src/components/SimpleMenu/SimpleMenu.test.tsx

@@ -15,7 +15,7 @@ const Component = ({ onClick = () => {}, ...restProps }: SimpleMenuProps) => (
   </SimpleMenu>
 );
 
-const render = (props: Partial<SimpleMenuProps> = {}) => renderRTL(<Component {...props} />);
+const render = (props: SimpleMenuProps = {}) => renderRTL(<Component {...props} />);
 
 describe('SimpleMenu', () => {
   it('should render only the trigger initially', () => {

packages/design-system/src/components/SimpleMenu/SimpleMenu.tsx

@@ -11,18 +11,16 @@ import * as Menu from './Menu';
  * SimpleMenu
  * -----------------------------------------------------------------------------------------------*/
 
-interface SimpleMenuProps
-  extends Omit<Menu.TriggerProps, 'children'>,
-    Pick<Menu.ContentProps, 'popoverPlacement' | 'intersectionId'> {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
-  onOpen?: () => void;
-  onClose?: () => void;
-  /**
-   * Callback function to be called when the popover reaches the end of the scrollable content
-   */
-  onReachEnd?: (entry: IntersectionObserverEntry) => void;
-}
+type SimpleMenuProps = Menu.TriggerProps &
+  Pick<Menu.ContentProps, 'popoverPlacement' | 'intersectionId'> & {
+    children?: React.ReactNode;
+    onOpen?: () => void;
+    onClose?: () => void;
+    /**
+     * Callback function to be called when the popover reaches the end of the scrollable content
+     */
+    onReachEnd?: (entry: IntersectionObserverEntry) => void;
+  };
 
 const SimpleMenu = React.forwardRef<HTMLButtonElement, SimpleMenuProps>(
   ({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }, forwardedRef) => {