@gitlab/ui 72.12.0 → 72.12.2

package/dist/utils/test_utils.js

@@ -0,0 +1,33 @@
+/**
+ * Wrapper around setTimeout which executes immediately in visual tests
+ * in order to avoid flaky tests
+ */
+function setStoryTimeout(fn, timeout) {
+  return setTimeout(fn, process.env.IS_VISUAL_TEST ? 0 : timeout);
+}
+
+// adopted this method from Bootstraps utils
+// https://github.com/bootstrap-vue/bootstrap-vue/blob/2fd03f0b1d0cc41f9930078ba8b1c16b10e4ac2f/tests/utils.js#L6
+const waitForAnimationFrame = () => new Promise(resolve => {
+  requestAnimationFrame(resolve);
+});
+const getResetAnimationsCSS = () => `
+  *, *::after, *::before {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -ms-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+
+    -webkit-animation: none !important;
+    -moz-animation: none !important;
+    -ms-animation: none !important;
+    -o-animation: none !important;
+    animation: none !important;
+  }
+
+  input, textarea {
+    caret-color: transparent !important;
+  }`;
+
+export { getResetAnimationsCSS, setStoryTimeout, waitForAnimationFrame };

package/dist/utils/use_fake_date.js

@@ -0,0 +1,29 @@
+import MockDate from 'mockdate';
+
+/**
+ * When applied to a story, this mixin mocks the current date to make
+ * visual tests that rely on the date deterministic
+ *
+ * Usage:
+ *
+ * import { useFakeDate } from '../../../../tests/utils/use_fake_date';
+ * documentedStoriesOf('some|story')
+ * .add('default', () => ({
+ *   mixins: [useFakeDate()],
+ * })
+ */
+const useFakeDate = () => {
+  if (process.env.IS_VISUAL_TEST) {
+    return {
+      created() {
+        MockDate.set('2020-01-10', 0);
+      },
+      destroyed() {
+        MockDate.reset();
+      }
+    };
+  }
+  return {};
+};
+
+export { useFakeDate };

package/dist/utils/use_mock_intersection_observer.js

@@ -0,0 +1,108 @@
+import isMatch from 'lodash/isMatch';
+
+/* global jest, beforeEach, afterEach */
+
+/**
+ * This class gives us a JSDom friendly DOM observer which we can manually trigger in tests
+ *
+ * Use this in place of MutationObserver or IntersectionObserver
+ *
+ * This class is largely influenced from [a test helper][1] in the main GitLab project
+ *
+ * [1]: https://gitlab.com/gitlab-org/gitlab/blob/a123813c63147392b95cd03c4744ae9db0575b0f/spec/frontend/helpers/mock_dom_observer.js#L95
+ */
+class MockObserver {
+  constructor(cb) {
+    this.$_cb = cb;
+    this.$_observers = [];
+  }
+  observe(node) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    this.$_observers.push([node, options]);
+  }
+  disconnect() {
+    this.$_observers = [];
+  }
+  takeRecords() {}
+
+  // eslint-disable-next-line camelcase
+  $_triggerObserve(nodeParam) {
+    let {
+      entry = {},
+      options = {}
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const nodes = this.$_getNodesFromParam(nodeParam);
+    nodes.forEach(node => {
+      if (this.$_hasObserver(node, options)) {
+        this.$_cb([{
+          target: node,
+          ...entry
+        }]);
+      }
+    });
+  }
+
+  // eslint-disable-next-line camelcase
+  $_hasObserver(node) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    return this.$_observers.some(_ref => {
+      let [obvNode, obvOptions] = _ref;
+      return node === obvNode && isMatch(options, obvOptions);
+    });
+  }
+  $_getNodesFromParam(nodeParam) {
+    if (!nodeParam) {
+      return this.$_observers.map(_ref2 => {
+        let [node] = _ref2;
+        return node;
+      });
+    }
+    if (!Array.isArray(nodeParam)) {
+      return [nodeParam];
+    }
+    return nodeParam;
+  }
+}
+class MockIntersectionObserver extends MockObserver {
+  unobserve(node) {
+    this.$_observers = this.$_observers.filter(_ref3 => {
+      let [obvNode] = _ref3;
+      return node !== obvNode;
+    });
+  }
+}
+const useMockIntersectionObserver = () => {
+  let instances;
+  let origObserver;
+  beforeEach(() => {
+    instances = [];
+    origObserver = global.IntersectionObserver;
+    global.IntersectionObserver = jest.fn().mockImplementation(function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      const mockObserver = new MockIntersectionObserver(...args);
+      instances.push(mockObserver);
+      return mockObserver;
+    });
+  });
+  afterEach(() => {
+    instances = [];
+    global.IntersectionObserver = origObserver;
+  });
+  const trigger = function (observer) {
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+    observer.$_triggerObserve(...args);
+  };
+  const getInstances = () => {
+    return instances;
+  };
+  return {
+    getInstances,
+    trigger
+  };
+};
+
+export { useMockIntersectionObserver };

package/dist/utils/utils.js

@@ -0,0 +1,197 @@
+import { isVisible } from 'bootstrap-vue/esm/utils/dom';
+import { COMMA, labelColorOptions, CONTRAST_LEVELS, focusableTags } from './constants';
+
+function debounceByAnimationFrame(fn) {
+  let requestId;
+  return function debounced() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (requestId) {
+      window.cancelAnimationFrame(requestId);
+    }
+    requestId = window.requestAnimationFrame(() => fn.apply(this, args));
+  };
+}
+function throttle(fn) {
+  let frameId = null;
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    if (frameId) {
+      return;
+    }
+    frameId = window.requestAnimationFrame(() => {
+      fn(...args);
+      frameId = null;
+    });
+  };
+}
+function rgbFromHex(hex) {
+  const cleanHex = hex.replace('#', '');
+  const rgb = cleanHex.length === 3 ? cleanHex.split('').map(val => val + val) : cleanHex.match(/[\da-f]{2}/gi);
+  const [r, g, b] = rgb.map(val => parseInt(val, 16));
+  return [r, g, b];
+}
+function rgbFromString(color, sub) {
+  const rgb = color.substring(sub, color.length - 1).split(COMMA);
+  const [r, g, b] = rgb.map(i => parseInt(i, 10));
+  return [r, g, b];
+}
+function hexToRgba(hex) {
+  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  const [r, g, b] = rgbFromHex(hex);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function toSrgb(value) {
+  const normalized = value / 255;
+  return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance(rgb) {
+  // WCAG 2.1 formula: https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+  // -
+  // WCAG 3.0 will use APAC
+  // Using APAC would be the ultimate goal, but was dismissed by engineering as of now
+  // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3418#note_1370107090
+  return 0.2126 * toSrgb(rgb[0]) + 0.7152 * toSrgb(rgb[1]) + 0.0722 * toSrgb(rgb[2]);
+}
+function colorFromBackground(backgroundColor) {
+  let contrastRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2.4;
+  let color;
+  const lightColor = rgbFromHex('#FFFFFF');
+  const darkColor = rgbFromHex('#1f1e24');
+  if (backgroundColor.startsWith('#')) {
+    color = rgbFromHex(backgroundColor);
+  } else if (backgroundColor.startsWith('rgba(')) {
+    color = rgbFromString(backgroundColor, 5);
+  } else if (backgroundColor.startsWith('rgb(')) {
+    color = rgbFromString(backgroundColor, 4);
+  }
+  const luminance = relativeLuminance(color);
+  const lightLuminance = relativeLuminance(lightColor);
+  const darkLuminance = relativeLuminance(darkColor);
+  const contrastLight = (lightLuminance + 0.05) / (luminance + 0.05);
+  const contrastDark = (luminance + 0.05) / (darkLuminance + 0.05);
+
+  // Using a default threshold contrast of 2.4 instead of 3
+  // as this will solve weird color combinations in the mid tones
+  return contrastLight >= contrastRatio || contrastLight > contrastDark ? labelColorOptions.light : labelColorOptions.dark;
+}
+function getColorContrast(foreground, background) {
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+  const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
+  const foregroundLuminance = relativeLuminance(rgbFromHex(foreground)) + 0.05;
+  let score = backgroundLuminance / foregroundLuminance;
+  if (foregroundLuminance > backgroundLuminance) {
+    score = 1 / score;
+  }
+  const level = CONTRAST_LEVELS.find(_ref => {
+    let {
+      min,
+      max
+    } = _ref;
+    return score >= min && score < max;
+  });
+  return {
+    score: (Math.round(score * 10) / 10).toFixed(1),
+    level
+  };
+}
+function uid() {
+  return Math.random().toString(36).substring(2);
+}
+
+/**
+ * Receives an element and validates that it can be focused
+ * @param { HTMLElement } The element we want to validate
+ * @return { boolean } Is the element focusable
+ */
+
+function isElementFocusable(elt) {
+  if (!elt) return false;
+  const {
+    tagName
+  } = elt;
+  const isValidTag = focusableTags.includes(tagName);
+  const hasValidType = elt.getAttribute('type') !== 'hidden';
+  const isDisabled = elt.getAttribute('disabled') === '' || elt.getAttribute('disabled');
+  const hasValidZIndex = elt.getAttribute('z-index') !== '-1';
+  const isInvalidAnchorTag = tagName === 'A' && !elt.getAttribute('href');
+  return isValidTag && hasValidType && !isDisabled && hasValidZIndex && !isInvalidAnchorTag;
+}
+
+/**
+ * Receives an element and validates that it is reachable via sequential keyboard navigation
+ * @param { HTMLElement } The element to validate
+ * @return { boolean } Is the element focusable in a sequential tab order
+ */
+
+function isElementTabbable(el) {
+  if (!el) return false;
+  const tabindex = parseInt(el.getAttribute('tabindex'), 10);
+  return tabindex > -1;
+}
+
+/**
+ * Receives an array of HTML elements and focus the first one possible
+ * @param { Array.<HTMLElement> } An array of element to potentially focus
+ * @return { undefined }
+ */
+
+function focusFirstFocusableElement(elts) {
+  const focusableElt = elts.find(el => isElementFocusable(el));
+  if (focusableElt) focusableElt.focus();
+}
+
+/**
+ * Returns true if the current environment is considered a development environment (it's not
+ * production or test).
+ *
+ * @returns {boolean}
+ */
+function isDev() {
+  return !['test', 'production'].includes(process.env.NODE_ENV);
+}
+
+/**
+ * Prints a warning message to the console in non-test and non-production environments.
+ * @param {string} message message to print to the console
+ * @param {HTMLElement} element component that triggered the warning
+ */
+function logWarning() {
+  let message = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  if (message.length && isDev()) {
+    console.warn(message, element); // eslint-disable-line no-console
+  }
+}
+
+/**
+ * Stop default event handling and propagation
+ */
+function stopEvent(event) {
+  let {
+    preventDefault = true,
+    stopPropagation = true,
+    stopImmediatePropagation = false
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (preventDefault) {
+    event.preventDefault();
+  }
+  if (stopPropagation) {
+    event.stopPropagation();
+  }
+  if (stopImmediatePropagation) {
+    event.stopImmediatePropagation();
+  }
+}
+
+/**
+ * Return an Array of visible items
+ */
+function filterVisible(els) {
+  return (els || []).filter(el => isVisible(el));
+}
+
+export { colorFromBackground, debounceByAnimationFrame, filterVisible, focusFirstFocusableElement, getColorContrast, hexToRgba, isDev, isElementFocusable, isElementTabbable, logWarning, relativeLuminance, rgbFromHex, rgbFromString, stopEvent, throttle, toSrgb, uid };

package/dist/utils.js

@@ -0,0 +1,5 @@
+export { GlBreakpointInstance, breakpoints } from './utils/breakpoints';
+import * as validators from './components/base/form/form_fields/validators';
+export { validators as formValidators };
+import * as mappers from './components/base/form/form_fields/mappers';
+export { mappers as formMappers };

package/package.json

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

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

@@ -816,7 +816,6 @@ export default {
       <gl-listbox-search-input
         ref="searchBox"
         v-model="searchStr"
-        :aria-owns="listboxId"
         data-testid="listbox-search-input"
         :placeholder="searchPlaceholder"
         :class="{ 'gl-listbox-topmost': !headerText }"

package/src/scss/utilities.scss

@@ -8837,42 +8837,42 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   font-style: normal !important;
 }
 
-.gl-heading-scale-6{
+.gl-heading-6{
   @include gl-heading-scale-200;
   margin-bottom: $gl-mb-heading;
 }
 
-.gl-heading-scale-6\!{
+.gl-heading-6\!{
   @include gl-heading-scale-200;
   margin-bottom: $gl-mb-heading !important;
 }
 
-.gl-heading-scale-6-fixed{
+.gl-heading-6-fixed{
   @include gl-heading-scale-200-fixed;
   margin-bottom: $gl-mb-heading;
 }
 
-.gl-heading-scale-6-fixed\!{
+.gl-heading-6-fixed\!{
   @include gl-heading-scale-200-fixed;
   margin-bottom: $gl-mb-heading !important;
 }
 
-.gl-heading-scale-5{
+.gl-heading-5{
   @include gl-heading-scale-300;
   margin-bottom: $gl-mb-heading;
 }
 
-.gl-heading-scale-5\!{
+.gl-heading-5\!{
   @include gl-heading-scale-300;
   margin-bottom: $gl-mb-heading !important;
 }
 
-.gl-heading-scale-5-fixed{
+.gl-heading-5-fixed{
   @include gl-heading-scale-300-fixed;
   margin-bottom: $gl-mb-heading;
 }
 
-.gl-heading-scale-5-fixed\!{
+.gl-heading-5-fixed\!{
   @include gl-heading-scale-300-fixed;
   margin-bottom: $gl-mb-heading !important;
 }

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

@@ -37,22 +37,22 @@
 * https://design.gitlab.com/product-foundations/type-fundamentals
 */
 
-@mixin gl-heading-scale-6 {
+@mixin gl-heading-6 {
   @include gl-heading-scale-200;
   margin-bottom: $gl-mb-heading;
 }
 
-@mixin gl-heading-scale-6-fixed {
+@mixin gl-heading-6-fixed {
   @include gl-heading-scale-200-fixed;
   margin-bottom: $gl-mb-heading;
 }
 
-@mixin gl-heading-scale-5 {
+@mixin gl-heading-5 {
   @include gl-heading-scale-300;
   margin-bottom: $gl-mb-heading;
 }
 
-@mixin gl-heading-scale-5-fixed {
+@mixin gl-heading-5-fixed {
   @include gl-heading-scale-300-fixed;
   margin-bottom: $gl-mb-heading;
 }