fix(callbar-button): slot not working (#1242)

* fix(callbar-button): slot not working * fix attribute inheritance * add event object to emit * fix attrs inheritance * move events to button * fix broken tests
dialpad · Oct 6, 2023 · 0b5d67f · 0b5d67f
1 parent 9245081
commit 0b5d67f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/recipes/buttons/callbar_button/callbar_button.vue b/recipes/buttons/callbar_button/callbar_button.vue
@@ -16,13 +16,13 @@
           :label-class="callbarButtonTextClass"
           :width="buttonWidth"
           :class="callbarButtonClass"
-          v-on="$listeners"
+          v-bind="$attrs"
+          v-on="callbarButtonListeners"
         >
           <slot />
-          <slot
-            slot="icon"
-            name="icon"
-          />
+          <template #icon>
+            <slot name="icon" />
+          </template>
         </dt-button>
       </span>
     </template>
@@ -41,7 +41,7 @@ export default {
 
   components: { DtButton, DtTooltip },
 
-  inheritAttrs: true,
+  inheritAttrs: false,
 
   props: {
     /**
@@ -192,6 +192,13 @@ export default {
       }
       return this.circle ? 'outlined' : 'clear';
     },
+
+    callbarButtonListeners () {
+      return {
+        ...this.$listeners,
+        click: (event) => this.$emit('click', event),
+      };
+    },
   },
 };
 </script>

diff --git a/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.test.js b/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.test.js
@@ -4,7 +4,9 @@ import DtRecipeCallbarButton from '../callbar_button/callbar_button.vue';
 import DtPopover from '@/components/popover/popover.vue';
 
 // Constants
-const basePropsData = {};
+const basePropsData = {
+  arrowButtonLabel: 'arrowButton',
+};
 
 describe('DtRecipeCallbarButtonWithPopover Tests', () => {
   let testContext;
@@ -156,7 +158,6 @@ describe('DtRecipeCallbarButtonWithPopover Tests', () => {
           _setWrappers();
 
           await button.find('button').trigger('click');
-          await wrapper.vm.$nextTick();
 
           const clickEvents = wrapper.emitted().click;
           expect(clickEvents.length).toBe(1);