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] 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 26ad50ca..8a083f41 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 4c80d154..17d4c381 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 9d83ada0..3218c04c 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 f04595c6..40ae5233 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 15287517..770c6fdb 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 d958b1f9..78055f29 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 bf7e28c4..96d28b21 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"