@gitlab/ui 71.9.0 → 71.10.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 12 Dec 2023 14:56:21 GMT
+// Generated on Wed, 13 Dec 2023 16:29:09 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 12 Dec 2023 14:56:21 GMT
+// Generated on Wed, 13 Dec 2023 16:29:09 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
@@ -92,72 +92,72 @@ $blue-100: #cbe2f9 !default;
 $blue-50: #e9f3fc !default;
 $white: #fff !default;
 $black: #000 !default;
-$theme-light-red-950: #5c1105;
-$theme-light-red-900: #751709;
-$theme-light-red-800: #8b2212;
-$theme-light-red-700: #a02e1c;
-$theme-light-red-600: #b53a26;
-$theme-light-red-500: #c24b38;
-$theme-light-red-400: #d36250;
-$theme-light-red-300: #e07f6f;
-$theme-light-red-200: #ebada2;
-$theme-light-red-100: #f6d9d5;
-$theme-light-red-50: #faf2f1;
-$theme-red-950: #380700;
-$theme-red-900: #580d02;
-$theme-red-800: #761405;
-$theme-red-700: #8f2110;
-$theme-red-600: #a13322;
-$theme-red-500: #ad4a3b;
-$theme-red-400: #c66e60;
-$theme-red-300: #d59086;
-$theme-red-200: #e3bab5;
-$theme-red-100: #ecd3d0;
-$theme-red-50: #f4e9e7;
-$theme-green-950: #052e19;
-$theme-green-900: #0e4328;
-$theme-green-800: #155635;
-$theme-green-700: #1b653f;
-$theme-green-600: #25744c;
-$theme-green-500: #308258;
-$theme-green-400: #499767;
-$theme-green-300: #69af7d;
-$theme-green-200: #8cc497;
-$theme-green-100: #b1d6b5;
-$theme-green-50: #dde9de;
-$theme-light-blue-950: #0a3764;
-$theme-light-blue-900: #0c4277;
-$theme-light-blue-800: #0e4d8d;
-$theme-light-blue-700: #145aa1;
-$theme-light-blue-600: #2268ae;
-$theme-light-blue-500: #3476b9;
-$theme-light-blue-400: #4f8bc7;
-$theme-light-blue-300: #74a3d3;
-$theme-light-blue-200: #a0bedc;
-$theme-light-blue-100: #c1d4e6;
-$theme-light-blue-50: #dde6ee;
-$theme-blue-950: #04101c;
-$theme-blue-900: #0b2640;
-$theme-blue-800: #153c63;
-$theme-blue-700: #235180;
-$theme-blue-600: #346596;
-$theme-blue-500: #4977a5;
-$theme-blue-400: #628eb9;
-$theme-blue-300: #81a5c9;
-$theme-blue-200: #a6bdd5;
-$theme-blue-100: #b9cadc;
-$theme-blue-50: #cdd8e3;
-$theme-indigo-950: #14143d;
-$theme-indigo-900: #222261;
-$theme-indigo-800: #303083;
-$theme-indigo-700: #41419f;
-$theme-indigo-600: #5252b5;
-$theme-indigo-500: #6666c4;
-$theme-indigo-400: #8181d7;
-$theme-indigo-300: #a2a2e6;
-$theme-indigo-200: #c7c7f2;
-$theme-indigo-100: #dbdbf8;
-$theme-indigo-50: #f1f1ff;
+$theme-light-red-950: #5c1105 !default;
+$theme-light-red-900: #751709 !default;
+$theme-light-red-800: #8b2212 !default;
+$theme-light-red-700: #a02e1c !default;
+$theme-light-red-600: #b53a26 !default;
+$theme-light-red-500: #c24b38 !default;
+$theme-light-red-400: #d36250 !default;
+$theme-light-red-300: #e07f6f !default;
+$theme-light-red-200: #ebada2 !default;
+$theme-light-red-100: #f6d9d5 !default;
+$theme-light-red-50: #faf2f1 !default;
+$theme-red-950: #380700 !default;
+$theme-red-900: #580d02 !default;
+$theme-red-800: #761405 !default;
+$theme-red-700: #8f2110 !default;
+$theme-red-600: #a13322 !default;
+$theme-red-500: #ad4a3b !default;
+$theme-red-400: #c66e60 !default;
+$theme-red-300: #d59086 !default;
+$theme-red-200: #e3bab5 !default;
+$theme-red-100: #ecd3d0 !default;
+$theme-red-50: #f4e9e7 !default;
+$theme-green-950: #052e19 !default;
+$theme-green-900: #0e4328 !default;
+$theme-green-800: #155635 !default;
+$theme-green-700: #1b653f !default;
+$theme-green-600: #25744c !default;
+$theme-green-500: #308258 !default;
+$theme-green-400: #499767 !default;
+$theme-green-300: #69af7d !default;
+$theme-green-200: #8cc497 !default;
+$theme-green-100: #b1d6b5 !default;
+$theme-green-50: #dde9de !default;
+$theme-light-blue-950: #0a3764 !default;
+$theme-light-blue-900: #0c4277 !default;
+$theme-light-blue-800: #0e4d8d !default;
+$theme-light-blue-700: #145aa1 !default;
+$theme-light-blue-600: #2268ae !default;
+$theme-light-blue-500: #3476b9 !default;
+$theme-light-blue-400: #4f8bc7 !default;
+$theme-light-blue-300: #74a3d3 !default;
+$theme-light-blue-200: #a0bedc !default;
+$theme-light-blue-100: #c1d4e6 !default;
+$theme-light-blue-50: #dde6ee !default;
+$theme-blue-950: #04101c !default;
+$theme-blue-900: #0b2640 !default;
+$theme-blue-800: #153c63 !default;
+$theme-blue-700: #235180 !default;
+$theme-blue-600: #346596 !default;
+$theme-blue-500: #4977a5 !default;
+$theme-blue-400: #628eb9 !default;
+$theme-blue-300: #81a5c9 !default;
+$theme-blue-200: #a6bdd5 !default;
+$theme-blue-100: #b9cadc !default;
+$theme-blue-50: #cdd8e3 !default;
+$theme-indigo-950: #14143d !default;
+$theme-indigo-900: #222261 !default;
+$theme-indigo-800: #303083 !default;
+$theme-indigo-700: #41419f !default;
+$theme-indigo-600: #5252b5 !default;
+$theme-indigo-500: #6666c4 !default;
+$theme-indigo-400: #8181d7 !default;
+$theme-indigo-300: #a2a2e6 !default;
+$theme-indigo-200: #c7c7f2 !default;
+$theme-indigo-100: #dbdbf8 !default;
+$theme-indigo-50: #f1f1ff !default;
 $data-viz-orange-950: #4b2707 !default;
 $data-viz-orange-900: #5e2f05 !default;
 $data-viz-orange-800: #6f3500 !default;

package/package.json

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

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

@@ -2,7 +2,11 @@ import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 
 import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
-import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import {
+  createMockChartInstance,
+  ChartTooltipStub,
+  chartTooltipStubData,
+} from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
@@ -24,13 +28,13 @@ describe('area component', () => {
 
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
-  const createShallowWrapper = ({ props = {}, slots = {} } = {}) => {
+  const createShallowWrapper = ({ props = {}, ...options } = {}) => {
     wrapper = shallowMount(AreaChart, {
       propsData: { option: { series: [] }, data: [], ...props },
       stubs: {
         'chart-tooltip': ChartTooltipStub,
       },
-      slots,
+      ...options,
     });
     emitChartCreated();
   };
@@ -136,13 +140,84 @@ describe('area component', () => {
     });
   });
 
-  describe('data tooltip is set', () => {
-    beforeEach(() => {
+  describe('data tooltip', () => {
+    it('is initialized', async () => {
       createShallowWrapper();
+
+      await nextTick();
+
+      expect(findDataTooltip().props()).toMatchObject({
+        useDefaultTooltipFormatter: true,
+        chart: mockChartInstance,
+      });
     });
 
-    it('is initialized', () => {
-      expect(findDataTooltip().props('chart')).toBe(mockChartInstance);
+    describe('is customized via slots', () => {
+      const { params, title, content } = chartTooltipStubData;
+      const value = params.seriesData[0].value[1];
+
+      it('customizes tooltip value', async () => {
+        const tooltipValueSlot = jest.fn().mockReturnValue('Value');
+
+        createShallowWrapper({
+          scopedSlots: {
+            'tooltip-value': tooltipValueSlot,
+          },
+        });
+        await nextTick();
+
+        expect(tooltipValueSlot).toHaveBeenCalledWith({ value });
+        expect(findDataTooltip().text()).toBe('Value');
+      });
+
+      it('customizes title', async () => {
+        const tooltipTitleSlot = jest.fn().mockReturnValue('Title');
+
+        createShallowWrapper({
+          scopedSlots: {
+            'tooltip-title': tooltipTitleSlot,
+          },
+        });
+        await nextTick();
+
+        expect(tooltipTitleSlot).toHaveBeenCalledWith({
+          params,
+          title,
+        });
+        expect(findDataTooltip().text()).toBe('Title');
+      });
+
+      it('customizes content', async () => {
+        const tooltipContentSlot = jest.fn().mockReturnValue('Title');
+
+        createShallowWrapper({
+          scopedSlots: {
+            'tooltip-content': tooltipContentSlot,
+          },
+        });
+        await nextTick();
+
+        expect(tooltipContentSlot).toHaveBeenCalledWith({
+          params,
+          content,
+        });
+        expect(findDataTooltip().text()).toBe('Title');
+      });
+    });
+
+    it('is customized via formatting function', async () => {
+      createShallowWrapper({
+        props: {
+          formatTooltipText: jest.fn(),
+        },
+      });
+
+      await nextTick();
+
+      expect(findDataTooltip().props()).toMatchObject({
+        useDefaultTooltipFormatter: false,
+        chart: mockChartInstance,
+      });
     });
   });
 

package/src/components/charts/area/area.stories.js

@@ -7,6 +7,9 @@ import { timeSeriesDateFormatter } from '../../../utils/charts/utils';
 import { generateTimeSeries } from '../../../utils/data_utils';
 import { disableControls } from '../../../utils/stories_utils';
 
+const components = {
+  GlAreaChart,
+};
 const defaultData = [
   {
     name: 'First Series',
@@ -29,7 +32,7 @@ const defaultOptions = {
   },
 };
 
-const template = `<gl-area-chart
+const template = (content) => `<gl-area-chart
   :data="data"
   :option="option"
   :thresholds="thresholds"
@@ -37,7 +40,9 @@ const template = `<gl-area-chart
   :includeLegendAvgMax="includeLegendAvgMax"
   :height="height"
   :legendSeriesInfo="legendSeriesInfo"
-/>`;
+  >
+    ${content}
+  </gl-area-chart>`;
 
 const generateProps = ({
   data = defaultData,
@@ -58,11 +63,9 @@ const generateProps = ({
 });
 
 const Template = (args, { argTypes }) => ({
-  components: {
-    GlAreaChart,
-  },
+  components,
   props: Object.keys(argTypes),
-  template,
+  template: template(),
 });
 
 export const Default = Template.bind({});
@@ -175,6 +178,21 @@ WithCustomLegendItems.args = generateProps({
   ],
 });
 
+export const WithCustomTooltip = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: template(`
+    <template #tooltip-title="{ params }">{{params && params.value}}</template>
+    <template #tooltip-content="{ params }">
+      <div v-if="params">{{params.seriesData[0].seriesName}}: {{params.seriesData[0].value[1]}}</div>
+    </template>
+  `),
+});
+WithCustomTooltip.args = generateProps();
+WithCustomTooltip.parameters = {
+  storyshots: { disable: true },
+};
+
 export default {
   title: 'charts/area-chart',
   component: GlAreaChart,

package/src/components/charts/area/area.vue

@@ -27,8 +27,6 @@ import {
   mergeSeriesToOptions,
   mergeAnnotationAxisToOptions,
   lineStyle,
-  // eslint-disable-next-line import/no-deprecated
-  getDefaultTooltipContent,
 } from '../../../utils/charts/config';
 import {
   LEGEND_LAYOUT_INLINE,
@@ -41,7 +39,6 @@ import {
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
@@ -52,7 +49,6 @@ export default {
     Chart,
     ChartLegend,
     ChartTooltip,
-    TooltipDefaultFormat,
   },
   inheritAttrs: false,
   props: {
@@ -85,6 +81,12 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Callback called when showing or refreshing a tooltip.
+     * **Deprecated:** Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
+     *
+     * @deprecated Use slots `#tooltip-title`, `#tooltip-content` or `#tooltip-value`.
+     */
     formatTooltipText: {
       type: Function,
       required: false,
@@ -139,8 +141,6 @@ export default {
     // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
     return {
       chart: null,
-      dataTooltipTitle: '',
-      dataTooltipContent: {},
       showAnnotationsTooltip: false,
       annotationsTooltipTitle: '',
       annotationsTooltipContent: '',
@@ -148,7 +148,6 @@ export default {
         left: '0',
         top: '0',
       },
-      selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText,
     };
   },
   computed: {
@@ -195,7 +194,7 @@ export default {
               type: 'solid',
             },
             label: {
-              formatter: this.onLabelChange,
+              formatter: this.formatTooltipText,
             },
           },
         },
@@ -265,13 +264,6 @@ export default {
     this.chart.off('mouseover', this.onChartMouseOver);
   },
   methods: {
-    defaultFormatTooltipText(params) {
-      // eslint-disable-next-line import/no-deprecated
-      const { xLabels, tooltipContent } = getDefaultTooltipContent(params, this.options.yAxis.name);
-
-      this.$set(this, 'dataTooltipContent', tooltipContent);
-      this.dataTooltipTitle = xLabels.join(', ');
-    },
     defaultAnnotationTooltipText(params) {
       return {
         title: params.data.xAxis,
@@ -318,9 +310,6 @@ export default {
         };
       }
     },
-    onLabelChange(params) {
-      this.selectedFormatTooltipText(params);
-    },
   },
   HEIGHT_AUTO_CLASSES,
 };
@@ -351,16 +340,21 @@ export default {
       </template>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
-    <chart-tooltip v-if="chart" ref="dataTooltip" :chart="chart">
-      <template #title>
-        <slot v-if="formatTooltipText" name="tooltip-title"></slot>
-        <template v-else>
-          {{ dataTooltipTitle }}
-          <template v-if="options.xAxis.name">({{ options.xAxis.name }})</template>
-        </template>
+    <chart-tooltip
+      v-if="chart"
+      ref="dataTooltip"
+      :chart="chart"
+      :use-default-tooltip-formatter="!formatTooltipText"
+    >
+      <template v-if="$scopedSlots['tooltip-title']" #title="scope">
+        <slot name="tooltip-title" v-bind="scope"></slot>
+      </template>
+      <template v-if="$scopedSlots['tooltip-content']" #default="scope">
+        <slot name="tooltip-content" v-bind="scope"></slot>
+      </template>
+      <template v-if="$scopedSlots['tooltip-value']" #tooltip-value="scope">
+        <slot name="tooltip-value" v-bind="scope"></slot>
       </template>
-      <slot v-if="formatTooltipText" name="tooltip-content"></slot>
-      <tooltip-default-format v-else :tooltip-content="dataTooltipContent" />
     </chart-tooltip>
     <chart-legend
       v-if="compiledOptions"

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

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 import { createMockChartInstance } from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
+import ChartTooltip from '../tooltip/tooltip.vue';
 import BarChart from './bar.vue';
 
 let mockChartInstance;
@@ -27,15 +27,14 @@ describe('Bar chart component', () => {
   let wrapper;
 
   const findChart = () => wrapper.findComponent(Chart);
+  const findChartTooltip = () => wrapper.findComponent(ChartTooltip);
+
   const getOptions = () => findChart().props('options');
   const emitChartCreated = () => findChart().vm.$emit('created', mockChartInstance);
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(BarChart, {
       propsData: { ...defaultChartProps, ...props },
-      stubs: {
-        'tooltip-default-format': TooltipDefaultFormat,
-      },
     });
   };
 
@@ -75,45 +74,10 @@ describe('Bar chart component', () => {
       defaultChartProps.data.Office.map(([, name]) => expect(formatter(name)).toMatchSnapshot());
     });
 
-    describe('Tooltip', () => {
-      const labelParams = {
-        value: 'Jim',
-        seriesName: 'Office',
-        seriesData: [
-          {
-            seriesId: 'Office',
-            data: [100, 'Jim'],
-            value: [100, 'Jim'],
-          },
-        ],
-      };
-
-      it('calls custom method and returns title with y labels', () => {
-        const getDefaultTooltipContentReturnVal = { yLabels: [], tooltipContent: {} };
-
-        // stub the method
-        wrapper.vm.getDefaultTooltipContent = jest
-          .fn()
-          .mockReturnValue(getDefaultTooltipContentReturnVal);
-
-        // label formatter is triggered here which should eventually call
-        // getDefaultTooltipContent
-        getOptions().yAxis.axisPointer.label.formatter(labelParams);
-
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.getDefaultTooltipContent).toHaveBeenCalled();
-        });
-      });
-
-      it('sets accurate tooltip title and content state', () => {
-        getOptions().yAxis.axisPointer.label.formatter(labelParams);
-
-        return wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.tooltipTitle).toBe(labelParams.value);
-          expect(wrapper.vm.tooltipContent[defaultChartProps.xAxisTitle].value).toBe(
-            labelParams.seriesData[0].data[0]
-          );
-        });
+    it('configures chart tooltip', () => {
+      expect(findChartTooltip().props()).toMatchObject({
+        chart: mockChartInstance,
+        useDefaultTooltipFormatter: false,
       });
     });
   });

package/src/components/charts/bar/bar.vue

@@ -173,21 +173,20 @@ export default {
       this.$emit('created', chart);
     },
     onLabelChange(params) {
-      const { yLabels, tooltipContent } = this.getDefaultTooltipContent(params, this.xAxisTitle);
+      const { yLabels, tooltipContent } = this.getTooltipContent(params, this.xAxisTitle);
 
       this.$set(this, 'tooltipContent', tooltipContent);
       this.tooltipTitle = yLabels.join(', ');
     },
     /**
-     * The existing getDefaultTooltipContent in utils works against the y-axis value.
-     * However, for bar charts, the tooltip should be against x-axis values.
+     * For bar charts, the tooltip should be against x-axis values.
      * This method will be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/issues/674
      *
      * @param {Object} params series data
      * @param {String} xAxisTitle x-axis title
      * @returns {Object} tooltip title and content
      */
-    getDefaultTooltipContent(params, xAxisTitle = null) {
+    getTooltipContent(params, xAxisTitle = null) {
       const seriesDataLength = params.seriesData.length;
       const { yLabels, tooltipContent } = params.seriesData.reduce(
         (acc, chartItem) => {

package/src/components/charts/column/__snapshots__/column_chart.spec.js.snap

@@ -69,10 +69,6 @@ Object {
       "show": false,
     },
     "axisPointer": Object {
-      "label": Object {
-        "formatter": [Function],
-      },
-      "show": true,
       "type": "none",
     },
     "boundaryGap": true,
@@ -161,10 +157,6 @@ Object {
       "show": false,
     },
     "axisPointer": Object {
-      "label": Object {
-        "formatter": [Function],
-      },
-      "show": true,
       "type": "none",
     },
     "boundaryGap": true,
@@ -290,10 +282,6 @@ Object {
       "show": false,
     },
     "axisPointer": Object {
-      "label": Object {
-        "formatter": [Function],
-      },
-      "show": true,
       "type": "none",
     },
     "boundaryGap": true,

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

@@ -8,15 +8,12 @@ import {
   yAxis,
   dataZoomAdjustments,
   mergeSeriesToOptions,
-  // eslint-disable-next-line import/no-deprecated
-  getDefaultTooltipContent,
   generateBarSeries,
   generateLineSeries,
 } from '../../../utils/charts/config';
 import { CHART_TYPE_LINE, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
-import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 
@@ -33,7 +30,6 @@ export default {
   components: {
     Chart,
     ChartTooltip,
-    TooltipDefaultFormat,
   },
   inheritAttrs: false,
   props: {
@@ -87,8 +83,6 @@ export default {
   data() {
     return {
       chart: null,
-      tooltipTitle: '',
-      tooltipContent: {},
     };
   },
   computed: {
@@ -141,11 +135,7 @@ export default {
               show: false,
             },
             axisPointer: {
-              show: true,
               type: 'none',
-              label: {
-                formatter: this.onLabelChange,
-              },
             },
             name: this.xAxisTitle,
             type: this.xAxisType,
@@ -180,13 +170,6 @@ export default {
       this.chart = chart;
       this.$emit('created', chart);
     },
-    onLabelChange(params) {
-      // eslint-disable-next-line import/no-deprecated
-      const { xLabels, tooltipContent } = getDefaultTooltipContent(params, this.yAxisTitle);
-
-      this.$set(this, 'tooltipContent', tooltipContent);
-      this.tooltipTitle = xLabels.join(', ');
-    },
   },
   HEIGHT_AUTO_CLASSES,
 };
@@ -201,11 +184,6 @@ export default {
       v-on="$listeners"
       @created="onCreated"
     />
-    <chart-tooltip v-if="chart" :chart="chart">
-      <template #title>
-        <div>{{ tooltipTitle }} ({{ xAxisTitle }})</div>
-      </template>
-      <tooltip-default-format :tooltip-content="tooltipContent" />
-    </chart-tooltip>
+    <chart-tooltip v-if="chart" :chart="chart" :use-default-tooltip-formatter="true" />
   </div>
 </template>