@gitlab/ui 42.7.0 → 42.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.7.0",
+  "version": "42.10.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -105,7 +105,7 @@
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.17.0",
+    "eslint": "8.18.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.5.12",

package/src/components/base/accordion/accordion_item.spec.js

@@ -32,6 +32,7 @@ describe('GlAccordionItem', () => {
 
   const findButton = () => wrapper.findComponent(GlButton);
   const findCollapse = () => wrapper.findComponent(BCollapse);
+  const findHeader = () => wrapper.find('.gl-accordion-item-header');
 
   it('renders button text', () => {
     createComponent();
@@ -64,6 +65,15 @@ describe('GlAccordionItem', () => {
     expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBeTruthy();
   });
 
+  it.each(['custom-header-class', ['custom-header-class'], { 'custom-header-class': true }])(
+    'applies custom classes to the header',
+    (customClassProp) => {
+      createComponent({ headerClass: customClassProp }, { defaultHeaderLevel: 3 });
+
+      expect(findHeader().classes()).toContain('custom-header-class');
+    }
+  );
+
   it('renders slot text', () => {
     createComponent();
 

package/src/components/base/accordion/accordion_item.vue

@@ -54,6 +54,14 @@ When set, it will ensure the accordion item is initially visible
         return value > 0 && value <= 6;
       },
     },
+    /**
+     * Additional CSS class(es) to be applied to the header.
+     */
+    headerClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -89,7 +97,7 @@ When set, it will ensure the accordion item is initially visible
 
 <template>
   <div class="gl-accordion-item">
-    <component :is="headerComponent" class="gl-accordion-item-header">
+    <component :is="headerComponent" class="gl-accordion-item-header" :class="headerClass">
       <gl-button
         v-gl-collapse-toggle="accordionItemId"
         variant="link"

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