fix: button

significa · Feb 28, 2023 · 5c93d6d · 5c93d6d · vercel · Feb 28, 2023
1 parent c1ad786
commit 5c93d6d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/lib/components/button.svelte b/src/lib/components/button.svelte
@@ -13,7 +13,7 @@
   };
   type Props = (Button | Anchor) & {
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success';
-    size?: 'sm' | 'md';
+    size?: 'md' | 'lg';
     loading?: boolean;
     icon?: IconOptions;
     arrow?: boolean;
@@ -81,6 +81,7 @@
   */
   .button {
     all: unset;
+    display: inline-flex;
     font-family: var(--font-family-sans);
 
     position: relative;
@@ -142,7 +143,7 @@
     }
 
     &.secondary {
-      --button-background-color: var(--color-background);
+      --button-background-color: transparent;
       --button-text-color: var(--color-foreground);
       --button-border-color: var(--color-border-subtle);
       --button-border-color-hover: var(--color-border-active);
@@ -165,13 +166,13 @@
       --button-outline-color: hsl(var(--color-success-hsl) / 0.3);
     }
 
-    &.sm {
+    &.md {
       --button-padding-inline: 20px;
       --button-height: 44px;
       --button-border-radius: var(--border-radius-md);
     }
 
-    &.md {
+    &.lg {
       --button-padding-inline: 24px;
       --button-height: 56px;
       --button-border-radius: var(--border-radius-lg);
@@ -213,6 +214,9 @@
   }
 
   .inner {
+    width: 100%;
+    box-sizing: border-box;
+
     display: inline-flex;
     align-items: center;
     justify-content: center;

diff --git a/src/stories/button.stories.ts b/src/stories/button.stories.ts
@@ -13,7 +13,7 @@ const meta = {
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md']
+      options: ['md', 'lg']
     },
     icon: {
       control: { type: 'select' },
@@ -50,8 +50,7 @@ export const Secondary: Story = {
 export const Ghost: Story = {
   args: {
     label: 'Hello world',
-    variant: 'ghost',
-    size: 'sm'
+    variant: 'ghost'
   }
 };
 
@@ -71,10 +70,10 @@ export const Success: Story = {
   }
 };
 
-export const Small: Story = {
+export const Large: Story = {
   args: {
     label: 'Hello world',
-    size: 'sm'
+    size: 'lg'
   }
 };