@gitlab/ui 46.0.0 → 47.0.0

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/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/base/token_selector/token_container.vue

@@ -128,54 +128,57 @@ export default {
 </script>
 
 <template>
-  <div
-    ref="tokenContainer"
-    class="gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1 gl-w-full"
-    role="listbox"
-    aria-multiselectable="false"
-    aria-orientation="horizontal"
-    :aria-invalid="state === false && 'true'"
-    @keydown.left="handleLeftArrow"
-    @keydown.right="handleRightArrow"
-    @keydown.home="handleHome"
-    @keydown.end="handleEnd"
-    @keydown.delete="handleDelete"
-    @keydown.esc="handleEscape"
-    @keydown.tab.exact.prevent="handleTab"
-  >
+  <div class="gl-display-flex gl-flex-wrap-nowrap gl-align-items-flex-start gl-w-full">
     <div
-      v-for="(token, index) in tokens"
-      ref="tokens"
-      :key="token.id"
-      :data-token-id="token.id"
-      class="gl-token-selector-token-container gl-px-1 gl-py-1 gl-outline-none"
-      role="option"
-      tabindex="-1"
-      @focus="bindFocusEvent ? handleTokenFocus(index) : null"
+      ref="tokenContainer"
+      class="gl-display-flex gl-flex-wrap gl-align-items-center gl-my-n1 gl-mx-n1 gl-w-full"
+      role="listbox"
+      aria-multiselectable="false"
+      aria-orientation="horizontal"
+      :aria-invalid="state === false && 'true'"
+      @keydown.left="handleLeftArrow"
+      @keydown.right="handleRightArrow"
+      @keydown.home="handleHome"
+      @keydown.end="handleEnd"
+      @keydown.delete="handleDelete"
+      @keydown.esc="handleEscape"
+      @keydown.tab.exact.prevent="handleTab"
     >
-      <gl-token
-        class="gl-cursor-default"
-        :class="token.class"
-        :style="token.style"
-        :view-only="viewOnly"
-        @close="handleClose(token)"
+      <div
+        v-for="(token, index) in tokens"
+        ref="tokens"
+        :key="token.id"
+        :data-token-id="token.id"
+        class="gl-token-selector-token-container gl-px-1 gl-py-2 gl-outline-none"
+        role="option"
+        tabindex="-1"
+        @focus="bindFocusEvent ? handleTokenFocus(index) : null"
       >
-        <slot name="token-content" :token="token">
-          <span>
-            {{ token.name }}
-          </span>
-        </slot>
-      </gl-token>
+        <gl-token
+          class="gl-cursor-default"
+          :class="token.class"
+          :style="token.style"
+          :view-only="viewOnly"
+          @close="handleClose(token)"
+        >
+          <slot name="token-content" :token="token">
+            <span>
+              {{ token.name }}
+            </span>
+          </slot>
+        </gl-token>
+      </div>
+      <slot name="text-input"></slot>
+    </div>
+    <div v-if="showClearAllButton" class="gl-ml-3 gl-p-1">
+      <gl-button
+        size="small"
+        aria-label="Clear all"
+        icon="clear"
+        category="tertiary"
+        data-testid="clear-all-button"
+        @click.stop="$emit('clear-all')"
+      />
     </div>
-    <slot name="text-input"></slot>
-    <gl-button
-      v-if="showClearAllButton"
-      size="small"
-      aria-label="Clear all"
-      icon="clear"
-      category="tertiary"
-      data-testid="clear-all-button"
-      @click.stop="$emit('clear-all')"
-    />
   </div>
 </template>

package/src/components/base/token_selector/token_selector.vue

@@ -415,7 +415,7 @@ export default {
           <input
             ref="textInput"
             type="text"
-            class="gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1"
+            class="gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1 gl-w-40p"
             :value="inputText"
             :autocomplete="autocomplete"
             :aria-labelledby="ariaLabelledby"

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;