feat(combobox-with-popover, combobox-multi-select): DLT-3395 forward dialogClass to popover dialog (#1254)

Author: jeverhart-dialpad

packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.stories.js

@@ -136,6 +136,12 @@ export const argTypesData = {
       disable: true,
     },
   },
+  dialogClass: {
+    description: 'Additional class for the popover dialog element.',
+    control: {
+      type: 'text',
+    },
+  },
 };
 
 // Story Collection

packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.test.js

@@ -363,4 +363,27 @@ describe('DtComboboxMultiSelect Tests', () => {
       });
     });
   });
+
+  describe('When dialogClass is provided', () => {
+    // Popover teleports to body, so query body directly via data-qa
+    // (same pattern as tooltip/split_button/hovercard tests).
+    let dialog;
+
+    beforeEach(async () => {
+      props = { ...baseProps, dialogClass: 'custom-dialog-class' };
+      wrapper?.unmount();
+      _setWrappers();
+      await input.trigger('focus');
+      await flushPromises();
+      dialog = document.body.querySelector('[data-qa="dt-popover"]');
+    });
+
+    it('should render the popover dialog element', () => {
+      expect(dialog).not.toBeNull();
+    });
+
+    it('should apply the class to the popover dialog element', () => {
+      expect(dialog.classList.contains('custom-dialog-class')).toBe(true);
+    });
+  });
 });

packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select.vue

@@ -10,6 +10,7 @@
     :has-suggestion-list="hasSuggestionList"
     content-width="anchor"
     :append-to="appendTo"
+    :dialog-class="dialogClass"
     :transition="transition"
     v-bind="extractNonListeners($attrs)"
     @select="onComboboxSelect"
@@ -373,6 +374,14 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    /**
+     * Additional class for the popover dialog element.
+     */
+    dialogClass: {
+      type: [String, Object, Array],
+      default: '',
+    },
   },
 
   emits: [

packages/dialtone-vue/components/combobox_multi_select/combobox_multi_select_default.story.vue

@@ -23,6 +23,7 @@
     :max-selected-message="$attrs.maxSelectedMessage"
     :has-suggestion-list="$attrs.hasSuggestionList"
     :append-to="$attrs.appendTo"
+    :dialog-class="$attrs.dialogClass"
     :transition="$attrs.transition"
     :reserved-right-space="$attrs.reservedRightSpace"
     @input="onComboboxInput"

packages/dialtone-vue/components/combobox_with_popover/combobox_with_popover.stories.js

@@ -150,6 +150,13 @@ export const argTypesData = {
     },
   },
 
+  dialogClass: {
+    description: 'Additional class for the popover dialog element.',
+    control: {
+      type: 'text',
+    },
+  },
+
   // Action Event Handlers
   onEscape: {
     table: {

packages/dialtone-vue/components/combobox_with_popover/combobox_with_popover.test.js

@@ -549,4 +549,26 @@ describe('DtComboboxWithPopover Tests', () => {
       );
     });
   });
+
+  describe('When dialogClass is provided', () => {
+    // Popover teleports to body, so query body directly via data-qa
+    // (same pattern as tooltip/split_button/hovercard tests).
+    let dialog;
+
+    beforeEach(async () => {
+      props = { ...baseProps, dialogClass: 'custom-dialog-class' };
+      wrapper?.unmount();
+      _mountWrapper();
+      await _openComboboxPopover();
+      dialog = document.body.querySelector('[data-qa="dt-popover"]');
+    });
+
+    it('should render the popover dialog element', () => {
+      expect(dialog).not.toBeNull();
+    });
+
+    it('should apply the class to the popover dialog element', () => {
+      expect(dialog.classList.contains('custom-dialog-class')).toBe(true);
+    });
+  });
 });

packages/dialtone-vue/components/combobox_with_popover/combobox_with_popover.vue

@@ -54,6 +54,7 @@
         :modal="false"
         :auto-focus="false"
         :append-to="appendTo"
+        :dialog-class="dialogClass"
         :transition="transition"
         @opened="opened"
       >
@@ -195,6 +196,14 @@ export default {
       default: '',
     },
 
+    /**
+     * Additional class for the popover dialog element.
+     */
+    dialogClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+
     /**
      * A method that will be called when the selection goes past the beginning of the list.
      */

packages/dialtone-vue/components/combobox_with_popover/combobox_with_popover_default.story.vue

@@ -14,6 +14,7 @@
     :padding="$attrs.padding"
     :list-id="$attrs.listId"
     :list-class="$attrs.listClass"
+    :dialog-class="$attrs.dialogClass"
     :open-with-arrow-keys="$attrs.openWithArrowKeys"
     :empty-list="$attrs.emptyList"
     :empty-state-message="$attrs.emptyStateMessage"