From b6e6e32497eaab041b78099ca83796d36b88ebfc Mon Sep 17 00:00:00 2001
From: "James Rushford (Work)" <your-work-email@gitlab.com>
Date: Thu, 22 May 2025 07:36:58 +0200
Subject: [PATCH] feat(GlDisclosureDropdown): add forceUlTag prop

Add the forceListContainer prop to GlDisclosureDropdown which allows
explicitly forcing a UL container
---
 .../disclosure/disclosure_dropdown.md         | 27 ++++++++++++++++++-
 .../disclosure/disclosure_dropdown.spec.js    | 12 +++++++++
 .../disclosure/disclosure_dropdown.vue        |  9 +++++++
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md b/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md
index 362d4694e7..ee92c00cd5 100644
--- a/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md
+++ b/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md
@@ -67,7 +67,7 @@ It's possible to close the disclosure dropdown programmatically by calling the `
 `close` methods on the disclosure dropdown via a template ref. For example:
 
 ```js
-this.$refs.disclosureDropdown.closeAndFocus()
+this.$refs.disclosureDropdown.closeAndFocus();
 ```
 
 The `closeAndFocus` method is preferred in most cases, especially when triggering it from some action
@@ -181,3 +181,28 @@ In this case the user is responsible for handling all events and navigation insi
 ## Split dropdown
 
 See [button group documentation](/docs/base-button-group--docs#split-dropdowns).
+
+## Container element type
+
+The disclosure dropdown automatically determines the appropriate container element type based on its
+content:
+
+- When the dropdown contains only list items (`gl-disclosure-dropdown-item`,
+  `gl-disclosure-dropdown-group`, or direct `li` elements), it renders a semantic `<ul>` container.
+- When the dropdown contains any non-list content, it renders a `<div>` container instead.
+
+This automatic detection ensures proper semantic HTML is used when the dropdown primarily functions
+as a list.
+
+### Forcing a list container
+
+In some cases, you may have custom components that ultimately render list items but aren't detected
+by the automatic logic. For these situations, use the `force-list-container` prop to explicitly
+render a `<ul>` container:
+
+```html
+<gl-disclosure-dropdown force-list-container>
+  <custom-list-item>Item 1</custom-list-item>
+  <custom-list-item>Item 2</custom-list-item>
+</gl-disclosure-dropdown>
+```
diff --git a/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js b/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js
index 6d05cd513c..29ae8b6795 100644
--- a/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js
+++ b/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js
@@ -364,6 +364,18 @@ describe('GlDisclosureDropdown', () => {
       expect(findDisclosureContent().element.tagName).toBe('DIV');
     });
 
+    it('should render `ul` as content tag when forceListContainer is true, even with non-list content', () => {
+      const slots = {
+        default: `
+      <div>Non-list item content</div>
+      <span>More non-list content</span>
+    `,
+      };
+
+      buildWrapper({ forceUlTag: true }, { slots });
+      expect(findDisclosureContent().element.tagName).toBe('UL');
+    });
+
     describe('discouraged usage', () => {
       it('should render `ul` as content tag when default slot contains LI tags', () => {
         const slots = {
diff --git a/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue b/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue
index 36481e2ebe..ec6f6e916b 100644
--- a/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue
+++ b/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue
@@ -228,6 +228,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Force the dropdown to use a UL container regardless of content
+     */
+    forceUlTag: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -238,6 +246,7 @@ export default {
   computed: {
     disclosureTag() {
       if (
+        this.forceUlTag ||
         this.items?.length ||
         // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
         hasOnlyListItems(this.$scopedSlots.default || this.$slots.default)
-- 
GitLab