@gitlab/ui 46.1.0 → 47.0.1

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

@@ -61,37 +61,45 @@ const generateProps = ({
   startOpened,
 });
 
+const makeBindings = (overrides = {}) =>
+  Object.entries({
+    ':items': 'items',
+    ':category': 'category',
+    ':variant': 'variant',
+    ':size': 'size',
+    ':disabled': 'disabled',
+    ':loading': 'loading',
+    ':searchable': 'searchable',
+    ':searching': 'searching',
+    ':no-results-text': 'noResultsText',
+    ':no-caret': 'noCaret',
+    ':right': 'right',
+    ':toggle-text': 'toggleText',
+    ':text-sr-only': 'textSrOnly',
+    ':icon': 'icon',
+    ':multiple': 'multiple',
+    ':is-check-centered': 'isCheckCentered',
+    ':toggle-aria-labelled-by': 'toggleAriaLabelledBy',
+    ':list-aria-labelled-by': 'listAriaLabelledBy',
+    ...overrides,
+  })
+    .map(([key, value]) => `${key}="${value}"`)
+    .join('\n');
+
 function openListbox(component) {
   component.$nextTick(() => {
     component.$refs.listbox.open();
   });
 }
 
-const template = (content, label = '') => `
+const template = (content, { label = '', bindingOverrides = {} } = {}) => `
   <div>
     ${label}
-    <br/>
+    ${label && '<br/>'}
     <gl-listbox
       ref="listbox"
       v-model="selected"
-      :items="items"
-      :category="category"
-      :variant="variant"
-      :size="size"
-      :disabled="disabled"
-      :loading="loading"
-      :searchable="searchable"
-      :searching="searching"
-      :no-results-text="noResultsText"
-      :no-caret="noCaret"
-      :right="right"
-      :toggle-text="toggleText"
-      :text-sr-only="textSrOnly"
-      :icon="icon"
-      :multiple="multiple"
-      :is-check-centered="isCheckCentered"
-      :toggle-aria-labelled-by="toggleAriaLabelledBy"
-      :list-aria-labelled-by="listAriaLabelledBy"
+      ${makeBindings(bindingOverrides)}
     >
       ${content}
     </gl-listbox>
@@ -113,7 +121,9 @@ export const Default = (args, { argTypes }) => ({
       openListbox(this);
     }
   },
-  template: template('', `<span class="gl-my-0" id="listbox-label">Select a department</span>`),
+  template: template('', {
+    label: `<span class="gl-my-0" id="listbox-label">Select a department</span>`,
+  }),
 });
 Default.args = generateProps({ toggleAriaLabelledBy: 'listbox-label' });
 Default.decorators = [makeContainer({ height: '370px' })];
@@ -181,36 +191,14 @@ export const CustomListItem = (args, { argTypes }) => ({
     }
   },
   computed: {
-    headerText() {
+    customToggleText() {
       return this.selected.length !== 1
         ? `${this.selected.length} assignees`
         : this.items.find(({ value }) => value === this.selected[0]).text;
     },
   },
-  template: `
-    <gl-listbox
-      ref="listbox"
-      v-model="selected"
-      :items="items"
-      :category="category"
-      :variant="variant"
-      :size="size"
-      :disabled="disabled"
-      :loading="loading"
-      :searchable="searchable"
-      :searching="searching"
-      :no-results-text="noResultsText"
-      :no-caret="noCaret"
-      :right="right"
-      :toggle-text="headerText"
-      :text-sr-only="textSrOnly"
-      :icon="icon"
-      :multiple="multiple"
-      :is-check-centered="isCheckCentered"
-      :toggle-aria-labelled-by="toggleAriaLabelledBy"
-      :list-aria-labelled-by="listAriaLabelledBy"
-    >
-    <template #list-item="{ item }">
+  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">
@@ -219,8 +207,13 @@ export const CustomListItem = (args, { argTypes }) => ({
               </span>
           </span>
     </template>
-    </gl-listbox>
   `,
+    {
+      bindingOverrides: {
+        ':toggle-text': 'customToggleText',
+      },
+    }
+  ),
 });
 
 CustomListItem.args = generateProps({
@@ -364,31 +357,8 @@ export const Searchable = (args, { argTypes }) => ({
       return this.filteredItems.length === 1 ? '1 result' : `${this.filteredItems.length} results`;
     },
   },
-  template: `
-    <gl-listbox
-      ref="listbox"
-      v-model="selected"
-      :items="filteredItems"
-      :category="category"
-      :variant="variant"
-      :size="size"
-      :disabled="disabled"
-      :loading="loading"
-      :no-caret="noCaret"
-      :right="right"
-      :toggle-text="customToggleText"
-      :text-sr-only="textSrOnly"
-      :icon="icon"
-      :multiple="multiple"
-      :is-check-centered="isCheckCentered"
-      :toggle-aria-labelled-by="toggleAriaLabelledBy"
-      :list-aria-labelled-by="headerId"
-      :searchable="searchable"
-      :searching="searchInProgress"
-      :no-results-text="noResultsText"
-      @search="filterList"
-    >
-      <template #header>
+  template: template(
+    `<template #header>
         <p :id="headerId"
           class="gl-font-weight-bold gl-font-sm gl-m-0 gl-text-center gl-py-2 gl-border-1 gl-border-b-solid gl-border-gray-200">
           Assign to department</p>
@@ -396,8 +366,17 @@ export const Searchable = (args, { argTypes }) => ({
       <template #search-summary-sr-only>
         {{ numberOfSearchResults }}
       </template>
-    </gl-listbox>
   `,
+    {
+      bindingOverrides: {
+        ':items': 'filteredItems',
+        ':list-aria-labelled-by': 'headerId',
+        ':toggle-text': 'customToggleText',
+        ':searching': 'searchInProgress',
+        '@search': 'filterList',
+      },
+    }
+  ),
 });
 Searchable.args = generateProps({ searchable: true });
 Searchable.decorators = [makeContainer({ height: '370px' })];
@@ -470,31 +449,8 @@ export const SearchableGroups = (args, { argTypes }) => ({
       }, 2000);
     },
   },
-  template: `
-    <gl-listbox
-      ref="listbox"
-      v-model="selected"
-      :items="filteredGroupOptions"
-      :category="category"
-      :variant="variant"
-      :size="size"
-      :disabled="disabled"
-      :loading="loading"
-      :no-caret="noCaret"
-      :right="right"
-      :toggle-text="customToggleText"
-      :text-sr-only="textSrOnly"
-      :icon="icon"
-      :multiple="multiple"
-      :is-check-centered="isCheckCentered"
-      :toggle-aria-labelled-by="toggleAriaLabelledBy"
-      :list-aria-labelled-by="headerId"
-      :searching="searchInProgress"
-      :no-results-text="noResultsText"
-      :searchable="searchable"
-      @search="filterList"
-    >
-      <template #header>
+  template: template(
+    `<template #header>
         <p :id="headerId"
           class="gl-font-weight-bold gl-font-sm gl-m-0 gl-text-center gl-py-2 gl-border-1 gl-border-b-solid gl-border-gray-200">
           Assign to department</p>
@@ -502,8 +458,17 @@ export const SearchableGroups = (args, { argTypes }) => ({
       <template #search-summary-sr-only>
         {{ numberOfSearchResults }}
       </template>
-    </gl-listbox>
   `,
+    {
+      bindingOverrides: {
+        ':items': 'filteredGroupOptions',
+        ':list-aria-labelled-by': 'headerId',
+        ':toggle-text': 'customToggleText',
+        ':searching': 'searchInProgress',
+        '@search': 'filterList',
+      },
+    }
+  ),
 });
 SearchableGroups.args = generateProps({ searchable: true, items: mockGroups });
 SearchableGroups.decorators = [makeContainer({ height: '370px' })];

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

@@ -63,7 +63,7 @@ describe('pagination component', () => {
     });
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.html()).toBe('');
+    expect(wrapper.text()).toBe('');
   });
 
   it('supports slots customization', () => {

package/src/components/base/pagination/pagination.vue

@@ -339,6 +339,8 @@ export default {
         slot: `ellipsis-${side}`,
         component: 'span',
         disabled: true,
+        slotData: {},
+        listeners: {},
       };
     },
     handleClick(event, value) {
@@ -395,8 +397,8 @@ export default {
         :href="prevPageHref"
         @click="handlePrevious($event, value - 1)"
       >
-        <!-- 
-          @slot Content for the "previous" button. Overrides the "prevText" prop. 
+        <!--
+          @slot Content for the "previous" button. Overrides the "prevText" prop.
           @binding {boolean} active
           @binding {boolean} disabled
           @binding {number} number
@@ -458,8 +460,8 @@ export default {
         :href="nextPageHref"
         @click="handleNext($event, value + 1)"
       >
-        <!-- 
-          @slot Content for the "next" button. Overrides the "nextText" prop. 
+        <!--
+          @slot Content for the "next" button. Overrides the "nextText" prop.
           @binding {boolean} active
           @binding {boolean} disabled
           @binding {number} number

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

@@ -125,17 +125,19 @@ describe('search box by click component', () => {
 
     it('displays disabled history dropdown', () => {
       expect(wrapper.findComponent({ ref: 'historyDropdown' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ ref: 'historyDropdown' }).attributes('disabled')).toBe('true');
+      expect(
+        wrapper.findComponent({ ref: 'historyDropdown' }).attributes('disabled')
+      ).toBeDefined();
     });
 
     it('displays disabled input', () => {
       expect(wrapper.findComponent({ ref: 'input' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ ref: 'input' }).attributes('disabled')).toBe('true');
+      expect(wrapper.findComponent({ ref: 'input' }).attributes('disabled')).toBeDefined();
     });
 
     it('displays disabled search button', () => {
       expect(findSearchButton().exists()).toBe(true);
-      expect(findSearchButton().attributes('disabled')).toBe('true');
+      expect(findSearchButton().attributes('disabled')).toBeDefined();
     });
 
     it('does not render clear icon even with value', () => {
@@ -146,9 +148,8 @@ describe('search box by click component', () => {
   it('emits submit event when Enter key is pressed', async () => {
     createComponent({ value: 'some-input' });
 
-    wrapper.findComponent(GlFormInput).vm.$emit('keydown', { type: 'key', keyCode: 13 });
+    await wrapper.findComponent(GlFormInput).trigger('keydown.enter');
 
-    await wrapper.vm.$nextTick();
     expect(wrapper.emitted('submit')[0]).toEqual(['some-input']);
   });
 

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -258,7 +258,7 @@ export default {
         :disabled="disabled"
         @focus="isFocused = true"
         @blur="isFocused = false"
-        @keydown.enter="search(currentValue)"
+        @keydown.enter.native="search(currentValue)"
       />
     </slot>
     <gl-clear-icon-button

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

@@ -1,9 +1,7 @@
 import { mount } from '@vue/test-utils';
 import GlDropdown from '../dropdown/dropdown.vue';
-import GlDropdownItem from '../dropdown/dropdown_item.vue';
 import GlIcon from '../icon/icon.vue';
 import GlSorting from './sorting.vue';
-import GlSortingItem from './sorting_item.vue';
 
 describe('sorting component', () => {
   let wrapper;
@@ -22,25 +20,10 @@ describe('sorting component', () => {
 
   const createComponent = (propsData) => {
     wrapper = mount(GlSorting, {
-      attachTo: document.body,
-      components: {
-        GlSortingItem,
-      },
-      slots: {
-        default: [
-          '<gl-sorting-item :active="true">First item</gl-sorting-item>',
-          '<gl-sorting-item>Second item</gl-sorting-item>',
-          '<gl-sorting-item>Third item</gl-sorting-item>',
-        ],
-      },
       propsData: {
         ...defaultProps,
         ...propsData,
       },
-      stubs: {
-        GlSortingItem,
-        GlDropdownItem,
-      },
     });
   };
 

package/src/components/base/sorting/sorting_item.spec.js

@@ -15,12 +15,14 @@ describe('sorting item component', () => {
   const createComponent = (propsData) => {
     wrapper = shallowMount(GlSortingItem, {
       context: {
-        children: [sortingItemText],
         props: {
           ...defaultProps,
           ...propsData,
         },
       },
+      slots: {
+        default: sortingItemText,
+      },
       stubs: {
         GlDropdownItem,
       },

package/src/components/base/sorting/sorting_item.vue

@@ -39,7 +39,7 @@ export default {
    * The content of the item.
    * @slot default
    */
-  render(createElement, { children, data, props = {} }) {
+  render(createElement, { scopedSlots, data, props = {} }) {
     const classNames = `gl-sorting-item js-active-icon gl-flex-shrink-0 gl-mr-2 ${
       props.active ? '' : 'inactive gl-visibility-hidden'
     }`;
@@ -52,16 +52,15 @@ export default {
       },
     });
 
-    return createElement(
-      GlDropdownItem,
-      {
-        ...data,
-        attrs: {
-          ...props,
-        },
+    return createElement(GlDropdownItem, {
+      ...data,
+      attrs: {
+        ...props,
+      },
+      scopedSlots: {
+        default: () => [icon, scopedSlots.default?.()],
       },
-      [icon, children]
-    );
+    });
   },
 };
 </script>

package/src/components/base/tabs/tab/tab.spec.js

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { BTab } from 'bootstrap-vue';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 import GlTab from './tab.vue';
 
@@ -27,9 +28,7 @@ describe('Tab component', () => {
         },
       });
 
-      expect(wrapper.html()).toBe(
-        `<b-tab-stub tag="div" title="" titlelinkclass="${expectedProp}"></b-tab-stub>`
-      );
+      expect(wrapper.findComponent(BTab).props('titleLinkClass')).toStrictEqual(expectedProp);
     }
   );
 });

package/src/components/base/tabs/tabs/scrollable_tabs.spec.js

@@ -58,7 +58,9 @@ describe('GlScrollableTabs', () => {
         ...props,
       },
       slots: {
-        default: `<gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title">{{ tab.content }}</gl-tab>`,
+        default: {
+          template: `<div><gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title">{{ tab.content }}</gl-tab></div>`,
+        },
       },
       stubs: {
         'gl-tab': GlTab,

package/src/components/charts/column/column.vue

@@ -96,7 +96,7 @@ export default {
     barSeries() {
       return this.bars.map(({ name, data }, index) => {
         const color = colorFromDefaultPalette(index);
-        return generateBarSeries({ stack: this.groupBy, name, data, color });
+        return generateBarSeries({ name, data, color });
       });
     },
     lineSeries() {

package/src/components/utilities/intersection_observer/intersection_observer.spec.js

@@ -47,7 +47,7 @@ describe('IntersectionObserver', () => {
     });
 
     it('renders slot', () => {
-      expect(wrapper.element.innerHTML).toEqual(TEST_SLOT);
+      expect(wrapper.html()).toContain(TEST_SLOT);
     });
 
     it('creates 1 intersection observer', () => {

package/src/components/utilities/intersperse/intersperse.vue

@@ -7,7 +7,7 @@ import filter from 'lodash/fp/filter';
 import { intersperse, insert } from '../../../utils/data_utils';
 
 const containsWhitespaceOnly = (vNode) => vNode.text.trim() === '';
-const isTag = (vNode) => vNode.tag !== undefined;
+const isTag = (vNode) => typeof vNode.tag === 'string';
 const filterWhitespaceNodes = filter((vNode) => isTag(vNode) || !containsWhitespaceOnly(vNode));
 
 const insertAfterSecondLastItem = insert(-1);

package/src/components/utilities/sprintf/sprintf.spec.js

@@ -89,11 +89,7 @@ describe('sprintf component', () => {
     });
 
     it('should work with a default slot', () => {
-      createComponent(
-        `<sprintf message="Written by %{default}">
-           <template>Author</template>
-         </sprintf>`
-      );
+      createComponent(`<sprintf message="Written by %{default}">Author</sprintf>`);
 
       expect(wrapper.element.innerHTML).toBe('Written by Author');
     });

package/src/components/utilities/truncate/truncate.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { createMockDirective, getBinding } from '~helpers/vue_mock_directive';
+import { getBinding } from '~helpers/vue_mock_directive';
 import { POSITION } from './constants';
 import Truncate from './truncate.vue';
 
@@ -17,10 +17,9 @@ describe('Truncate component', () => {
   };
 
   const createComponent = (props) => {
-    wrapper = shallowMount(
-      { extends: Truncate, directives: { GlTooltip: createMockDirective('gl-tooltip') } },
-      { propsData: { ...defaultProps, ...props } }
-    );
+    wrapper = shallowMount(Truncate, {
+      propsData: { ...defaultProps, ...props },
+    });
   };
 
   describe('All', () => {

package/src/directives/hover_load/hover_load.spec.js

@@ -5,7 +5,7 @@ jest.useFakeTimers();
 
 describe('hover load directive', () => {
   let wrapper;
-  const findTarget = () => wrapper.find('.target');
+  const findTarget = () => wrapper.findComponent('.target');
 
   const createComponent = (handleLoad) => {
     const component = {

package/src/directives/safe_link/safe_link.spec.js

@@ -17,20 +17,18 @@ describe('safe link directive', () => {
     mountFn = shallowMount,
   } = {}) => {
     const component = {
+      props: {
+        href: { type: String },
+        safeLinkConfig: { type: Object },
+      },
       directives: {
         SafeLink: SafeLinkDirective,
       },
       components,
-      data() {
-        return {
-          href,
-          safeLinkConfig,
-        };
-      },
       template,
     };
 
-    wrapper = mountFn(component);
+    wrapper = mountFn(component, { propsData: { href, safeLinkConfig } });
   };
 
   describe('default', () => {
@@ -64,7 +62,7 @@ describe('safe link directive', () => {
   describe('valid urls', () => {
     const validUrls = [...absoluteUrls, ...relativeUrls, ...encodedJavaScriptUrls];
     /* Note:
-    /* Encoded JavaScript URLs are safe urls in Vue context, since 
+    /* Encoded JavaScript URLs are safe urls in Vue context, since
     /* Vue attribute bindings are also automatically escaped
     /* https://vuejs.org/v2/guide/security.html#Injecting-URLs
     */
@@ -99,13 +97,13 @@ describe('safe link directive', () => {
       expect(wrapper.attributes('href')).toBe('about:blank');
 
       // set href to a valid url
-      wrapper.setData({ href: 'https://gitlab.com' });
-      await Vue.nextTick();
+      await wrapper.setProps({ href: 'https://gitlab.com' });
       expect(wrapper.attributes('href')).toBe('https://gitlab.com');
 
       // set href to back to an invalid url
-      wrapper.setData({ href: javascriptUrls[1] });
+      await wrapper.setProps({ href: javascriptUrls[1] });
       await Vue.nextTick();
+
       expect(wrapper.attributes('href')).toBe('about:blank');
     });
 
@@ -123,12 +121,12 @@ describe('safe link directive', () => {
         expect(wrapper.attributes('href')).toBe(url);
 
         // set href to a valid url
-        wrapper.setData({ href: 'https://gitlab.com' });
+        await wrapper.setProps({ href: 'https://gitlab.com' });
         await Vue.nextTick();
         expect(wrapper.attributes('href')).toBe('https://gitlab.com');
 
         // set href to back to an invalid url
-        wrapper.setData({ href: url });
+        await wrapper.setProps({ href: url });
         await Vue.nextTick();
         expect(wrapper.attributes('href')).toBe(url);
       });

package/src/scss/utilities.scss

@@ -6633,12 +6633,12 @@
   }
 }
 .gl-sm-pr-2 {
-  @include gl-media-breakpoint-down(sm) {
+  @include gl-media-breakpoint-up(sm) {
   padding-right: $gl-spacing-scale-2;
   }
 }
 .gl-sm-pr-2\! {
-  @include gl-media-breakpoint-down(sm) {
+  @include gl-media-breakpoint-up(sm) {
   padding-right: $gl-spacing-scale-2 !important;
   }
 }
@@ -6762,16 +6762,6 @@
   padding-right: $gl-spacing-scale-1 !important;
   }
 }
-.gl-md-pr-2 {
-  @include gl-media-breakpoint-up(md) {
-  padding-right: $gl-spacing-scale-2;
-  }
-}
-.gl-md-pr-2\! {
-  @include gl-media-breakpoint-up(md) {
-  padding-right: $gl-spacing-scale-2 !important;
-  }
-}
 .gl-md-pr-3 {
   @include gl-media-breakpoint-up(md) {
   padding-right: $gl-spacing-scale-3;

package/src/scss/utility-mixins/spacing.scss

@@ -1061,8 +1061,7 @@
 */
 
 @mixin gl-sm-pr-2 {
-  // stylelint-disable-next-line @gitlab/no-gl-media-breakpoint-down
-  @include gl-media-breakpoint-down(sm) {
+  @include gl-media-breakpoint-up(sm) {
     @include gl-pr-2;
   }
 }
@@ -1143,12 +1142,6 @@
   }
 }
 
-@mixin gl-md-pr-2 {
-  @include gl-media-breakpoint-up(md) {
-    @include gl-pr-2;
-  }
-}
-
 @mixin gl-md-pr-3 {
   @include gl-media-breakpoint-up(md) {
     @include gl-pr-3;