@gitlab/ui 46.1.0 → 47.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "46.1.0",
+  "version": "47.0.1",
   "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.spec.js

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 
+import { BDropdown } from 'bootstrap-vue';
 import { dropdownVariantOptions } from '../../../utils/constants';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
 import GlDropdown from './dropdown.vue';
@@ -34,6 +35,7 @@ describe('new dropdown', () => {
   const findClearAll = () => findByTestId('clear-all-button');
   const findHighlightedItemsTitle = () => findByTestId('highlighted-items-title');
   const findHighlightedItems = () => findByTestId('highlighted-items');
+  const findDropdown = () => wrapper.findComponent(BDropdown);
 
   it('renders when text is null', () => {
     buildWrapper({ text: null });
@@ -417,4 +419,39 @@ describe('new dropdown', () => {
       });
     });
   });
+
+  describe('popperOpts prop', () => {
+    it('combines the passed in popperOpts with the default popperOpts', () => {
+      const popperOpts = {
+        modifiers: {
+          flip: {
+            flipVariationsByContent: false,
+          },
+        },
+      };
+      buildWrapper({ popperOpts });
+
+      expect(findDropdown().props('popperOpts')).toEqual({
+        modifiers: {
+          flip: {
+            flipVariationsByContent: false,
+            padding: 28,
+          },
+        },
+      });
+    });
+
+    it('uses the default popperOpts prop', () => {
+      buildWrapper();
+
+      expect(findDropdown().props('popperOpts')).toEqual({
+        modifiers: {
+          flip: {
+            flipVariationsByContent: true,
+            padding: 28,
+          },
+        },
+      });
+    });
+  });
 });

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

@@ -84,7 +84,7 @@ const withContainer = (template, containerHeight = 150) => `
     ${template}
   </div>`;
 
-function wrap(template, containerHeight) {
+function wrap(template, containerHeight, cssClass) {
   return withContainer(
     `
     <gl-dropdown
@@ -109,6 +109,7 @@ function wrap(template, containerHeight) {
       :highlighted-items-title-class="highlightedItemsTitleClass"
       :loading="loading"
       :right="right"
+      class="${cssClass}"
     >
       ${template}
     </gl-dropdown>`,
@@ -514,6 +515,28 @@ WithHighlightedItems.args = generateProps({
   highlightedItemsTitleClass: 'gl-px-5',
 });
 
+export const OnRightEdge = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: wrap(
+    `
+    <gl-dropdown-item>First item</gl-dropdown-item>
+    <gl-dropdown-item>Second item</gl-dropdown-item>
+    <gl-dropdown-item>Third item</gl-dropdown-item>
+    <gl-dropdown-item>Fourth item</gl-dropdown-item>
+    `,
+    200,
+    'gl-display-block gl-text-right'
+  ),
+  mounted() {
+    clickDropdown(this);
+  },
+  updated() {
+    addClass(this);
+  },
+});
+OnRightEdge.args = generateProps({ text: 'Some dropdown' });
+
 export default {
   title: 'base/dropdown',
   component: GlDropdown,

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

@@ -1,7 +1,9 @@
-<!-- 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 { merge } from 'lodash';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
@@ -24,13 +26,21 @@ 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 const DefaultPopperOptions = {
+  modifiers: {
+    flip: {
+      flipVariationsByContent: true,
+      padding: 28,
+    },
+  },
 };
 
 export default {
@@ -146,6 +156,11 @@ export default {
       required: false,
       default: false,
     },
+    popperOpts: {
+      type: Object,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     renderCaret() {
@@ -199,6 +214,9 @@ export default {
         (this.hasHighlightedItemsContent && this.showHighlightedItemsTitle) || this.showClearAll
       );
     },
+    popperOptions() {
+      return merge({}, DefaultPopperOptions, this.popperOpts);
+    },
   },
   methods: {
     hasSlotContents(slotName) {
@@ -227,6 +245,7 @@ export default {
     :block="block"
     :disabled="disabled || loading"
     :right="right"
+    :popper-opts="popperOptions"
     v-on="$listeners"
   >
     <div class="gl-new-dropdown-inner">

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 () => {