@gitlab/ui 53.1.0 → 53.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [53.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v53.2.0...v53.3.0) (2023-01-24)
+
+
+### Features
+
+* **GlDisclosureDropdown:** Allow to provide custom toggle id ([b696ea2](https://gitlab.com/gitlab-org/gitlab-ui/commit/b696ea2ef34a9efca894260cfa45b7ff36aefd56))
+
+# [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

@@ -97,6 +97,15 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * Custom toggle id.
+     * Fot instance, it can be referenced by tooltip or popover
+     */
+    toggleId: {
+      type: String,
+      required: false,
+      default: _uniqueId('dropdown-toggle-btn-')
+    },
     /**
      * Additional CSS classes to customize toggle appearance
      */
@@ -143,7 +152,6 @@ var script = {
   },
   data() {
     return {
-      toggleId: _uniqueId('dropdown-toggle-btn-'),
       disclosureId: _uniqueId('disclosure-'),
       nextFocusedItemIndex: null
     };
@@ -257,7 +265,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.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -33,13 +33,21 @@ describe('GlDisclosureDropdown', () => {
   const findListItem = (index) => findDisclosureItems().at(index).findComponent(ITEM_SELECTOR);
 
   describe('toggle text', () => {
-    it('should pass toggle text to base dropdown', () => {
+    it('should pass toggle text to the base dropdown', () => {
       const toggleText = 'Merge requests';
       buildWrapper({ items: mockItems, toggleText });
       expect(findBaseDropdown().props('toggleText')).toBe(toggleText);
     });
   });
 
+  describe('custom toggle id', () => {
+    it('should pass toggle id to the base dropdown', () => {
+      const toggleId = 'custom-toggle';
+      buildWrapper({ items: mockItems, toggleId });
+      expect(findBaseDropdown().props('toggleId')).toBe(toggleId);
+    });
+  });
+
   describe('ARIA attributes', () => {
     it('should provide `toggleId` to the base dropdown and reference it in`aria-labelledby` attribute of the list container`', async () => {
       await buildWrapper({ items: mockItems });

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

@@ -13,10 +13,17 @@ import {
   GlAvatar,
   GlModal,
   GlIcon,
+  GlTooltip,
 } 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;
 
@@ -29,6 +36,7 @@ const generateProps = ({
   loading = defaultValue('loading'),
   noCaret = defaultValue('noCaret'),
   placement = defaultValue('placement'),
+  toggleId = defaultValue('toggleId'),
   toggleText,
   textSrOnly = defaultValue('textSrOnly'),
   icon = '',
@@ -44,6 +52,7 @@ const generateProps = ({
   loading,
   noCaret,
   placement,
+  toggleId,
   toggleText,
   textSrOnly,
   icon,
@@ -62,6 +71,7 @@ const makeBindings = (overrides = {}) =>
     ':loading': 'loading',
     ':no-caret': 'noCaret',
     ':placement': 'placement',
+    ':toggle-id': 'toggleId',
     ':toggle-text': 'toggleText',
     ':text-sr-only': 'textSrOnly',
     ':icon': 'icon',
@@ -87,23 +97,34 @@ const template = (content, { bindingOverrides = {} } = {}) => `
     </gl-disclosure-dropdown>
 `;
 
+const TOGGLE_ID = 'custom-toggle-id';
 export const Default = (args, { argTypes }) => ({
+  toggleId: TOGGLE_ID,
   props: Object.keys(argTypes),
   components: {
     GlDisclosureDropdown,
+    GlTooltip,
   },
   mounted() {
     if (this.startOpened) {
       openDisclosure(this);
     }
   },
-  template: template(),
+  template: `
+    <div>
+      ${template()}
+      <gl-tooltip :target="$options.toggleId" placement="right">
+        This is a default disclosure
+      </gl-tooltip>
+    </div>
+  `,
 });
 Default.args = generateProps({
   icon: 'ellipsis_v',
   noCaret: true,
   toggleText: 'Disclosure',
   textSrOnly: true,
+  toggleId: TOGGLE_ID,
 });
 Default.decorators = [makeContainer({ height: '200px' })];
 
@@ -185,6 +206,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

@@ -109,6 +109,15 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Custom toggle id.
+     * Fot instance, it can be referenced by tooltip or popover
+     */
+    toggleId: {
+      type: String,
+      required: false,
+      default: uniqueId('dropdown-toggle-btn-'),
+    },
     /**
      * Additional CSS classes to customize toggle appearance
      */
@@ -155,7 +164,6 @@ export default {
   },
   data() {
     return {
-      toggleId: uniqueId('dropdown-toggle-btn-'),
       disclosureId: uniqueId('disclosure-'),
       nextFocusedItemIndex: null,
     };
@@ -328,9 +336,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',