@gitlab/ui 55.3.0 → 56.0.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [56.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v55.3.1...v56.0.0) (2023-02-16)
+
+
+### Features
+
+* **GlDisclosureDropdown:** wrap custom item content in `button` or `link` ([684386d](https://gitlab.com/gitlab-org/gitlab-ui/commit/684386d4dd66c4ce85538faec1b35b9c5c370926))
+
+
+### BREAKING CHANGES
+
+* **GlDisclosureDropdown:** It will cause styling and semantic issues
+in the downstream project.
+Wherever the `list-item` slot is used with a `button` or `a` inside
+it wrapping the content, this wrapper `button/a` needs to be removed.
+
+## [55.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v55.3.0...v55.3.1) (2023-02-16)
+
+
+### Bug Fixes
+
+* **GlDisclosureDropdown:** Improve markup semantics of dropdown wrapper ([79b1922](https://gitlab.com/gitlab-org/gitlab-ui/commit/79b19229c617904cc300a58d54c6ff04b742bb53))
+
 # [55.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v55.2.1...v55.3.0) (2023-02-16)
 
 

package/dist/components/base/new_dropdowns/disclosure/constants.js

@@ -0,0 +1,4 @@
+const DISCLOSURE_DROPDOWN_ITEM_NAME = 'GlDisclosureDropdownItem';
+const DISCLOSURE_DROPDOWN_GROUP_NAME = 'GlDisclosureDropdownGroup';
+
+export { DISCLOSURE_DROPDOWN_GROUP_NAME, DISCLOSURE_DROPDOWN_ITEM_NAME };

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -6,7 +6,7 @@ import { buttonCategoryOptions, dropdownVariantOptions, buttonSizeOptions, dropd
 import GlBaseDropdown from '../base_dropdown/base_dropdown';
 import GlDisclosureDropdownItem, { ITEM_CLASS } from './disclosure_dropdown_item';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group';
-import { itemsValidator, isAllItems, isAllGroups, isItem } from './utils';
+import { itemsValidator, hasOnlyListItems, isItem } from './utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -157,21 +157,12 @@ var script = {
     };
   },
   computed: {
-    disclosureOptions() {
-      if (this.items) {
-        if (isAllItems(this.items)) {
-          return {
-            tag: 'ul'
-          };
-        }
-        if (isAllGroups(this.items)) return {
-          tag: 'div',
-          role: 'group'
-        };
+    disclosureTag() {
+      var _this$items;
+      if ((_this$items = this.items) !== null && _this$items !== void 0 && _this$items.length || hasOnlyListItems(this.$scopedSlots)) {
+        return 'ul';
       }
-      return {
-        tag: 'div'
-      };
+      return 'div';
     },
     hasCustomToggle() {
       return Boolean(this.$scopedSlots.toggle);
@@ -265,7 +256,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureOptions.tag,{ref:"content",tag:"component",staticClass:"gl-new-dropdown-contents",attrs:{"id":_vm.disclosureId,"role":_vm.disclosureOptions.role,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:item.text,attrs:{"item":item},on:{"action":_vm.handleAction}},[_vm._t("list-item",null,{"item":item})],2)]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.$scopedSlots['list-item'])?_vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:groupItem.text,attrs:{"item":groupItem},on:{"action":_vm.handleAction}},[_vm._t("list-item",null,{"item":groupItem})],2)}):_vm._e()],2)]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",staticClass:"gl-new-dropdown-contents",attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:item.text,attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.$scopedSlots['list-item'])?_vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:groupItem.text,attrs:{"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})}):_vm._e()],2)]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js

@@ -1,10 +1,12 @@
 import _uniqueId from 'lodash/uniqueId';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item';
 import { isGroup } from './utils';
+import { DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const GROUP_TOP_BORDER_CLASSES = 'gl-border-t gl-pt-2 gl-mt-2';
 var script = {
+  name: DISCLOSURE_DROPDOWN_GROUP_NAME,
   components: {
     GlDisclosureDropdownItem
   },
@@ -54,7 +56,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.borderClass},[(_vm.showHeader)?_c('div',{staticClass:"gl-pl-4 gl-py-2 gl-font-sm gl-font-weight-bold",attrs:{"id":_vm.nameId,"aria-hidden":"true"}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.group.name))]})],2):_vm._e(),_vm._v(" "),_c('ul',{staticClass:"gl-mb-0 gl-pl-0 gl-list-style-none",attrs:{"role":"group","aria-labelledby":_vm.groupLabeledBy}},[_vm._t("default",function(){return _vm._l((_vm.group.items),function(item){return _c('gl-disclosure-dropdown-item',{key:item.text,attrs:{"item":item},on:{"action":_vm.handleAction}},[_vm._t("list-item",null,{"item":item})],2)})})],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:_vm.borderClass},[(_vm.showHeader)?_c('div',{staticClass:"gl-pl-4 gl-py-2 gl-font-sm gl-font-weight-bold",attrs:{"id":_vm.nameId,"aria-hidden":"true"}},[_vm._t("group-label",function(){return [_vm._v(_vm._s(_vm.group.name))]})],2):_vm._e(),_vm._v(" "),_c('ul',{staticClass:"gl-mb-0 gl-pl-0 gl-list-style-none",attrs:{"role":"group","aria-labelledby":_vm.groupLabeledBy}},[_vm._t("default",function(){return _vm._l((_vm.group.items),function(item){return _c('gl-disclosure-dropdown-item',{key:item.text,attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})})})],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js

@@ -1,10 +1,12 @@
 import { ENTER, SPACE } from '../constants';
 import { stopEvent } from '../../../../utils/utils';
 import { isItem } from './utils';
+import { DISCLOSURE_DROPDOWN_ITEM_NAME } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const ITEM_CLASS = 'gl-new-dropdown-item';
 var script = {
+  name: DISCLOSURE_DROPDOWN_ITEM_NAME,
   ITEM_CLASS,
   props: {
     item: {
@@ -26,7 +28,6 @@ var script = {
       const {
         item
       } = this;
-      if (!item) return null;
       if (this.isLink) return {
         is: 'a',
         attrs: {
@@ -34,22 +35,34 @@ var script = {
           ...item.extraAttrs
         },
         wrapperClass: item.wrapperClass,
-        listeners: {}
+        listeners: {
+          click: this.action
+        }
       };
       return {
         is: 'button',
         attrs: {
-          ...item.extraAttrs,
+          ...(item === null || item === void 0 ? void 0 : item.extraAttrs),
           type: 'button'
         },
         listeners: {
           click: () => {
             var _item$action;
-            return (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(undefined, item);
+            item === null || item === void 0 ? void 0 : (_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(undefined, item);
+            this.action();
           }
         },
-        wrapperClass: item.wrapperClass
+        wrapperClass: item === null || item === void 0 ? void 0 : item.wrapperClass
+      };
+    },
+    wrapperListeners() {
+      const listeners = {
+        keydown: this.onKeydown
       };
+      if (this.isCustomContent) {
+        listeners.click = this.action;
+      }
+      return listeners;
     }
   },
   methods: {
@@ -58,17 +71,20 @@ var script = {
         code
       } = event;
       if (code === ENTER || code === SPACE) {
-        var _this$$refs$item;
         stopEvent(event);
-        /** Instead of simply navigating or calling the action, we want
-         * the `a/button` to be the target of the event as it might have additional attributes.
-         * E.g. `a` might have `target` attribute.
-         * `bubbles` is set to `true` as the parent `li` item has this event listener and thus we'll get a loop.
-         */
-        (_this$$refs$item = this.$refs.item) === null || _this$$refs$item === void 0 ? void 0 : _this$$refs$item.dispatchEvent(new MouseEvent('click', {
-          bubbles: false
-        }));
-        this.action();
+        if (this.isCustomContent) {
+          this.action();
+        } else {
+          var _this$$refs$item;
+          /** Instead of simply navigating or calling the action, we want
+           * the `a/button` to be the target of the event as it might have additional attributes.
+           * E.g. `a` might have `target` attribute.
+           */
+          (_this$$refs$item = this.$refs.item) === null || _this$$refs$item === void 0 ? void 0 : _this$$refs$item.dispatchEvent(new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true
+          }));
+        }
       }
     },
     action() {
@@ -81,7 +97,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',{class:[_vm.$options.ITEM_CLASS, _vm.itemComponent && _vm.itemComponent.wrapperClass],attrs:{"tabindex":"0","data-testid":"disclosure-dropdown-item"},on:{"click":_vm.action,"keydown":_vm.onKeydown}},[(_vm.isCustomContent)?_c('div',{staticClass:"gl-new-dropdown-item-content"},[_c('div',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("default")],2)]):(_vm.itemComponent && _vm.item)?[_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":"-1"}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._v("\n        "+_vm._s(_vm.item.text)+"\n      ")])])]:_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('li',_vm._g({class:[_vm.$options.ITEM_CLASS, _vm.itemComponent.wrapperClass],attrs:{"tabindex":"0","data-testid":"disclosure-dropdown-item"}},_vm.wrapperListeners),[_vm._t("default",function(){return [_c(_vm.itemComponent.is,_vm._g(_vm._b({ref:"item",tag:"component",staticClass:"gl-new-dropdown-item-content",attrs:{"tabindex":"-1"}},'component',_vm.itemComponent.attrs,false),_vm.itemComponent.listeners),[_c('span',{staticClass:"gl-new-dropdown-item-text-wrapper"},[_vm._t("list-item",function(){return [_vm._v("\n          "+_vm._s(_vm.item.text)+"\n        ")]})],2)])]})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/new_dropdowns/disclosure/utils.js

@@ -1,3 +1,6 @@
+import _isFunction from 'lodash/isFunction';
+import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
+
 const itemValidator = item => {
   var _item$text;
   return (item === null || item === void 0 ? void 0 : (_item$text = item.text) === null || _item$text === void 0 ? void 0 : _item$text.length) > 0 && !Array.isArray(item === null || item === void 0 ? void 0 : item.items);
@@ -5,7 +8,24 @@ const itemValidator = item => {
 const isItem = item => Boolean(item) && itemValidator(item);
 const isGroup = group => Boolean(group) && Array.isArray(group.items) && Boolean(group.items.length) && group.items.every(isItem);
 const itemsValidator = items => items.every(isItem) || items.every(isGroup);
-const isAllItems = items => items.every(isItem);
-const isAllGroups = items => items.every(isGroup);
+const isListItem = tag => ['gl-disclosure-dropdown-group', 'gl-disclosure-dropdown-item', 'li'].includes(tag);
+const isValidSlotTagVue2 = vNode => {
+  var _vNode$componentOptio;
+  return Boolean(vNode) && isListItem(((_vNode$componentOptio = vNode.componentOptions) === null || _vNode$componentOptio === void 0 ? void 0 : _vNode$componentOptio.tag) || vNode.tag);
+};
+const isValidSlotTag = vNode => {
+  var _vNode$type;
+  return [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes((_vNode$type = vNode.type) === null || _vNode$type === void 0 ? void 0 : _vNode$type.name) || vNode.type === 'li';
+};
+const hasOnlyListItems = _ref => {
+  let {
+    default: defaultSlot
+  } = _ref;
+  if (!_isFunction(defaultSlot)) {
+    return false;
+  }
+  const nodes = defaultSlot();
+  return Array.isArray(nodes) && nodes.filter(vNode => vNode.tag).length && (nodes.filter(vNode => vNode.tag).every(isValidSlotTagVue2) || nodes.filter(vNode => vNode.tag).every(isValidSlotTag));
+};
 
-export { isAllGroups, isAllItems, isGroup, isItem, itemsValidator };
+export { hasOnlyListItems, isGroup, isItem, itemsValidator };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "55.3.0",
+  "version": "56.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/new_dropdowns/disclosure/constants.js

@@ -0,0 +1,2 @@
+export const DISCLOSURE_DROPDOWN_ITEM_NAME = 'GlDisclosureDropdownItem';
+export const DISCLOSURE_DROPDOWN_GROUP_NAME = 'GlDisclosureDropdownGroup';

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -88,25 +88,14 @@ template. If you want to render a custom template for items, use the
 ```html
 <gl-disclosure-dropdown :items="items">
   <template #list-item="{ item }">
-    <a
-      class="gl-hover-text-decoration-none gl-text-gray-900"
-      tabindex="-1"
-      :href="item.href"
-      v-bind="item.extraAttrs"
-    >
-      {{ item.text }}
-      <gl-badge v-if="item.count" pill variant="info">{{ item.count }}</gl-badge>
-    </a>
+    <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
+      {{item.text}}
+      <gl-icon v-if="item.icon" :name="item.icon"/>
+    </span>
   </template>
 </gl-disclosure-dropdown>
 ```
 
-**Note:** when providing custom content to the item, user should
-define the correct tab order inside the disclosure dropdown by setting
-the `tabindex` attribute on the elements.
-The `li` item will get the focus so you might want elements inside it
-not to be focused - this can be done by setting `tabindex="-1"` on them.
-
 #### Groups
 
 Actions/links can be contained within groups. A group can have a `name`

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.spec.js

@@ -22,6 +22,7 @@ describe('GlDisclosureDropdown', () => {
   const buildWrapper = (propsData, slots = {}) => {
     wrapper = mount(GlDisclosureDropdown, {
       propsData,
+      components: { GlDisclosureDropdownItem, GlDisclosureDropdownGroup },
       slots,
       attachTo: document.body,
     });
@@ -216,23 +217,65 @@ describe('GlDisclosureDropdown', () => {
     });
   });
 
-  describe('disclosure options', () => {
-    it('should render the `ul` as content tag and not add `role` attribute when it is a list of items only', () => {
+  describe('disclosure tag', () => {
+    it('should render `ul` as content tag when items is a list of items', () => {
       buildWrapper({ items: mockItems });
       expect(findDisclosureContent().element.tagName).toBe('UL');
-      expect(findDisclosureContent().attributes('role')).toBeUndefined();
     });
 
-    it('should render the `div` as content tag and add `role` attribute when it is a list of groups', () => {
+    it('should render `ul` as content tag when items is a list of groups', () => {
       buildWrapper({ items: mockGroups });
+      expect(findDisclosureContent().element.tagName).toBe('UL');
+    });
+
+    it('should render `ul` as content tag when default slot contains only groups', () => {
+      const slots = {
+        default: `
+          <gl-disclosure-dropdown-group>
+            <gl-disclosure-dropdown-item>Item</gl-disclosure-dropdown-item>
+            <gl-disclosure-dropdown-item>Item</gl-disclosure-dropdown-item>
+          </gl-disclosure-dropdown-group>
+          <gl-disclosure-dropdown-group>
+            <gl-disclosure-dropdown-item>Item</gl-disclosure-dropdown-item>
+          </gl-disclosure-dropdown-group>
+        `,
+      };
+
+      buildWrapper({}, slots);
+      expect(findDisclosureContent().element.tagName).toBe('UL');
+    });
+
+    it('should render `ul` as content tag when default slot contains only items', () => {
+      const slots = {
+        default: `
+          <gl-disclosure-dropdown-item>Item</gl-disclosure-dropdown-item>
+          <gl-disclosure-dropdown-item>Item</gl-disclosure-dropdown-item>
+          <gl-disclosure-dropdown-item>Item</gl-disclosure-dropdown-item>
+        `,
+      };
+
+      buildWrapper({}, slots);
+      expect(findDisclosureContent().element.tagName).toBe('UL');
+    });
+
+    it('should render `div` as content tag when default slot does not contain valid list item', () => {
+      const slots = {
+        default: `
+          <div>Item</div>
+          <gl-disclosure-dropdown-group>
+            <gl-disclosure-dropdown-item>Item</gl-disclosure-dropdown-item>
+            <gl-disclosure-dropdown-item>Item</gl-disclosure-dropdown-item>
+          </gl-disclosure-dropdown-group>
+        `,
+      };
+
+      buildWrapper({}, slots);
       expect(findDisclosureContent().element.tagName).toBe('DIV');
-      expect(findDisclosureContent().attributes('role')).toBe('group');
     });
 
-    it('should render the `div` as content tag and NOT add `role` otherwise', () => {
-      buildWrapper({ items: null }, { default: 'Some other content' });
+    it('should render `div` as content tag when slot is not a list item', () => {
+      buildWrapper({}, { default: 'Some other content' });
       expect(findDisclosureContent().element.tagName).toBe('DIV');
-      expect(findDisclosureContent().attributes('role')).toBeUndefined();
     });
   });
 });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -52,13 +52,16 @@ function openDisclosure(component) {
   });
 }
 
-const template = (content, { bindingOverrides = {} } = {}) => `
+const template = (content, { bindingOverrides = {} } = {}, after) => `
+  <div>
     <gl-disclosure-dropdown
       ref="disclosure"
       ${makeBindings(bindingOverrides)}
     >
       ${content || ''}
     </gl-disclosure-dropdown>
+    ${after || ''}
+  </div>
 `;
 
 const TOGGLE_ID = 'custom-toggle-id';
@@ -104,23 +107,17 @@ export const CustomListItem = (args, { argTypes }) => ({
       openDisclosure(this);
     }
   },
-  methods: {
-    navigate() {
-      this.$refs.link.click();
-    },
-  },
   template: template(
     `
       <template #list-item="{ item }">
-        <a tabindex="-1" ref="link" class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-hover-text-gray-900 gl-hover-text-decoration-none gl-text-gray-900" :href="item.href" v-bind="item.extraAttrs">
+        <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
           {{ item.text }}
           <gl-badge pill size="sm" variant="neutral">{{ item.count }}</gl-badge>
-        </a>
+        </span>
       </template>
     `,
     {
       bindingOverrides: {
-        '@action': 'navigate',
         class: 'gl-display-block! gl-text-center',
       },
     }
@@ -183,9 +180,6 @@ export const CustomGroupsAndItems = (args, { argTypes }) => ({
     }
   },
   methods: {
-    navigate() {
-      this.$refs.link.click();
-    },
     getTotalMrs(items) {
       return items.reduce((acc, item) => acc + item.count, 0);
     },
@@ -196,17 +190,12 @@ export const CustomGroupsAndItems = (args, { argTypes }) => ({
         {{ group.name }} <gl-badge pill size="sm" variant="neutral">{{ getTotalMrs(group.items) }}</gl-badge>
       </template>
       <template #list-item="{ item }">
-        <a tabindex="-1" ref="link" class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-hover-text-gray-900 gl-hover-text-decoration-none gl-text-gray-900" :href="item.href" v-bind="item.extraAttrs">
+        <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
           {{ item.text }}
           <gl-badge pill size="sm" variant="neutral">{{ item.count }}</gl-badge>
-        </a>
+        </span>
       </template>
-    `,
-    {
-      bindingOverrides: {
-        '@action': 'navigate',
-      },
-    }
+    `
   ),
 });
 
@@ -217,34 +206,30 @@ CustomGroupsAndItems.args = {
 CustomGroupsAndItems.decorators = [makeContainer({ height: '200px' })];
 
 export const CustomGroupsItemsAndToggle = makeGroupedExample({
-  template: template(`
-    <template #toggle>
-      <span class="gl-sr-only">
-        Orange Fox user's menu
-      </span>
-      <gl-avatar :size="32" entity-name="Orange Fox" aria-hidden="true"></gl-avatar>
-    </template>
-
-    <div role="group">
+  template: template(
+    `
+      <template #toggle>
+        <span class="gl-sr-only">
+          Orange Fox user's menu
+        </span>
+        <gl-avatar :size="32" entity-name="Orange Fox" aria-hidden="true"></gl-avatar>
+      </template>
       <gl-disclosure-dropdown-group>
         <gl-disclosure-dropdown-item>
-          <span class="gl-display-flex gl-flex-direction-column">
-            <span class="gl-font-weight-bold gl-white-space-nowrap">Orange Fox</span>
-            <span class="gl-text-gray-400">@thefox</span>
-          </span>
+          <template #list-item>
+            <span class="gl-display-flex gl-flex-direction-column">
+              <span class="gl-font-weight-bold gl-white-space-nowrap">Orange Fox</span>
+              <span class="gl-text-gray-400">@thefox</span>
+            </span>
+          </template>
         </gl-disclosure-dropdown-item>
       </gl-disclosure-dropdown-group>
       <gl-disclosure-dropdown-group bordered :group="$options.groups[0]">
         <template #list-item="{ item }">
-          <a
-            class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-hover-text-gray-900 gl-hover-text-decoration-none gl-text-gray-900"
-            :href="item.href"
-            tabindex="-1"
-            v-bind="item.extraAttrs"
-          >
+          <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
             {{item.text}}
             <gl-icon v-if="item.icon" :name="item.icon"/>
-          </a>
+          </span>
         </template>
       </gl-disclosure-dropdown-group>
       <gl-disclosure-dropdown-group bordered>
@@ -252,19 +237,26 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
           <span class="gl-font-sm">Navigation redesign</span>
           <gl-badge size="sm" variant="info">Beta</gl-badge>
         </template>
-        <gl-disclosure-dropdown-item>
-          <gl-toggle label="New navigation" label-position="left" v-model="newNavigation"/>
+        <gl-disclosure-dropdown-item @action="toggleNewNavigation">
+          <div  class="gl-new-dropdown-item-content">
+            <div class="gl-new-dropdown-item-text-wrapper">
+              <gl-toggle label="New navigation" label-position="left" :value="newNavigation"/>
+            </div>
+          </div>
         </gl-disclosure-dropdown-item>
         <gl-disclosure-dropdown-item @action="toggleModalVisibility(true)">
-          <a>Provide feedback</a>
+          <template #list-item>Provide feedback</template>
         </gl-disclosure-dropdown-item>
       </gl-disclosure-dropdown-group>
-      <gl-disclosure-dropdown-group bordered :group="$options.groups[1]"> </gl-disclosure-dropdown-group>
+      <gl-disclosure-dropdown-group bordered :group="$options.groups[1]"/>
+    `,
+    {},
+    `
       <gl-modal :visible="feedBackModalVisible" @change="toggleModalVisibility" modal-id="feedbackModal" size="sm">
         <textarea class="gl-w-full">Tell us what you think!</textarea>
       </gl-modal>
-    </div>
-  `),
+    `
+  ),
   data() {
     return {
       newNavigation: true,
@@ -275,6 +267,9 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
     toggleModalVisibility(value) {
       this.feedBackModalVisible = value;
     },
+    toggleNewNavigation() {
+      this.newNavigation = !this.newNavigation;
+    },
   },
   groups: mockProfileGroups,
 });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -19,7 +19,7 @@ import {
 import GlBaseDropdown from '../base_dropdown/base_dropdown.vue';
 import GlDisclosureDropdownItem, { ITEM_CLASS } from './disclosure_dropdown_item.vue';
 import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
-import { itemsValidator, isItem, isAllItems, isAllGroups } from './utils';
+import { itemsValidator, isItem, hasOnlyListItems } from './utils';
 
 export default {
   events: {
@@ -169,22 +169,11 @@ export default {
     };
   },
   computed: {
-    disclosureOptions() {
-      if (this.items) {
-        if (isAllItems(this.items)) {
-          return {
-            tag: 'ul',
-          };
-        }
-
-        if (isAllGroups(this.items))
-          return {
-            tag: 'div',
-            role: 'group',
-          };
+    disclosureTag() {
+      if (this.items?.length || hasOnlyListItems(this.$scopedSlots)) {
+        return 'ul';
       }
-
-      return { tag: 'div' };
+      return 'div';
     },
     hasCustomToggle() {
       return Boolean(this.$scopedSlots.toggle);
@@ -305,10 +294,9 @@ export default {
     <slot name="header"></slot>
 
     <component
-      :is="disclosureOptions.tag"
+      :is="disclosureTag"
       :id="disclosureId"
       ref="content"
-      :role="disclosureOptions.role"
       :aria-labelledby="listAriaLabelledBy || toggleId"
       data-testid="disclosure-content"
       class="gl-new-dropdown-contents"
@@ -319,8 +307,10 @@ export default {
         <template v-for="(item, index) in items">
           <template v-if="isItem(item)">
             <gl-disclosure-dropdown-item :key="item.text" :item="item" @action="handleAction">
-              <!-- @slot Custom template of the disclosure dropdown item -->
-              <slot name="list-item" :item="item"></slot>
+              <template #list-item>
+                <!-- @slot Custom template of the disclosure dropdown item -->
+                <slot name="list-item" :item="item"></slot>
+              </template>
             </gl-disclosure-dropdown-item>
           </template>
 
@@ -343,8 +333,10 @@ export default {
                   :item="groupItem"
                   @action="handleAction"
                 >
-                  <!-- @slot Custom template of the disclosure dropdown item -->
-                  <slot name="list-item" :item="groupItem"></slot>
+                  <template #list-item>
+                    <!-- @slot Custom template of the disclosure dropdown item -->
+                    <slot name="list-item" :item="groupItem"></slot>
+                  </template>
                 </gl-disclosure-dropdown-item>
               </template>
             </gl-disclosure-dropdown-group>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.spec.js

@@ -14,6 +14,9 @@ describe('GlDisclosureDropdownGroup', () => {
         group: mockGroups[0],
         ...propsData,
       },
+      stubs: {
+        GlDisclosureDropdownItem,
+      },
       slots,
     });
   };
@@ -38,9 +41,9 @@ describe('GlDisclosureDropdownGroup', () => {
     expect(findItems()).toHaveLength(mockGroups[0].items.length);
   });
 
-  it('renders `list-item` content in a default slot of `GlDisclosureDropdownItem`', () => {
+  it('renders `list-item` content in a `list-item` slot of `GlDisclosureDropdownItem`', () => {
     buildWrapper({
-      slots: { 'list-item': '<li data-testid="list-item-content"></li>' },
+      slots: { 'list-item': '<span data-testid="list-item-content"></span>' },
     });
 
     expect(findItems()).toHaveLength(mockGroups[0].items.length);

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -2,10 +2,12 @@
 import { uniqueId } from 'lodash';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import { isGroup } from './utils';
+import { DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 
 export const GROUP_TOP_BORDER_CLASSES = 'gl-border-t gl-pt-2 gl-mt-2';
 
 export default {
+  name: DISCLOSURE_DROPDOWN_GROUP_NAME,
   components: {
     GlDisclosureDropdownItem,
   },
@@ -52,7 +54,7 @@ export default {
 </script>
 
 <template>
-  <div :class="borderClass">
+  <li :class="borderClass">
     <div
       v-if="showHeader"
       :id="nameId"
@@ -69,9 +71,11 @@ export default {
           :item="item"
           @action="handleAction"
         >
-          <slot name="list-item" :item="item"> </slot>
+          <template #list-item>
+            <slot name="list-item" :item="item"></slot>
+          </template>
         </gl-disclosure-dropdown-item>
       </slot>
     </ul>
-  </div>
+  </li>
 </template>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js

@@ -37,13 +37,17 @@ describe('GlDisclosureDropdownItem', () => {
       ${() => findItem().trigger('keydown', { code: SPACE })} | ${'SPACE'}
     `(`$event should emit 'action' event`, ({ trigger }) => {
       trigger();
-      expect(wrapper.emitted('action')).toEqual([[item]]);
+      const emittedAction = wrapper.emitted('action');
+      expect(emittedAction).toHaveLength(1);
+      expect(emittedAction).toEqual([[item]]);
     });
   });
 
   describe('when item has a `href`', () => {
+    const item = mockItems[0];
+
     beforeEach(() => {
-      buildWrapper({ item: clone(mockItems[0]) });
+      buildWrapper({ item });
     });
 
     const findLink = () => wrapper.find('a.gl-new-dropdown-item-content');
@@ -53,28 +57,30 @@ describe('GlDisclosureDropdownItem', () => {
     });
 
     it('should set correct attributes', () => {
-      expect(findLink().attributes('href')).toBe(mockItems[0].href);
-      expect(findLink().attributes()).toMatchObject(mockItems[0].extraAttrs);
+      expect(findLink().attributes('href')).toBe(item.href);
+      expect(findLink().attributes()).toEqual(expect.objectContaining(item.extraAttrs));
     });
 
     it('should apply the default classes to the item wrapper', () => {
       expect(findItem().classes()).toEqual(['gl-new-dropdown-item']);
     });
 
-    describe('when item has wrapperClass', () => {
-      const TEST_CLASS = 'just-a-test-class';
-      beforeEach(() => {
-        buildWrapper({
-          item: {
-            ...mockItems[0],
-            wrapperClass: TEST_CLASS,
-          },
-        });
-      });
+    it('should emit `action` on `click`', () => {
+      findLink().trigger('click');
+      const emittedAction = wrapper.emitted('action');
+      expect(emittedAction).toHaveLength(1);
+      expect(emittedAction).toEqual([[item]]);
+    });
 
-      it('should add the extra class to the item wrapper', () => {
-        expect(findItem().classes()).toContain(TEST_CLASS);
-      });
+    it.each`
+      trigger                                                 | event
+      ${() => findItem().trigger('keydown', { code: ENTER })} | ${'ENTER'}
+      ${() => findItem().trigger('keydown', { code: SPACE })} | ${'SPACE'}
+    `(`$event on parent will execute 'action' event`, ({ trigger }) => {
+      trigger();
+      const emittedAction = wrapper.emitted('action');
+      expect(emittedAction).toHaveLength(1);
+      expect(emittedAction).toEqual([[item]]);
     });
   });
 
@@ -100,7 +106,7 @@ describe('GlDisclosureDropdownItem', () => {
       expect(findButton().attributes()).toMatchObject(attrs);
     });
 
-    it('should call `action` on `click`', () => {
+    it('should call `action` on `click` and emit `action` event', () => {
       findButton().trigger('click');
       expect(action).toHaveBeenCalledTimes(1);
 
@@ -110,47 +116,43 @@ describe('GlDisclosureDropdownItem', () => {
       const actionArgs = action.mock.calls[0];
       expect(actionArgs).toEqual([item]);
 
-      expect(wrapper.emitted('action')).toEqual([[item]]);
+      const emittedAction = wrapper.emitted('action');
+      expect(emittedAction).toHaveLength(1);
+      expect(emittedAction).toEqual([[item]]);
     });
 
     it.each`
       trigger                                                 | event
-      ${() => findItem().trigger('click')}                    | ${'click'}
       ${() => findItem().trigger('keydown', { code: ENTER })} | ${'ENTER'}
       ${() => findItem().trigger('keydown', { code: SPACE })} | ${'SPACE'}
-    `(`$event will execute action and emit 'action' event`, ({ trigger }) => {
+    `(`$event on parent will execute action and emit 'action' event`, ({ trigger }) => {
       trigger();
-      expect(wrapper.emitted('action')).toEqual([[item]]);
+      expect(action).toHaveBeenCalledTimes(1);
+      expect(action.mock.calls[0]).toEqual([item]);
+
+      const emittedAction = wrapper.emitted('action');
+      expect(emittedAction).toHaveLength(1);
+      expect(emittedAction).toEqual([[item]]);
     });
 
     it('should apply the default classes to the item wrapper', () => {
       expect(findItem().classes()).toEqual(['gl-new-dropdown-item']);
     });
-
-    describe('when item has wrapperClass', () => {
-      const TEST_CLASS = 'just-a-test-class';
-      beforeEach(() => {
-        buildWrapper({
-          item: {
-            ...mockItems[1],
-            wrapperClass: TEST_CLASS,
-          },
-        });
-      });
-
-      it('should add the extra class to the item wrapper', () => {
-        expect(findItem().classes()).toContain(TEST_CLASS);
-      });
-    });
   });
 
-  describe('when item is null', () => {
+  describe('when item has wrapperClass', () => {
+    const TEST_CLASS = 'just-a-test-class';
     beforeEach(() => {
-      buildWrapper({ item: null });
+      buildWrapper({
+        item: {
+          ...mockItems[0],
+          wrapperClass: TEST_CLASS,
+        },
+      });
     });
 
-    it('should not render anything', () => {
-      expect(wrapper.text()).toBe('');
+    it('should add the extra class to the item wrapper', () => {
+      expect(findItem().classes()).toContain(TEST_CLASS);
     });
   });
 });

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -2,10 +2,12 @@
 import { ENTER, SPACE } from '../constants';
 import { stopEvent } from '../../../../utils/utils';
 import { isItem } from './utils';
+import { DISCLOSURE_DROPDOWN_ITEM_NAME } from './constants';
 
 export const ITEM_CLASS = 'gl-new-dropdown-item';
 
 export default {
+  name: DISCLOSURE_DROPDOWN_ITEM_NAME,
   ITEM_CLASS,
   props: {
     item: {
@@ -25,8 +27,6 @@ export default {
     itemComponent() {
       const { item } = this;
 
-      if (!item) return null;
-
       if (this.isLink)
         return {
           is: 'a',
@@ -35,20 +35,34 @@ export default {
             ...item.extraAttrs,
           },
           wrapperClass: item.wrapperClass,
-          listeners: {},
+          listeners: {
+            click: this.action,
+          },
         };
 
       return {
         is: 'button',
         attrs: {
-          ...item.extraAttrs,
+          ...item?.extraAttrs,
           type: 'button',
         },
         listeners: {
-          click: () => item.action?.call(undefined, item),
+          click: () => {
+            item?.action?.call(undefined, item);
+            this.action();
+          },
         },
-        wrapperClass: item.wrapperClass,
+        wrapperClass: item?.wrapperClass,
+      };
+    },
+    wrapperListeners() {
+      const listeners = {
+        keydown: this.onKeydown,
       };
+      if (this.isCustomContent) {
+        listeners.click = this.action;
+      }
+      return listeners;
     },
   },
   methods: {
@@ -57,13 +71,18 @@ export default {
 
       if (code === ENTER || code === SPACE) {
         stopEvent(event);
-        /** Instead of simply navigating or calling the action, we want
-         * the `a/button` to be the target of the event as it might have additional attributes.
-         * E.g. `a` might have `target` attribute.
-         * `bubbles` is set to `true` as the parent `li` item has this event listener and thus we'll get a loop.
-         */
-        this.$refs.item?.dispatchEvent(new MouseEvent('click', { bubbles: false }));
-        this.action();
+
+        if (this.isCustomContent) {
+          this.action();
+        } else {
+          /** Instead of simply navigating or calling the action, we want
+           * the `a/button` to be the target of the event as it might have additional attributes.
+           * E.g. `a` might have `target` attribute.
+           */
+          this.$refs.item?.dispatchEvent(
+            new MouseEvent('click', { bubbles: true, cancelable: true })
+          );
+        }
       }
     },
     action() {
@@ -76,18 +95,11 @@ export default {
 <template>
   <li
     tabindex="0"
-    :class="[$options.ITEM_CLASS, itemComponent && itemComponent.wrapperClass]"
+    :class="[$options.ITEM_CLASS, itemComponent.wrapperClass]"
     data-testid="disclosure-dropdown-item"
-    @click="action"
-    @keydown="onKeydown"
+    v-on="wrapperListeners"
   >
-    <div v-if="isCustomContent" class="gl-new-dropdown-item-content">
-      <div class="gl-new-dropdown-item-text-wrapper">
-        <slot></slot>
-      </div>
-    </div>
-
-    <template v-else-if="itemComponent && item">
+    <slot>
       <component
         :is="itemComponent.is"
         v-bind="itemComponent.attrs"
@@ -97,9 +109,11 @@ export default {
         v-on="itemComponent.listeners"
       >
         <span class="gl-new-dropdown-item-text-wrapper">
-          {{ item.text }}
+          <slot name="list-item">
+            {{ item.text }}
+          </slot>
         </span>
       </component>
-    </template>
+    </slot>
   </li>
 </template>

package/src/components/base/new_dropdowns/disclosure/utils.js

@@ -1,3 +1,6 @@
+import { isFunction } from 'lodash';
+import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
+
 const itemValidator = (item) => item?.text?.length > 0 && !Array.isArray(item?.items);
 
 const isItem = (item) => Boolean(item) && itemValidator(item);
@@ -10,8 +13,30 @@ const isGroup = (group) =>
 
 const itemsValidator = (items) => items.every(isItem) || items.every(isGroup);
 
-const isAllItems = (items) => items.every(isItem);
+const isListItem = (tag) =>
+  ['gl-disclosure-dropdown-group', 'gl-disclosure-dropdown-item', 'li'].includes(tag);
+
+const isValidSlotTagVue2 = (vNode) =>
+  Boolean(vNode) && isListItem(vNode.componentOptions?.tag || vNode.tag);
+
+const isValidSlotTag = (vNode) => {
+  return (
+    [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes(vNode.type?.name) ||
+    vNode.type === 'li'
+  );
+};
 
-const isAllGroups = (items) => items.every(isGroup);
+const hasOnlyListItems = ({ default: defaultSlot }) => {
+  if (!isFunction(defaultSlot)) {
+    return false;
+  }
+  const nodes = defaultSlot();
+  return (
+    Array.isArray(nodes) &&
+    nodes.filter((vNode) => vNode.tag).length &&
+    (nodes.filter((vNode) => vNode.tag).every(isValidSlotTagVue2) ||
+      nodes.filter((vNode) => vNode.tag).every(isValidSlotTag))
+  );
+};
 
-export { itemsValidator, isItem, isGroup, isAllItems, isAllGroups };
+export { itemsValidator, isItem, isGroup, hasOnlyListItems };