@gitlab/ui 55.3.1 → 56.0.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [56.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v56.0.0...v56.0.1) (2023-02-17)
+
+
+### Bug Fixes
+
+* **deps:** update dependency dompurify to ^2.4.4 ([c90c17b](https://gitlab.com/gitlab-org/gitlab-ui/commit/c90c17b307da010cacb566800f9cf5922124f28e))
+
+# [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)
 
 

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

@@ -256,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.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}},[_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

@@ -56,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('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}},[_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

@@ -28,7 +28,6 @@ var script = {
       const {
         item
       } = this;
-      if (!item) return null;
       if (this.isLink) return {
         is: 'a',
         attrs: {
@@ -36,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: {
@@ -60,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() {
@@ -83,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "55.3.1",
+  "version": "56.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -62,7 +62,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "bootstrap-vue": "2.20.1",
-    "dompurify": "^2.4.3",
+    "dompurify": "^2.4.4",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -115,7 +115,7 @@
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.32.0",
+    "eslint": "8.34.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.10",

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.stories.js

@@ -107,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',
       },
     }
@@ -186,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);
     },
@@ -199,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',
-      },
-    }
+    `
   ),
 });
 
@@ -230,23 +216,20 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
       </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>
@@ -254,14 +237,18 @@ 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)">
-          Provide feedback
+          <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]"/>
     `,
     {},
     `
@@ -280,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

@@ -307,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>
 
@@ -331,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

@@ -71,7 +71,9 @@ 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>

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

@@ -27,8 +27,6 @@ export default {
     itemComponent() {
       const { item } = this;
 
-      if (!item) return null;
-
       if (this.isLink)
         return {
           is: 'a',
@@ -37,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: {
@@ -59,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() {
@@ -78,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"
@@ -99,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/charts/chart/chart.md

@@ -1,13 +1,13 @@
 ### ECharts Wrapper
 
-The chart component is a Vue component wrapper around
-[Apache ECharts](https://echarts.apache.org/en/api.html#echarts). The chart component accepts width
-and height props in order to allow the user to make it responsive, but it is not responsive
-by default.
+The chart component is a Vue component wrapper around [Apache ECharts](https://echarts.apache.org/en/api.html#echarts).
+The chart component accepts width and height props in order to allow the user to make it responsive,
+but it is not responsive by default.
 
-> Note: In every case there should be a specific component for each type of chart
-(i.e. Line, Area, Bar, etc.). This component should only need to be used by chart type components
-within GitLab UI as opposed to being used directly within any other codebase.
+> Note: When implementing a chart type that does not already have a GitLab UI component, you can use
+> this component alonside the [ECharts options](https://echarts.apache.org/en/api.html#echarts) to
+> build your chart. Each type of chart should still follow the general guidelines in the
+> [pajamas documentation](https://design.gitlab.com/data-visualization/charts).
 
 ### EChart Lifecycle