@gitlab/ui 42.8.0 → 42.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.8.0",
+  "version": "42.10.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.3.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "2.21.0",
+    "@gitlab/svgs": "2.22.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/form/form_checkbox/form_checkbox.vue

@@ -1,5 +1,6 @@
 <script>
 import { BFormCheckbox } from 'bootstrap-vue';
+import { uniqueId } from 'lodash';
 
 export default {
   name: 'GlFormCheckbox',
@@ -11,6 +12,13 @@ export default {
     prop: 'checked',
     event: 'input',
   },
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: () => uniqueId(),
+    },
+  },
   methods: {
     change($event) {
       /**
@@ -33,7 +41,13 @@ export default {
 </script>
 
 <template>
-  <b-form-checkbox v-bind="$attrs" class="gl-form-checkbox" @change="change" @input="input">
+  <b-form-checkbox
+    v-bind="$attrs"
+    :id="id"
+    class="gl-form-checkbox"
+    @change="change"
+    @input="input"
+  >
     <!-- @slot The checkbox content to display. -->
     <slot></slot>
     <p v-if="Boolean($scopedSlots.help)" class="help-text">

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

@@ -17,6 +17,7 @@ import {
   LEGEND_MIN_TEXT,
   LEGEND_MAX_TEXT,
   CHART_TYPE_LINE,
+  ANNOTATION_TOOLTIP_TOP_OFFSET,
 } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
@@ -259,7 +260,7 @@ export default {
     moveShowTooltip(mouseEvent) {
       this.tooltipPosition = {
         left: `${mouseEvent.zrX}px`,
-        top: `${mouseEvent.zrY}px`,
+        top: `${mouseEvent.zrY + ANNOTATION_TOOLTIP_TOP_OFFSET}px`,
       };
       this.showTooltip = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },

package/src/directives/hover_load/hover_load.js

@@ -1,6 +1,6 @@
 import isFunction from 'lodash/isFunction';
 
-const DELAY_ON_HOVER = 100;
+export const DELAY_ON_HOVER = 100;
 let mouseOverTimer;
 let mouseOverHandler;
 

package/src/directives/hover_load/hover_load.spec.js

@@ -1,5 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
-import { HoverLoadDirective as hoverLoad } from './hover_load';
+import { HoverLoadDirective as hoverLoad, DELAY_ON_HOVER } from './hover_load';
+
+jest.useFakeTimers();
 
 describe('hover load directive', () => {
   let wrapper;
@@ -26,28 +28,25 @@ describe('hover load directive', () => {
   });
 
   it.each`
-    hoverDuration | action
-    ${150}        | ${'triggers'}
-    ${99}         | ${'does not trigger'}
-  `(
-    'if hover durations is $hoverDuration, directive $action the handler',
-    async ({ hoverDuration }) => {
-      const mockHandleLoad = jest.fn();
-      createComponent(mockHandleLoad);
+    hoverDuration         | action                | expectedCalls
+    ${DELAY_ON_HOVER}     | ${'triggers'}         | ${1}
+    ${DELAY_ON_HOVER - 1} | ${'does not trigger'} | ${0}
+  `('$action the callback after $hoverDuration ms', ({ hoverDuration, expectedCalls }) => {
+    const mockHandleLoad = jest.fn();
+    createComponent(mockHandleLoad);
+
+    findTarget().trigger('mouseover');
+
+    jest.advanceTimersByTime(hoverDuration);
 
-      findTarget().trigger('mouseover');
-      await new Promise((resolve) => {
-        setTimeout(resolve, hoverDuration);
-      });
-      findTarget().trigger('mouseout');
+    findTarget().trigger('mouseout');
 
-      if (hoverDuration < 100) {
-        expect(mockHandleLoad).not.toHaveBeenCalled();
-      } else {
-        expect(mockHandleLoad).toHaveBeenCalledTimes(1);
-      }
+    expect(mockHandleLoad).toHaveBeenCalledTimes(expectedCalls);
+
+    if (expectedCalls) {
+      expect(mockHandleLoad).toHaveBeenCalledWith(findTarget().element);
     }
-  );
+  });
 
   it('cleans up the mouseover event when component is destroyed', () => {
     createComponent(jest.fn());

package/src/scss/utilities.scss

@@ -3599,14 +3599,6 @@
   }
 }
 
-.gl-grid-gap-6 {
-  gap: $gl-spacing-scale-6;
-}
-
-.gl-grid-gap-6\! {
-  gap: $gl-spacing-scale-6 !important;
-}
-
 .gl-list-style-none {
   list-style-type: none
 }
@@ -6138,6 +6130,24 @@
     margin-left: #{$gl-spacing-scale-5} !important;
   }
 }
+.gl-gap-3 {
+  gap: $gl-spacing-scale-3;
+}
+.gl-gap-3\! {
+  gap: $gl-spacing-scale-3 !important;
+}
+.gl-gap-6 {
+  gap: $gl-spacing-scale-6;
+}
+.gl-gap-6\! {
+  gap: $gl-spacing-scale-6 !important;
+}
+.gl-grid-gap-6 {
+  gap: $gl-spacing-scale-6;
+}
+.gl-grid-gap-6\! {
+  gap: $gl-spacing-scale-6 !important;
+}
 .gl-xs-mb-3 {
   @include gl-media-breakpoint-down(sm) {
   margin-bottom: $gl-spacing-scale-3;

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

@@ -26,7 +26,3 @@
     grid-template-columns: 1fr 1fr;
   }
 }
-
-@mixin gl-grid-gap-6 {
-  gap: $gl-spacing-scale-6;
-}

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

@@ -785,6 +785,19 @@
   }
 }
 
+@mixin gl-gap-3 {
+  gap: $gl-spacing-scale-3;
+}
+
+@mixin gl-gap-6 {
+  gap: $gl-spacing-scale-6;
+}
+
+/* Deprecated */
+@mixin gl-grid-gap-6 {
+  @include gl-gap-6;
+}
+
 /**
 * Responsive margin utilities.
 *