@gitlab/ui 42.8.0 → 42.9.0

package/package.json

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

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.
 *