feat: update based on review

rotki · Jul 11, 2023 · 7c7ccf1 · 7c7ccf1
1 parent e5c8323
commit 7c7ccf1
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 32 deletions.
diff --git a/example/src/views/HomeView.vue b/example/src/views/HomeView.vue
@@ -143,25 +143,55 @@ const buttons = ref([
   { clicks: 0, color: 'info', disabled: true, rounded: true },
   { clicks: 0, color: 'success', disabled: true, rounded: true },
 
-  { clicks: 0, color: 'primary', fab: true },
-  { clicks: 0, color: 'secondary', fab: true },
-  { clicks: 0, color: 'error', fab: true },
-  { clicks: 0, color: 'warning', fab: true },
-  { clicks: 0, color: 'info', fab: true },
-  { clicks: 0, color: 'success', fab: true },
+  { clicks: 0, color: 'primary', variant: 'fab' },
+  { clicks: 0, color: 'secondary', variant: 'fab' },
+  { clicks: 0, color: 'error', variant: 'fab' },
+  { clicks: 0, color: 'warning', variant: 'fab' },
+  { clicks: 0, color: 'info', variant: 'fab' },
+  { clicks: 0, color: 'success', variant: 'fab' },
 
-  { clicks: 0, color: 'primary', fab: true, icon: true, iconName: 'add-fill' },
+  {
+    clicks: 0,
+    color: 'primary',
+    variant: 'fab',
+    icon: true,
+    iconName: 'add-fill',
+  },
   {
     clicks: 0,
     color: 'secondary',
-    fab: true,
+    variant: 'fab',
+    icon: true,
+    iconName: 'add-fill',
+  },
+  {
+    clicks: 0,
+    color: 'error',
+    variant: 'fab',
+    icon: true,
+    iconName: 'add-fill',
+  },
+  {
+    clicks: 0,
+    color: 'warning',
+    variant: 'fab',
+    icon: true,
+    iconName: 'add-fill',
+  },
+  {
+    clicks: 0,
+    color: 'info',
+    variant: 'fab',
+    icon: true,
+    iconName: 'add-fill',
+  },
+  {
+    clicks: 0,
+    color: 'success',
+    variant: 'fab',
     icon: true,
     iconName: 'add-fill',
   },
-  { clicks: 0, color: 'error', fab: true, icon: true, iconName: 'add-fill' },
-  { clicks: 0, color: 'warning', fab: true, icon: true, iconName: 'add-fill' },
-  { clicks: 0, color: 'info', fab: true, icon: true, iconName: 'add-fill' },
-  { clicks: 0, color: 'success', fab: true, icon: true, iconName: 'add-fill' },
 
   {
     clicks: 0,

diff --git a/src/components/buttons/Button.spec.ts b/src/components/buttons/Button.spec.ts
@@ -44,13 +44,15 @@ describe('Button', () => {
     expect(wrapper.find('button').classes()).toMatch(/_success_/);
   });
 
-  it('passes outlined props', async () => {
+  it('passes variant props', async () => {
     const wrapper = createWrapper();
     expect(wrapper.find('button').classes()).not.toMatch(/_outlined_/);
     await wrapper.setProps({ variant: 'outlined' });
     expect(wrapper.find('button').classes()).toMatch(/_outlined_/);
     await wrapper.setProps({ variant: 'text' });
     expect(wrapper.find('button').classes()).toMatch(/_text_/);
+    await wrapper.setProps({ variant: 'fab' });
+    expect(wrapper.find('button').classes()).toMatch(/_fab_/);
   });
 
   it('passes rounded props', async () => {
@@ -62,15 +64,6 @@ describe('Button', () => {
     expect(wrapper.find('button').classes()).not.toMatch(/_rounded_/);
   });
 
-  it('passes fab props', async () => {
-    const wrapper = createWrapper();
-    expect(wrapper.find('button').classes()).not.toMatch(/_fab_/);
-    await wrapper.setProps({ fab: true });
-    expect(wrapper.find('button').classes()).toMatch(/_fab_/);
-    await wrapper.setProps({ fab: false });
-    expect(wrapper.find('button').classes()).not.toMatch(/_fab_/);
-  });
-
   it('passes icon props', async () => {
     const wrapper = createWrapper();
     expect(wrapper.find('button').classes()).not.toMatch(/_icon_/);

diff --git a/src/components/buttons/Button.stories.ts b/src/components/buttons/Button.stories.ts
@@ -22,12 +22,11 @@ const meta: Meta<typeof Button> = {
     color: { control: 'select', options: contextColors },
     variant: {
       control: 'select',
-      options: ['default', 'outlined', 'text'],
+      options: ['default', 'outlined', 'text', 'fab'],
       table: { category: 'Shape' },
     },
     rounded: { control: 'boolean', table: { category: 'Shape' } },
     elevation: { control: 'number', table: { category: 'Shape' } },
-    fab: { control: 'boolean', table: { category: 'Shape' } },
     icon: { control: 'boolean', table: { category: 'Shape' } },
     sm: { control: 'boolean', table: { category: 'Size' } },
     lg: { control: 'boolean', table: { category: 'Size' } },
@@ -180,9 +179,9 @@ export const ErrorOutlinedDisabled = {
 
 export const FloatingActionButton = {
   args: {
-    label: 'Error Button',
+    label: 'Floating Action Button',
     color: 'primary',
-    fab: true,
+    variant: 'fab',
   },
 };
 

diff --git a/src/components/buttons/Button.vue b/src/components/buttons/Button.vue
@@ -8,8 +8,7 @@ const props = withDefaults(
     color?: ContextColorsType;
     rounded?: boolean;
     elevation?: number | string | null;
-    variant?: 'default' | 'outlined' | 'text';
-    fab?: boolean;
+    variant?: 'default' | 'outlined' | 'text' | 'fab';
     icon?: boolean;
     size?: 'sm' | 'lg';
     sm?: boolean;
@@ -22,13 +21,12 @@ const props = withDefaults(
     rounded: false,
     elevation: null,
     variant: 'default',
-    fab: false,
     icon: false,
     size: undefined,
   }
 );
 
-const { disabled, elevation, fab } = toRefs(props);
+const { disabled, elevation, variant } = toRefs(props);
 
 const attrs = useAttrs();
 const css = useCssModule();
@@ -43,7 +41,7 @@ const usedElevation: ComputedRef<number | string> = computed(() => {
     return elevationProp;
   }
 
-  if (get(fab)) {
+  if (get(variant) === 'fab') {
     return 6;
   }
 
@@ -63,7 +61,6 @@ const usedElevation: ComputedRef<number | string> = computed(() => {
         [css.disabled]: disabled,
         [css.loading]: loading,
         [css._rounded]: rounded,
-        [css.fab]: fab,
         [css.icon]: icon,
       },
     ]"