@gitlab/ui 70.0.0 → 71.0.0

package/src/components/charts/column/column.vue

@@ -15,7 +15,6 @@ import {
 import { CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
-import { debounceByAnimationFrame } from '../../../utils/utils';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
@@ -87,14 +86,8 @@ export default {
   data() {
     return {
       chart: null,
-      showTooltip: false,
       tooltipTitle: '',
       tooltipContent: {},
-      tooltipPosition: {
-        left: '0',
-        top: '0',
-      },
-      debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip),
     };
   },
   computed: {
@@ -181,21 +174,8 @@ export default {
       return this.height === 'auto';
     },
   },
-  beforeDestroy() {
-    this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
-    this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
-  },
   methods: {
-    moveShowTooltip(mouseEvent) {
-      this.tooltipPosition = {
-        left: `${mouseEvent.zrX}px`,
-        top: `${mouseEvent.zrY}px`,
-      };
-      this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
-    },
     onCreated(chart) {
-      chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
-      chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
       this.chart = chart;
       this.$emit('created', chart);
     },
@@ -219,13 +199,7 @@ export default {
       v-on="$listeners"
       @created="onCreated"
     />
-    <chart-tooltip
-      v-if="chart"
-      :show="showTooltip"
-      :chart="chart"
-      :top="tooltipPosition.top"
-      :left="tooltipPosition.left"
-    >
+    <chart-tooltip v-if="chart" :chart="chart">
       <template #title>
         <div>{{ tooltipTitle }} ({{ xAxisTitle }})</div>
       </template>

package/src/components/charts/discrete_scatter/discrete_scatter.vue

@@ -7,7 +7,6 @@ import {
   mergeSeriesToOptions,
 } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
-import { debounceByAnimationFrame } from '../../../utils/utils';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
@@ -66,14 +65,12 @@ export default {
   data() {
     return {
       chart: null,
-      showTooltip: false,
       tooltipTitle: '',
       tooltipContent: {},
       tooltipPosition: {
         left: '0',
         top: '0',
       },
-      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
     };
   },
@@ -156,12 +153,7 @@ export default {
       };
       this.$set(this, 'tooltipContent', tooltipContent);
     },
-    showHideTooltip(mouseEvent) {
-      this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
-    },
     onCreated(chart) {
-      chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
-      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip);
       this.chart = chart;
       this.$emit('created', chart);
     },
@@ -173,7 +165,6 @@ export default {
       if (data.length) {
         const [left, top] = this.chart.convertToPixel('grid', data);
 
-        this.showTooltip = true;
         this.tooltipPosition = {
           left: `${left}px`,
           top: `${top}px`,
@@ -200,7 +191,6 @@ export default {
     />
     <chart-tooltip
       v-if="!disableTooltip && chart"
-      :show="showTooltip"
       :chart="chart"
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"

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

@@ -6,7 +6,6 @@ import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
-import { debounceByAnimationFrame } from '../../../utils/utils';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
@@ -112,13 +111,11 @@ export default {
     return {
       chart: null,
       tooltip: {
-        show: false,
         title: '',
         content: {},
         left: '0',
         top: '0',
       },
-      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
     };
   },
@@ -223,10 +220,6 @@ export default {
       return this.height === 'auto';
     },
   },
-  beforeDestroy() {
-    this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
-    this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
-  },
   methods: {
     defaultFormatTooltipText(params) {
       const { xLabels, tooltipContent } = getDefaultTooltipContent(
@@ -238,14 +231,9 @@ export default {
       this.tooltip.title = xLabels.join(', ');
     },
     onCreated(chart) {
-      chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
-      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip);
       this.chart = chart;
       this.$emit('created', chart);
     },
-    showHideTooltip(mouseEvent) {
-      this.tooltip.show = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
-    },
     onLabelChange(params) {
       this.selectedFormatTooltipText(params);
       const { seriesData = [] } = params;
@@ -275,13 +263,7 @@ export default {
       @created="onCreated"
       v-on="$listeners"
     />
-    <chart-tooltip
-      v-if="chart"
-      :show="tooltip.show"
-      :chart="chart"
-      :top="tooltip.top"
-      :left="tooltip.left"
-    >
+    <chart-tooltip v-if="chart" :chart="chart" :top="tooltip.top" :left="tooltip.left">
       <template #title>
         <slot v-if="formatTooltipText" name="tooltip-title"></slot>
         <div v-else>

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

@@ -7,7 +7,6 @@ import { expectHeightAutoClasses } from '~helpers/chart_height';
 
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 
 import LineChart from './line.vue';
 
@@ -138,89 +137,13 @@ describe('line component', () => {
     });
   });
 
-  describe('tooltip', () => {
-    const tooltipParams = {
-      seriesData: [
-        {
-          seriesName: 'Series 1',
-          value: ['x', 1000],
-          color: '#fff',
-        },
-        {
-          seriesName: 'Series 2',
-          value: ['x', 1001],
-          color: '#fff',
-        },
-      ],
-    };
-
-    it('renders tooltip', async () => {
-      createShallowWrapper(
-        {},
-        {
-          stubs: { TooltipDefaultFormat },
-        }
-      );
-
-      wrapper.vm.defaultFormatTooltipText(tooltipParams); // force render of a tooltip
-      await nextTick();
-
-      const tooltipText = findDataTooltip().text();
-      expect(tooltipText).toContain('1000');
-      expect(tooltipText).toContain('1001');
-    });
-
-    it('renders formatted tooltip values', async () => {
-      createShallowWrapper(
-        {},
-        {
-          stubs: { TooltipDefaultFormat },
-          scopedSlots: {
-            'tooltip-value': ({ value }) => `$ ${value.toLocaleString()}`,
-          },
-        }
-      );
-
-      wrapper.vm.defaultFormatTooltipText(tooltipParams); // force render of a tooltip
-      await nextTick();
-
-      const tooltipText = findDataTooltip().text();
-      expect(tooltipText).toContain('$ 1,000');
-      expect(tooltipText).toContain('$ 1,001');
-    });
-  });
-
-  describe('tooltip position', () => {
-    const dataTooltipTitle = 'FooBar';
-
+  describe('data tooltip is set', () => {
     beforeEach(() => {
-      createShallowWrapper(
-        {},
-        {
-          stubs: {
-            'chart-tooltip': ChartTooltipStub,
-          },
-        }
-      );
+      createShallowWrapper();
     });
 
     it('is initialized', () => {
-      expect(findDataTooltip().props('left')).toBe('0');
-      expect(findDataTooltip().props('top')).toBe('0');
-      expect(findDataTooltip().text()).not.toContain(dataTooltipTitle);
-    });
-
-    it('is reset when mouse moves', async () => {
-      const left = '10px';
-      const top = '30px';
-
-      wrapper.setData({ dataTooltipPosition: { left, top }, dataTooltipTitle });
-
-      await nextTick();
-
-      expect(findDataTooltip().props('left')).toBe(`${left}`);
-      expect(findDataTooltip().props('top')).toBe(`${top}`);
-      expect(findDataTooltip().text()).toContain(dataTooltipTitle);
+      expect(findDataTooltip().props('chart')).toBe(mockChartInstance);
     });
   });
 

package/src/components/charts/line/line.vue

@@ -43,7 +43,6 @@ import {
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
-import { debounceByAnimationFrame } from '../../../utils/utils';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
@@ -137,13 +136,8 @@ export default {
     // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
     return {
       chart: null,
-      showDataTooltip: false,
       dataTooltipTitle: '',
       dataTooltipContent: {},
-      dataTooltipPosition: {
-        left: '0',
-        top: '0',
-      },
       showAnnotationsTooltip: false,
       annotationsTooltipTitle: '',
       annotationsTooltipContent: '',
@@ -151,7 +145,6 @@ export default {
         left: '0',
         top: '0',
       },
-      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
     };
   },
@@ -262,9 +255,6 @@ export default {
     },
   },
   beforeDestroy() {
-    this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
-    this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
-
     this.chart.off('mouseout', this.onChartDataPointMouseOut);
     this.chart.off('mouseover', this.onChartDataPointMouseOver);
   },
@@ -282,13 +272,6 @@ export default {
       };
     },
     onCreated(chart) {
-      // These listeners are used to show/hide data tooltips
-      // when the mouse is hovered over the parent container
-      // of echarts' svg element. This works only for data points
-      // and not markPoints.
-      chart.getDom().addEventListener('mousemove', this.debouncedShowHideTooltip);
-      chart.getDom().addEventListener('mouseout', this.debouncedShowHideTooltip);
-
       // eCharts inbuild mouse events
       // https://echarts.apache.org/en/api.html#events.Mouse%20events
       // is used to attach listeners to markPoints. These listeners
@@ -307,14 +290,6 @@ export default {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    showHideTooltip(mouseEvent) {
-      this.showDataTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
-
-      this.dataTooltipPosition = {
-        left: `${mouseEvent.zrX}px`,
-        top: `${mouseEvent.zrY}px`,
-      };
-    },
     onChartDataPointMouseOut() {
       this.showAnnotationsTooltip = false;
     },
@@ -370,16 +345,7 @@ export default {
       </template>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
-    <chart-tooltip
-      v-if="chart"
-      id="dataTooltip"
-      ref="dataTooltip"
-      class="gl-pointer-events-none"
-      :show="showDataTooltip"
-      :chart="chart"
-      :top="dataTooltipPosition.top"
-      :left="dataTooltipPosition.left"
-    >
+    <chart-tooltip v-if="chart" ref="dataTooltip" :chart="chart">
       <template #title>
         <slot v-if="formatTooltipText" name="tooltip-title"></slot>
         <div v-else>

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

@@ -127,44 +127,6 @@ describe('sparkline chart component', () => {
     expect(getTooltipContent().text()).toContain(tooltipLabel);
   });
 
-  it('shows the tooltip when mousing over an axis point in the component', async () => {
-    expect(getTooltip().props('show')).toBe(false);
-
-    const mockData = { seriesData: [{ data: [5, 8] }] };
-    getXAxisLabelFormatter()(mockData);
-
-    await wrapper.vm.$nextTick();
-    expect(getTooltip().props('show')).toBe(true);
-  });
-
-  it('hides the tooltip when the mouse leaves the component', async () => {
-    wrapper.setData({ tooltip: { show: true } });
-    await wrapper.vm.$nextTick();
-
-    expect(getTooltip().props('show')).toBe(true);
-
-    wrapper.trigger('mouseleave');
-    await wrapper.vm.$nextTick();
-
-    expect(getTooltip().props('show')).toBe(false);
-  });
-
-  it.each`
-    label        | content
-    ${null}      | ${5}
-    ${5}         | ${null}
-    ${undefined} | ${0}
-    ${-10}       | ${undefined}
-  `(`hides the tooltip when seriesData = ($label, $content)`, async ({ label, content }) => {
-    expect(getTooltip().props('show')).toBe(false);
-
-    const mockData = { seriesData: [{ data: [label, content] }] };
-    getXAxisLabelFormatter()(mockData);
-
-    await wrapper.vm.$nextTick();
-    expect(getTooltip().props('show')).toBe(false);
-  });
-
   it('adds the right content to the tooltip', async () => {
     const xValue = 'foo';
     const yValue = 'bar';

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

@@ -89,7 +89,6 @@ export default {
     return {
       chartInstance: null,
       tooltip: {
-        show: false,
         title: '',
         content: '',
         position: {
@@ -190,9 +189,6 @@ export default {
     handleResize() {
       this.chartInstance.resize();
     },
-    hideTooltip() {
-      this.tooltip.show = false;
-    },
     setTooltipPosition(data) {
       const [left, top] = this.chartInstance.convertToPixel('grid', data);
       this.tooltip.position = {
@@ -214,7 +210,6 @@ export default {
       const [title, content] = data;
       if (isNil(title) || isNil(content)) return;
 
-      this.tooltip.show = true;
       this.tooltip.title = title;
       this.tooltip.content = content;
       this.setTooltipPosition(data);
@@ -229,7 +224,6 @@ export default {
     v-resize-observer="handleResize"
     class="gl-display-flex gl-align-items-center"
     :class="{ 'gl-h-full': autoHeight }"
-    @mouseleave="hideTooltip"
   >
     <slot name="default"></slot>
     <div
@@ -247,11 +241,9 @@ export default {
       />
       <chart-tooltip
         v-if="chartInstance"
-        :show="tooltip.show"
         :chart="chartInstance"
         :top="tooltip.position.top"
         :left="tooltip.position.left"
-        :style="{ pointerEvents: 'none' }"
         placement="top"
       >
         <template #title>

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

@@ -34,7 +34,6 @@ describe('stacked column chart component', () => {
 
   const findChart = () => wrapper.findComponent(Chart);
   const findLegend = () => wrapper.findComponent(ChartLegend);
-  const getOptions = () => findChart().props('options');
   const findDataTooltip = () => wrapper.findComponent(ChartTooltipStub);
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
@@ -142,104 +141,12 @@ describe('stacked column chart component', () => {
   });
 
   describe('tooltip', () => {
-    describe('position', () => {
-      const tooltipTitle = 'FooBar';
-
-      beforeEach(() => {
-        createShallowWrapper();
-      });
-
-      it('is initialized', () => {
-        expect(findDataTooltip().props('left')).toBe('0');
-        expect(findDataTooltip().props('top')).toBe('0');
-        expect(findDataTooltip().text()).not.toContain(tooltipTitle);
-      });
-
-      it('is reset when mouse moves', async () => {
-        const left = '10px';
-        const top = '30px';
-
-        wrapper.setData({ tooltipPosition: { left, top }, tooltipTitle });
-
-        await wrapper.vm.$nextTick();
-
-        expect(findDataTooltip().props('left')).toBe(`${left}`);
-        expect(findDataTooltip().props('top')).toBe(`${top}`);
-        expect(findDataTooltip().text()).toContain(tooltipTitle);
-      });
-    });
-
-    const params = {
-      seriesData: [{ seriesIndex: '0', seriesName: 'Blah', value: 'Jan' }],
-    };
-
-    describe('default', () => {
-      beforeEach(() => {
-        createShallowWrapper();
-      });
-
-      it('calls the default tooltip text function', async () => {
-        wrapper.vm.defaultFormatTooltipText = jest.fn();
-
-        expect(wrapper.vm.defaultFormatTooltipText).not.toHaveBeenCalled();
-
-        getOptions().xAxis.axisPointer.label.formatter(params);
-
-        await wrapper.vm.$nextTick();
-
-        expect(wrapper.vm.defaultFormatTooltipText).toHaveBeenCalled();
-      });
-
-      it('displays the generic tooltip content', async () => {
-        getOptions().xAxis.axisPointer.label.formatter(params);
-
-        await wrapper.vm.$nextTick();
-
-        const tooltipText = findDataTooltip().element.textContent;
-
-        expect(tooltipText).toContain(defaultChartProps.xAxisTitle);
-        expect(tooltipText).toContain(params.seriesData[0].seriesName);
-        expect(tooltipText).toContain(params.seriesData[0].value);
-      });
+    beforeEach(() => {
+      createShallowWrapper();
     });
 
-    describe('custom', () => {
-      const formatTooltipText = jest.fn();
-      const customTitle = 'Custom title';
-      const customContent = 'Custom content';
-
-      beforeEach(() => {
-        createShallowWrapper({
-          props: {
-            formatTooltipText,
-          },
-          slots: {
-            'tooltip-title': customTitle,
-            'tooltip-content': customContent,
-          },
-        });
-      });
-
-      it('calls the formatTooltipText tooltip text function', async () => {
-        expect(formatTooltipText).not.toHaveBeenCalled();
-
-        getOptions().xAxis.axisPointer.label.formatter(params);
-
-        await wrapper.vm.$nextTick();
-
-        expect(formatTooltipText).toHaveBeenCalled();
-      });
-
-      it('displays the custom tooltip content', async () => {
-        getOptions().xAxis.axisPointer.label.formatter(params);
-
-        await wrapper.vm.$nextTick();
-
-        const tooltipText = findDataTooltip().element.textContent;
-
-        expect(tooltipText).toContain(customTitle);
-        expect(tooltipText).toContain(customContent);
-      });
+    it('is initialized', () => {
+      expect(findDataTooltip().props('chart')).toBe(mockChartInstance);
     });
   });
 

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

@@ -22,7 +22,6 @@ import {
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
-import { debounceByAnimationFrame } from '../../../utils/utils';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
@@ -149,14 +148,8 @@ export default {
   data() {
     return {
       chart: null,
-      showTooltip: false,
       tooltipTitle: '',
       tooltipContent: {},
-      tooltipPosition: {
-        left: '0',
-        top: '0',
-      },
-      debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip),
     };
   },
   computed: {
@@ -259,24 +252,11 @@ export default {
       return this.height === 'auto';
     },
   },
-  beforeDestroy() {
-    this.chart.getZr().off('mousemove', this.debouncedMoveShowTooltip);
-    this.chart.getZr().off('mouseout', this.debouncedMoveShowTooltip);
-  },
   methods: {
     getColor(index) {
       return this.customPalette ? this.customPalette?.[index] : colorFromDefaultPalette(index);
     },
-    moveShowTooltip({ event: mouseEvent }) {
-      this.tooltipPosition = {
-        left: `${mouseEvent.zrX}px`,
-        top: `${mouseEvent.zrY}px`,
-      };
-      this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
-    },
     onCreated(chart) {
-      chart.getZr().on('mousemove', this.debouncedMoveShowTooltip);
-      chart.getZr().on('mouseout', this.debouncedMoveShowTooltip);
       this.chart = chart;
       this.$emit('created', chart);
     },
@@ -320,13 +300,7 @@ export default {
       v-on="$listeners"
       @created="onCreated"
     />
-    <chart-tooltip
-      v-if="chart"
-      :show="showTooltip"
-      :chart="chart"
-      :top="tooltipPosition.top"
-      :left="tooltipPosition.left"
-    >
+    <chart-tooltip v-if="chart" :chart="chart">
       <template #title>
         <slot name="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</slot>
       </template>

package/src/utils/constants.js

@@ -144,11 +144,6 @@ export const buttonSizeOptions = {
   medium: 'md',
 };
 
-export const datepickerSizeOptionsMap = {
-  small: 'sm',
-  medium: 'md',
-};
-
 export const datepickerWidthOptionsMap = {
   sm: 'sm',
   md: 'md',
@@ -290,7 +285,7 @@ export const keyboard = {
 
 export const truncateOptions = POSITION;
 
-export const formInputSizes = {
+export const formInputWidths = {
   xs: 'xs',
   sm: 'sm',
   md: 'md',