@gitlab/ui 69.1.0 → 70.0.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [70.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v70.0.0...v70.0.1) (2023-11-21)
+
+
+### Bug Fixes
+
+* **GlChart:** Tooltip fix on MS Edge ([5eab629](https://gitlab.com/gitlab-org/gitlab-ui/commit/5eab629cff921370f60717b5460b0d33e2188714))
+
+# [70.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v69.1.0...v70.0.0) (2023-11-21)
+
+
+### Performance Improvements
+
+* remove exported scss_to_js scripts and usages ([b198d8b](https://gitlab.com/gitlab-org/gitlab-ui/commit/b198d8ba2813b96126c65310ba52065abd845a5e))
+
+
+### BREAKING CHANGES
+
+* Remove scss_to_js export. Prefer use of
+/dist/tokens/js/tokens.js for importing generated token variables.
+
 # [69.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v69.0.0...v69.1.0) (2023-11-20)
 
 

package/dist/components/charts/bar/bar.js

@@ -4,7 +4,7 @@ import { dataZoomAdjustments, mergeSeriesToOptions, grid } from '../../../utils/
 import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
-import { debounceByAnimationFrame, hexToRgba } from '../../../utils/utils';
+import { hexToRgba } from '../../../utils/utils';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';
@@ -97,14 +97,8 @@ var script = {
   data() {
     return {
       chart: null,
-      showTooltip: false,
       tooltipTitle: '',
-      tooltipContent: {},
-      tooltipPosition: {
-        left: '0',
-        top: '0'
-      },
-      debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
+      tooltipContent: {}
     };
   },
   computed: {
@@ -165,28 +159,10 @@ var script = {
       return this.height === 'auto';
     }
   },
-  beforeDestroy() {
-    if (this.chart) {
-      this.chart.getZr().off('mousemove', this.debouncedMoveShowTooltip);
-      this.chart.getZr().off('mouseout', this.debouncedMoveShowTooltip);
-    }
-  },
   methods: {
-    moveShowTooltip(_ref) {
-      let {
-        event: mouseEvent
-      } = _ref;
-      this.tooltipPosition = {
-        left: `${mouseEvent.zrX}px`,
-        top: `${mouseEvent.zrY}px`
-      };
-      this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
-    },
     onCreated(chart) {
       this.chart = chart;
       this.$emit('created', chart);
-      chart.getZr().on('mousemove', this.debouncedMoveShowTooltip);
-      chart.getZr().on('mouseout', this.debouncedMoveShowTooltip);
     },
     onLabelChange(params) {
       const {
@@ -243,7 +219,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.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.yAxisTitle)+")")])]},proxy:true}],null,false,1644826356)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_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.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.yAxisTitle)+")")])]},proxy:true}],null,false,1644826356)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/column/column.js

@@ -3,7 +3,6 @@ import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, grid
 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';
 import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';
@@ -76,14 +75,8 @@ var script = {
   data() {
     return {
       chart: null,
-      showTooltip: false,
       tooltipTitle: '',
-      tooltipContent: {},
-      tooltipPosition: {
-        left: '0',
-        top: '0'
-      },
-      debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
+      tooltipContent: {}
     };
   },
   computed: {
@@ -191,21 +184,8 @@ var script = {
       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);
     },
@@ -227,7 +207,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.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")])]},proxy:true}],null,false,643259221)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_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.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")])]},proxy:true}],null,false,643259221)},[_vm._v(" "),_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})],1):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -2,7 +2,6 @@ import merge from 'lodash/merge';
 import { GRAY_200 } from '../../../../dist/tokens/js/tokens';
 import { defaultChartOptions, dataZoomAdjustments, 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';
 import Chart from '../chart/chart';
@@ -62,14 +61,12 @@ var script = {
   data() {
     return {
       chart: null,
-      showTooltip: false,
       tooltipTitle: '',
       tooltipContent: {},
       tooltipPosition: {
         left: '0',
         top: '0'
       },
-      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
     };
   },
@@ -139,12 +136,7 @@ var script = {
       };
       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);
     },
@@ -153,7 +145,6 @@ var script = {
       const data = this.getChartData(params);
       if (data.length) {
         const [left, top] = this.chart.convertToPixel('grid', data);
-        this.showTooltip = true;
         this.tooltipPosition = {
           left: `${left}px`,
           top: `${top}px`
@@ -177,7 +168,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.disableTooltip && _vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]})],2):_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.disableTooltip && _vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]})],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/heatmap/heatmap.js

@@ -4,7 +4,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';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';
@@ -111,13 +110,11 @@ var script = {
     return {
       chart: null,
       tooltip: {
-        show: false,
         title: '',
         content: {},
         left: '0',
         top: '0'
       },
-      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
     };
   },
@@ -224,10 +221,6 @@ var script = {
       return this.height === 'auto';
     }
   },
-  beforeDestroy() {
-    this.chart.getDom().removeEventListener('mousemove', this.debouncedShowHideTooltip);
-    this.chart.getDom().removeEventListener('mouseout', this.debouncedShowHideTooltip);
-  },
   methods: {
     defaultFormatTooltipText(params) {
       const {
@@ -238,14 +231,9 @@ var script = {
       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 {
@@ -276,7 +264,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:"gl-heatmap",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.computedOptions},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.tooltip.show,"chart":_vm.chart,"top":_vm.tooltip.top,"left":_vm.tooltip.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.tooltip.title)+"\n        "),(_vm.computedOptions.xAxis.name)?[_vm._v("("+_vm._s(_vm.computedOptions.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.tooltip.content}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText}}):_vm._e()],1)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-heatmap",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.computedOptions},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"top":_vm.tooltip.top,"left":_vm.tooltip.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.tooltip.title)+"\n        "),(_vm.computedOptions.xAxis.name)?[_vm._v("("+_vm._s(_vm.computedOptions.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.tooltip.content}})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -4,7 +4,6 @@ import { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, de
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, HEIGHT_AUTO_CLASSES } 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';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';
@@ -100,13 +99,8 @@ var script = {
     // 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: '',
@@ -114,7 +108,6 @@ var script = {
         left: '0',
         top: '0'
       },
-      debouncedShowHideTooltip: debounceByAnimationFrame(this.showHideTooltip),
       selectedFormatTooltipText: this.formatTooltipText || this.defaultFormatTooltipText
     };
   },
@@ -214,8 +207,6 @@ var script = {
     }
   },
   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);
   },
@@ -236,13 +227,6 @@ var script = {
       };
     },
     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
@@ -260,13 +244,6 @@ var script = {
       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;
     },
@@ -306,7 +283,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},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 _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",attrs:{"chart":_vm.chart},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/charts/sparkline/sparkline.js

@@ -84,7 +84,6 @@ var script = {
     return {
       chartInstance: null,
       tooltip: {
-        show: false,
         title: '',
         content: '',
         position: {
@@ -189,9 +188,6 @@ var script = {
     handleResize() {
       this.chartInstance.resize();
     },
-    hideTooltip() {
-      this.tooltip.show = false;
-    },
     setTooltipPosition(data) {
       const [left, top] = this.chartInstance.convertToPixel('grid', data);
       this.tooltip.position = {
@@ -216,7 +212,6 @@ var script = {
       if (!data) return;
       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);
@@ -231,7 +226,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',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-display-flex gl-align-items-center",class:{ 'gl-h-full': _vm.autoHeight },on:{"mouseleave":_vm.hideTooltip}},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-flex-grow-1 gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES] = _vm.autoHeight, _obj ),attrs:{"data-testid":"chart-container"}},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{style:({ pointerEvents: 'none' }),attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-white-space-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-display-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-pr-6 gl-mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,2830367259)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-display-inline-flex gl-justify-content-center gl-ml-5",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
+var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-display-flex gl-align-items-center",class:{ 'gl-h-full': _vm.autoHeight }},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-flex-grow-1 gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES] = _vm.autoHeight, _obj ),attrs:{"data-testid":"chart-container"}},[_c('chart',_vm._g(_vm._b({class:{ 'gl-flex-grow-1': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{attrs:{"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-white-space-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-display-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-pr-6 gl-mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,2830367259)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-display-inline-flex gl-justify-content-center gl-ml-5",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/stacked_column/stacked_column.js

@@ -3,7 +3,6 @@ import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, grid
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, 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';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';
@@ -130,14 +129,8 @@ var script = {
   data() {
     return {
       chart: null,
-      showTooltip: false,
       tooltipTitle: '',
-      tooltipContent: {},
-      tooltipPosition: {
-        left: '0',
-        top: '0'
-      },
-      debouncedMoveShowTooltip: debounceByAnimationFrame(this.moveShowTooltip)
+      tooltipContent: {}
     };
   },
   computed: {
@@ -265,28 +258,12 @@ var script = {
       return this.height === 'auto';
     }
   },
-  beforeDestroy() {
-    this.chart.getZr().off('mousemove', this.debouncedMoveShowTooltip);
-    this.chart.getZr().off('mouseout', this.debouncedMoveShowTooltip);
-  },
   methods: {
     getColor(index) {
       var _this$customPalette;
       return this.customPalette ? (_this$customPalette = this.customPalette) === null || _this$customPalette === void 0 ? void 0 : _this$customPalette[index] : colorFromDefaultPalette(index);
     },
-    moveShowTooltip(_ref4) {
-      let {
-        event: mouseEvent
-      } = _ref4;
-      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);
     },
@@ -323,7 +300,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.chart)?_c('chart-tooltip',{attrs:{"show":_vm.showTooltip,"chart":_vm.chart,"top":_vm.tooltipPosition.top,"left":_vm.tooltipPosition.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_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.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart},scopedSlots:_vm._u([{key:"title",fn:function(){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.tooltipTitle)+" ("+_vm._s(_vm.xAxisTitle)+")")]})]},proxy:true}],null,true)},[_vm._v(" "),_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltipContent}})]})],2):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_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/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 20 Nov 2023 13:24:46 GMT
+ * Generated on Tue, 21 Nov 2023 13:00:27 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 20 Nov 2023 13:24:46 GMT
+ * Generated on Tue, 21 Nov 2023 13:00:27 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 20 Nov 2023 13:24:46 GMT
+ * Generated on Tue, 21 Nov 2023 13:00:27 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 20 Nov 2023 13:24:46 GMT
+ * Generated on Tue, 21 Nov 2023 13:00:27 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 20 Nov 2023 13:24:46 GMT
+// Generated on Tue, 21 Nov 2023 13:00:27 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 20 Nov 2023 13:24:46 GMT
+// Generated on Tue, 21 Nov 2023 13:00:27 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/dist/utils/charts/theme.js

@@ -2,8 +2,7 @@ import { GRAY_600, GRAY_200, GRAY_50, GRAY_300, GRAY_100, DATA_VIZ_BLUE_200, DAT
 import { scrollHandleSvgPath } from '../svgs/svg_paths';
 import { hexToRgba } from '../utils';
 
-const glBorderRadiusBase = '0.25rem';
-
+const GL_BORDER_RADIUS_BASE = '0.25rem';
 const themeName = 'gitlab';
 const heatmapHues = [GRAY_100, DATA_VIZ_BLUE_200, DATA_VIZ_BLUE_400, DATA_VIZ_BLUE_600, DATA_VIZ_BLUE_800];
 const gaugeNeutralHues = [GRAY_900, GRAY_500];
@@ -128,7 +127,7 @@ const createTheme = function () {
           borderWidth: 0,
           color: GRAY_900,
           textBackgroundColor: WHITE,
-          textBorderRadius: glBorderRadiusBase,
+          textBorderRadius: GL_BORDER_RADIUS_BASE,
           textPadding: [8, 12]
         }
       },

package/dist/utils/constants.js

@@ -1,7 +1,5 @@
 import { POSITION } from '../components/utilities/truncate/constants';
 
-const glIconSizes = '8 12 14 16 24 32 48 72';
-
 function appendDefaultOption(options) {
   return {
     ...options,
@@ -131,7 +129,7 @@ const datepickerWidthOptionsMap = {
 };
 
 // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
-const iconSizeOptions = glIconSizes.split(' ').map(Number);
+const iconSizeOptions = [8, 12, 14, 16, 24, 32, 48, 72];
 const triggerVariantOptions = {
   click: 'click',
   hover: 'hover',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "69.1.0",
+  "version": "70.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,27 +17,25 @@
   "files": [
     "src",
     "dist",
-    "scss_to_js",
     "translations.json"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
-    "prebuild": "run-s build-tokens build-scss-variables generate-utilities",
-    "prepare": "run-s build-tokens build-scss-variables generate-utilities",
+    "prebuild": "run-s build-tokens generate-utilities",
+    "prepare": "run-s build-tokens generate-utilities",
     "generate-utilities": "make src/scss/utilities.scss",
     "copy-fonts": "make copy-fonts",
-    "build-scss-variables": "make scss_to_js/scss_variables.js",
     "build-tokens": "node ./bin/build_tokens.js",
-    "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
+    "clean": "rm -r dist storybook src/scss/utilities.scss",
     "cy:a11y": "cypress run --browser chrome --env grepTags=@a11y",
     "cy:edge": "cypress run --browser edge --env grepTags=-@a11y",
     "cy:run": "cypress run --browser firefox --env grepTags=-@a11y",
     "start": "yarn storybook",
     "storybook": "yarn storybook-prep && storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
     "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 storybook dev --ci --host ${STORYBOOK_HOST:-localhost} --port 9001 -c .storybook",
-    "storybook-prep": "run-s copy-fonts build-tokens generate-utilities build-scss-variables",
+    "storybook-prep": "run-s copy-fonts build-tokens generate-utilities",
     "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
-    "pretest:unit": "yarn build-tokens build-scss-variables",
+    "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
     "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html 'yarn cy:run && yarn cy:a11y'",
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
@@ -129,7 +127,7 @@
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.53.0",
+    "eslint": "8.54.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.6.15",

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

@@ -142,7 +142,7 @@ describe('area component', () => {
     });
 
     it('is initialized', () => {
-      expect(findDataTooltip().exists()).toBe(true);
+      expect(findDataTooltip().props('chart')).toBe(mockChartInstance);
     });
   });