@gitlab/ui 40.1.0 → 40.2.2

package/src/components/utilities/sprintf/sprintf.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 /* eslint-disable no-continue */
 import { has, isString } from 'lodash';

package/src/components/utilities/truncate/truncate.spec.js

@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from '~helpers/vue_mock_directive';
 import { POSITION } from './constants';
 import Truncate from './truncate.vue';
-import { createMockDirective, getBinding } from '~helpers/vue_mock_directive';
 
 const removeSpecialChar = (text) => {
   return text.replace(/‎|\u200E/gi, '');

package/src/components/utilities/truncate/truncate.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';

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

@@ -36,7 +36,9 @@ describe('hover load directive', () => {
       createComponent(mockHandleLoad);
 
       findTarget().trigger('mouseover');
-      await new Promise((resolve) => setTimeout(resolve, hoverDuration));
+      await new Promise((resolve) => {
+        setTimeout(resolve, hoverDuration);
+      });
       findTarget().trigger('mouseout');
 
       if (hoverDuration < 100) {

package/src/directives/outside/outside.spec.js

@@ -12,7 +12,10 @@ describe('outside directive', () => {
   // to guarantee it. So, we use 2ms, which seems to eliminate the flakiness.
   // Jest's fake timers unfortunately do not seem to affect event timestamps,
   // so can't be used here.
-  const delay = (ms = 2) => new Promise((resolve) => setTimeout(resolve, ms));
+  const delay = (ms = 2) =>
+    new Promise((resolve) => {
+      setTimeout(resolve, ms);
+    });
   const find = (testid) => wrapper.find(`[data-testid="${testid}"]`);
 
   const defaultTemplate = `

package/src/directives/resize_observer/resize_observer.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import { GlResizeObserverDirective } from './resize_observer';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
+import { GlResizeObserverDirective } from './resize_observer';
 
 describe('resize observer directive', () => {
   const { trigger, observersCount, observesElement } = useMockResizeObserver();

package/src/scss/utilities.scss

@@ -5572,12 +5572,24 @@
 .gl-mb-2\! {
   margin-bottom: $gl-spacing-scale-2 !important;
 }
+.gl-mb-n2 {
+  margin-bottom: -$gl-spacing-scale-2;
+}
+.gl-mb-n2\! {
+  margin-bottom: -$gl-spacing-scale-2 !important;
+}
 .gl-mb-3 {
   margin-bottom: $gl-spacing-scale-3;
 }
 .gl-mb-3\! {
   margin-bottom: $gl-spacing-scale-3 !important;
 }
+.gl-mb-n3 {
+  margin-bottom: -$gl-spacing-scale-3;
+}
+.gl-mb-n3\! {
+  margin-bottom: -$gl-spacing-scale-3 !important;
+}
 .gl-mb-4 {
   margin-bottom: $gl-spacing-scale-4;
 }
@@ -6010,6 +6022,16 @@
   margin-left: $gl-spacing-scale-3 !important;
   }
 }
+.gl-sm-ml-7 {
+  @include gl-media-breakpoint-up(sm) {
+  margin-left: $gl-spacing-scale-7;
+  }
+}
+.gl-sm-ml-7\! {
+  @include gl-media-breakpoint-up(sm) {
+  margin-left: $gl-spacing-scale-7 !important;
+  }
+}
 .gl-sm-mt-0 {
   @include gl-media-breakpoint-up(sm) {
   margin-top: 0;

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

@@ -486,10 +486,18 @@
   margin-bottom: $gl-spacing-scale-2;
 }
 
+@mixin gl-mb-n2 {
+  margin-bottom: -$gl-spacing-scale-2;
+}
+
 @mixin gl-mb-3 {
   margin-bottom: $gl-spacing-scale-3;
 }
 
+@mixin gl-mb-n3 {
+  margin-bottom: -$gl-spacing-scale-3;
+}
+
 @mixin gl-mb-4 {
   margin-bottom: $gl-spacing-scale-4;
 }
@@ -787,6 +795,12 @@
   }
 }
 
+@mixin gl-sm-ml-7 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-ml-7;
+  }
+}
+
 @mixin gl-sm-mt-0 {
   @include gl-media-breakpoint-up(sm) {
     @include gl-mt-0;

package/src/utils/test_utils.js

@@ -8,7 +8,10 @@ export function setStoryTimeout(fn, timeout) {
 
 // adopted this method from Bootstraps utils
 // https://github.com/bootstrap-vue/bootstrap-vue/blob/2fd03f0b1d0cc41f9930078ba8b1c16b10e4ac2f/tests/utils.js#L6
-export const waitForAnimationFrame = () => new Promise((resolve) => requestAnimationFrame(resolve));
+export const waitForAnimationFrame = () =>
+  new Promise((resolve) => {
+    requestAnimationFrame(resolve);
+  });
 
 export const getResetAnimationsCSS = () => `
   *, *::after, *::before {