@gitlab/ui 38.10.1 → 38.10.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [38.10.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.10.1...v38.10.2) (2022-04-14)
+
+
+### Bug Fixes
+
+* **ChartTooltip:** restore right placement by default ([4dfed07](https://gitlab.com/gitlab-org/gitlab-ui/commit/4dfed07d69cc50b59c950f85cda2fe8ef11b7a03))
+
 ## [38.10.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.10.0...v38.10.1) (2022-04-14)
 
 

package/dist/components/charts/tooltip/tooltip.js

@@ -1,6 +1,7 @@
 import * as echarts from 'echarts';
 import { uid } from '../../../utils/utils';
 import GlPopover from '../../base/popover/popover';
+import { popoverPlacements } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
@@ -42,6 +43,11 @@ var script = {
       type: String,
       required: false,
       default: null
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.right
     }
   },
   computed: {
@@ -71,7 +77,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',[_c('div',{staticClass:"gl-chart-tooltip",staticStyle:{"width":"1px","height":"1px"},style:(_vm.containerPosition),attrs:{"id":_vm.containerId}}),_vm._v(" "),_c('gl-popover',_vm._b({attrs:{"target":_vm.containerId,"container":_vm.containerId,"triggers":""},scopedSlots:_vm._u([(_vm.$scopedSlots.title)?{key:"title",fn:function(){return [_vm._t("title")]},proxy:true}:null],null,true)},'gl-popover',_vm.$attrs,false),[_vm._v(" "),_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-chart-tooltip",staticStyle:{"width":"1px","height":"1px"},style:(_vm.containerPosition),attrs:{"id":_vm.containerId}}),_vm._v(" "),_c('gl-popover',_vm._b({attrs:{"target":_vm.containerId,"container":_vm.containerId,"placement":_vm.placement,"triggers":""},scopedSlots:_vm._u([(_vm.$scopedSlots.title)?{key:"title",fn:function(){return [_vm._t("title")]},proxy:true}:null],null,true)},'gl-popover',_vm.$attrs,false),[_vm._v(" "),_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

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

@@ -0,0 +1,42 @@
+import { shallowMount } from '@vue/test-utils';
+import GlPopover from '../../base/popover/popover.vue';
+import { popoverPlacements } from '../../../utils/constants';
+import ChartTooltip from './tooltip.vue';
+import { createMockChartInstance } from '~helpers/chart_stubs';
+
+let mockChartInstance;
+
+jest.mock('echarts', () => ({
+  getInstanceByDom: () => mockChartInstance,
+}));
+
+describe('ChartTooltip', () => {
+  let wrapper;
+
+  const findGlPopover = () => wrapper.findComponent(GlPopover);
+
+  const createWrapper = (props = {}) => {
+    mockChartInstance = createMockChartInstance();
+    wrapper = shallowMount(ChartTooltip, {
+      propsData: {
+        chart: mockChartInstance,
+        ...props,
+      },
+    });
+  };
+
+  describe('GlPopover', () => {
+    it('is right-positioned by default', () => {
+      createWrapper();
+
+      expect(findGlPopover().props('placement')).toBe(popoverPlacements.right);
+    });
+
+    it('applies passed placement if any', () => {
+      const placement = popoverPlacements.bottom;
+      createWrapper({ placement });
+
+      expect(findGlPopover().props('placement')).toBe(placement);
+    });
+  });
+});

package/src/components/charts/tooltip/tooltip.vue

@@ -2,6 +2,7 @@
 import * as echarts from 'echarts';
 import { uid } from '../../../utils/utils';
 import GlPopover from '../../base/popover/popover.vue';
+import { popoverPlacements } from '../../../utils/constants';
 
 export default {
   components: {
@@ -41,6 +42,11 @@ export default {
       required: false,
       default: null,
     },
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.right,
+    },
   },
   computed: {
     containerId() {
@@ -80,7 +86,13 @@ export default {
       Needs to be triggered programatically using `show` property
       This is why `triggers` is currently set to an empty string
     -->
-    <gl-popover v-bind="$attrs" :target="containerId" :container="containerId" triggers="">
+    <gl-popover
+      v-bind="$attrs"
+      :target="containerId"
+      :container="containerId"
+      :placement="placement"
+      triggers=""
+    >
       <template v-if="$scopedSlots.title" #title>
         <slot name="title"></slot>
       </template>