@gitlab/ui 52.7.3 → 52.9.0

package/package.json

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

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"

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/components/base/search_box_by_type/search_box_by_type.scss

@@ -1,10 +1,12 @@
+$gl-search-box-by-type-search-icon-size: 16px;
 $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 
 .gl-search-box-by-type-search-icon {
-  @include gl-m-3;
   @include gl-text-gray-500;
   @include gl-w-5;
   @include gl-absolute;
+  @include gl-left-3;
+  top: calc(50% - #{$gl-search-box-by-type-search-icon-size} / 2);
 }
 
 .gl-search-box-by-type {
@@ -33,11 +35,37 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   }
 }
 
+.gl-search-box-by-type-input-borderless,
+.gl-search-box-by-type-input-borderless.gl-form-input {
+  @include gl-border-none;
+  @include gl-font-base;
+  @include gl-h-auto;
+  @include gl-line-height-normal;
+  @include gl-pl-7;
+  @include gl-py-4;
+  @include gl-shadow-none;
+  @include gl-w-full;
+  border-radius: 0;
+  padding-right: calc(#{$gl-spacing-scale-6} + #{$gl-spacing-scale-2});
+
+  &:not(.form-control-plaintext):focus {
+    @include gl-focus($inset: true);
+  }
+
+  &::placeholder {
+    @include gl-text-gray-400;
+  }
+
+  &::-webkit-search-cancel-button {
+    @include gl-display-none;
+  }
+}
+
 .gl-search-box-by-type-right-icons {
   @include gl-display-flex;
   @include gl-align-items-center;
   @include gl-line-height-0;
-  @include gl-right-0;
+  @include gl-right-2;
   @include gl-absolute;
   @include gl-h-full;
 }

package/src/components/base/search_box_by_type/search_box_by_type.spec.js

@@ -16,6 +16,20 @@ describe('search box by type component', () => {
   const findClearIcon = () => wrapper.findComponent(ClearIcon);
   const findInput = () => wrapper.findComponent({ ref: 'input' });
 
+  describe('borderless', () => {
+    it('renders default class on input when `borderless` prop is false', () => {
+      createComponent({ borderless: false });
+
+      expect(findInput().classes()).toContain('gl-search-box-by-type-input');
+    });
+
+    it('renders borderless class on input when `borderless` prop is true', () => {
+      createComponent({ borderless: true });
+
+      expect(findInput().classes()).toContain('gl-search-box-by-type-input-borderless');
+    });
+  });
+
   describe('clear icon component', () => {
     beforeEach(() => {
       createComponent({ value: 'somevalue' });

package/src/components/base/search_box_by_type/search_box_by_type.stories.js

@@ -5,6 +5,7 @@ import readme from './search_box_by_type.md';
 const template = `
   <gl-search-box-by-type
     v-model="searchQuery"
+    :borderless="borderless"
     :clear-button-title="clearButtonTitle"
     :disabled="disabled"
     :is-loading="isLoading"
@@ -15,11 +16,13 @@ const template = `
 const defaultValue = (prop) => GlSearchBoxByType.props[prop].default;
 
 const generateProps = ({
+  borderless = defaultValue('borderless'),
   clearButtonTitle = defaultValue('clearButtonTitle'),
   disabled = defaultValue('disabled'),
   placeholder = 'Search',
   isLoading = defaultValue('isLoading'),
 } = {}) => ({
+  borderless,
   clearButtonTitle,
   disabled,
   placeholder,
@@ -34,9 +37,15 @@ const Template = (args, { argTypes }) => ({
   data: () => ({ searchQuery: '' }),
   template,
 });
+
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const Borderless = Template.bind({});
+Borderless.args = generateProps({
+  borderless: true,
+});
+
 export default {
   title: 'base/search-box-by-type',
   component: GlSearchBoxByType,

package/src/components/base/search_box_by_type/search_box_by_type.vue

@@ -25,6 +25,11 @@ export default {
       required: false,
       default: '',
     },
+    borderless: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     clearButtonTitle: {
       type: String,
       required: false,
@@ -113,11 +118,14 @@ export default {
       ref="input"
       :value="value"
       :disabled="disabled"
-      class="gl-search-box-by-type-input"
+      :class="{
+        'gl-search-box-by-type-input': !borderless,
+        'gl-search-box-by-type-input-borderless': borderless,
+      }"
       v-bind="inputAttributes"
       v-on="inputListeners"
     />
-    <div class="gl-search-box-by-type-right-icons">
+    <div v-if="isLoading || showClearButton" class="gl-search-box-by-type-right-icons">
       <gl-loading-icon v-if="isLoading" class="gl-search-box-by-type-loading-icon" />
       <gl-clear-icon-button
         v-if="showClearButton"

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';

package/dist/components/base/search_box_by_type/index.js

@@ -1 +0,0 @@
-