@gitlab/ui 46.1.0 → 47.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "46.1.0",
+  "version": "47.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -78,7 +78,7 @@
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.19.3",
-    "@babel/preset-env": "^7.19.3",
+    "@babel/preset-env": "^7.19.4",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/stylelint-config": "4.1.0",
     "@gitlab/svgs": "3.4.0",
@@ -102,12 +102,12 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.5.3",
-    "cypress": "^10.9.0",
+    "cypress": "^10.10.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.24.0",
+    "eslint": "8.25.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-storybook": "0.6.4",
+    "eslint-plugin-storybook": "0.6.5",
     "file-loader": "^4.2.0",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
@@ -142,9 +142,9 @@
     "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
-    "vue": "2.7.10",
+    "vue": "2.7.13",
     "vue-loader": "^15.8.3",
-    "vue-template-compiler": "2.7.10"
+    "vue-template-compiler": "2.7.13"
   },
   "release": {
     "branches": [

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

@@ -133,9 +133,9 @@ describe('Alert component', () => {
       const button = buttons.at(0);
       expect(button.text()).toContain(secondaryButtonText);
 
-      const attrs = button.attributes();
-      expect('href' in attrs).toBe(false);
-      expect(attrs.category).toEqual(buttonCategoryOptions.secondary);
+      const props = button.props();
+      expect('href' in props).toBe(false);
+      expect(props.category).toEqual(buttonCategoryOptions.secondary);
     });
 
     it('emits a secondaryAction event when secondary button is clicked', () => {

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

@@ -1,6 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { createMockDirective } from '~helpers/vue_mock_directive';
 import Breadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
@@ -42,7 +41,6 @@ describe('Breadcrumb component', () => {
         avatar: '<div data-testid="avatar-slot"></div>',
         separator: '<div data-testid="separator-slot"></div>',
       },
-      directives: { GlTooltip: createMockDirective('gl-tooltip') },
       stubs: {
         GlBreadcrumbItem,
       },

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -88,8 +88,8 @@ export default {
     <slot name="avatar"></slot>
     <b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
       <template v-for="(item, index) in items">
+        <!-- eslint-disable-next-line vue/valid-v-for -->
         <gl-breadcrumb-item
-          :key="index"
           :ref="isFirstItem(index) ? 'firstItem' : null"
           :text="item.text"
           :href="item.href"

package/src/components/base/datepicker/datepicker.vue

@@ -179,7 +179,7 @@ export default {
   },
   computed: {
     formattedDate() {
-      return this.calendar && this.calendar.toString();
+      return this.$options.pikaday.calendar && this.$options.pikaday.calendar.toString();
     },
     customTrigger() {
       return isString(this.target) && this.target !== '';
@@ -207,21 +207,21 @@ export default {
   },
   watch: {
     value(val) {
-      if (!areDatesEqual(val, this.calendar.getDate())) {
-        this.calendar.setDate(val, true);
+      if (!areDatesEqual(val, this.$options.pikaday.calendar.getDate())) {
+        this.$options.pikaday.calendar.setDate(val, true);
       }
     },
     minDate(minDate) {
-      this.calendar.setMinDate(minDate);
+      this.$options.pikaday.calendar.setMinDate(minDate);
     },
     maxDate(maxDate) {
-      this.calendar.setMaxDate(maxDate);
+      this.$options.pikaday.calendar.setMaxDate(maxDate);
     },
     startRange(startRange) {
-      this.calendar.setStartRange(startRange);
+      this.$options.pikaday.calendar.setStartRange(startRange);
     },
     endRange(endRange) {
-      this.calendar.setEndRange(endRange);
+      this.$options.pikaday.calendar.setEndRange(endRange);
     },
   },
   mounted() {
@@ -279,14 +279,14 @@ export default {
       pikadayConfig.i18n = this.i18n;
     }
 
-    this.calendar = new Pikaday(pikadayConfig);
+    this.$options.pikaday.calendar = new Pikaday(pikadayConfig);
 
     if (this.startOpened) {
-      this.calendar.show();
+      this.$options.pikaday.calendar.show();
     }
   },
   beforeDestroy() {
-    this.calendar.destroy();
+    this.$options.pikaday.calendar.destroy();
   },
   methods: {
     selected(date) {
@@ -324,11 +324,18 @@ export default {
     onKeydown() {
       if (this.textInput === '') {
         const resetDate = this.minDate || null;
-        this.calendar.setDate(resetDate);
+        this.$options.pikaday.calendar.setDate(resetDate);
         this.selected(resetDate);
       }
     },
   },
+
+  // Vue3 will make this.$options shallow-readonly
+  // that means that in order to store anything in $options
+  // we need an object as a container
+  pikaday: {
+    calendar: null,
+  },
 };
 </script>
 

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

@@ -242,9 +242,7 @@ describe('Daterange Picker', () => {
     const findTooltipIcon = () => wrapper.findComponent(Icon);
 
     const slots = {
-      default: `<template #default="{ daysSelected }">
-        {{ daysSelected }} days selected
-      </template>`,
+      default: `<div>{{ props.daysSelected }} days selected</div>`,
     };
 
     it('does not show default slot or tooltip icon by default', () => {

package/src/components/base/dropdown/dropdown.vue

@@ -1,5 +1,6 @@
-<!-- eslint-disable vue/multi-word-component-names -->
+<!-- eslint-disable vue/multi-word-component-names vue/one-component-per-file -->
 <script>
+import Vue from 'vue';
 import { BDropdown } from 'bootstrap-vue';
 import { isVisible, selectAll } from 'bootstrap-vue/src/utils/dom';
 import {
@@ -24,14 +25,13 @@ const Selector = {
 };
 
 // see https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/130#note_126406721
-const ExtendedBDropdown = {
-  extends: BDropdown,
+const ExtendedBDropdown = Vue.extend(BDropdown, {
   methods: {
     getItems() {
       return filterVisible(selectAll(Selector.ITEM_SELECTOR, this.$refs.menu));
     },
   },
-};
+});
 
 export default {
   components: {

package/src/components/base/filtered_search/filtered_search.vue

@@ -368,36 +368,35 @@ export default {
         class="gl-filtered-search-scrollable"
         :class="{ 'gl-bg-gray-10! gl-inset-border-1-gray-100!': viewOnly }"
       >
-        <template v-for="(token, idx) in tokens">
-          <component
-            :is="getTokenComponent(token.type)"
-            ref="tokens"
-            :key="token.id"
-            v-model="token.value"
-            :config="getTokenEntry(token.type)"
-            :active="activeTokenIdx === idx"
-            :cursor-position="intendedCursorPosition"
-            :available-tokens="currentAvailableTokens"
-            :current-value="tokens"
-            :index="idx"
-            :placeholder="termPlaceholder"
-            :show-friendly-text="showFriendlyText"
-            :search-input-attributes="searchInputAttributes"
-            :view-only="viewOnly"
-            :is-last-token="isLastToken(idx)"
-            class="gl-filtered-search-item"
-            :class="{ 'gl-filtered-search-last-item': isLastToken(idx) && !viewOnly }"
-            @activate="activate(idx)"
-            @deactivate="deactivate(token)"
-            @destroy="destroyToken(idx, $event)"
-            @replace="replaceToken(idx, $event)"
-            @complete="completeToken"
-            @submit="submit"
-            @split="createTokens(idx, $event)"
-            @previous="activatePreviousToken"
-            @next="activateNextToken"
-          />
-        </template>
+        <component
+          :is="getTokenComponent(token.type)"
+          v-for="(token, idx) in tokens"
+          ref="tokens"
+          :key="token.id"
+          v-model="token.value"
+          :config="getTokenEntry(token.type)"
+          :active="activeTokenIdx === idx"
+          :cursor-position="intendedCursorPosition"
+          :available-tokens="currentAvailableTokens"
+          :current-value="tokens"
+          :index="idx"
+          :placeholder="termPlaceholder"
+          :show-friendly-text="showFriendlyText"
+          :search-input-attributes="searchInputAttributes"
+          :view-only="viewOnly"
+          :is-last-token="isLastToken(idx)"
+          class="gl-filtered-search-item"
+          :class="{ 'gl-filtered-search-last-item': isLastToken(idx) && !viewOnly }"
+          @activate="activate(idx)"
+          @deactivate="deactivate(token)"
+          @destroy="destroyToken(idx, $event)"
+          @replace="replaceToken(idx, $event)"
+          @complete="completeToken"
+          @submit="submit"
+          @split="createTokens(idx, $event)"
+          @previous="activatePreviousToken"
+          @next="activateNextToken"
+        />
       </div>
       <portal-target
         ref="menu"

package/src/components/base/form/form_checkbox_tree/form_checkbox_tree.vue

@@ -106,7 +106,7 @@ export default {
       class="gl-form-checkbox-tree-toggle-all"
       :checked="tree.allOptionsChecked"
       :indeterminate="tree.someOptionsChecked"
-      @change="tree.toggleAllOptions"
+      @change="tree.toggleAllOptions($event)"
     >
       {{ toggleAllLabel }}
     </gl-form-checkbox>

package/src/components/base/form/form_checkbox_tree/models/tree.js

@@ -5,7 +5,6 @@ export class Tree {
   constructor(options, selected) {
     this.treeDepth = 0;
     this.nodes = {};
-    this.toggleAllOptions = this.toggleAllOptions.bind(this);
 
     this.initNodes(options, selected);
     this.initIndeterminateStates();

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

@@ -13,6 +13,7 @@ describe('Form group component', () => {
   const createComponent = (options) => {
     wrapper = shallowMount(GlFormGroup, {
       ...options,
+      stubs: { BFormGroup },
     });
   };
 

package/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -56,8 +56,21 @@ export default {
         const { scrollHeight, scrollTop } = this.$refs.infiniteContainer;
         // Only when scrolled to the top
         if (scrollHeight !== 0 && scrollTop === 0) {
-          // Store scrollHeight to know how far to scroll
-          this.$options.adjustScrollHeight = scrollHeight;
+          // Wait until the DOM is fully updated to adjust scroll
+          this.$nextTick(() => {
+            const { scrollHeight: newScrollHeight } = this.$refs.infiniteContainer;
+
+            // New scrollTop is the new height, minus the old height
+            // minus a small space to allow the user to trigger a scroll once more
+            let top = newScrollHeight - scrollHeight - adjustScrollGap;
+
+            // Never adjust to 0, or a new event may be be triggered
+            if (top < 1) {
+              top = 1;
+            }
+
+            this.scrollTo({ top });
+          });
         }
       }
     },
@@ -72,28 +85,6 @@ export default {
     });
   },
 
-  updated() {
-    // Wait until the DOM is fully updated to adjust scroll
-    this.$nextTick(() => {
-      if (this.$options.adjustScrollHeight) {
-        const { scrollHeight } = this.$refs.infiniteContainer;
-
-        // New scrollTop is the new height, minus the old height
-        // minus a small space to allow the user to trigger a scroll once more
-        let top = scrollHeight - this.$options.adjustScrollHeight - adjustScrollGap;
-
-        // Never adjust to 0, or a new event may be be triggered
-        if (top < 1) {
-          top = 1;
-        }
-
-        this.scrollTo({ top });
-        // Prevent subsequent updates
-        this.$options.adjustScrollHeight = null;
-      }
-    });
-  },
-
   methods: {
     /**
      * Scroll to the top of the container, leaving a gap

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

@@ -35,6 +35,7 @@ describe('base dropdown', () => {
       slots,
       attachTo: document.body,
     });
+    return nextTick();
   };
 
   beforeEach(() => {

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

@@ -161,6 +161,7 @@ describe('GlListbox', () => {
       }
       findBaseDropdown().vm.$emit(GL_DROPDOWN_SHOWN);
       await nextTick();
+      await nextTick();
     };
 
     it('should re-emit the event', async () => {

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