@gitlab/ui 52.7.2 → 52.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "52.7.2",
+  "version": "52.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -82,7 +82,7 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.20.7",
     "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/fonts": "^1.0.1",
@@ -115,7 +115,7 @@
     "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.29.0",
+    "eslint": "8.31.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.6.8",

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.scss

@@ -0,0 +1,5 @@
+.gl-dropdown-custom-toggle {
+  &:focus {
+    @include gl-focus;
+  }
+}

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js

@@ -42,14 +42,15 @@ describe('base dropdown', () => {
     jest.clearAllMocks();
   });
 
-  const findDropdownToggle = () => wrapper.find('.btn.gl-dropdown-toggle');
+  const findDefaultDropdownToggle = () => wrapper.find('.btn.gl-dropdown-toggle');
+  const findCustomDropdownToggle = () => wrapper.find('.gl-dropdown-custom-toggle');
   const findDropdownMenu = () => wrapper.find('.dropdown-menu');
 
   describe('popper.js instance', () => {
     it('should initialize popper.js instance with toggle and menu elements and config for left-aligned menu', async () => {
       await buildWrapper();
       expect(mockCreatePopper).toHaveBeenCalledWith(
-        findDropdownToggle().element,
+        findDefaultDropdownToggle().element,
         findDropdownMenu().element,
         { ...POPPER_CONFIG, placement: 'bottom-start' }
       );
@@ -58,7 +59,7 @@ describe('base dropdown', () => {
     it('should initialize popper.js instance with toggle and menu elements and config for right-aligned menu', async () => {
       await buildWrapper({ right: true });
       expect(mockCreatePopper).toHaveBeenCalledWith(
-        findDropdownToggle().element,
+        findDefaultDropdownToggle().element,
         findDropdownMenu().element,
         { ...POPPER_CONFIG, placement: 'bottom-end' }
       );
@@ -66,7 +67,7 @@ describe('base dropdown', () => {
 
     it('should update popper instance when component is updated', async () => {
       await buildWrapper();
-      await findDropdownToggle().trigger('click');
+      await findDefaultDropdownToggle().trigger('click');
       await wrapper.setProps({ category: 'tertiary' });
       expect(updatePopper).toHaveBeenCalled();
     });
@@ -105,7 +106,7 @@ describe('base dropdown', () => {
     });
 
     it(`sets toggle button classes to '${toggleClasses}'`, () => {
-      const classes = findDropdownToggle().classes().sort();
+      const classes = findDefaultDropdownToggle().classes().sort();
 
       expect(classes).toEqual([...DEFAULT_BTN_TOGGLE_CLASSES, ...toggleClasses].sort());
     });
@@ -125,7 +126,7 @@ describe('base dropdown', () => {
     });
 
     it(`class is inherited from toggle class of type ${type}`, () => {
-      expect(findDropdownToggle().classes().sort()).toEqual(
+      expect(findDefaultDropdownToggle().classes().sort()).toEqual(
         expect.arrayContaining(expectedClasses.sort())
       );
     });
@@ -137,7 +138,7 @@ describe('base dropdown', () => {
     });
 
     it('should toggle menu visibility on toggle button click', async () => {
-      const toggle = findDropdownToggle();
+      const toggle = findDefaultDropdownToggle();
       const menu = findDropdownMenu();
 
       // open menu clicking toggle btn
@@ -155,7 +156,7 @@ describe('base dropdown', () => {
     });
 
     it('should close the menu when Escape is pressed inside menu and focus toggle', async () => {
-      const toggle = findDropdownToggle();
+      const toggle = findDefaultDropdownToggle();
       const menu = findDropdownMenu();
 
       // open menu clicking toggle btn
@@ -170,4 +171,59 @@ describe('base dropdown', () => {
       expect(toggle.element).toHaveFocus();
     });
   });
+
+  describe('Custom toggle', () => {
+    const toggleContent = '<div>Custom toggle</div>';
+
+    beforeEach(() => {
+      const slots = { toggle: toggleContent };
+      buildWrapper({}, slots);
+    });
+
+    it('does not render default toggle button', () => {
+      expect(findDefaultDropdownToggle().exists()).toBe(false);
+    });
+
+    it('renders the custom toggle instead', () => {
+      expect(findCustomDropdownToggle().exists()).toBe(true);
+    });
+
+    it('renders provided via slot content as custom toggle', () => {
+      expect(findCustomDropdownToggle().html()).toContain(toggleContent);
+    });
+
+    describe('toggle visibility', () => {
+      it('should toggle menu visibility on toggle button ENTER', async () => {
+        const toggle = findCustomDropdownToggle();
+        const menu = findDropdownMenu();
+        // open menu clicking toggle btn
+        await toggle.trigger('keydown.enter');
+        expect(menu.classes('show')).toBe(true);
+        expect(toggle.attributes('aria-expanded')).toBe('true');
+        await nextTick();
+        expect(wrapper.emitted(GL_DROPDOWN_SHOWN).length).toBe(1);
+
+        // close menu clicking toggle btn again
+        await toggle.trigger('keydown.enter');
+        expect(menu.classes('show')).toBe(false);
+        expect(toggle.attributes('aria-expanded')).toBeUndefined();
+        expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
+      });
+
+      it('should close the menu when Escape is pressed inside menu and focus toggle', async () => {
+        const toggle = findCustomDropdownToggle();
+        const menu = findDropdownMenu();
+        // open menu clicking toggle btn
+        await toggle.trigger('click');
+        expect(menu.classes('show')).toBe(true);
+
+        // close menu pressing ESC on it
+        await menu.trigger('keydown.esc');
+        expect(menu.classes('show')).toBe(false);
+        expect(toggle.attributes('aria-expanded')).toBeUndefined();
+        expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
+        expect(toggle.element).toHaveFocus();
+      });
+    });
+  });
 });

package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue

@@ -131,6 +131,32 @@ export default {
     toggleLabelledBy() {
       return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : this.toggleId;
     },
+    isDefaultToggle() {
+      return !this.$scopedSlots.toggle;
+    },
+    toggleOptions() {
+      if (this.isDefaultToggle) {
+        return {
+          is: GlButton,
+          icon: this.icon,
+          category: this.category,
+          variant: this.variant,
+          size: this.size,
+          disabled: this.disabled,
+          loading: this.loading,
+          class: this.toggleButtonClasses,
+        };
+      }
+
+      return {
+        is: 'div',
+        class: 'gl-dropdown-custom-toggle gl-hover-cursor-pointer',
+        tabindex: '0',
+      };
+    },
+    toggleElement() {
+      return this.$refs.toggle.$el || this.$refs.toggle;
+    },
     popperConfig() {
       return {
         placement: this.right ? 'bottom-end' : 'bottom-start',
@@ -140,7 +166,7 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.popper = createPopper(this.$refs.toggle.$el, this.$refs.content, this.popperConfig);
+      this.popper = createPopper(this.toggleElement, this.$refs.content, this.popperConfig);
     });
   },
   beforeDestroy() {
@@ -159,7 +185,7 @@ export default {
           "Unfortunately there's not any way to compute the position of an element not rendered in the document".
           Then we `await` while the new dropdown position is calculated and DOM updated accordingly.
           After we can  emit the `GL_DROPDOWN_SHOWN` event to the parent which might interact with updated  dropdown,
-          e.g. set focus..
+          e.g. set focus.
          */
         await this.$nextTick();
         await this.popper?.update();
@@ -188,35 +214,37 @@ export default {
       this.focusToggle();
     },
     focusToggle() {
-      this.$refs.toggle.$el.focus();
+      this.toggleElement.focus();
     },
   },
 };
 </script>
 
 <template>
-  <div v-outside="close" class="gl-dropdown dropdown btn-group">
-    <gl-button
+  <div
+    v-outside="close"
+    class="gl-dropdown dropdown gl-display-inline-flex gl-vertical-align-middle"
+  >
+    <component
+      :is="toggleOptions.is"
+      v-bind="toggleOptions"
       :id="toggleId"
       ref="toggle"
       data-testid="base-dropdown-toggle"
-      :icon="icon"
-      :category="category"
-      :variant="variant"
-      :size="size"
-      :disabled="disabled"
-      :loading="loading"
-      :class="toggleButtonClasses"
       :aria-haspopup="ariaHaspopup"
       :aria-expanded="visible"
       :aria-labelledby="toggleLabelledBy"
+      @keydown.enter="toggle"
       @click="toggle"
     >
-      <span class="gl-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
-        {{ toggleText }}
-      </span>
-      <gl-icon v-if="!noCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />
-    </gl-button>
+      <!-- @slot Custom toggle button content -->
+      <slot name="toggle">
+        <span class="gl-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
+          {{ toggleText }}
+        </span>
+        <gl-icon v-if="!noCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />
+      </slot>
+    </component>
 
     <div
       ref="content"

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -16,7 +16,7 @@ import { makeContainer } from '../../../../utils/story_decorators/container';
 import { disableControls } from '../../../../utils/stories_utils';
 import { setStoryTimeout } from '../../../../utils/test_utils';
 import readme from './listbox.md';
-import { mockOptions, mockGroups } from './mock_data';
+import { mockOptions, mockGroups, mockUsers } from './mock_data';
 import { flattenedOptions } from './utils';
 
 const defaultValue = (prop) => GlListbox.props[prop].default;
@@ -202,7 +202,7 @@ export const CustomListItem = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   data() {
     return {
-      selected: ['mikegreiling'],
+      selected: [mockUsers[0].value],
     };
   },
   components: {
@@ -229,15 +229,15 @@ export const CustomListItem = (args, { argTypes }) => ({
   },
   template: template(
     `<template #list-item="{ item }">
-          <span class="gl-display-flex gl-align-items-center">
-            <gl-avatar :size="32" class-="gl-mr-3"/>
-              <span class="gl-display-flex gl-flex-direction-column">
-                <span class="gl-font-weight-bold gl-white-space-nowrap">{{ item.text }}</span>
-                <span class="gl-text-gray-400"> {{ item.secondaryText }}</span>
+              <span class="gl-display-flex gl-align-items-center">
+                <gl-avatar :size="32" :entity-name="item.value" class-="gl-mr-3"/>
+                  <span class="gl-display-flex gl-flex-direction-column">
+                    <span class="gl-font-weight-bold gl-white-space-nowrap">{{ item.text }}</span>
+                    <span class="gl-text-gray-400"> {{ item.secondaryText }}</span>
+                  </span>
               </span>
-          </span>
-    </template>
-  `,
+            </template>
+        `,
     {
       bindingOverrides: {
         ':toggle-text': 'customToggleText',
@@ -248,16 +248,7 @@ export const CustomListItem = (args, { argTypes }) => ({
 });
 
 CustomListItem.args = generateProps({
-  items: [
-    {
-      value: 'mikegreiling',
-      text: 'Mike Greiling',
-      secondaryText: '@mikegreiling',
-      icon: 'foo',
-    },
-    { value: 'ohoral', text: 'Olena Horal-Koretska', secondaryText: '@ohoral', icon: 'bar' },
-    { value: 'markian', text: 'Mark Florian', secondaryText: '@markian', icon: 'bin' },
-  ],
+  items: mockUsers,
   multiple: true,
   isCheckCentered: true,
   headerText: 'Select assignees',
@@ -265,6 +256,45 @@ CustomListItem.args = generateProps({
 });
 CustomListItem.decorators = [makeContainer({ height: '200px' })];
 
+export const CustomToggle = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    GlListbox,
+    GlAvatar,
+  },
+  data() {
+    return {
+      selected: mockUsers[1].value,
+    };
+  },
+  mounted() {
+    if (this.startOpened) {
+      openListbox(this);
+    }
+  },
+  template: template(
+    `
+    <template #toggle>
+      <gl-avatar :size="32" :entity-name="selected"></gl-avatar>
+    </template>
+    <template #list-item="{ item }">
+      <span class="gl-display-flex gl-align-items-center">
+        <gl-avatar :size="32" :entity-name="item.value" class-="gl-mr-3"/>
+          <span class="gl-display-flex gl-flex-direction-column">
+            <span class="gl-font-weight-bold gl-white-space-nowrap">{{ item.text }}</span>
+            <span class="gl-text-gray-400"> {{ item.secondaryText }}</span>
+          </span>
+      </span>
+    </template>
+  `
+  ),
+});
+CustomToggle.args = generateProps({
+  items: mockUsers,
+  isCheckCentered: true,
+});
+CustomToggle.decorators = [makeContainer({ height: '200px' })];
+
 const makeGroupedExample = (changes) => {
   const story = (args, { argTypes }) => ({
     props: Object.keys(argTypes),

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -334,6 +334,9 @@ export default {
     showIntersectionObserver() {
       return this.infiniteScroll && !this.infiniteScrollLoading && !this.loading && !this.searching;
     },
+    hasCustomToggle() {
+      return Boolean(this.$scopedSlots.toggle);
+    },
   },
   watch: {
     selected: {
@@ -558,6 +561,11 @@ export default {
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
   >
+    <template v-if="hasCustomToggle" #toggle>
+      <!-- @slot Custom toggle content -->
+      <slot name="toggle"></slot>
+    </template>
+
     <div
       v-if="headerText"
       class="gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8"
@@ -652,17 +660,14 @@ export default {
           </gl-listbox-group>
         </template>
       </template>
+      <component :is="listboxTag === 'ul' ? 'li' : 'div'" v-if="infiniteScrollLoading">
+        <gl-loading-icon data-testid="listbox-infinite-scroll-loader" size="md" class="gl-my-3" />
+      </component>
       <gl-intersection-observer
         v-if="showIntersectionObserver"
         @appear="onIntersectionObserverAppear"
       />
     </component>
-    <gl-loading-icon
-      v-if="infiniteScrollLoading"
-      data-testid="listbox-infinite-scroll-loader"
-      size="md"
-      class="gl-my-3"
-    />
     <span
       v-if="announceSRSearchResults"
       data-testid="listbox-number-of-results"

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

@@ -66,3 +66,24 @@ export const mockGroups = [
     ],
   },
 ];
+
+export const mockUsers = [
+  {
+    value: 'mikegreiling',
+    text: 'Mike Greiling',
+    secondaryText: '@mikegreiling',
+    icon: 'foo',
+  },
+  {
+    value: 'ohoral',
+    text: 'Olena Horal-Koretska',
+    secondaryText: '@ohoral',
+    icon: 'bar',
+  },
+  {
+    value: 'markian',
+    text: 'Mark Florian',
+    secondaryText: '@markian',
+    icon: 'bin',
+  },
+];

package/src/scss/components.scss

@@ -74,4 +74,5 @@
 @import '../components/charts/tooltip/tooltip';
 @import '../components/shared_components/charts/tooltip_default_format';
 @import '../components/utilities/truncate/truncate';
+@import '../components/base/new_dropdowns/base_dropdown/base_dropdown';
 @import '../components/base/new_dropdowns/listbox/listbox';