@gitlab/ui 64.2.0 → 64.2.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [64.2.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.2.1...v64.2.2) (2023-06-02)
+
+
+### Bug Fixes
+
+* **sass:** revert migration from `/` operator to `calc()` ([5b5fc0b](https://gitlab.com/gitlab-org/gitlab-ui/commit/5b5fc0beaa7f90fdbe4c1b4bd4d583cf2de9b2be))
+
+## [64.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.2.0...v64.2.1) (2023-06-02)
+
+
+### Bug Fixes
+
+* **GlStackedColumnChart:** Replace the getDom to getZr for supporting edge ([8412f24](https://gitlab.com/gitlab-org/gitlab-ui/commit/8412f2456c56ea58c68ef8f78ff753ec4701388d))
+
 # [64.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.1.1...v64.2.0) (2023-06-02)
 
 

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

@@ -266,15 +266,18 @@ var script = {
     }
   },
   beforeDestroy() {
-    this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
-    this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
+    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(mouseEvent) {
+    moveShowTooltip(_ref4) {
+      let {
+        event: mouseEvent
+      } = _ref4;
       this.tooltipPosition = {
         left: `${mouseEvent.zrX}px`,
         top: `${mouseEvent.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`
@@ -282,8 +285,8 @@ var script = {
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
     onCreated(chart) {
-      chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
-      chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
+      chart.getZr().on('mousemove', this.debouncedMoveShowTooltip);
+      chart.getZr().on('mouseout', this.debouncedMoveShowTooltip);
       this.chart = chart;
       this.$emit('created', chart);
     },

package/package.json

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

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

@@ -58,8 +58,8 @@ const Template = (args, { argTypes }) => ({
   template,
 });
 
-export const Stacked = Template.bind({});
-Stacked.args = generateProps();
+export const Default = Template.bind({});
+Default.args = generateProps();
 
 export const Tiled = Template.bind({});
 Tiled.args = generateProps({ presentation: columnOptions.tiled });

package/src/components/charts/stacked_column/stacked_column.vue

@@ -261,14 +261,14 @@ export default {
     },
   },
   beforeDestroy() {
-    this.chart.getDom().removeEventListener('mousemove', this.debouncedMoveShowTooltip);
-    this.chart.getDom().removeEventListener('mouseout', this.debouncedMoveShowTooltip);
+    this.chart.getZr().off('mousemove', this.debouncedMoveShowTooltip);
+    this.chart.getZr().off('mouseout', this.debouncedMoveShowTooltip);
   },
   methods: {
     getColor(index) {
       return this.customPalette ? this.customPalette?.[index] : colorFromDefaultPalette(index);
     },
-    moveShowTooltip(mouseEvent) {
+    moveShowTooltip({ event: mouseEvent }) {
       this.tooltipPosition = {
         left: `${mouseEvent.zrX}px`,
         top: `${mouseEvent.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`,
@@ -276,8 +276,8 @@ export default {
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
     onCreated(chart) {
-      chart.getDom().addEventListener('mousemove', this.debouncedMoveShowTooltip);
-      chart.getDom().addEventListener('mouseout', this.debouncedMoveShowTooltip);
+      chart.getZr().on('mousemove', this.debouncedMoveShowTooltip);
+      chart.getZr().on('mouseout', this.debouncedMoveShowTooltip);
       this.chart = chart;
       this.$emit('created', chart);
     },

package/src/scss/functions.scss

@@ -21,7 +21,7 @@
     @return $value;
   }
 
-  $converted: calc($value / $font-size-base);
+  $converted: $value / $font-size-base;
 
   @return strip-unit($converted) * 1rem;
 }
@@ -54,7 +54,7 @@
   $min-width: px-to-rem($min-width);
   $max-width: px-to-rem($max-width);
 
-  $slope: calc(($max - $min) / ($max-width - $min-width));
+  $slope: ($max - $min) / ($max-width - $min-width);
   $intersection: (-$min-width * $slope) + $min;
 
   // Use calc() inside of clamp() function to work around SassC