@gitlab/ui 85.4.0 → 85.5.0

package/package.json

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

package/src/components/base/tooltip/tooltip.scss

@@ -8,6 +8,8 @@
     @include gl-font-weight-normal;
     @include gl-py-3;
     @include gl-px-4;
+    background: var(--gl-feedback-background-color-strong);
+    color: var(--gl-feedback-text-color-strong);
   }
 
   .arrow {
@@ -30,16 +32,20 @@
 
 .gl-tooltip.bs-tooltip-top .arrow::before {
   @include gl-border-b-0;
+  border-top-color: var(--gl-feedback-background-color-strong);
 }
 
 .gl-tooltip.bs-tooltip-right .arrow::before {
   @include gl-border-l-0;
+  border-right-color: var(--gl-feedback-background-color-strong);
 }
 
 .gl-tooltip.bs-tooltip-bottom .arrow::before {
   @include gl-border-t-0;
+  border-bottom-color: var(--gl-feedback-background-color-strong);
 }
 
 .gl-tooltip.bs-tooltip-left .arrow::before {
   @include gl-border-r-0;
+  border-left-color: var(--gl-feedback-background-color-strong);
 }

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

@@ -89,6 +89,7 @@ export default {
     return {
       chartInstance: null,
       tooltip: {
+        show: false,
         title: '',
         content: '',
         position: {
@@ -178,6 +179,8 @@ export default {
   methods: {
     onChartCreated(chartInstance) {
       this.chartInstance = chartInstance;
+      this.tooltip.show = false;
+
       /**
        * Emitted when the chart is created.
        * The payload contains the echarts instance.
@@ -189,6 +192,9 @@ export default {
     handleResize() {
       this.chartInstance.resize();
     },
+    isNilOrBlank(text) {
+      return isNil(text) || (typeof text === 'string' && text.trim() === '');
+    },
     setTooltipPosition(data) {
       const [left, top] = this.chartInstance.convertToPixel('grid', data);
       this.tooltip.position = {
@@ -200,6 +206,8 @@ export default {
     // point on the line is selected). Note that it will not trigger if the axis pointer is removed,
     // only when it changes from one point to another or is shown for the first time.
     generateTooltip({ seriesData = [] }) {
+      this.tooltip.show = false;
+
       // seriesData is an array of nearby data point coordinates
       // seriesData[0] is the nearest point at which the tooltip is displayed
       // https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.formatter
@@ -208,11 +216,12 @@ export default {
       if (!data) return;
 
       const [title, content] = data;
-      if (isNil(title) || isNil(content)) return;
+      if (this.isNilOrBlank(title) || this.isNilOrBlank(content)) return;
 
       this.tooltip.title = title;
       this.tooltip.content = content;
       this.setTooltipPosition(data);
+      this.tooltip.show = null;
     },
   },
   HEIGHT_AUTO_HORIZONTAL_LAYOUT_CLASSES,
@@ -241,6 +250,7 @@ export default {
       />
       <chart-tooltip
         v-if="chartInstance"
+        :show="tooltip.show"
         :chart="chartInstance"
         :top="tooltip.position.top"
         :left="tooltip.position.left"