From fc270b9dbcb96248a37da7e1b491fe7c7c5e32eb Mon Sep 17 00:00:00 2001
From: Andreas Philippi <andreas.philippi@digitalservice.bund.de>
Date: Fri, 13 Sep 2024 11:15:02 +0200
Subject: [PATCH] fix(button): rename 'small' variant to 'normal'

The button size that was previously named 'small' actually is more like
the 'normal' size variant in PrimeVue. For this reason we decided to:

- Change the default button size from 'small' to 'normal'
- Change all styling that was previously applied for 'small' to be
  applied for 'normal' instead
- Drop the 'small' variant as we don't have designs for that yet

This leaves the option open to introduce a smaller button variant in the
future.
---
 src/primevue/button/button.stories.ts |  2 +-
 src/primevue/button/button.ts         | 31 ++++++++++++++++-----------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/primevue/button/button.stories.ts b/src/primevue/button/button.stories.ts
index 837163e..594a556 100644
--- a/src/primevue/button/button.stories.ts
+++ b/src/primevue/button/button.stories.ts
@@ -20,7 +20,7 @@ const meta: Meta<typeof PrimevueButton> = {
   },
 
   argTypes: {
-    size: { control: "select", options: ["small", "large"] },
+    size: { control: "select", options: [undefined, "large"] },
     severity: { control: "select", options: ["primary", "secondary"] },
   },
 };
diff --git a/src/primevue/button/button.ts b/src/primevue/button/button.ts
index 346afff..7cb46b6 100644
--- a/src/primevue/button/button.ts
+++ b/src/primevue/button/button.ts
@@ -18,26 +18,26 @@ const button: ButtonPassThroughOptions = {
     const primaryText = tw`border-2 border-transparent bg-transparent text-blue-800 underline hover:border-gray-500 hover:bg-white focus:border-gray-500 active:border-white active:bg-white disabled:bg-transparent disabled:text-gray-500`;
 
     // Sizes
-    const size = props.size ?? "small";
-    let small = tw`ris-body2-bold h-48 py-4`;
+    const size = props.size ?? "normal";
+    let normal = tw`ris-body2-bold h-48 py-4`;
     let large = tw`ris-body1-bold h-64 py-4`;
 
     // Icon only
     if (instance.hasIcon && !props.label) {
-      small = tw`${small} w-48 px-4`;
+      normal = tw`${normal} w-48 px-4`;
       large = tw`${large} w-64 px-4`;
     }
 
     // Label only or label + icon
     else {
-      small = tw`${small} px-16`;
+      normal = tw`${normal} px-16`;
       large = tw`${large} px-24`;
     }
 
     return {
       class: {
         [base]: true,
-        [small]: size === "small",
+        [normal]: size === "normal",
         [large]: size === "large",
         [primary]: !props.text && severity === "primary",
         [secondary]: !props.text && severity === "secondary",
@@ -53,13 +53,20 @@ const button: ButtonPassThroughOptions = {
     },
   }),
 
-  loadingIcon: ({ props }) => ({
-    class: {
-      [tw`animate-spin`]: true,
-      [tw`h-24 w-24`]: props.size === "large",
-      [tw`h-[1.34em] w-[1.34em]`]: !props.size || props.size === "small",
-    },
-  }),
+  loadingIcon: ({ props }) => {
+    // Size
+    const size = props.size ?? "normal";
+    const normal = tw`h-[1.34em] w-[1.34em]`;
+    const large = tw`h-24 w-24`;
+
+    return {
+      class: {
+        [tw`animate-spin`]: true,
+        [normal]: size === "normal",
+        [large]: size === "large",
+      },
+    };
+  },
 };
 
 export default button;