@gitlab/ui 32.38.0 → 32.42.0

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

@@ -174,9 +174,13 @@ export default {
 </script>
 
 <template>
-  <div v-resize-observer="handleResize" class="d-flex align-items-center" @mouseleave="hideTooltip">
+  <div
+    v-resize-observer="handleResize"
+    class="gl-display-flex gl-align-items-center"
+    @mouseleave="hideTooltip"
+  >
     <slot name="default"></slot>
-    <div class="flex-grow-1 position-relative">
+    <div class="gl-flex-grow-1 gl-relative">
       <chart :height="height" :options="options" @created="onChartCreated" />
       <chart-tooltip
         v-if="chartInstance"
@@ -187,17 +191,25 @@ export default {
         :style="{ pointerEvents: 'none' }"
         placement="top"
       >
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title" class="js-tooltip-title text-nowrap">{{ tooltip.title }}</div>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="default" class="js-tooltip-content d-flex">
-          <span v-if="tooltipLabel" class="pr-4 mr-auto">{{ tooltipLabel }}</span>
-          <strong>{{ tooltip.content }}</strong>
-        </div>
+        <template #title>
+          <div data-testid="tooltip-title" class="gl-white-space-nowrap">
+            {{ tooltip.title }}
+          </div>
+        </template>
+        <template #default>
+          <div class="gl-display-flex" data-testid="tooltip-content">
+            <span v-if="tooltipLabel" class="gl-pr-6 gl-mr-auto">{{ tooltipLabel }}</span>
+            <strong>{{ tooltip.content }}</strong>
+          </div>
+        </template>
       </chart-tooltip>
     </div>
-    <span v-if="showLastYValue" class="js-last-y-value d-inline-flex justify-content-center ml-3">{{
-      lastYValue
-    }}</span>
+    <span
+      v-if="showLastYValue"
+      class="gl-display-inline-flex gl-justify-content-center gl-ml-5"
+      data-testid="last-y-value"
+    >
+      {{ lastYValue }}
+    </span>
   </div>
 </template>

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

@@ -9,9 +9,9 @@ import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import * as themeUtils from '../../../utils/charts/theme';
 import StackedColumnChart from './stacked_column.vue';
-import ChartTooltip from '~/components/charts/tooltip/tooltip.vue';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 
 let mockChartInstance;
@@ -31,12 +31,11 @@ const defaultChartProps = {
 
 describe('stacked column chart component', () => {
   let wrapper;
-  let options;
 
   const findChart = () => wrapper.findComponent(Chart);
   const findLegend = () => wrapper.findComponent(ChartLegend);
   const getOptions = () => findChart().props('options');
-  const findDataTooltip = () => wrapper.findComponent(ChartTooltip);
+  const findDataTooltip = () => wrapper.findComponent(ChartTooltipStub);
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
@@ -45,6 +44,7 @@ describe('stacked column chart component', () => {
       propsData: { ...defaultChartProps, ...props },
       stubs: {
         'tooltip-default-format': TooltipDefaultFormat,
+        ChartTooltip: ChartTooltipStub,
       },
       slots,
     });
@@ -52,28 +52,10 @@ describe('stacked column chart component', () => {
   };
 
   beforeEach(() => {
-    options = {
-      series: [],
-    };
-
-    mockChartInstance = {
-      getDom: () => {
-        return {
-          addEventListener: jest.fn(),
-          removeEventListener: jest.fn(),
-        };
-      },
-      on: jest.fn(),
-      off: jest.fn(),
-      convertToPixel: jest.fn(),
-      getOption: () => {
-        return options;
-      },
-    };
+    mockChartInstance = createMockChartInstance();
   });
 
   afterEach(() => {
-    wrapper.destroy();
     jest.restoreAllMocks();
   });
 

package/src/components/charts/stacked_column/stacked_column.vue

@@ -308,16 +308,13 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
-      <template v-if="formatTooltipText">
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <slot slot="title" name="tooltip-title"></slot>
-        <slot name="tooltip-content"></slot>
+      <template #title>
+        <slot name="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</slot>
       </template>
-      <template v-else>
-        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
-        <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+
+      <slot name="tooltip-content">
         <tooltip-default-format :tooltip-content="tooltipContent" />
-      </template>
+      </slot>
     </chart-tooltip>
     <chart-legend
       v-if="compiledOptions"

package/src/components/shared_components/clear_icon_button/clear_icon_button.spec.js

@@ -17,10 +17,6 @@ describe('Clear Icon Button', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders successfully', () => {
     expect(wrapper.element).toMatchSnapshot();
   });

package/src/components/shared_components/close_button/close_button.spec.js

@@ -16,10 +16,6 @@ describe('Clear Icon Button', () => {
     createComponent();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('renders successfully', () => {
     expect(wrapper.element).toMatchSnapshot();
   });

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

@@ -10,10 +10,6 @@ describe('Friendly wrap component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('wraps text on slashes by default', () => {
     const text = '/some/file/path';
     const textWrapped = '/<wbr>some/<wbr>file/<wbr>path';

package/src/components/utilities/intersection_observer/intersection_observer.spec.js

@@ -58,7 +58,7 @@ describe('IntersectionObserver', () => {
       expect(hasPrivateProps(wrapper.vm.$el)).toBe(true);
     });
 
-    describe('when detroyed', () => {
+    describe('when destroyed', () => {
       beforeEach(() => {
         wrapper.destroy();
       });

package/src/components/utilities/sprintf/sprintf.spec.js

@@ -17,10 +17,6 @@ describe('sprintf component', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('plain placeholders', () => {
     it.each`
       message

package/src/components/utilities/truncate/truncate.spec.js

@@ -17,19 +17,12 @@ describe('Truncate component', () => {
   };
 
   const createComponent = (props) => {
-    wrapper = shallowMount(Truncate, {
-      propsData: { ...defaultProps, ...props },
-      directives: {
-        GlTooltip: createMockDirective(),
-      },
-    });
+    wrapper = shallowMount(
+      { extends: Truncate, directives: { GlTooltip: createMockDirective('gl-tooltip') } },
+      { propsData: { ...defaultProps, ...props } }
+    );
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('All', () => {
     beforeEach(() => {
       createComponent();
@@ -39,9 +32,9 @@ describe('Truncate component', () => {
       '%s truncation: should have title, class, original text',
       (position) => {
         createComponent({ position });
-
-        expect(wrapper.attributes('title')).toBe(defaultProps.text);
-        expect(wrapper.attributes('class')).toBe('gl-truncate');
+        const element = wrapper.find('span');
+        expect(element.attributes('title')).toBe(defaultProps.text);
+        expect(element.attributes('class')).toBe('gl-truncate');
         expect(removeSpecialChar(wrapper.text())).toBe(defaultProps.text);
       }
     );
@@ -51,7 +44,9 @@ describe('Truncate component', () => {
     });
 
     it('disables the tooltip by default', () => {
-      expect(getBinding(wrapper.element, 'gl-tooltip').value.disabled).toBe(true);
+      expect(getBinding(wrapper.find('.gl-truncate').element, 'gl-tooltip').value.disabled).toBe(
+        true
+      );
     });
   });
 

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

@@ -23,7 +23,6 @@ describe('hover load directive', () => {
   };
 
   afterEach(() => {
-    wrapper.destroy();
     jest.restoreAllMocks();
   });
 

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

@@ -52,10 +52,6 @@ describe('outside directive', () => {
     onClick = jest.fn();
   });
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('given a callback', () => {
     it.each`
       target       | expectedCalls

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

@@ -29,10 +29,6 @@ describe('resize observer directive', () => {
     wrapper = shallowMount(component, { localVue });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   it('shares one observer between multiple directive instances', () => {
     createComponent({
       template: `<div>

package/src/directives/safe_html/safe_html.spec.js

@@ -25,10 +25,6 @@ describe('safe html directive', () => {
     wrapper = shallowMount(component);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   describe('default', () => {
     it('should remove the script tag', () => {
       createComponent();

package/src/directives/safe_link/safe_link.spec.js

@@ -33,11 +33,6 @@ describe('safe link directive', () => {
     wrapper = mountFn(component);
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
-  });
-
   describe('default', () => {
     it('should render the anchor tag with given href', () => {
       createComponent({

package/src/scss/utilities.scss

@@ -4910,6 +4910,12 @@
 .gl-m-5\! {
   margin: $gl-spacing-scale-5 !important;
 }
+.gl-m-7 {
+  margin: $gl-spacing-scale-7;
+}
+.gl-m-7\! {
+  margin: $gl-spacing-scale-7 !important;
+}
 .gl-m-auto {
   margin: auto;
 }
@@ -6629,6 +6635,14 @@
   z-index: 3 !important
 }
 
+.gl-z-index-200 {
+  z-index: 200
+}
+
+.gl-z-index-200\! {
+  z-index: 200 !important
+}
+
 .gl-z-index-9999 {
   z-index: 9999
 }

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

@@ -354,6 +354,10 @@
   margin: $gl-spacing-scale-5;
 }
 
+@mixin gl-m-7 {
+  margin: $gl-spacing-scale-7;
+}
+
 @mixin gl-m-auto {
   margin: auto;
 }

package/src/scss/utility-mixins/z-index.scss

@@ -20,6 +20,10 @@
   z-index: 3;
 }
 
+@mixin gl-z-index-200 {
+  z-index: 200;
+}
+
 @mixin gl-z-index-9999 {
   z-index: 9999;
 }

package/dist/components/base/carousel/examples/carousel.basic.example.js

@@ -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-carousel',{staticStyle:{"text-shadow":"1px 1px 2px #333"},attrs:{"interval":4000,"controls":"","indicators":"","background":"#ababab","img-width":"1024","img-height":"480"}},[_c('gl-carousel-slide',{attrs:{"caption":"First slide","text":"Nulla vitae elit libero, a pharetra augue mollis interdum.","img-src":"https://picsum.photos/1024/480/?image=52"}}),_vm._v(" "),_c('gl-carousel-slide',{attrs:{"img-src":"https://picsum.photos/1024/480/?image=54"}},[_c('h1',[_vm._v("Hello world!")])]),_vm._v(" "),_c('gl-carousel-slide',{attrs:{"img-src":"https://picsum.photos/1024/480/?image=58"}})],1)};
-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/carousel/examples/index.js

@@ -1,13 +0,0 @@
-import CarouselBasicExample from './carousel.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'carousel-basic',
-    name: 'Basic',
-    description: 'Basic Carousel',
-    component: CarouselBasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/markdown/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './markdown.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'markdown-basic',
-    name: 'Basic',
-    description: 'Basic Markdown',
-    component: BasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/markdown/examples/markdown.basic.example.js

@@ -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-markdown',[_c('h1',[_vm._v("MD Doc h1 • GitLab uses \"GitLab Flavored Markdown\" (GFM)")]),_vm._v(" "),_c('p',[_vm._v("\n    MD Doc Paragraph • GitLab uses \"GitLab Flavored Markdown\" (GFM). It extends the standard\n    Markdown in a few significant ways to add some useful functionality. You can use GFM in the\n    following areas: comments, issues, merge requests, milestones, snippets and more.\n  ")]),_vm._v(" "),_c('p',{staticClass:"sm"},[_vm._v("\n    MD Doc Small Paragraph • GitLab uses \"GitLab Flavored Markdown\" (GFM). It extends the standard\n    Markdown in a few significant ways to add some useful functionality. You can use GFM in the\n    following areas: comments, issues, merge requests, milestones, snippets and more.\n  ")])])};
-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/token_selector/examples/index.js

@@ -1,19 +0,0 @@
-import UserDefinedTokensExample from './token_selector.user_defined_tokens.example';
-import UsersExample from './token_selector.users.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'token-selector-user-defined-tokens',
-    name: 'User Defined Tokens',
-    description: 'User Defined Tokens',
-    component: UserDefinedTokensExample
-  }, {
-    id: 'token-selector-users',
-    name: 'Users',
-    description: 'Users Token Selector',
-    component: UsersExample
-  }]
-}];
-
-export default index;

package/dist/components/base/token_selector/examples/token_selector.user_defined_tokens.example.js

@@ -1,48 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  data() {
-    return {
-      selectedTokens: []
-    };
-  }
-
-};
-
-/* script */
-const __vue_script__ = script;
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-token-selector',{attrs:{"allow-user-defined-tokens":"","hide-dropdown-with-no-items":""},model:{value:(_vm.selectedTokens),callback:function ($$v) {_vm.selectedTokens=$$v;},expression:"selectedTokens"}})};
-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_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;