npm - @gitlab/ui - Versions diffs - 32.43.2 → 32.45.1 - Mend

@gitlab/ui 32.43.2 → 32.45.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (161) hide show

package/src/components/base/skeleton_loader/skeleton_loader.vue CHANGED Viewed

@@ -13,36 +13,60 @@ export default {
   name: 'GlSkeletonLoader',
   functional: true,
   props: {
+    /**
+     * It will be set in the viewbox attr in the <svg />.
+     * Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used
+     */
     width: {
       type: Number,
       default: null,
       required: false,
     },
+    /**
+     * It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot.
+     * Defaults to the combined height of the lines when default skeleton is used
+     */
     height: {
       type: Number,
       default: null,
       required: false,
     },
+    /**
+     * Aspect ratio option of <svg/>
+     */
     preserveAspectRatio: {
       type: String,
       default: 'xMidYMid meet',
       required: false,
     },
+    /**
+     * Required if you're using <base url="/" /> in your <head />. Defaults to an empty string.
+     * This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.
+     */
     baseUrl: {
       type: String,
       default: '',
       required: false,
     },
+    /**
+     * Defaults to unique id
+     */
     uniqueKey: {
       type: String,
       default: () => uid(),
       required: false,
     },
+    /**
+     * Number of lines to show when using the default skeleton
+     */
     lines: {
       type: Number,
       default: 3,
       required: false,
     },
+    /**
+     * If the default skeleton lines should all be the same width
+     */
     equalWidthLines: {
       type: Boolean,
       default: false,

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

@@ -1,12 +1,10 @@
-import { mount, createLocalVue } from '@vue/test-utils';
+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';
-const localVue = createLocalVue();
 describe('sorting component', () => {
   let wrapper;
@@ -35,7 +33,6 @@ describe('sorting component', () => {
           '<gl-sorting-item>Third item</gl-sorting-item>',
         ],
       },
-      localVue,
       propsData: {
         ...defaultProps,
         ...propsData,

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

@@ -1,8 +1,8 @@
-import { createLocalVue, mount } from '@vue/test-utils';
+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
 import GlToast from './toast';
-const localVue = createLocalVue();
-localVue.use(GlToast);
+Vue.use(GlToast);
 const Component = {
   template: `<div />`,
 };
@@ -11,9 +11,7 @@ describe('GlToast', () => {
   let wrapper;
   beforeEach(() => {
-    wrapper = mount(Component, {
-      localVue,
-    });
+    wrapper = mount(Component);
   });
   it('attaches $toast propery', () => {

package/src/components/base/token/token.spec.js CHANGED Viewed

@@ -1,9 +1,7 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import Token from './token.vue';
-const localVue = createLocalVue();
 const findIcon = (wrapper) => wrapper.findComponent(CloseButton);
 describe('Token component', () => {
@@ -13,7 +11,6 @@ describe('Token component', () => {
   const createComponent = (propsData) =>
     shallowMount(Token, {
-      localVue,
       propsData,
     });

package/src/components/base/token_selector/token_container.spec.js CHANGED Viewed

@@ -40,12 +40,12 @@ describe('GlTokenContainer', () => {
   };
   const findTokenByName = (name) => {
-    const tokenWrappers = wrapper.findAllComponents({ ref: 'tokens' });
+    const tokenWrappers = wrapper.findAll('[role=option]');
     return tokenWrappers.wrappers.find((tokenWrapper) => tokenWrapper.text() === name);
   };
-  const findTokenContainer = () => wrapper.find({ ref: 'tokenContainer' });
+  const findTokenContainer = () => wrapper.findComponent({ ref: 'tokenContainer' });
   const blurActiveElement = () => document.activeElement?.blur?.();
@@ -173,7 +173,6 @@ describe('GlTokenContainer', () => {
     describe('when escape key is pressed', () => {
       it('fires `cancel-focus` event', async () => {
         await setup(0, keyboard.escape);
         expect(wrapper.emitted('cancel-focus')).toBeTruthy();
       });
     });

package/src/components/charts/chart/chart.spec.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import * as echarts from 'echarts';
 import Chart from './chart.vue';
 import createTheme from '~/utils/charts/theme';
+import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 const defaultHeight = 400;
@@ -21,11 +22,12 @@ describe('chart component', () => {
   const themeName = 'gitlab';
   let wrapper;
-  beforeEach(() => {
+  const { trigger: triggerResize } = useMockResizeObserver();
+  it('initializes chart using $refs.chart', async () => {
     wrapper = shallowMount(...mountArgs);
-  });
+    await wrapper.vm.$nextTick();
-  it('initializes chart using $refs.chart', () => {
     expect(echarts.init).toHaveBeenCalledWith(
       wrapper.findComponent({ ref: 'chart' }).element,
       themeName,
@@ -37,11 +39,34 @@ describe('chart component', () => {
     );
   });
-  it('emits "created" after initializing chart', () => {
+  it('does not resize the chart when responsive = false', async () => {
+    wrapper = shallowMount(...mountArgs);
+    await wrapper.vm.$nextTick();
+    // initial call when chart gets created
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
+    triggerResize(wrapper.element);
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
+  });
+  it('resizes the chart when responsive = true', async () => {
+    wrapper = shallowMount(Chart, { propsData: { options: {}, responsive: true } });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(1);
+    triggerResize(wrapper.element);
+    expect(wrapper.vm.chart.resize).toHaveBeenCalledTimes(2);
+  });
+  it('emits "created" after initializing chart', async () => {
+    wrapper = shallowMount(...mountArgs);
+    await wrapper.vm.$nextTick();
     expect(wrapper.emitted('created')).toEqual([[wrapper.vm.chart]]);
   });
   it('uses GitLab theme', () => {
+    wrapper = shallowMount(...mountArgs);
     const [firstRegisterThemeCall] = echarts.registerTheme.mock.calls;
     expect(firstRegisterThemeCall[0]).toBe(themeName);
     expect(JSON.stringify(firstRegisterThemeCall[1])).toEqual(JSON.stringify(createTheme()));
@@ -87,6 +112,10 @@ describe('chart component', () => {
   });
   describe('methods', () => {
+    beforeEach(() => {
+      wrapper = shallowMount(...mountArgs);
+    });
     describe('draw method', () => {
       it('sets chart options', () => {
         wrapper.vm.draw();

package/src/components/charts/chart/chart.vue CHANGED Viewed

@@ -2,8 +2,12 @@
 import * as echarts from 'echarts';
 import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/charts/config';
 import createTheme, { themeName } from '../../../utils/charts/theme';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 export default {
+  directives: {
+    resizeObserver: GlResizeObserverDirective,
+  },
   props: {
     options: {
       type: Object,
@@ -42,6 +46,11 @@ export default {
         return validRenderers.includes(renderer);
       },
     },
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -80,7 +89,7 @@ export default {
       echarts.connect(this.groupId);
     }
-    this.chart.on('click', this.clickHandler);
+    this.chart.on('click', this.handleClick);
     /**
      * Emitted after calling `echarts.init`
      */
@@ -89,7 +98,7 @@ export default {
     this.setChartSize();
   },
   beforeDestroy() {
-    this.chart.off('click', this.clickHandler);
+    this.chart.off('click', this.handleClick);
   },
   methods: {
     draw() {
@@ -105,7 +114,7 @@ export default {
         height: this.height || defaultHeight,
       });
     },
-    clickHandler(params) {
+    handleClick(params) {
       /**
        * Emitted when clicked on a data item in the chart (e.g., a bar/column).
        *
@@ -114,10 +123,13 @@ export default {
        */
       this.$emit('chartItemClicked', { chart: this.chart, params });
     },
+    handleResize() {
+      if (this.responsive) this.chart.resize();
+    },
   },
 };
 </script>
 <template>
-  <div ref="chart"></div>
+  <div ref="chart" v-resize-observer="handleResize"></div>
 </template>

package/src/components/charts/gauge/gauge.spec.js CHANGED Viewed

@@ -108,7 +108,7 @@ describe('gauge component', () => {
       createComponent({ value: 'not a number' });
       return wrapper.vm.$nextTick().then(() => {
-        global.console.error.mockReset();
+        expect(wrapper).toHaveLoggedVueErrors();
         expect(findDetailText()).toBe(placeholder);
       });
     });
@@ -196,7 +196,7 @@ describe('gauge component', () => {
       it('if some of them are invalid values they are skipped', () => {
         createComponent({ thresholds: [undefined, 95, 'a string', NaN, 50, 15, 25] });
-        global.console.error.mockReset();
+        expect(wrapper).toHaveLoggedVueErrors();
         expect(findAxisColor().length).toBe(3);
       });
@@ -215,7 +215,7 @@ describe('gauge component', () => {
       it('when some values are invalid', () => {
         createComponent({ thresholds: [NaN, 95, undefined, 'a string', 50, 15, 25] });
-        global.console.error.mockReset();
+        expect(wrapper).toHaveLoggedVueErrors();
         expect(findAxisColor().length).toBe(3);
         expect(findAxisColor()[0]).toEqual([0.5, gaugeSafeHues[0]]);
@@ -235,12 +235,12 @@ describe('gauge component', () => {
     });
     describe('when thresholds that are not numbers are set, they will not show on the arc', () => {
-      beforeEach(() => {
+      beforeEach(async () => {
         createComponent({ thresholds: ['not a number', NaN, undefined] });
-        return wrapper.vm.$nextTick().then(() => {
-          global.console.error.mockReset();
-        });
+        await wrapper.vm.$nextTick();
+        // eslint-disable-next-line jest/no-standalone-expect
+        expect(wrapper).toHaveLoggedVueErrors();
       });
       it('axis has a single color set', () => {

package/src/components/charts/heatmap/heatmap.vue CHANGED Viewed

@@ -1,7 +1,6 @@
 <script>
 import merge from 'lodash/merge';
 import { white, gray100 } from '../../../../scss_to_js/scss_variables';
-import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -49,9 +48,6 @@ export default {
     ChartTooltip,
     TooltipDefaultFormat,
   },
-  directives: {
-    resizeObserver: GlResizeObserverDirective,
-  },
   mixins: [ToolboxMixin],
   props: {
     options: {
@@ -237,9 +233,6 @@ export default {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    handleResize() {
-      return this.responsive && this.chart.resize();
-    },
     showHideTooltip(mouseEvent) {
       this.tooltip.show = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
@@ -262,8 +255,8 @@ export default {
 </script>
 <template>
-  <div v-resize-observer="handleResize" class="gl-heatmap">
-    <chart :options="computedOptions" @created="onCreated" />
+  <div class="gl-heatmap">
+    <chart v-bind="$attrs" :options="computedOptions" @created="onCreated" v-on="$listeners" />
     <chart-tooltip
       v-if="chart"
       :show="tooltip.show"

package/src/components/charts/sparkline/sparkline.spec.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Chart from '../chart/chart.vue';
 import SparklineChart from './sparkline.vue';
 import { waitForAnimationFrame } from '~/utils/test_utils';
@@ -19,14 +19,11 @@ jest.mock('~/directives/resize_observer/resize_observer', () => ({
   },
 }));
-const localVue = createLocalVue();
 describe('sparkline chart component', () => {
   let wrapper;
   let componentOptions;
   const factory = () => {
     componentOptions = {
-      localVue,
       propsData: {
         data: [[]],
         variant: null,

package/src/components/charts/sparkline/sparkline.vue CHANGED Viewed

@@ -181,7 +181,13 @@ export default {
   >
     <slot name="default"></slot>
     <div class="gl-flex-grow-1 gl-relative">
-      <chart :height="height" :options="options" @created="onChartCreated" />
+      <chart
+        v-bind="$attrs"
+        :height="height"
+        :options="options"
+        @created="onChartCreated"
+        v-on="$listeners"
+      />
       <chart-tooltip
         v-if="chartInstance"
         :show="tooltip.show"

package/src/components/utilities/friendly_wrap/friendly_wrap.spec.js CHANGED Viewed

@@ -115,12 +115,9 @@ describe('Friendly wrap component', () => {
     });
     // Assert prop validation failed
-    expect(global.console).toHaveLoggedVueErrors();
+    expect(wrapper).toHaveLoggedVueErrors();
     // But it still rendered
     expect(wrapper.text()).toBe('');
-    // Prevent test failure due to console.error calls
-    global.console.error.mockReset();
   });
 });

package/src/components/utilities/intersperse/intersperse.spec.js CHANGED Viewed

@@ -1,14 +1,11 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import Intersperse from './intersperse.vue';
-const localVue = createLocalVue();
 describe('Intersperse Component', () => {
   let wrapper;
   const createComponent = (defaultSlot = [], options = {}) => {
     wrapper = shallowMount(Intersperse, {
-      localVue,
       slots: {
         default: defaultSlot,
       },

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

@@ -1,9 +1,8 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { HoverLoadDirective as hoverLoad } from './hover_load';
 describe('hover load directive', () => {
   let wrapper;
-  const localVue = createLocalVue();
   const findTarget = () => wrapper.find('.target');
   const createComponent = (handleLoad) => {
@@ -19,7 +18,7 @@ describe('hover load directive', () => {
       template: `<div v-hover-load="handleLoad" class="target"></div>`,
     };
-    wrapper = shallowMount(component, { localVue });
+    wrapper = shallowMount(component);
   };
   afterEach(() => {
@@ -48,16 +47,6 @@ describe('hover load directive', () => {
     }
   );
-  it.each([3, '', undefined, null, false, {}, []])(
-    'throws if the handler is %p instead of a function',
-    (directiveValue) => {
-      // we are going to throw, so we need to suppress error messages in jest output
-      jest.spyOn(global.console, 'error').mockImplementation(() => {});
-      expect(() => createComponent(directiveValue)).toThrow(TypeError);
-    }
-  );
   it('cleans up the mouseover event when component is destroyed', () => {
     createComponent(jest.fn());

package/src/directives/outside/outside.spec.js CHANGED Viewed

@@ -121,9 +121,6 @@ describe('outside directive', () => {
       expect(global.console).toHaveLoggedVueErrors();
       expect(document.addEventListener).not.toHaveBeenCalled();
-      // Prevent test failure due to console.error calls
-      global.console.error.mockReset();
     });
     it('attaches the global listener on first initialisation', async () => {
@@ -212,9 +209,6 @@ describe('outside directive', () => {
         find('outside').trigger('click');
         expect(onClick.mock.calls).toEqual([]);
-        // Prevent test failure due to console.error calls
-        global.console.error.mockReset();
       }
     );
   });
@@ -313,6 +307,7 @@ describe('outside directive', () => {
         throw new Error('mock error');
       });
+      jest.spyOn(global.console, 'error');
       await createComponent({
         methods: {
           onClickThrow,

package/src/directives/resize_observer/resize_observer.spec.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { GlResizeObserverDirective } from './resize_observer';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
@@ -6,8 +6,6 @@ describe('resize observer directive', () => {
   const { trigger, observersCount, observesElement } = useMockResizeObserver();
   const mockHandleResize = jest.fn();
-  const localVue = createLocalVue();
   let wrapper;
   const createComponent = ({ template, data = {} } = {}) => {
@@ -26,7 +24,7 @@ describe('resize observer directive', () => {
       },
     };
-    wrapper = shallowMount(component, { localVue });
+    wrapper = shallowMount(component);
   };
   it('shares one observer between multiple directive instances', () => {
@@ -102,11 +100,6 @@ describe('resize observer directive', () => {
   });
   describe('check directive value', () => {
-    afterEach(() => {
-      // we are going to throw, so we need to suppress Vue error messages in jest output
-      global.console.error.mockReset();
-    });
     it.each([3, '', undefined, null, false, {}, []])(
       'throws if the handler is %p instead of a function',
       (directiveValue) => {
@@ -123,8 +116,9 @@ describe('resize observer directive', () => {
         };
         expect(() => {
-          wrapper = shallowMount(testComponentWithoutHandler, { localVue });
+          wrapper = shallowMount(testComponentWithoutHandler);
         }).toThrow(TypeError);
+        expect(wrapper).toHaveLoggedVueErrors();
       }
     );
   });

package/src/scss/storybook.scss CHANGED Viewed

@@ -12,3 +12,11 @@
 @import 'utilities';
 @import 'components';
+/**
+ * Custom padding for docs pages. This improves the integration in Pajamas pages.
+ */
+.sbdocs-wrapper {
+  padding-top: $gl-spacing-scale-2 !important;
+  padding-bottom: 0 !important;
+}

package/src/scss/utilities.scss CHANGED Viewed

@@ -6113,6 +6113,14 @@
   transform: translateX(100%) !important
 }
+.gl-translate-x-n50 {
+  transform: translateX(-50%)
+}
+.gl-translate-x-n50\! {
+  transform: translateX(-50%) !important
+}
 .gl-translate-y-0 {
   transform: translateY(0)
 }

package/src/scss/utility-mixins/transform.scss CHANGED Viewed

@@ -13,6 +13,10 @@
   transform: translateX(100%);
 }
+@mixin gl-translate-x-n50 {
+  transform: translateX(-50%);
+}
 @mixin gl-translate-y-0 {
   transform: translateY(0);
 }

package/dist/components/base/avatar/examples/avatar.fallback.example.js DELETED Viewed

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-/* script */
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar',{attrs:{"entity-name":"Some Project","shape":"rect"}})};
-var __vue_staticRenderFns__ = [];
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  /* style inject SSR */
-  /* style inject shadow dom */
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-export default __vue_component__;

package/dist/components/base/avatar/examples/avatar.image.example.js DELETED Viewed

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-/* script */
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-avatar',{attrs:{"src":"https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"}})};
-var __vue_staticRenderFns__ = [];
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  /* style inject SSR */
-  /* style inject shadow dom */
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-export default __vue_component__;