@gitlab/ui 44.1.0 → 46.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "44.1.0",
+  "version": "46.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -79,7 +79,7 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
-    "@gitlab/eslint-plugin": "18.0.0",
+    "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.4.0",
     "@rollup/plugin-commonjs": "^11.1.0",

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

@@ -192,22 +192,21 @@ describe('Alert component', () => {
     });
   });
 
-  describe('aria-live', () => {
-    it.each([alertVariantOptions.danger, alertVariantOptions.warning])(
-      'for %p variant, has aria-live assertive attribute',
-      (variant) => {
+  describe('role and aria-live', () => {
+    it.each`
+      variant                        | role        | assertiveness
+      ${alertVariantOptions.danger}  | ${'alert'}  | ${'assertive'}
+      ${alertVariantOptions.warning} | ${'alert'}  | ${'assertive'}
+      ${alertVariantOptions.info}    | ${'status'} | ${'polite'}
+      ${alertVariantOptions.success} | ${'alert'}  | ${'polite'}
+      ${alertVariantOptions.tip}     | ${'status'} | ${'polite'}
+    `(
+      '$variant variant has role "$role" and aria-live "$assertiveness"',
+      ({ variant, role, assertiveness }) => {
         createComponent({ propsData: { variant } });
 
-        expect(wrapper.find('[aria-live=assertive').exists()).toBe(true);
-      }
-    );
-
-    it.each([alertVariantOptions.info, alertVariantOptions.success, alertVariantOptions.tip])(
-      'for %p variant, has aria-live polite attribute',
-      (variant) => {
-        createComponent({ propsData: { variant } });
-
-        expect(wrapper.find('[aria-live=polite]').exists()).toBe(true);
+        expect(wrapper.find(`[role="${role}"`).exists()).toBe(true);
+        expect(wrapper.find(`[aria-live="${assertiveness}"`).exists()).toBe(true);
       }
     );
   });

package/src/components/base/alert/alert.vue

@@ -97,6 +97,19 @@ export default {
 
       return 'polite';
     },
+    role() {
+      if (
+        [
+          alertVariantOptions.danger,
+          alertVariantOptions.warning,
+          alertVariantOptions.success,
+        ].includes(this.variant)
+      ) {
+        return 'alert';
+      }
+
+      return 'status';
+    },
     iconName() {
       return alertVariantIconMap[this.variant];
     },
@@ -192,7 +205,7 @@ export default {
       :class="{ 'gl-alert-icon': true, 'gl-alert-icon-no-title': !title }"
     />
 
-    <div class="gl-alert-content" role="alert" :aria-live="ariaLive">
+    <div class="gl-alert-content" :role="role" :aria-live="ariaLive">
       <h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
 
       <div class="gl-alert-body">

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

@@ -40,15 +40,15 @@ describe('banner component', () => {
       });
 
       it('should emit a `close` event after the close button is clicked', () => {
-        expect(wrapper.emitted('close')).toBeFalsy();
+        expect(wrapper.emitted('close')).toBe(undefined);
         wrapper.find('.gl-banner-close').vm.$emit('click');
-        expect(wrapper.emitted('close')).toBeTruthy();
+        expect(wrapper.emitted('close')).toHaveLength(1);
       });
 
       it('should emit a `primary` event when the primary button is clicked', () => {
-        expect(wrapper.emitted('primary')).toBeFalsy();
+        expect(wrapper.emitted('primary')).toBe(undefined);
         wrapper.find('[data-testid="gl-banner-primary-button"]').vm.$emit('click');
-        expect(wrapper.emitted('primary')).toBeTruthy();
+        expect(wrapper.emitted('primary')).toHaveLength(1);
       });
     });
 

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

@@ -180,7 +180,7 @@ describe('datepicker component', () => {
         });
 
         it('emits the `clear` event', () => {
-          expect(wrapper.emitted('clear')).toBeTruthy();
+          expect(wrapper.emitted('clear')).toHaveLength(1);
         });
       });
 

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

@@ -50,13 +50,13 @@ describe('Daterange Picker', () => {
       it('emits `start-date-open` event on component when `open` event fires', () => {
         findStartPicker().vm.$emit('open');
 
-        expect(wrapper.emitted('start-picker-open')).toBeTruthy();
+        expect(wrapper.emitted('start-picker-open')).toHaveLength(1);
       });
 
       it('emits `start-date-close` event on component when `close` event fires', () => {
         findStartPicker().vm.$emit('close');
 
-        expect(wrapper.emitted('start-picker-close')).toBeTruthy();
+        expect(wrapper.emitted('start-picker-close')).toHaveLength(1);
       });
 
       describe('with a date range violation', () => {
@@ -136,13 +136,13 @@ describe('Daterange Picker', () => {
       it('emits `end-date-open` event on component when `open` event fires', () => {
         findEndPicker().vm.$emit('open');
 
-        expect(wrapper.emitted('end-picker-open')).toBeTruthy();
+        expect(wrapper.emitted('end-picker-open')).toHaveLength(1);
       });
 
       it('emits `end-date-close` event on component when `close` event fires', () => {
         findEndPicker().vm.$emit('close');
 
-        expect(wrapper.emitted('end-picker-close')).toBeTruthy();
+        expect(wrapper.emitted('end-picker-close')).toHaveLength(1);
       });
     });
   });

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

@@ -71,7 +71,7 @@ describe('drawer component', () => {
         const event = new KeyboardEvent('keydown', { keyCode: 27 });
         document.dispatchEvent(event);
 
-        expect(wrapper.emitted().close).toBeFalsy();
+        expect(wrapper.emitted('close')).toBe(undefined);
       });
 
       it('does not call onClose when open is false and keyCode is not esc', () => {
@@ -80,7 +80,7 @@ describe('drawer component', () => {
         const event = new KeyboardEvent('keydown', { keyCode: 37 });
         document.dispatchEvent(event);
 
-        expect(wrapper.emitted().close).toBeFalsy();
+        expect(wrapper.emitted('close')).toBe(undefined);
       });
     });
   });

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

@@ -185,7 +185,7 @@ describe('new dropdown', () => {
 
     it('renders the header', () => {
       buildWrapper({}, slots);
-      expect(wrapper.find('.gl-new-dropdown-header').exists()).toBeTruthy();
+      expect(wrapper.find('.gl-new-dropdown-header').exists()).toBe(true);
       expect(wrapper.html()).toContain('Header Content');
     });
 
@@ -198,12 +198,12 @@ describe('new dropdown', () => {
   describe('with no header slot exists', () => {
     it('does not render the header', () => {
       buildWrapper();
-      expect(wrapper.find('.gl-new-dropdown-header').exists()).toBeFalsy();
+      expect(wrapper.find('.gl-new-dropdown-header').exists()).toBe(false);
     });
 
     it('does render the header if headerText provided', () => {
       buildWrapper({ headerText: 'Legacy Header Prop Text' });
-      expect(wrapper.find('.gl-new-dropdown-header').exists()).toBeTruthy();
+      expect(wrapper.find('.gl-new-dropdown-header').exists()).toBe(true);
       expect(wrapper.html()).toContain('Legacy Header Prop Text');
     });
   });
@@ -213,7 +213,7 @@ describe('new dropdown', () => {
 
     it('renders the footer', () => {
       buildWrapper({}, slots);
-      expect(wrapper.find('.gl-new-dropdown-footer').exists()).toBeTruthy();
+      expect(wrapper.find('.gl-new-dropdown-footer').exists()).toBe(true);
       expect(wrapper.html()).toContain('Footer Content');
     });
   });
@@ -221,7 +221,7 @@ describe('new dropdown', () => {
   describe('with no footer slot exists', () => {
     it('does not render the footer', () => {
       buildWrapper();
-      expect(wrapper.find('.gl-new-dropdown-footer').exists()).toBeFalsy();
+      expect(wrapper.find('.gl-new-dropdown-footer').exists()).toBe(false);
     });
   });
 

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

@@ -405,7 +405,7 @@ describe('Filtered search', () => {
     it('submits entire search when submit is requested', () => {
       createComponent();
       wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
-      expect(wrapper.emitted().submit).toBeDefined();
+      expect(wrapper.emitted('submit')).toBeDefined();
     });
   });
 
@@ -414,8 +414,8 @@ describe('Filtered search', () => {
       value: ['one'],
     });
     wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
-    expect(wrapper.emitted().submit).toBeDefined();
-    expect(wrapper.emitted().submit[0][0]).toStrictEqual(['one']);
+    expect(wrapper.emitted('submit')).toBeDefined();
+    expect(wrapper.emitted('submit')[0][0]).toStrictEqual(['one']);
   });
 
   it('concatenates strings on submit', () => {
@@ -423,7 +423,7 @@ describe('Filtered search', () => {
       value: ['one', 'two', { type: 'faketoken', value: { data: 'smth' } }, 'four', 'five'],
     });
     wrapper.findComponent(GlFilteredSearchTerm).vm.$emit('submit');
-    expect(wrapper.emitted().submit).toBeDefined();
+    expect(wrapper.emitted('submit')).toBeDefined();
     expect(wrapper.emitted().submit[0][0].map(stripId)).toStrictEqual([
       'one two',
       { type: 'faketoken', value: { data: 'smth' } },

package/src/components/base/filtered_search/filtered_search_token.spec.js

@@ -65,7 +65,7 @@ describe('Filtered search token', () => {
       createComponent();
       findOperatorSegment().vm.$emit('activate');
 
-      expect(wrapper.emitted().activate).toHaveLength(1);
+      expect(wrapper.emitted('activate')).toHaveLength(1);
     });
 
     it('activates operator segment if value is empty', () => {
@@ -82,7 +82,7 @@ describe('Filtered search token', () => {
       });
 
       expect(findDataSegment().props().active).toBe(true);
-      expect(wrapper.emitted().input[0][0]).toStrictEqual({ data: '', operator: '=' });
+      expect(wrapper.emitted('input')[0][0]).toStrictEqual({ data: '', operator: '=' });
     });
 
     it('activates data segment if value is not empty', () => {
@@ -122,7 +122,7 @@ describe('Filtered search token', () => {
 
     findOperatorSegment().vm.$emit('backspace');
 
-    expect(wrapper.emitted().replace).toHaveLength(1);
+    expect(wrapper.emitted('replace')).toHaveLength(1);
   });
 
   it('ignores backspace when value is not empty and backspace is pressed', () => {
@@ -130,7 +130,7 @@ describe('Filtered search token', () => {
 
     findOperatorSegment().vm.$emit('backspace');
 
-    expect(wrapper.emitted().replace).toBeUndefined();
+    expect(wrapper.emitted('replace')).toBeUndefined();
   });
 
   it('jumps to data segment when operator segment is completed', () => {
@@ -150,7 +150,7 @@ describe('Filtered search token', () => {
     createComponent({ active: true, value: { operator: '=', data: 'something' } });
     selector().vm.$emit('deactivate');
 
-    expect(wrapper.emitted().deactivate).toHaveLength(1);
+    expect(wrapper.emitted('deactivate')).toHaveLength(1);
   });
 
   it('emits destroy when deactivated and value is empty', async () => {
@@ -159,7 +159,7 @@ describe('Filtered search token', () => {
     await nextTick();
     await wrapper.setProps({ active: false });
 
-    expect(wrapper.emitted().destroy).toHaveLength(1);
+    expect(wrapper.emitted('destroy')).toHaveLength(1);
   });
 
   it('activates operator segment when backspace is pressed in data segmented', async () => {
@@ -191,7 +191,7 @@ describe('Filtered search token', () => {
 
     findTitleSegment().vm.$emit('complete', availableTokens[1].title);
 
-    expect(wrapper.emitted().replace).toHaveLength(1);
+    expect(wrapper.emitted('replace')).toHaveLength(1);
     expect(wrapper.emitted().replace[0][0].value).toStrictEqual(originalValue);
   });
 
@@ -205,7 +205,7 @@ describe('Filtered search token', () => {
 
     findTitleSegment().vm.$emit('complete', availableTokens[2].title);
 
-    expect(wrapper.emitted().replace).toHaveLength(1);
+    expect(wrapper.emitted('replace')).toHaveLength(1);
     expect(wrapper.emitted().replace[0][0].value).toStrictEqual({ data: '' });
   });
 
@@ -236,7 +236,7 @@ describe('Filtered search token', () => {
 
       expect(preventDefaultSpy).toHaveBeenCalled();
       expect(stopPropagationSpy).toHaveBeenCalled();
-      expect(wrapper.emitted().destroy).toHaveLength(1);
+      expect(wrapper.emitted('destroy')).toHaveLength(1);
     });
 
     it('jumps to data segment and applies selection if no match is available for key and data is empty', async () => {

package/src/components/base/filtered_search/filtered_search_token_segment.spec.js

@@ -74,7 +74,7 @@ describe('Filtered search token segment', () => {
 
     wrapper.trigger('mousedown.left');
 
-    expect(wrapper.emitted().activate).toHaveLength(1);
+    expect(wrapper.emitted('activate')).toHaveLength(1);
   });
 
   it('does not emit activate when view-only is true', () => {
@@ -82,7 +82,7 @@ describe('Filtered search token segment', () => {
 
     wrapper.trigger('mousedown.left');
 
-    expect(wrapper.emitted().activate).toBeUndefined();
+    expect(wrapper.emitted('activate')).toBeUndefined();
   });
 
   it('ignores mousedown if active', () => {
@@ -90,7 +90,7 @@ describe('Filtered search token segment', () => {
 
     wrapper.trigger('mousedown');
 
-    expect(wrapper.emitted().mousedown).toBeUndefined();
+    expect(wrapper.emitted('mousedown')).toBeUndefined();
   });
 
   it('selects next suggestion if down arrow is pressed', () => {
@@ -111,7 +111,7 @@ describe('Filtered search token segment', () => {
     createComponent({ active: true, value: false });
     wrapper.find('input').trigger('keydown', { key: 'Enter' });
 
-    expect(wrapper.emitted().submit).toHaveLength(1);
+    expect(wrapper.emitted('submit')).toHaveLength(1);
   });
 
   it('emits complete if Escape is pressed', () => {
@@ -126,14 +126,14 @@ describe('Filtered search token segment', () => {
     createComponent({ active: true, value: '' });
     wrapper.find('input').trigger('keydown', { key: 'Backspace' });
 
-    expect(wrapper.emitted().backspace).toHaveLength(1);
+    expect(wrapper.emitted('backspace')).toHaveLength(1);
   });
 
   it('does not emit backspace event if value is not empty and Backspace is pressed', () => {
     createComponent({ active: true, value: 'something' });
     wrapper.find('input').trigger('keydown', { key: 'Backspace' });
 
-    expect(wrapper.emitted().backspace).toBeUndefined();
+    expect(wrapper.emitted('backspace')).toBeUndefined();
   });
 
   it('invokes custom input handler if provided', () => {
@@ -160,7 +160,7 @@ describe('Filtered search token segment', () => {
 
     wrapper.find('input').trigger('blur');
 
-    expect(wrapper.emitted().deactivate).toHaveLength(1);
+    expect(wrapper.emitted('deactivate')).toHaveLength(1);
     expect(wrapper.emitted('complete')).toBeUndefined();
   });
 
@@ -189,8 +189,8 @@ describe('Filtered search token segment', () => {
 
       wrapper.vm.applySuggestion(token);
 
-      expect(wrapper.emitted().input[0][0]).toBe(token);
-      expect(wrapper.emitted().complete[0][0]).toBe(token);
+      expect(wrapper.emitted('input')[0][0]).toBe(token);
+      expect(wrapper.emitted('complete')[0][0]).toBe(token);
     });
 
     it('emits wrapped token when spaces are present', () => {
@@ -201,9 +201,9 @@ describe('Filtered search token segment', () => {
 
       wrapper.vm.applySuggestion(token);
 
-      expect(wrapper.emitted().input[0][0]).toBe(formattedToken);
-      expect(wrapper.emitted().select[0][0]).toBe(formattedToken);
-      expect(wrapper.emitted().complete[0][0]).toBe(formattedToken);
+      expect(wrapper.emitted('input')[0][0]).toBe(formattedToken);
+      expect(wrapper.emitted('select')[0][0]).toBe(formattedToken);
+      expect(wrapper.emitted('complete')[0][0]).toBe(formattedToken);
     });
 
     it('selects suggestion on press Enter', () => {

package/src/components/base/form/form_textarea/form_textarea.spec.js

@@ -106,7 +106,7 @@ describe('GlFormTextArea', () => {
         metaKey: true,
       });
 
-      expect(wrapper.emitted().submit).toBe(undefined);
+      expect(wrapper.emitted('submit')).toBe(undefined);
     });
 
     it('should emit submit when cmd+enter is pressed', async () => {
@@ -116,7 +116,7 @@ describe('GlFormTextArea', () => {
         metaKey: true,
       });
 
-      expect(wrapper.emitted().submit).toEqual([[]]);
+      expect(wrapper.emitted('submit')).toEqual([[]]);
     });
   });
 });

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

@@ -63,18 +63,18 @@ describe('Infinite Scroll component', () => {
     createComponent();
 
     return wrapper.vm.$nextTick(() => {
-      expect(wrapper.emitted('bottomReached')).toBeFalsy();
-      expect(wrapper.emitted('topReached')).toBeFalsy();
+      expect(wrapper.emitted('bottomReached')).toBe(undefined);
+      expect(wrapper.emitted('topReached')).toBe(undefined);
     });
   });
 
   it('emits bottomReached when scrolled to the bottom', () => {
     createComponent();
 
-    expect(wrapper.emitted('bottomReached')).toBeFalsy();
+    expect(wrapper.emitted('bottomReached')).toBe(undefined);
 
     mockScrollTo({ top: INITIAL_HEIGHT - 0.5 });
-    expect(wrapper.emitted('bottomReached')).toBeTruthy();
+    expect(wrapper.emitted('bottomReached')).toHaveLength(1);
   });
 
   it('emits topReached when scrolled to the top', () => {
@@ -82,10 +82,10 @@ describe('Infinite Scroll component', () => {
 
     createComponent();
 
-    expect(wrapper.emitted('topReached')).toBeFalsy();
+    expect(wrapper.emitted('topReached')).toBe(undefined);
 
     mockScrollTo({ top: 0 });
-    expect(wrapper.emitted('topReached')).toBeTruthy();
+    expect(wrapper.emitted('topReached')).toHaveLength(1);
   });
 
   it('scrolls to the bottom when `topReached` is defined', () => {

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

@@ -54,7 +54,7 @@ describe('Label component', () => {
       createComponent({ ...defaultProps, title: 'scoped::label' });
 
       expect(findTitle().text()).toEqual('scoped::label');
-      expect(findSubTitle().exists()).toBeFalsy();
+      expect(findSubTitle().exists()).toBe(false);
     });
 
     it('renders a black label', () => {
@@ -127,7 +127,7 @@ describe('Label component', () => {
         createComponent(props, { mountFn: mount });
 
         findCloseButton().trigger('click');
-        expect(wrapper.emitted().close).toBeTruthy();
+        expect(wrapper.emitted('close')).toHaveLength(1);
       });
 
       it('does not emit close when "x" is clicked when disabled', () => {
@@ -136,7 +136,7 @@ describe('Label component', () => {
         createComponent(props, { mountFn: mount });
 
         findCloseButton().trigger('click');
-        expect(wrapper.emitted().close).toBeFalsy();
+        expect(wrapper.emitted('close')).toBe(undefined);
       });
     });
 
@@ -226,7 +226,7 @@ describe('Label component', () => {
         createComponent(props, { mountFn: mount });
 
         findCloseButton().trigger('click');
-        expect(wrapper.emitted().close).toBeTruthy();
+        expect(wrapper.emitted('close')).toHaveLength(1);
       });
 
       it('does not emit close when "x" is clicked when disabled', () => {
@@ -235,7 +235,7 @@ describe('Label component', () => {
         createComponent(props, { mountFn: mount });
 
         findCloseButton().trigger('click');
-        expect(wrapper.emitted().close).toBeFalsy();
+        expect(wrapper.emitted('close')).toBe(undefined);
       });
     });
 

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

@@ -260,6 +260,6 @@ describe('Modal component', () => {
 
     findModal().vm.$emit('change');
 
-    expect(wrapper.emitted().change).toHaveLength(1);
+    expect(wrapper.emitted('change')).toHaveLength(1);
   });
 });

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

@@ -13,7 +13,7 @@ describe('GlNav', () => {
         },
       });
 
-      expect(wrapper.findAllComponents(GlNavItem).exists()).toBeTruthy();
+      expect(wrapper.findAllComponents(GlNavItem).exists()).toBe(true);
     });
   });
 });

package/src/components/base/nav/nav_item_dropdown.spec.js

@@ -36,8 +36,8 @@ describe('GlNavItemDropdown', () => {
 
         const glIcon = wrapper.findComponent(GlIcon);
 
-        expect(glIcon.exists()).toBeTruthy();
-        expect(glIcon.classes('dropdown-chevron')).toBeTruthy();
+        expect(glIcon.exists()).toBe(true);
+        expect(glIcon.classes('dropdown-chevron')).toBe(true);
       });
 
       it('renders custom template', () => {
@@ -50,7 +50,7 @@ describe('GlNavItemDropdown', () => {
 
         const buttonContentSlot = wrapper.find('.foo');
 
-        expect(buttonContentSlot.exists()).toBeTruthy();
+        expect(buttonContentSlot.exists()).toBe(true);
         expect(buttonContentSlot.text()).toBe('Custom button-content');
       });
     });

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

@@ -162,6 +162,12 @@ export default {
         this.$emit(GL_DROPDOWN_HIDDEN);
       }
     },
+    open() {
+      if (this.visible) {
+        return;
+      }
+      this.toggle();
+    },
     close() {
       if (!this.visible) {
         return;

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

@@ -112,3 +112,25 @@ To render custom group labels, use the `group-label` scoped slot:
   </template>
 </gl-listbox>
 ```
+
+#### Search
+
+To filter out items by  search query set `searchable` property to `true`.
+Listbox will render the search field and will emit `search` event with the `searchQuery` value.
+Performing the search is the responsibility of the listbox's consumer component.
+When performing search set `searching` prop to `true` - this will render the loader
+while search is in progress instead of the list of items.
+To update content of the listbox, toggle the `searching` property
+and update the `items` property with a new array. Be sure to debounce (or
+similar) the `search` event handler to avoid rendering stale results.
+To improve the accessibility, provide the `search-summary-sr-only` scoped slot
+with a number of found search results text.
+Screen reader will announce this text when the list is updated.
+
+```html
+<gl-listbox :items="items" searchable>
+  <template #search-summary-sr-only>
+    5 users found
+  </template>
+</gl-listbox>
+```