From 172f667219edf19833f6e30943e207daab96bd32 Mon Sep 17 00:00:00 2001
From: Pier Francesco Ferrari <pierfrancesco@commercelayer.io>
Date: Thu, 9 Apr 2026 17:43:53 +0200
Subject: [PATCH] chore: remove dropdown arrow

---
 .../src/ui/composite/Dropdown/Dropdown.tsx    |  8 +-
 .../ui/composite/Dropdown/DropdownMenu.tsx    | 77 ++-----------------
 .../__snapshots__/Dropdown.test.tsx.snap      | 24 +-----
 3 files changed, 13 insertions(+), 96 deletions(-)

diff --git a/packages/app-elements/src/ui/composite/Dropdown/Dropdown.tsx b/packages/app-elements/src/ui/composite/Dropdown/Dropdown.tsx
index ffea9cc24..22eb66fd9 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/Dropdown.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/Dropdown.tsx
@@ -108,10 +108,10 @@ export const Dropdown: React.FC<DropdownProps> = ({
         // biome-ignore lint/a11y/useKeyWithClickEvents: Using click handler to close the dropdown
         <div
           className={cn("absolute z-30", {
-            "top-full mt-[5px] right-0": menuPosition === "bottom-right",
-            "top-full mt-[5px] left-0": menuPosition === "bottom-left",
-            "bottom-full mb-[5px] right-0": menuPosition === "top-right",
-            "bottom-full mb-[5px] left-0": menuPosition === "top-left",
+            "top-full mt-2 right-0": menuPosition === "bottom-right",
+            "top-full mt-2 left-0": menuPosition === "bottom-left",
+            "bottom-full mb-2 right-0": menuPosition === "top-right",
+            "bottom-full mb-2 left-0": menuPosition === "top-left",
           })}
           onClick={closeDropdownMenuIfButtonClicked}
         >
diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
index 5c6e30843..2056d4517 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
@@ -1,11 +1,14 @@
 import cn from "classnames"
-import { type FC, useEffect, useState } from "react"
+import type { FC } from "react"
 import { DropdownDivider } from "./DropdownDivider"
 
 export interface DropdownMenuProps extends React.HTMLAttributes<HTMLElement> {
   /** Menu content */
   children?: React.ReactNode
-  /** Set to `none` to hide the top arrow */
+  /**
+   * Set to `none` to hide the top arrow
+   * @deprecated We decided to remove the arrow from the dropdown menu
+   */
   arrow?: "none"
   /** Optional header for the dropdown menu */
   menuHeader?: string
@@ -28,18 +31,12 @@ export interface DropdownMenuProps extends React.HTMLAttributes<HTMLElement> {
 
 export const DropdownMenu: FC<DropdownMenuProps> = ({
   children,
-  arrow,
   menuHeader,
   menuPosition = "bottom-right",
   parentElementRef,
   menuWidth,
   ...rest
 }) => {
-  const [centerToWidth, setCenterToWidth] = useState<number>()
-  useEffect(() => {
-    setCenterToWidth(parentElementRef?.current?.clientWidth)
-  }, [parentElementRef])
-
   return (
     <div
       className={cn("flex", {
@@ -49,9 +46,6 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
         "flex-col-reverse items-start": menuPosition === "top-left",
       })}
     >
-      {arrow === "none" ? null : (
-        <Arrow menuPosition={menuPosition} centerToWidth={centerToWidth} />
-      )}
       <div
         {...rest}
         className={cn(
@@ -80,64 +74,3 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
 }
 
 DropdownMenu.displayName = "DropdownMenu"
-
-const Arrow: FC<{
-  menuPosition: DropdownMenuProps["menuPosition"]
-  centerToWidth?: number
-}> = ({ menuPosition = "bottom-right", centerToWidth }) => {
-  const arrowHeight = 5
-  const arrowWidth = 12
-
-  const centeringOffset = calculateArrowCenteringOffset({
-    arrowWidth,
-    centerToWidth,
-  })
-
-  const alignProp = menuPosition.includes("right") ? "right" : "left"
-  const arrowDirection =
-    menuPosition === "bottom-right" || menuPosition === "bottom-left"
-      ? "top"
-      : "bottom"
-  const cssForPointingDirection =
-    arrowDirection === "top"
-      ? {
-          borderBottomWidth: arrowHeight,
-          borderTopColor: "transparent",
-        }
-      : {
-          borderTopWidth: arrowHeight,
-          borderBottomColor: "transparent",
-        }
-
-  return (
-    <span
-      className="relative border-black border-l-transparent border-r-transparent"
-      style={{
-        // base styles
-        borderLeftWidth: arrowWidth / 2,
-        borderRightWidth: arrowWidth / 2,
-        ...cssForPointingDirection,
-        // keep the arrow centered on the dropdown button
-        [alignProp]: centeringOffset,
-      }}
-    />
-  )
-}
-
-// Calculate the offset for centering the arrow on the dropdown button when this does not excide 50px
-// This means that for smaller buttons (up to 50px) the arrow will be centered on the button
-// otherwise it will 10px from the left or right as design system
-function calculateArrowCenteringOffset({
-  arrowWidth,
-  centerToWidth,
-}: {
-  arrowWidth: number
-  centerToWidth?: number
-}): number {
-  if (centerToWidth == null || centerToWidth > 50) {
-    return 10 // default offset calculated on a base of 32px button width
-  }
-
-  const centeringOffset = centerToWidth / 2 - arrowWidth / 2
-  return centeringOffset
-}
diff --git a/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index f04595c6b..20bfa7876 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -25,15 +25,11 @@ exports[`Dropdown > Should be rendering bottom-left 1`] = `
       </svg>
     </button>
     <div
-      class="absolute z-30 top-full mt-[5px] left-0"
+      class="absolute z-30 top-full mt-2 left-0"
     >
       <div
         class="flex flex-col items-start"
       >
-        <span
-          class="relative border-black border-l-transparent border-r-transparent"
-          style="border-left-width: 6px; border-right-width: 6px; border-bottom-width: 5px; border-top-color: transparent; left: 10px;"
-        />
         <div
           class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
         >
@@ -70,15 +66,11 @@ exports[`Dropdown > Should be rendering top-left 1`] = `
       </svg>
     </button>
     <div
-      class="absolute z-30 bottom-full mb-[5px] left-0"
+      class="absolute z-30 bottom-full mb-2 left-0"
     >
       <div
         class="flex flex-col-reverse items-start"
       >
-        <span
-          class="relative border-black border-l-transparent border-r-transparent"
-          style="border-left-width: 6px; border-right-width: 6px; border-top-width: 5px; border-bottom-color: transparent; left: 10px;"
-        />
         <div
           class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
         >
@@ -115,15 +107,11 @@ exports[`Dropdown > Should be rendering top-right 1`] = `
       </svg>
     </button>
     <div
-      class="absolute z-30 bottom-full mb-[5px] right-0"
+      class="absolute z-30 bottom-full mb-2 right-0"
     >
       <div
         class="flex flex-col-reverse items-end"
       >
-        <span
-          class="relative border-black border-l-transparent border-r-transparent"
-          style="border-left-width: 6px; border-right-width: 6px; border-top-width: 5px; border-bottom-color: transparent; right: 10px;"
-        />
         <div
           class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
         >
@@ -160,15 +148,11 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
       </svg>
     </button>
     <div
-      class="absolute z-30 top-full mt-[5px] right-0"
+      class="absolute z-30 top-full mt-2 right-0"
     >
       <div
         class="flex flex-col items-end"
       >
-        <span
-          class="relative border-black border-l-transparent border-r-transparent"
-          style="border-left-width: 6px; border-right-width: 6px; border-bottom-width: 5px; border-top-color: transparent; right: 10px;"
-        />
         <div
           class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
         >