@gitlab/ui 63.4.0 → 64.0.1

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -11,6 +11,7 @@ import {
   END,
   ARROW_DOWN,
   ARROW_UP,
+  GL_DROPDOWN_CONTENTS_CLASS,
 } from '../constants';
 import {
   buttonCategoryOptions,
@@ -300,13 +301,13 @@ export default {
       default: false,
     },
     /**
-     * Options to be passed to the underlying Popper.js instance.
-     * Overrides built-in options.
+     * Custom offset to be applied to Floating UI's offset middleware.
+     * https://floating-ui.com/docs/offset
      */
-    popperOptions: {
-      type: Object,
+    dropdownOffset: {
+      type: [Number, Object],
       required: false,
-      default: () => ({}),
+      default: undefined,
     },
     /**
      * Lets the dropdown extend to match its content's width, up to a maximum width
@@ -338,6 +339,7 @@ export default {
       return {
         'top-scrim-visible': !this.topBoundaryVisible,
         'bottom-scrim-visible': !this.bottomBoundaryVisible,
+        [GL_DROPDOWN_CONTENTS_CLASS]: true,
       };
     },
     itemTag() {
@@ -705,7 +707,7 @@ export default {
     :loading="loading"
     :no-caret="noCaret"
     :placement="placement"
-    :popper-options="popperOptions"
+    :offset="dropdownOffset"
     :fluid-width="fluidWidth"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"

package/src/components/charts/bar/bar.vue

@@ -175,12 +175,12 @@ export default {
   },
   beforeDestroy() {
     if (this.chart) {
-      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: {
-    moveShowTooltip(mouseEvent) {
+    moveShowTooltip({ event: mouseEvent }) {
       this.tooltipPosition = {
         left: `${mouseEvent.zrX + TOOLTIP_LEFT_OFFSET}px`,
         top: `${mouseEvent.zrY}px`,
@@ -190,8 +190,8 @@ export default {
     onCreated(chart) {
       this.chart = chart;
       this.$emit('created', 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);
     },
     onLabelChange(params) {
       const { yLabels, tooltipContent } = this.getDefaultTooltipContent(params, this.xAxisTitle);

package/src/scss/utilities.scss

@@ -1693,6 +1693,16 @@
   border-radius: $gl-spacing-scale-4 !important;
 }
 
+.gl-rounded-left-none {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.gl-rounded-left-none\! {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
 .gl-rounded-left-base {
   border-top-left-radius: $gl-border-radius-base;
   border-bottom-left-radius: $gl-border-radius-base;

package/src/scss/utility-mixins/border.scss

@@ -383,6 +383,12 @@
 @mixin gl-rounded-pill {
   border-radius: $gl-spacing-scale-4;
 }
+
+@mixin gl-rounded-left-none {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
 @mixin gl-rounded-left-base {
   border-top-left-radius: $gl-border-radius-base;
   border-bottom-left-radius: $gl-border-radius-base;