From ac7134a474fbc70c515bd42f995c7294e9763680 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Berardo=20Mate=CC=80?= <berardo@commercelayer.io>
Date: Thu, 9 Apr 2026 16:18:21 +0200
Subject: [PATCH 1/3] fix: improve dropdown & select

---
 packages/app-elements/src/styles/global.css   |  6 +--
 packages/app-elements/src/ui/atoms/Tag.tsx    |  4 +-
 .../ui/composite/Dropdown/DropdownDivider.tsx |  2 +-
 .../ui/composite/Dropdown/DropdownItem.tsx    |  4 +-
 .../ui/composite/Dropdown/DropdownMenu.tsx    |  8 ++--
 .../ui/composite/Dropdown/DropdownSearch.tsx  |  4 +-
 .../__snapshots__/Dropdown.test.tsx.snap      | 24 +++++-----
 .../src/ui/forms/InputSelect/styles.ts        | 46 ++++++++++---------
 8 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/packages/app-elements/src/styles/global.css b/packages/app-elements/src/styles/global.css
index fbbefa9df..6db9fa76a 100644
--- a/packages/app-elements/src/styles/global.css
+++ b/packages/app-elements/src/styles/global.css
@@ -9,9 +9,9 @@
   --breakpoint-xl: 1280px;
 
   --radius-*: initial;
-  --radius: 0.313rem;
-  --radius-sm: 0.188rem;
-  --radius-md: 0.625rem;
+  --radius: 0.5rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 1rem;
   --radius-full: 9999px;
 
   --color-*: initial;
diff --git a/packages/app-elements/src/ui/atoms/Tag.tsx b/packages/app-elements/src/ui/atoms/Tag.tsx
index f38dac872..ebba77ac5 100644
--- a/packages/app-elements/src/ui/atoms/Tag.tsx
+++ b/packages/app-elements/src/ui/atoms/Tag.tsx
@@ -103,8 +103,8 @@ export const Tag: FC<TagProps> = ({ icon, children, className, ...rest }) => {
       className={cn([
         className,
         "flex gap-2 items-center select-none",
-        "text-xs font-bold",
-        "py-[3px] px-2 rounded text-gray bg-gray-200",
+        "text-xs font-semibold",
+        "py-[3px] px-2 rounded-sm text-gray bg-gray-200",
         {
           "cursor-pointer hover:bg-gray-100  outline-primary-light": hasHover,
         },
diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx
index 0c354d6f7..8f77d45d4 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx
@@ -11,7 +11,7 @@ export const DropdownDivider: FC<DropdownDividerProps> = ({
 }) => {
   return (
     <div {...rest} className="h-px my-2">
-      <hr className="border-gray-600" />
+      <hr className="border-gray-200" />
     </div>
   )
 }
diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
index fe6eb6d13..5c38818ae 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx
@@ -61,14 +61,14 @@ export const DropdownItem = withSkeletonTemplate<DropdownItemProps>(
         }}
         href={href}
         className={cn(
-          "w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden!",
+          "w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden!",
           {
             "pr-8": info == null,
             "min-w-[250px] pr-6": info != null,
           },
           className,
           {
-            "hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group":
+            "hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group":
               onClick != null || href != null,
             "cursor-default": onClick == null && href == null,
             "opacity-50 pointer-events-none": isDisabled,
diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
index 5c6e30843..b62116297 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx
@@ -55,17 +55,17 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
       <div
         {...rest}
         className={cn(
-          "bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2",
+          "bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg",
           {
             "min-w-[150px] md:max-w-[250px]": menuWidth == null, // default width
-            "w-[280px]": menuWidth === "wide",
+            "w-70": menuWidth === "wide",
           },
         )}
       >
         {menuHeader != null && (
           <>
             <div
-              className="py-2 px-4 text-gray-400 text-xs font-semibold text-ellipsis overflow-hidden whitespace-nowrap"
+              className="py-2 px-6 text-gray-800 text-xs font-semibold text-ellipsis overflow-hidden whitespace-nowrap"
               title={menuHeader}
             >
               {menuHeader}
@@ -111,7 +111,7 @@ const Arrow: FC<{
 
   return (
     <span
-      className="relative border-black border-l-transparent border-r-transparent"
+      className="relative border-gray-200 border-l-transparent border-r-transparent"
       style={{
         // base styles
         borderLeftWidth: arrowWidth / 2,
diff --git a/packages/app-elements/src/ui/composite/Dropdown/DropdownSearch.tsx b/packages/app-elements/src/ui/composite/Dropdown/DropdownSearch.tsx
index 1f61f3ee6..d1b0c93e6 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/DropdownSearch.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/DropdownSearch.tsx
@@ -50,7 +50,7 @@ export const DropdownSearch = forwardRef<HTMLInputElement, DropdownSearchProps>(
     )
 
     return (
-      <div className="relative w-full" {...rest}>
+      <div className="relative mx-2 w-full" {...rest}>
         <Icon
           name="magnifyingGlass"
           weight="bold"
@@ -58,7 +58,7 @@ export const DropdownSearch = forwardRef<HTMLInputElement, DropdownSearchProps>(
         />
         <input
           className={cn(
-            "pl-10 pr-8 py-2 bg-transparent min-w-max font-semibold text-sm placeholder:text-gray-400 ring-0!",
+            "pl-10 pr-6 py-2 bg-transparent min-w-max font-semibold text-sm placeholder:text-gray-400 ring-0! rounded",
           )}
           placeholder={placeholder ?? t("common.search")}
           value={searchValue}
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..e103ba809 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
@@ -31,11 +31,11 @@ exports[`Dropdown > Should be rendering bottom-left 1`] = `
         class="flex flex-col items-start"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 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]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -76,11 +76,11 @@ exports[`Dropdown > Should be rendering top-left 1`] = `
         class="flex flex-col-reverse items-start"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 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]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -121,11 +121,11 @@ exports[`Dropdown > Should be rendering top-right 1`] = `
         class="flex flex-col-reverse items-end"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 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]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -166,15 +166,15 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
         class="flex flex-col items-end"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 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]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <button
             aria-label="Payments"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
@@ -200,7 +200,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
           </button>
           <button
             aria-label="Items"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
@@ -220,12 +220,12 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
             class="h-px my-2"
           >
             <hr
-              class="border-gray-600"
+              class="border-gray-200"
             />
           </div>
           <button
             aria-label="Delete"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
diff --git a/packages/app-elements/src/ui/forms/InputSelect/styles.ts b/packages/app-elements/src/ui/forms/InputSelect/styles.ts
index 5b66cc2bb..e8b9780de 100644
--- a/packages/app-elements/src/ui/forms/InputSelect/styles.ts
+++ b/packages/app-elements/src/ui/forms/InputSelect/styles.ts
@@ -9,10 +9,11 @@ export const getSelectStyles = (
   menu: (style) => ({
     ...style,
     zIndex: 100,
-    border: "1px solid rgb(230 231 231)",
-    borderRadius: 5,
-    boxShadow: "2px 2px 0 #f8f8f8;",
-    padding: "1px",
+    border: "1px solid #e5e5e5",
+    borderRadius: 8,
+    boxShadow:
+      "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);",
+    padding: "8px",
   }),
   menuList: (style) => ({
     ...style,
@@ -22,25 +23,18 @@ export const getSelectStyles = (
     ...style,
     padding: "0.375rem 1rem",
     backgroundColor: isSelected
-      ? "#EDEEEE"
+      ? "#f8f8f8"
       : isFocused
-        ? "#F8F8F8"
+        ? "#edeeee"
         : "transparent",
     color: isDisabled ? "#BBBEBE" : "rgb(40 41 41)",
     fontSize: 14,
     lineHeight: "20px",
-    fontWeight: isSelected ? 700 : 500,
+    fontWeight: isSelected ? 600 : 400,
     cursor: "pointer",
+    borderRadius: "8px",
     "&:active": {
-      backgroundColor: isSelected ? "#EDEEEE" : "rgb(248 248 248)",
-    },
-    "&:first-of-type": {
-      borderTopLeftRadius: 5,
-      borderTopRightRadius: 5,
-    },
-    "&:last-child": {
-      borderBottomLeftRadius: 5,
-      borderBottomRightRadius: 5,
+      backgroundColor: isSelected ? "#f8f8f8" : "rgb(248 248 248)",
     },
   }),
   noOptionsMessage: (style) => ({
@@ -58,8 +52,14 @@ export const getSelectStyles = (
   }),
   valueContainer: (style, { isMulti }) => ({
     ...style,
-    padding: isMulti ? "0.4375rem 1rem" : "0.5rem 1rem",
-    gap: "0.5rem",
+    padding: isMulti ? "0.4375rem 0.625rem" : "0.5rem 1rem",
+    gap: "0",
+    "> div[class^='flex']": {
+      marginRight: "6px",
+    },
+    "> div[class^='flex']:not(:has(~ div[class^='flex']))": {
+      marginRight: "0",
+    },
   }),
   singleValue: (style) => ({
     ...style,
@@ -92,7 +92,7 @@ export const getSelectStyles = (
       backgroundColor: "transparent",
     },
     "> button": {
-      borderRadius: "5px",
+      borderRadius: "8px",
     },
     "> button:focus-within": {
       color: "black",
@@ -109,22 +109,24 @@ export const getSelectStyles = (
       minHeight: "44px",
 
       outline: "none",
-      borderRadius: 5,
+      borderRadius: 8,
       cursor: "pointer",
     }
   },
-  placeholder: (style) => ({
+  placeholder: (style, { isMulti }) => ({
     ...style,
     margin: 0,
     fontSize: 14,
     lineHeight: "20px",
     fontWeight: 500,
     color: "#686E6E",
+    paddingLeft: isMulti ? "0.375rem" : "0",
   }),
-  input: (style) => ({
+  input: (style, { isMulti }) => ({
     ...style,
     margin: 0,
     padding: 0,
+    paddingLeft: isMulti ? "0.375rem" : "0",
     fontSize: 14,
     lineHeight: "20px",
     "& > input": {

From 1cb35c9d1329902ef695c8b92390b063f5a9fc79 Mon Sep 17 00:00:00 2001
From: Pier Francesco Ferrari <pierfrancesco@commercelayer.io>
Date: Wed, 8 Apr 2026 18:22:16 +0200
Subject: [PATCH 2/3] feat: enforce classnames of interactive elements

---
 packages/app-elements/src/ui/atoms/A.test.tsx |  8 ++--
 .../app-elements/src/ui/atoms/Button.test.tsx | 10 +++--
 .../ui/composite/Dropdown/Dropdown.test.tsx   |  2 +-
 .../__snapshots__/Dropdown.test.tsx.snap      |  8 ++--
 .../__snapshots__/index.test.tsx.snap         |  4 +-
 .../internals/InteractiveElement.className.ts | 45 +++++++++++++------
 .../ResourceLineItems.test.tsx.snap           | 14 +++---
 7 files changed, 57 insertions(+), 34 deletions(-)

diff --git a/packages/app-elements/src/ui/atoms/A.test.tsx b/packages/app-elements/src/ui/atoms/A.test.tsx
index 26ad50ca9..8a083f41b 100644
--- a/packages/app-elements/src/ui/atoms/A.test.tsx
+++ b/packages/app-elements/src/ui/atoms/A.test.tsx
@@ -54,7 +54,8 @@ describe("Anchor", () => {
         click me
       </A>,
     )
-    expect(getByRole("link").className).toContain("px-4 h-9")
+    expect(getByRole("link").className).toContain("h-9")
+    expect(getByRole("link").className).toContain("px-4")
   })
 
   it("Should render as size regular (default)", () => {
@@ -63,7 +64,8 @@ describe("Anchor", () => {
         click me
       </A>,
     )
-    expect(getByRole("link").className).toContain("px-4 h-10")
+    expect(getByRole("link").className).toContain("px-4")
+    expect(getByRole("link").className).toContain("h-10")
   })
 
   it("Should render with flex alignment", () => {
@@ -72,6 +74,6 @@ describe("Anchor", () => {
         click me
       </A>,
     )
-    expect(getByRole("link").className).toContain("flex gap-1 items-center")
+    expect(getByRole("link").className).toContain("inline")
   })
 })
diff --git a/packages/app-elements/src/ui/atoms/Button.test.tsx b/packages/app-elements/src/ui/atoms/Button.test.tsx
index 4c80d1547..17d4c381c 100644
--- a/packages/app-elements/src/ui/atoms/Button.test.tsx
+++ b/packages/app-elements/src/ui/atoms/Button.test.tsx
@@ -39,16 +39,20 @@ describe("Button", () => {
 
   it("Should render as size small", () => {
     const { getByRole } = render(<Button size="small">click me</Button>)
-    expect(getByRole("button").className).toContain("px-4 h-9")
+    expect(getByRole("button").className).toContain("px-4")
+    expect(getByRole("button").className).toContain("h-9")
   })
 
   it("Should render as size regular (default)", () => {
     const { getByRole } = render(<Button>click me</Button>)
-    expect(getByRole("button").className).toContain("px-4 h-10")
+    expect(getByRole("button").className).toContain("px-4")
+    expect(getByRole("button").className).toContain("h-10")
   })
 
   it("Should render with flex alignment", () => {
     const { getByRole } = render(<Button alignItems="center">click me</Button>)
-    expect(getByRole("button").className).toContain("flex gap-1 items-center")
+    expect(getByRole("button").className).toContain("inline-flex")
+    expect(getByRole("button").className).toContain("gap-1")
+    expect(getByRole("button").className).toContain("items-center")
   })
 })
diff --git a/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx b/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx
index 9d83ada08..3218c04c7 100644
--- a/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx
+++ b/packages/app-elements/src/ui/composite/Dropdown/Dropdown.test.tsx
@@ -33,7 +33,7 @@ describe("Dropdown", () => {
           <button
             aria-expanded="false"
             aria-haspopup="true"
-            class="font-medium whitespace-nowrap leading-5 rounded-[8px] inline-block text-center transition-opacity duration-500 px-4 h-10 text-[15px] button bg-black border border-black text-white hover:opacity-80"
+            class="font-medium whitespace-nowrap leading-5 inline-flex justify-center items-center gap-1 transition-opacity duration-500 button h-10 min-w-10 text-[15px] px-4 rounded-[8px] bg-black border border-black text-white hover:opacity-80"
           >
             Open dropdown
           </button>
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..40ae52338 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
@@ -8,7 +8,7 @@ exports[`Dropdown > Should be rendering bottom-left 1`] = `
     <button
       aria-expanded="true"
       aria-haspopup="true"
-      class="m-0 p-0 align-top no-underline! hover:underline! font-medium whitespace-nowrap leading-5 rounded-[8px] inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+      class="m-0 p-0 align-top no-underline! hover:underline! font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
     >
       open dropdown
       <svg
@@ -53,7 +53,7 @@ exports[`Dropdown > Should be rendering top-left 1`] = `
     <button
       aria-expanded="true"
       aria-haspopup="true"
-      class="m-0 p-0 align-top no-underline! hover:underline! font-medium whitespace-nowrap leading-5 rounded-[8px] inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+      class="m-0 p-0 align-top no-underline! hover:underline! font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
     >
       open dropdown
       <svg
@@ -98,7 +98,7 @@ exports[`Dropdown > Should be rendering top-right 1`] = `
     <button
       aria-expanded="true"
       aria-haspopup="true"
-      class="m-0 p-0 align-top no-underline! hover:underline! font-medium whitespace-nowrap leading-5 rounded-[8px] inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+      class="m-0 p-0 align-top no-underline! hover:underline! font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
     >
       open dropdown
       <svg
@@ -143,7 +143,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
     <button
       aria-expanded="true"
       aria-haspopup="true"
-      class="m-0 p-0 align-top no-underline! hover:underline! font-medium whitespace-nowrap leading-5 rounded-[8px] inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+      class="m-0 p-0 align-top no-underline! hover:underline! font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
     >
       open dropdown
       <svg
diff --git a/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap b/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap
index 15287517b..770c6fdb0 100644
--- a/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap
+++ b/packages/app-elements/src/ui/forms/RuleEngine/__snapshots__/index.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`RuleEngine > renders empty without any error 1`] = `
                 class="min-h-[49px] flex items-center"
               >
                 <button
-                  class="mx-4 font-medium whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-4 h-10 p-1! text-[15px] button bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
+                  class="mx-4 font-medium whitespace-nowrap leading-5 inline-flex justify-center items-center gap-1 transition-opacity duration-500 button h-10 min-w-10 text-[15px] bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
                 >
                   <svg
                     class="shrink-0"
@@ -45,7 +45,7 @@ exports[`RuleEngine > renders empty without any error 1`] = `
               class="grow flex justify-end"
             >
               <button
-                class="font-medium whitespace-nowrap leading-5 inline-block text-center transition-opacity duration-500 px-4 h-10 p-1! text-[15px] button bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
+                class="font-medium whitespace-nowrap leading-5 inline-flex justify-center items-center gap-1 transition-opacity duration-500 button h-10 min-w-10 text-[15px] bg-white text-black hover:opacity-80 hover:bg-gray-50 rounded-full"
               >
                 <svg
                   fill="currentColor"
diff --git a/packages/app-elements/src/ui/internals/InteractiveElement.className.ts b/packages/app-elements/src/ui/internals/InteractiveElement.className.ts
index d958b1f98..78055f290 100644
--- a/packages/app-elements/src/ui/internals/InteractiveElement.className.ts
+++ b/packages/app-elements/src/ui/internals/InteractiveElement.className.ts
@@ -29,6 +29,7 @@ export interface InteractiveElementProps {
   fullWidth?: boolean
   /**
    * Flex content alignment with a standard gap
+   * @deprecated This prop is actually useless as we always have centered items inside buttons.
    */
   alignItems?: "center"
   /**
@@ -38,7 +39,6 @@ export interface InteractiveElementProps {
 }
 
 export function getInteractiveElementClassName({
-  alignItems,
   children,
   disabled,
   fullWidth,
@@ -57,33 +57,50 @@ export function getInteractiveElementClassName({
   return cn([
     `font-medium whitespace-nowrap leading-5`,
     {
+      // Button-like behaviors (non links)
+      "inline-flex justify-center items-center gap-1": variant !== "link",
+      "!justify-start": variant === "input",
+      "transition-opacity duration-500": variant !== "link",
+      button: variant !== "link",
+      [`${getSizeCss(size)}`]: variant !== "link",
+      [`${getFontSizeCss(size)}`]: variant !== "link",
+      [`${getPaddingCss(size)}`]: !isIcon && variant !== "link",
+      // Link-like behaviors
+      "inline w-fit underline": variant === "link",
+      // Shared behaviors
       "rounded-[8px]": variant !== "circle" && variant !== "input",
       "opacity-50 pointer-events-none touch-none": disabled,
       "w-full": fullWidth === true && variant !== "link",
-      "inline-flex gap-1": alignItems != null,
-      "items-center justify-center": alignItems === "center",
-      "inline w-fit underline": variant === "link",
-      "inline-block": variant !== "link" && alignItems == null,
-      [`text-center transition-opacity duration-500 ${getSizeCss(size)}`]:
-        variant !== "link",
-      "p-2.5!": isIcon && variant !== "circle" && variant !== "link",
-      "p-1!": isIcon && variant === "circle",
-      [`${getFontSizeCss(size)}`]: variant !== "link",
-      button: variant !== "link",
     },
     getVariantCss(variant),
   ])
 }
 
+function getPaddingCss(
+  size: InteractiveElementProps["size"],
+): string | undefined {
+  if (size == null) {
+    return undefined
+  }
+
+  const mapping = {
+    mini: "px-2.5",
+    small: "px-4",
+    regular: "px-4",
+  } satisfies Record<NonNullable<InteractiveElementProps["size"]>, string>
+
+  return mapping[size]
+}
+
 function getSizeCss(size: InteractiveElementProps["size"]): string | undefined {
   if (size == null) {
     return undefined
   }
 
   const mapping = {
-    mini: "px-2.5 h-[30px]",
-    small: "px-4 h-9",
-    regular: "px-4 h-10",
+    mini: "h-[30px] min-w-[30px]",
+    small: "h-9 min-w-9",
+    regular: "h-10 min-w-10",
   } satisfies Record<NonNullable<InteractiveElementProps["size"]>, string>
 
   return mapping[size]
diff --git a/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap b/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
index bf7e28c40..96d28b212 100644
--- a/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
+++ b/packages/app-elements/src/ui/resources/ResourceLineItems/__snapshots__/ResourceLineItems.test.tsx.snap
@@ -156,7 +156,7 @@ exports[`ResourceLineItems > should disable the remove action when \`onSwap\` is
               >
                 <button
                   aria-label="common.swap"
-                  class="font-medium whitespace-nowrap leading-5 rounded-[8px] inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"
@@ -182,7 +182,7 @@ exports[`ResourceLineItems > should disable the remove action when \`onSwap\` is
                 >
                   <button
                     aria-label="common.remove"
-                    class="font-medium whitespace-nowrap leading-5 rounded-[8px] opacity-50 pointer-events-none touch-none inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                    class="font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] opacity-50 pointer-events-none touch-none font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                     disabled=""
                   >
                     <svg
@@ -594,7 +594,7 @@ exports[`ResourceLineItems > should render the InputSpinner and the trash icon w
               >
                 <button
                   aria-label="common.remove"
-                  class="font-medium whitespace-nowrap leading-5 rounded-[8px] inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"
@@ -1268,7 +1268,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
               >
                 <button
                   aria-label="common.swap"
-                  class="font-medium whitespace-nowrap leading-5 rounded-[8px] inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"
@@ -1289,7 +1289,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
                 </button>
                 <button
                   aria-label="common.remove"
-                  class="font-medium whitespace-nowrap leading-5 rounded-[8px] inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"
@@ -1527,7 +1527,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
               >
                 <button
                   aria-label="common.swap"
-                  class="font-medium whitespace-nowrap leading-5 rounded-[8px] inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"
@@ -1548,7 +1548,7 @@ exports[`ResourceLineItems > should render the swap action when \`onSwap\` is de
                 </button>
                 <button
                   aria-label="common.remove"
-                  class="font-medium whitespace-nowrap leading-5 rounded-[8px] inline-flex gap-1 items-center justify-center inline w-fit underline font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
+                  class="font-medium whitespace-nowrap leading-5 inline w-fit underline rounded-[8px] font-semibold text-primary hover:text-primary-light border-primary-light cursor-pointer"
                 >
                   <svg
                     fill="currentColor"

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 3/3] 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]"
         >