@gitlab/ui 67.1.0 → 67.3.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [67.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.2.0...v67.3.0) (2023-10-31)
+
+
+### Features
+
+* **GlLineChart:** Defines a #tooltip-value slot ([4624919](https://gitlab.com/gitlab-org/gitlab-ui/commit/462491952e19832c9abd257b54130ed93244fd88))
+
+# [67.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.1.0...v67.2.0) (2023-10-30)
+
+
+### Features
+
+* **GlOutsideDirective:** respect mousedown events before click ([e2d72d5](https://gitlab.com/gitlab-org/gitlab-ui/commit/e2d72d5cc4d90c57fea3eb54f43d68338cab5ab4))
+
 # [67.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v67.0.0...v67.1.0) (2023-10-27)
 
 

package/dist/components/charts/line/line.js

@@ -306,7 +306,7 @@ const __vue_script__ = script;
 /* template */
 var __vue_render__ = function () {
 var _obj;
-var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2)]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent}})],2):_vm._e(),_vm._v(" "),(_vm.hasLegend)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"position-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",staticClass:"gl-pointer-events-none",attrs:{"id":"dataTooltip","show":_vm.showDataTooltip,"chart":_vm.chart,"top":_vm.dataTooltipPosition.top,"left":_vm.dataTooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.dataTooltipTitle)+"\n        "),(_vm.options.xAxis.name)?[_vm._v("("+_vm._s(_vm.options.xAxis.name)+")")]:_vm._e()],2)]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.dataTooltipContent},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)})],2):_vm._e(),_vm._v(" "),(_vm.hasLegend)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/shared_components/charts/tooltip_default_format.js

@@ -18,7 +18,7 @@ var 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('div',_vm._l((_vm.tooltipContent),function(value,label){return _c('div',{key:("" + label + (value.value)),staticClass:"gl-charts-tooltip-default-format-series"},[_c('series-label',{staticClass:"gl-charts-tooltip-default-format-series-label",attrs:{"color":value.color}},[_vm._v("\n      "+_vm._s(label)+"\n    ")]),_vm._v(" "),_c('div',{staticClass:"gl-charts-tooltip-default-format-series-value"},[_vm._v("\n      "+_vm._s(value.value)+"\n    ")])],1)}),0)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.tooltipContent),function(value,label){return _c('div',{key:("" + label + (value.value)),staticClass:"gl-charts-tooltip-default-format-series"},[_c('series-label',{staticClass:"gl-charts-tooltip-default-format-series-label",attrs:{"color":value.color}},[_vm._v("\n      "+_vm._s(label)+"\n    ")]),_vm._v(" "),_c('div',{staticClass:"gl-charts-tooltip-default-format-series-value"},[_vm._t("tooltip-value",function(){return [_vm._v(_vm._s(value.value))]},{"value":value.value})],2)],1)}),0)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/directives/outside/outside.js

@@ -9,15 +9,17 @@ const callbacks = new Map();
  * Is a global listener already set up?
  */
 let listening = false;
+let lastMousedown = null;
 const globalListener = event => {
   callbacks.forEach((_ref, element) => {
     let {
       bindTimeStamp,
       callback
     } = _ref;
+    const originalEvent = lastMousedown || event;
     if (
     // Ignore events that aren't targeted outside the element
-    element.contains(event.target) ||
+    element.contains(originalEvent.target) ||
     // Only consider events triggered after the directive was bound
     event.timeStamp <= bindTimeStamp) {
       return;
@@ -31,20 +33,31 @@ const globalListener = event => {
       }
     }
   });
+  lastMousedown = null;
+};
+
+// We need to listen for mouse events because text selection fires click event only when selection ends.
+// This means that the click event target could differ from the element where it originally started.
+// As example: if we use mouse events we could guarantee that selecting text within a dropdown won't close it.
+const onMousedown = event => {
+  lastMousedown = event;
 };
 const startListening = () => {
   if (listening) {
     return;
   }
+  document.addEventListener('mousedown', onMousedown);
   document.addEventListener('click', globalListener, {
     capture: true
   });
   listening = true;
+  lastMousedown = null;
 };
 const stopListening = () => {
   if (!listening) {
     return;
   }
+  document.removeEventListener('mousedown', onMousedown);
   document.removeEventListener('click', globalListener);
   listening = false;
 };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Oct 2023 13:55:39 GMT
+ * Generated on Tue, 31 Oct 2023 09:40:12 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Oct 2023 13:55:39 GMT
+ * Generated on Tue, 31 Oct 2023 09:40:12 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Oct 2023 13:55:39 GMT
+ * Generated on Tue, 31 Oct 2023 09:40:12 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 27 Oct 2023 13:55:39 GMT
+ * Generated on Tue, 31 Oct 2023 09:40:12 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 27 Oct 2023 13:55:39 GMT
+// Generated on Tue, 31 Oct 2023 09:40:12 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 27 Oct 2023 13:55:39 GMT
+// Generated on Tue, 31 Oct 2023 09:40:12 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "67.1.0",
+  "version": "67.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,7 +94,7 @@
     "@gitlab/eslint-plugin": "19.2.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
-    "@gitlab/svgs": "3.66.0",
+    "@gitlab/svgs": "3.68.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -122,7 +122,7 @@
     "babel-loader": "^8.0.5",
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
-    "cypress": "13.3.2",
+    "cypress": "13.3.3",
     "cypress-axe": "^1.4.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",

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

@@ -1,10 +1,14 @@
+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 { 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';
 
 let mockChartInstance;
@@ -39,7 +43,7 @@ describe('line component', () => {
   it('emits `created`, with the chart instance', async () => {
     createShallowWrapper();
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     expect(wrapper.emitted('created').length).toBe(1);
     expect(wrapper.emitted('created')[0][0]).toBe(mockChartInstance);
@@ -49,7 +53,7 @@ describe('line component', () => {
     it('are hidden by default', async () => {
       createShallowWrapper();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(false);
     });
@@ -64,7 +68,7 @@ describe('line component', () => {
         ],
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
@@ -88,7 +92,7 @@ describe('line component', () => {
         },
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().exists()).toBe(true);
     });
@@ -127,13 +131,65 @@ describe('line component', () => {
 
       wrapper.vm.onChartDataPointMouseOver(params);
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findAnnotationsTooltip().html()).toContain(params.data.xAxis);
       expect(findAnnotationsTooltip().html()).toContain(params.data.tooltipData.content);
     });
   });
 
+  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';
 
@@ -160,7 +216,7 @@ describe('line component', () => {
 
       wrapper.setData({ dataTooltipPosition: { left, top }, dataTooltipTitle });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findDataTooltip().props('left')).toBe(`${left}`);
       expect(findDataTooltip().props('top')).toBe(`${top}`);
@@ -172,7 +228,7 @@ describe('line component', () => {
     it('is inline by default', async () => {
       createShallowWrapper();
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
     });
@@ -182,7 +238,7 @@ describe('line component', () => {
         legendLayout: LEGEND_LAYOUT_INLINE,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_INLINE);
     });
@@ -192,7 +248,7 @@ describe('line component', () => {
         legendLayout: LEGEND_LAYOUT_TABLE,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
     });
@@ -201,7 +257,7 @@ describe('line component', () => {
         showLegend: false,
       });
 
-      await wrapper.vm.$nextTick();
+      await nextTick();
 
       expect(findLegend().exists()).toBe(false);
     });

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

@@ -390,7 +390,12 @@ export default {
         </div>
       </template>
       <slot v-if="formatTooltipText" name="tooltip-content"></slot>
-      <tooltip-default-format v-else :tooltip-content="dataTooltipContent" />
+      <tooltip-default-format v-else :tooltip-content="dataTooltipContent">
+        <template v-if="$scopedSlots['tooltip-value']" #tooltip-value="scope">
+          <!-- @slot Tooltip value formatter -->
+          <slot name="tooltip-value" v-bind="scope"></slot>
+        </template>
+      </tooltip-default-format>
     </chart-tooltip>
     <chart-legend
       v-if="hasLegend"

package/src/components/shared_components/charts/tooltip_default_format.spec.js

@@ -0,0 +1,69 @@
+import { shallowMount } from '@vue/test-utils';
+
+import SeriesLabel from '../../charts/series_label/series_label.vue';
+import TooltipDefaultFormat from './tooltip_default_format.vue';
+
+const mockTooltipContent = {
+  'Series A': {
+    color: '#000000',
+    value: 1000,
+  },
+  'Series B': {
+    color: '#ffffff',
+    value: 5555.5,
+  },
+};
+
+describe('tooltip default format', () => {
+  let wrapper;
+
+  const createComponent = ({ props, ...options } = {}) => {
+    wrapper = shallowMount(TooltipDefaultFormat, {
+      propsData: {
+        tooltipContent: mockTooltipContent,
+        ...props,
+      },
+      ...options,
+    });
+  };
+
+  const findSeriesLabelAt = (i) => wrapper.findAllComponents(SeriesLabel).at(i);
+
+  it('renders default tooltip', () => {
+    createComponent();
+
+    const text = wrapper.text();
+
+    expect(text).toContain('Series A');
+    expect(text).toContain('1000');
+
+    expect(text).toContain('Series B');
+    expect(text).toContain('5555.5');
+  });
+
+  it('renders label colors', () => {
+    createComponent();
+
+    expect(findSeriesLabelAt(0).props('color')).toBe('#000000');
+    expect(findSeriesLabelAt(1).props('color')).toBe('#ffffff');
+  });
+
+  it('renders formatted values', () => {
+    createComponent({
+      scopedSlots: {
+        'tooltip-value': ({ value }) =>
+          value.toLocaleString(undefined, {
+            minimumFractionDigits: 2,
+          }),
+      },
+    });
+
+    const text = wrapper.text();
+
+    expect(text).toContain('Series A');
+    expect(text).toContain('1,000.00');
+
+    expect(text).toContain('Series B');
+    expect(text).toContain('5,555.50');
+  });
+});

package/src/components/shared_components/charts/tooltip_default_format.vue

@@ -25,7 +25,7 @@ export default {
         {{ label }}
       </series-label>
       <div class="gl-charts-tooltip-default-format-series-value">
-        {{ value.value }}
+        <slot name="tooltip-value" :value="value.value">{{ value.value }}</slot>
       </div>
     </div>
   </div>

package/src/directives/outside/outside.js

@@ -9,12 +9,14 @@ const callbacks = new Map();
  * Is a global listener already set up?
  */
 let listening = false;
+let lastMousedown = null;
 
 const globalListener = (event) => {
   callbacks.forEach(({ bindTimeStamp, callback }, element) => {
+    const originalEvent = lastMousedown || event;
     if (
       // Ignore events that aren't targeted outside the element
-      element.contains(event.target) ||
+      element.contains(originalEvent.target) ||
       // Only consider events triggered after the directive was bound
       event.timeStamp <= bindTimeStamp
     ) {
@@ -30,6 +32,14 @@ const globalListener = (event) => {
       }
     }
   });
+  lastMousedown = null;
+};
+
+// We need to listen for mouse events because text selection fires click event only when selection ends.
+// This means that the click event target could differ from the element where it originally started.
+// As example: if we use mouse events we could guarantee that selecting text within a dropdown won't close it.
+const onMousedown = (event) => {
+  lastMousedown = event;
 };
 
 const startListening = () => {
@@ -37,8 +47,10 @@ const startListening = () => {
     return;
   }
 
+  document.addEventListener('mousedown', onMousedown);
   document.addEventListener('click', globalListener, { capture: true });
   listening = true;
+  lastMousedown = null;
 };
 
 const stopListening = () => {
@@ -46,6 +58,7 @@ const stopListening = () => {
     return;
   }
 
+  document.removeEventListener('mousedown', onMousedown);
   document.removeEventListener('click', globalListener);
   listening = false;
 };

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

@@ -126,35 +126,14 @@ describe('outside directive', () => {
       expect(document.addEventListener).not.toHaveBeenCalled();
     });
 
-    it('attaches the global listener on first initialisation', async () => {
-      await createComponent();
-
-      expect(document.addEventListener.mock.calls).toEqual([
-        ['click', expect.any(Function), { capture: true }],
-      ]);
-    });
-
     it('detaches the global listener when last binding is removed', async () => {
       await createComponent();
 
       wrapper.destroy();
 
-      expect(document.removeEventListener.mock.calls).toEqual([['click', expect.any(Function)]]);
-    });
-
-    it('only binds once, even with multiple instances', async () => {
-      await createComponent({
-        template: `
-          <div>
-            <div v-outside="onClick"></div>
-            <div v-outside="onClick"></div>
-          </div>
-        `,
-      });
+      document.body.dispatchEvent(new MouseEvent('click'));
 
-      expect(document.addEventListener.mock.calls).toEqual([
-        ['click', expect.any(Function), { capture: true }],
-      ]);
+      expect(onClick).not.toHaveBeenCalled();
     });
 
     it('only unbinds once there are no instances', async () => {
@@ -173,12 +152,16 @@ describe('outside directive', () => {
       wrapper.setData({ instances: 1 });
       await wrapper.vm.$nextTick();
 
-      expect(document.removeEventListener).not.toHaveBeenCalled();
+      document.body.dispatchEvent(new MouseEvent('click'));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
 
       wrapper.setData({ instances: 0 });
       await wrapper.vm.$nextTick();
 
-      expect(document.removeEventListener.mock.calls).toEqual([['click', expect.any(Function)]]);
+      document.body.dispatchEvent(new MouseEvent('click'));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
     });
   });
 
@@ -341,4 +324,15 @@ describe('outside directive', () => {
       expect(global.console.error.mock.calls).toEqual([[thrownError]]);
     });
   });
+
+  describe('mousedown before click', () => {
+    it('respects mousedown event before click', async () => {
+      await createComponent();
+
+      find('inside').trigger('mousedown');
+      find('outside').trigger('click');
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
 });