feat(Button): add variant list to button

rotki · Jan 2, 2024 · f4e0edf · f4e0edf
1 parent fd9974a
commit f4e0edf
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/buttons/button/Button.stories.ts b/src/components/buttons/button/Button.stories.ts
@@ -32,7 +32,7 @@ const meta: Meta<PropsAndLabel> = {
     color: { control: 'select', options: contextColors },
     variant: {
       control: 'select',
-      options: ['default', 'outlined', 'text', 'fab'],
+      options: ['default', 'outlined', 'text', 'fab', 'list'],
       table: { category: 'Shape' },
     },
     rounded: { control: 'boolean', table: { category: 'Shape' } },
@@ -196,6 +196,13 @@ export const ErrorOutlinedDisabled: Story = {
   },
 };
 
+export const List: Story = {
+  args: {
+    label: 'List',
+    variant: 'list',
+  },
+};
+
 export const FloatingActionButton: Story = {
   args: {
     label: 'Floating Action Button',

diff --git a/src/components/buttons/button/Button.vue b/src/components/buttons/button/Button.vue
@@ -8,7 +8,7 @@ export interface Props<T = undefined> {
   color?: ContextColorsType;
   rounded?: boolean;
   elevation?: number | string | null;
-  variant?: 'default' | 'outlined' | 'text' | 'fab';
+  variant?: 'default' | 'outlined' | 'text' | 'fab' | 'list';
   icon?: boolean;
   active?: boolean;
   size?: 'sm' | 'lg';
@@ -89,6 +89,7 @@ const slots = useSlots();
         [css._rounded]: rounded,
         [css.icon]: icon,
         [css.active]: active,
+        [css.text]: variant === 'list',
       },
     ]"
     :disabled="disabled || loading"
@@ -257,6 +258,10 @@ const slots = useSlots();
     }
   }
 
+  &.list {
+    @apply p-3 rounded-none w-full justify-start text-left;
+  }
+
   &.icon {
     @apply rounded-full px-3 py-3;