fix: breaking change - sfbutton padding size (#2815) (#2829)

vuestorefront · Jun 29, 2023 · 33935c6 · 33935c6
1 parent a38f4e6
commit 33935c6
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/five-geese-serve.md b/.changeset/five-geese-serve.md
@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+Breaking Change - Padding size for square variant of SfButton changed
diff --git a/packages/sfui/frameworks/react/components/SfButton/SfButton.tsx b/packages/sfui/frameworks/react/components/SfButton/SfButton.tsx
@@ -17,7 +17,7 @@ const getSizeClasses = (size: SfButtonProps['size'], square: SfButtonProps['squa
     case SfButtonSize.sm:
       return [square ? 'p-1.5' : 'leading-5 text-sm py-1.5 px-3', 'gap-1.5'];
     case SfButtonSize.lg:
-      return [square ? 'p-4' : 'py-3 leading-6 px-6', 'gap-3'];
+      return [square ? 'p-3' : 'py-3 leading-6 px-6', 'gap-3'];
     default:
       return [square ? 'p-2' : 'py-2 leading-6 px-4', 'gap-2'];
   }

diff --git a/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue b/packages/sfui/frameworks/vue/components/SfButton/SfButton.vue
@@ -43,7 +43,7 @@ const sizeClasses = computed(() => {
     case SfButtonSize.sm:
       return [square.value ? 'p-1.5' : 'leading-5 text-sm py-1.5 px-3', 'gap-1.5'];
     case SfButtonSize.lg:
-      return [square.value ? 'p-4' : 'py-3 leading-6 px-6', 'gap-3'];
+      return [square.value ? 'p-3' : 'py-3 leading-6 px-6', 'gap-3'];
     default:
       return [square.value ? 'p-2' : 'py-2 leading-6 px-4', 'gap-2'];
   }