DS ButtonMenu - possibilité d'affichage d'une flèche sur le bouton de trigger

Author: cparthur

packages/ui/src/design-system/Button/ButtonMenu.stories.tsx

@@ -1,11 +1,10 @@
-import {Meta, StoryObj} from '@storybook/nextjs';
+import { Meta, StoryObj } from '@storybook/nextjs';
 
-import {ButtonMenu} from './ButtonMenu';
-import {useState} from 'react';
+import { useState } from 'react';
+import { ButtonMenu } from './ButtonMenu';
 
 const meta: Meta<typeof ButtonMenu> = {
   component: ButtonMenu,
-  argTypes: {},
   args: {
     icon: 'equalizer-fill',
     children: (
@@ -23,18 +22,18 @@ export default meta;
 type Story = StoryObj<typeof ButtonMenu>;
 
 export const Default: Story = {
-  render: args => {
+  render: (args) => {
     return (
       <div className="flex gap-24 justify-between mb-52">
         <ButtonMenu {...args} menuPlacement="bottom-start" />
-        <ButtonMenu {...args} notification={{number: 2}} />
+        <ButtonMenu {...args} notification={{ number: 2 }} />
       </div>
     );
   },
 };
 
 export const Controlled: Story = {
-  render: args => {
+  render: (args) => {
     const [isOpen, setIsOpen] = useState(false);
     return (
       <div className="mb-52">
@@ -50,3 +49,13 @@ export const Controlled: Story = {
     );
   },
 };
+
+export const WithArrow: Story = {
+  render: (args) => {
+    return (
+      // <div className="flex gap-24 justify-between mb-52">
+      // </div>
+      <ButtonMenu {...args} text="Button Menu" withArrow />
+    );
+  },
+};

packages/ui/src/design-system/Button/ButtonMenu.tsx

@@ -15,6 +15,8 @@ import {
 import { cloneElement, useState } from 'react';
 import { flushSync } from 'react-dom';
 
+import { Icon } from '@/ui';
+import classNames from 'classnames';
 import { OpenState } from '../../utils/types';
 import { Button } from './Button';
 import { ButtonProps } from './types';
@@ -24,10 +26,14 @@ export type ButtonMenuProps = {
   children: React.ReactNode;
   /** Placement du menu pour l'élément floating-ui */
   menuPlacement?: Placement;
+  /** Classe CSS à appliquer au container du menu */
+  menuContainerClassName?: string;
   /** Rend le composant controllable */
   openState?: OpenState;
   /** Permet de donner un text au bouton d'ouverture car children est déjà utilisé pour le contenu du menu */
   text?: string;
+  /** Affiche une flèche signalant l'ouverture du menu */
+  withArrow?: boolean;
 } & ButtonProps;
 
 /**
@@ -40,6 +46,8 @@ export const ButtonMenu = ({
   openState,
   children,
   text,
+  withArrow,
+  menuContainerClassName,
   ...props
 }: ButtonMenuProps) => {
   const isControlled = !!openState;
@@ -90,7 +98,25 @@ export const ButtonMenu = ({
   return (
     <>
       {cloneElement(
-        <Button {...props} children={text} />,
+        <Button
+          {...props}
+          children={
+            text || withArrow ? (
+              <>
+                {text && <span className="line-clamp-1">{text}</span>}
+                {withArrow && (
+                  <Icon
+                    icon="arrow-down-s-line"
+                    size="sm"
+                    className={classNames('ml-2 transition-all', {
+                      'rotate-180': isOpen,
+                    })}
+                  />
+                )}
+              </>
+            ) : undefined
+          }
+        />,
         getReferenceProps({
           ref: refs.setReference,
         })
@@ -107,8 +133,10 @@ export const ButtonMenu = ({
                   left: x,
                   maxHeight: maxHeight - 16,
                 },
-                className:
+                className: classNames(
                   'relative z-[1] overflow-y-auto bg-white rounded-b-lg border border-grey-4 rounded-lg shadow-card',
+                  menuContainerClassName
+                ),
               })}
             >
               {children}