From 89b1190bb474825cfd9ba7ce267adc264d6700b2 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 21 Aug 2025 11:52:19 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20arrow=20toggle=20op?=
 =?UTF-8?q?tion=20to=20Popover=20primitive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Allow enabling/disabling arrow graphics in Popover component to create
more modular and flexible primitive.

Provides greater design flexibility by making arrow display optional,
enabling different visual presentations based on specific use cases.
---
 src/frontend/src/primitives/Popover.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/primitives/Popover.tsx b/src/frontend/src/primitives/Popover.tsx
index 467c7669..6e09231c 100644
--- a/src/frontend/src/primitives/Popover.tsx
+++ b/src/frontend/src/primitives/Popover.tsx
@@ -69,6 +69,7 @@ const StyledOverlayArrow = styled(OverlayArrow, {
 export const Popover = ({
   children,
   variant = 'light',
+  withArrow = true,
   ...dialogProps
 }: {
   children: [
@@ -78,17 +79,20 @@ export const Popover = ({
       | ReactNode,
   ]
   variant?: 'dark' | 'light'
+  withArrow?: boolean
 } & DialogProps) => {
   const [trigger, popoverContent] = children
   return (
     <DialogTrigger>
       {trigger}
       <StyledPopover>
-        <StyledOverlayArrow variant={variant}>
-          <svg width={12} height={12} viewBox="0 0 12 12">
-            <path d="M0 0 L6 6 L12 0" />
-          </svg>
-        </StyledOverlayArrow>
+        {withArrow && (
+          <StyledOverlayArrow variant={variant}>
+            <svg width={12} height={12} viewBox="0 0 12 12">
+              <path d="M0 0 L6 6 L12 0" />
+            </svg>
+          </StyledOverlayArrow>
+        )}
         <Dialog {...dialogProps}>
           {({ close }) => (
             <Box size="sm" type="popover" variant={variant}>