@gitlab/ui 38.9.0 → 38.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "38.9.0",
+  "version": "38.10.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -296,11 +296,6 @@ export default {
        */
       this.$emit('submit', normalizeTokens(cloneDeep(this.tokens)));
     },
-
-    clearInput() {
-      this.tokens = initialState();
-      this.$emit('clearInput');
-    },
   },
 };
 </script>

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

@@ -1,52 +1,76 @@
 import { setStoryTimeout } from '../../../utils/test_utils';
-import { GlInfiniteScroll } from '../../../index';
+import { GlInfiniteScroll, GlLoadingIcon } from '../../../index';
 import readme from './infinite_scroll.md';
 
 const ITEMS_BATCH_SIZE = 20;
 
 const template = `
   <gl-infinite-scroll
-    :max-list-height="285"
-    :fetched-items="fetchedItems"
-    @bottomReached="bottomReached"
+    :total-items="totalItems"
+    :fetched-items="localFetchedItems"
+    :max-list-height="maxListHeight"
+    @bottomReached="onBottomReached"
     >
     <template #items>
       <ul class="list-group list-group-flushed list-unstyled">
-        <li v-for="item in fetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
+        <li v-for="item in localFetchedItems" :key="item" class="list-group-item">Item #{{ item }}</li>
       </ul>
     </template>
 
-    <template #default>
+    <template v-if="localIsLoading" #default>
       <div class="gl-mt-3">
-        <gl-loading-icon v-if="isLoading" />
-        <span v-else>{{ fetchedItems }} items loaded</span>
+        <gl-loading-icon />
       </div>
     </template>
   </gl-infinite-scroll>
 `;
 
-const generateProps = ({ isLoading = false, fetchedItems = ITEMS_BATCH_SIZE } = {}) => ({
+const generateProps = ({
+  isLoading = false,
+  totalItems = null,
+  fetchedItems = ITEMS_BATCH_SIZE,
+  maxListHeight = 285,
+} = {}) => ({
   isLoading,
+  totalItems,
   fetchedItems,
+  maxListHeight,
 });
 
 const Template = (args, { argTypes }) => ({
   components: {
     GlInfiniteScroll,
+    GlLoadingIcon,
   },
   props: Object.keys(argTypes),
+  watch: {
+    fetchedItems: {
+      immediate: true,
+      handler(fetchedItems) {
+        this.localFetchedItems = fetchedItems;
+      },
+    },
+    isLoading: {
+      immediate: true,
+      handler(isLoading) {
+        this.localIsLoading = isLoading;
+      },
+    },
+  },
   data() {
     return {
       loadTimer: null,
+      localFetchedItems: null,
+      localIsLoading: false,
     };
   },
   methods: {
-    bottomReached() {
+    onBottomReached() {
       clearTimeout(this.loadTimer);
-      this.isLoading = true;
+      this.localIsLoading = true;
       this.loadTimer = setStoryTimeout(() => {
-        this.fetchedItems += ITEMS_BATCH_SIZE;
-        this.isLoading = false;
+        this.localFetchedItems += ITEMS_BATCH_SIZE;
+        this.localIsLoading = false;
       }, 500);
     },
   },

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

@@ -4,27 +4,51 @@ import GlPagination from './pagination.vue';
 
 const components = { GlPagination };
 
-const generateBaseProps = ({
-  prevText = 'Previous',
-  nextText = 'Next',
-  disabled = false,
+const defaultValue = (name) => GlPagination.props[name].default;
+
+const generateProps = ({
+  page = 3,
+  align = defaultValue('align'),
+  disabled = defaultValue('disabled'),
+  linkGen = defaultValue('linkGen'),
+  nextPage = defaultValue('nextPage'),
+  nextText = defaultValue('nextText'),
+  perPage = 10, // Existing stories/shots used this value instead of the default
+  prevPage = defaultValue('prevPage'),
+  prevText = defaultValue('prevText'),
+  totalItems = 200, // The component's default value of 0 is for compact pagination, which most stories here do not use.
 } = {}) => ({
-  prevText,
-  nextText,
+  page,
+  align,
   disabled,
-});
-
-const generateFullProps = ({ page = 3, perPage = 10, totalItems = 200 } = {}) => ({
-  initialPage: page,
+  linkGen,
+  nextPage,
+  nextText,
   perPage,
+  prevPage,
+  prevText,
   totalItems,
-  ...generateBaseProps(),
 });
 
-const defaults = {
+const template = `
+  <gl-pagination
+    v-model="page"
+    :align="align"
+    :disabled="disabled"
+    :link-gen="linkGen"
+    :next-page="nextPage"
+    :next-text="nextText"
+    :per-page="perPage"
+    :prev-page="prevPage"
+    :prev-text="prevText"
+    :total-items="totalItems"
+  />
+`;
+
+const defaults = (args) => ({
   data() {
     return {
-      page: 3,
+      currentPage: args.page,
       alignOptions,
     };
   },
@@ -33,33 +57,20 @@ const defaults = {
       this.page = page;
     },
   },
-};
+});
 
 export const Default = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  template: `<gl-pagination
-      v-model="page"
-      :per-page="perPage"
-      :total-items="totalItems"
-      :prev-text="prevText"
-      :next-text="nextText"
-      :disabled="disabled"
-      />`,
+  ...defaults(args),
+  template,
 });
-Default.args = generateFullProps();
+Default.args = generateProps();
 
-export const Compact = () => ({
+export const Compact = (args, { argTypes }) => ({
   components,
-  ...defaults,
-  props: generateFullProps(),
-  data() {
-    return {
-      page: 1,
-      alignOptions,
-    };
-  },
+  props: Object.keys(argTypes),
+  ...defaults(args),
   computed: {
     prevPage() {
       return Math.max(this.page - 1, 0);
@@ -70,72 +81,37 @@ export const Compact = () => ({
     },
   },
   template: `
-      <div class="text-center gl-font-base">
-        <gl-pagination
-          v-model="page"
-          :prev-page="prevPage"
-          :next-page="nextPage"
-          :prev-text="prevText"
-          :next-text="nextText"
-          :disabled="disabled"
-          :align="alignOptions.center"
-        />
-        Page {{ page }} of 3
-      </div>`,
+    <div class="text-center gl-font-base">
+      ${template}
+      Page {{ page }} of 3
+    </div>
+  `,
 });
+Compact.args = generateProps({ page: 1, totalItems: 0, align: alignOptions.center });
 
 export const LinkBased = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  methods: {
-    linkGen(page) {
-      return `/page/${page}`;
-    },
-  },
-  template: `<gl-pagination
-    v-model="page"
-    :per-page="perPage"
-    :total-items="totalItems"
-    :prev-text="prevText"
-    :next-text="nextText"
-    :disabled="disabled"
-    :link-gen="linkGen"
-    />`,
+  ...defaults(args),
+  template,
 });
-LinkBased.args = generateFullProps();
+LinkBased.args = generateProps({ linkGen: (page) => `/page/${page}` });
 
 export const AlignCenter = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  template: `<gl-pagination
-    v-model="page"
-    :per-page="perPage"
-    :total-items="totalItems"
-    :prev-text="prevText"
-    :next-text="nextText"
-    :disabled="disabled"
-    :align="alignOptions.center"
-    />`,
+  ...defaults(args),
+  template,
 });
-AlignCenter.args = generateFullProps();
+AlignCenter.args = generateProps({ align: alignOptions.center });
 
 export const AlignRight = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),
-  ...defaults,
-  template: `<gl-pagination
-    v-model="page"
-    :per-page="perPage"
-    :total-items="totalItems"
-    :prev-text="prevText"
-    :next-text="nextText"
-    :disabled="disabled"
-    :align="alignOptions.right"
-    />`,
+  ...defaults(args),
+  template,
 });
-AlignRight.args = generateFullProps();
+AlignRight.args = generateProps({ align: alignOptions.right });
 
 export default {
   title: 'base/pagination',
@@ -148,4 +124,10 @@ export default {
       },
     },
   },
+  argTypes: {
+    align: {
+      options: Object.values(alignOptions),
+      control: 'select',
+    },
+  },
 };

package/src/components/base/popover/popover.scss

@@ -67,10 +67,12 @@ $gl-popover-max-width: $grid-size * 35;
     @include gl-font-sm;
     @include gl-font-weight-bold;
     @include gl-m-0;
+    @include gl-border-bottom-0;
+    @include gl-pb-0;
   }
 
   .popover-body {
-    @include gl-py-5;
+    @include gl-py-3;
     @include gl-px-4;
 
     > .popover-hr {

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { tooltipActionEvents } from '../../../utils/constants';
+import { tooltipActionEvents, popoverPlacements } from '../../../utils/constants';
 import GlPopover from './popover.vue';
 
 describe('GlPopover', () => {
@@ -49,6 +49,20 @@ describe('GlPopover', () => {
     });
   });
 
+  describe('placement', () => {
+    it(`uses "${popoverPlacements.top}" placement by default`, () => {
+      createWrapper();
+
+      expect(findBVPopover().props('placement')).toBe(popoverPlacements.top);
+    });
+
+    it('uses a defined placement', () => {
+      createWrapper({ placement: popoverPlacements.right });
+
+      expect(findBVPopover().props('placement')).toBe(popoverPlacements.right);
+    });
+  });
+
   describe('close button', () => {
     let doCloseMock;
 

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

@@ -26,7 +26,7 @@ const getTemplate = (id, slots = '') => `
   </div>`;
 
 const generateProps = ({
-  placement = popoverPlacements.top,
+  placement = defaultValue('placement'),
   title = 'Popover',
   triggers = defaultValue('triggers'),
   cssClasses = defaultValue('cssClasses'),

package/src/components/base/popover/popover.vue

@@ -2,6 +2,7 @@
 import { BPopover } from 'bootstrap-vue';
 import tooltipMixin from '../../mixins/tooltip_mixin';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
+import { popoverPlacements } from '../../../utils/constants';
 
 const popoverRefName = 'bPopover';
 
@@ -38,6 +39,11 @@ export default {
       required: false,
       default: false,
     },
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.top,
+    },
   },
   computed: {
     customClass() {
@@ -66,6 +72,7 @@ export default {
     :custom-class="customClass"
     :triggers="triggers"
     :title="title"
+    :placement="placement"
     v-bind="$attrs"
     v-on="$listeners"
   >

package/src/components/base/toast/toast.js

@@ -50,11 +50,14 @@ function showToast(message, options = {}) {
   const toast = { id, hide };
 
   if (isFunction(options.onComplete)) {
-    this.$root.$on('bv::toast:hidden', (e) => {
+    const toastHiddenCallback = (e) => {
       if (e.componentId === id) {
+        this.$root.$off('bv::toast:hidden', toastHiddenCallback);
         options.onComplete(e);
       }
-    });
+    };
+
+    this.$root.$on('bv::toast:hidden', toastHiddenCallback);
   }
 
   this.$bvToast.toast(message, {

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

@@ -27,4 +27,46 @@ describe('GlToast', () => {
       hide: expect.any(Function),
     });
   });
+
+  describe('onComplete callback', () => {
+    let onCompleteSpy;
+    let toast;
+
+    beforeEach(() => {
+      onCompleteSpy = jest.fn();
+
+      toast = wrapper.vm.$toast.show('foo', {
+        onComplete: onCompleteSpy,
+      });
+    });
+
+    it('calls onComplete callback only when matching toast hides', () => {
+      expect(onCompleteSpy).not.toHaveBeenCalled();
+
+      // Pretend some other toast was hidden.
+      wrapper.vm.$root.$emit('bv::toast:hidden', { componentId: 'some other toast' });
+      expect(onCompleteSpy).not.toHaveBeenCalled();
+
+      // Pretend our toast was hidden.
+      wrapper.vm.$root.$emit('bv::toast:hidden', { componentId: toast.id });
+      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('unregisters global listener when toast is hidden', () => {
+      expect(onCompleteSpy).not.toHaveBeenCalled();
+
+      // Pretend the toast was hidden. Can't seem to do this directly in jsdom,
+      // so fake it by emitting the event we listen for.
+      const event = { componentId: toast.id };
+      wrapper.vm.$root.$emit('bv::toast:hidden', event);
+      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
+
+      // This event won't fire more than once in practice, as once the toast is
+      // hidden it'll be destroyed and won't show again. This is here to
+      // indirectly test that the listener was removed when the toast is
+      // hidden the first time.
+      wrapper.vm.$root.$emit('bv::toast:hidden', event);
+      expect(onCompleteSpy).toHaveBeenCalledTimes(1);
+    });
+  });
 });

package/src/components/charts/tooltip/tooltip.spec.js

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import GlPopover from '../../base/popover/popover.vue';
+import { popoverPlacements } from '../../../utils/constants';
+import ChartTooltip from './tooltip.vue';
+import { createMockChartInstance } from '~helpers/chart_stubs';
+
+let mockChartInstance;
+
+jest.mock('echarts', () => ({
+  getInstanceByDom: () => mockChartInstance,
+}));
+
+describe('ChartTooltip', () => {
+  let wrapper;
+
+  const findGlPopover = () => wrapper.findComponent(GlPopover);
+
+  const createWrapper = (props = {}) => {
+    mockChartInstance = createMockChartInstance();
+    wrapper = shallowMount(ChartTooltip, {
+      propsData: {
+        chart: mockChartInstance,
+        ...props,
+      },
+    });
+  };
+
+  describe('GlPopover', () => {
+    it('is right-positioned by default', () => {
+      createWrapper();
+
+      expect(findGlPopover().props('placement')).toBe(popoverPlacements.right);
+    });
+
+    it('applies passed placement if any', () => {
+      const placement = popoverPlacements.bottom;
+      createWrapper({ placement });
+
+      expect(findGlPopover().props('placement')).toBe(placement);
+    });
+  });
+});

package/src/components/charts/tooltip/tooltip.vue

@@ -2,6 +2,7 @@
 import * as echarts from 'echarts';
 import { uid } from '../../../utils/utils';
 import GlPopover from '../../base/popover/popover.vue';
+import { popoverPlacements } from '../../../utils/constants';
 
 export default {
   components: {
@@ -41,6 +42,11 @@ export default {
       required: false,
       default: null,
     },
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.right,
+    },
   },
   computed: {
     containerId() {
@@ -80,7 +86,13 @@ export default {
       Needs to be triggered programatically using `show` property
       This is why `triggers` is currently set to an empty string
     -->
-    <gl-popover v-bind="$attrs" :target="containerId" :container="containerId" triggers="">
+    <gl-popover
+      v-bind="$attrs"
+      :target="containerId"
+      :container="containerId"
+      :placement="placement"
+      triggers=""
+    >
       <template v-if="$scopedSlots.title" #title>
         <slot name="title"></slot>
       </template>

package/src/scss/utilities.scss

@@ -2433,6 +2433,14 @@
   color: $purple-600 !important;
 }
 
+.gl-text-purple-700 {
+  color: $purple-700;
+}
+
+.gl-text-purple-700\! {
+  color: $purple-700 !important;
+}
+
 .gl-text-theme-indigo-200 {
   color: $theme-indigo-200;
 }
@@ -4495,6 +4503,30 @@
   }
 }
 
+.gl-md-w-half {
+  @include gl-media-breakpoint-up(md) {
+    width: 50%;
+  }
+}
+
+.gl-md-w-half\! {
+  @include gl-media-breakpoint-up(md) {
+    width: 50% !important;
+  }
+}
+
+.gl-lg-w-half {
+  @include gl-media-breakpoint-up(lg) {
+    width: 50%;
+  }
+}
+
+.gl-lg-w-half\! {
+  @include gl-media-breakpoint-up(lg) {
+    width: 50% !important;
+  }
+}
+
 .gl-md-w-auto {
   @include gl-media-breakpoint-up(md) {
     width: auto;

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

@@ -185,6 +185,10 @@
   color: $purple-600;
 }
 
+@mixin gl-text-purple-700 {
+  color: $purple-700;
+}
+
 @mixin gl-text-theme-indigo-200 {
   color: $theme-indigo-200;
 }

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

@@ -234,6 +234,18 @@
   }
 }
 
+@mixin gl-md-w-half {
+  @include gl-media-breakpoint-up(md) {
+    width: 50%;
+  }
+}
+
+@mixin gl-lg-w-half {
+  @include gl-media-breakpoint-up(lg) {
+    width: 50%;
+  }
+}
+
 @mixin gl-md-w-auto {
   @include gl-media-breakpoint-up(md) {
     width: auto;