@gitlab/ui 78.10.1 → 78.11.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [78.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.10.1...v78.11.0) (2024-04-10)
+
+
+### Features
+
+* **GlHeatmap:** Add prop to show/hide tooltip ([77a0484](https://gitlab.com/gitlab-org/gitlab-ui/commit/77a0484dcb95f19fb32aa30069465fd64a1dec9b))
+
 ## [78.10.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.10.0...v78.10.1) (2024-04-09)
 
 

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

@@ -104,6 +104,11 @@ var script = {
       type: [Number, String],
       required: false,
       default: null
+    },
+    showTooltip: {
+      type: Boolean,
+      default: true,
+      required: false
     }
   },
   data() {
@@ -260,7 +265,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:{"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(_vm._s(_vm.tooltip.title))])]},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,"show":_vm.showTooltip},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v(_vm._s(_vm.tooltip.title))])]},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/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:01:48 GMT
+ * Generated on Wed, 10 Apr 2024 09:37:45 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:01:48 GMT
+ * Generated on Wed, 10 Apr 2024 09:37:45 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:01:48 GMT
+ * Generated on Wed, 10 Apr 2024 09:37:45 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:01:48 GMT
+ * Generated on Wed, 10 Apr 2024 09:37:45 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 Tue, 09 Apr 2024 14:01:48 GMT
+// Generated on Wed, 10 Apr 2024 09:37:45 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Apr 2024 14:01:48 GMT
+// Generated on Wed, 10 Apr 2024 09:37:45 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.10.1",
+  "version": "78.11.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -93,10 +93,10 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.24.3",
+    "@babel/core": "^7.24.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.5.0",
@@ -131,7 +131,7 @@
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
-    "cypress": "13.7.0",
+    "cypress": "13.7.2",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",

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

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
+import { nextTick } from 'vue';
 import { createMockChartInstance } from '~helpers/chart_stubs';
 import { expectHeightAutoClasses } from '~helpers/chart_height';
 import Chart from '../chart/chart.vue';
@@ -76,6 +77,22 @@ describe('heatmap component', () => {
     });
   });
 
+  describe('showTooltip', () => {
+    it('is true by default', async () => {
+      createComponent();
+      await nextTick();
+
+      expect(findChartTooltip().props('show')).toBe(true);
+    });
+
+    it('sets show prop on the tooltip component', async () => {
+      createComponent({ showTooltip: false });
+      await nextTick();
+
+      expect(findChartTooltip().props('show')).toBe(false);
+    });
+  });
+
   describe('height', () => {
     expectHeightAutoClasses({
       createComponent,

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

@@ -25,6 +25,7 @@ const template = `
       :y-axis-name="yAxisName"
       :options="options"
       :height="height"
+      :show-tooltip="showTooltip"
     />
 `;
 
@@ -36,6 +37,7 @@ const generateProps = ({
   yAxisName = 'Day',
   options = {},
   height = null,
+  showTooltip = true,
 } = {}) => ({
   data,
   xAxisLabels,
@@ -44,6 +46,7 @@ const generateProps = ({
   yAxisName,
   options,
   height,
+  showTooltip,
 });
 
 const Template = (args, { argTypes }) => ({

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

@@ -106,6 +106,11 @@ export default {
       required: false,
       default: null,
     },
+    showTooltip: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
   },
   data() {
     return {
@@ -258,7 +263,13 @@ export default {
       @created="onCreated"
       v-on="$listeners"
     />
-    <chart-tooltip v-if="chart" :chart="chart" :top="tooltip.top" :left="tooltip.left">
+    <chart-tooltip
+      v-if="chart"
+      :chart="chart"
+      :top="tooltip.top"
+      :left="tooltip.left"
+      :show="showTooltip"
+    >
       <template #title>
         <slot v-if="formatTooltipText" name="tooltip-title"></slot>
         <div v-else>{{ tooltip.title }}</div>