@gitlab/ui 53.1.0 → 53.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [53.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v53.1.0...v53.2.0) (2023-01-23)
+
+
+### Features
+
+* **GlDisclosureDropdown:** Allow to provide custom item template for groups ([c3034b8](https://gitlab.com/gitlab-org/gitlab-ui/commit/c3034b87ae093daae7b0817a2535abefa0a7dcad))
+
 # [53.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v53.0.1...v53.1.0) (2023-01-23)
 
 

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

@@ -257,7 +257,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-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",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,{key:"list-item",fn:function(){return [_vm._t("list-item")]},proxy:true}],null,true)})]]})]})],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.disclosureOptions.tag,{ref:"content",tag:"component",staticClass:"gl-dropdown-contents gl-list-style-none gl-pl-0 gl-mb-0",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,on:{"action":_vm.handleAction}},[_vm._t("list-item",null,{"item":groupItem})],2)}):_vm._e()],2)]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -42,6 +42,18 @@ const mockItemsCustomItem = [{
     rel: 'nofollow'
   }
 }];
+const mockGroupsCustomItem = [{
+  name: 'Merge requests',
+  items: [{
+    text: 'Assigned to you',
+    href: 'https://gitlab.com/dashboard/merge_requests?assignee_username=root',
+    count: 1
+  }, {
+    text: 'Review requests from you',
+    href: 'https://gitlab.com/dashboard/merge_requests?reviewer_username=root',
+    count: 4
+  }]
+}];
 const mockGroups = [{
   name: 'This project',
   items: [{
@@ -125,4 +137,4 @@ const mockProfileGroups = [{
   }]
 }];
 
-export { mockGroups, mockItems, mockItemsCustomItem, mockProfileGroups };
+export { mockGroups, mockGroupsCustomItem, mockItems, mockItemsCustomItem, mockProfileGroups };

package/package.json

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

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

@@ -16,7 +16,13 @@ import {
 } from '../../../../index';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import readme from './disclosure_dropdown.md';
-import { mockItems, mockItemsCustomItem, mockGroups, mockProfileGroups } from './mock_data';
+import {
+  mockItems,
+  mockItemsCustomItem,
+  mockGroups,
+  mockProfileGroups,
+  mockGroupsCustomItem,
+} from './mock_data';
 
 const defaultValue = (prop) => GlDisclosureDropdown.props[prop].default;
 
@@ -185,6 +191,51 @@ Groups.args = generateProps({
   textSrOnly: true,
 });
 
+export const CustomGroupsAndItems = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    GlDisclosureDropdown,
+    GlBadge,
+  },
+  mounted() {
+    if (this.startOpened) {
+      openDisclosure(this);
+    }
+  },
+  methods: {
+    navigate() {
+      this.$refs.link.click();
+    },
+    getTotalMrs(items) {
+      return items.reduce((acc, item) => acc + item.count, 0);
+    },
+  },
+  template: template(
+    `
+      <template #group-label="{ group }">
+        {{ group.name }} <gl-badge size="sm">{{ getTotalMrs(group.items)  }}</gl-badge>
+      </template>
+      <template #list-item="{ item }">
+        <a 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">
+          {{item.text}}
+          <gl-badge pill size="sm" v-if="item.count">{{item.count}}</gl-badge>
+        </a>
+       </template>
+    `,
+    {
+      bindingOverrides: {
+        '@action': 'navigate',
+      },
+    }
+  ),
+});
+
+CustomGroupsAndItems.args = generateProps({
+  items: mockGroupsCustomItem,
+  toggleText: 'Merge requests',
+});
+CustomGroupsAndItems.decorators = [makeContainer({ height: '200px' })];
+
 export const CustomGroupsItemsAndToggle = makeGroupedExample({
   template: template(`
     <template #toggle>

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

@@ -328,9 +328,15 @@ export default {
                 <slot name="group-label" :group="item"></slot>
               </template>
 
-              <template #list-item>
-                <!-- @slot Custom template of the disclosure dropdown item -->
-                <slot name="list-item"></slot>
+              <template v-if="$scopedSlots['list-item']">
+                <gl-disclosure-dropdown-item
+                  v-for="groupItem in item.items"
+                  :key="groupItem.text"
+                  @action="handleAction"
+                >
+                  <!-- @slot Custom template of the disclosure dropdown item -->
+                  <slot name="list-item" :item="groupItem"></slot>
+                </gl-disclosure-dropdown-item>
               </template>
             </gl-disclosure-dropdown-group>
           </template>

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

@@ -51,6 +51,24 @@ export const mockItemsCustomItem = [
   },
 ];
 
+export const mockGroupsCustomItem = [
+  {
+    name: 'Merge requests',
+    items: [
+      {
+        text: 'Assigned to you',
+        href: 'https://gitlab.com/dashboard/merge_requests?assignee_username=root',
+        count: 1,
+      },
+      {
+        text: 'Review requests from you',
+        href: 'https://gitlab.com/dashboard/merge_requests?reviewer_username=root',
+        count: 4,
+      },
+    ],
+  },
+];
+
 export const mockGroups = [
   {
     name: 'This project',