@gitlab/ui 56.1.1 → 56.1.2

package/dist/components/base/tabs/tabs/scrollable_tabs.js

@@ -1,5 +1,4 @@
-import _isArray from 'lodash/isArray';
-import _debounce from 'lodash/debounce';
+import debounce from 'lodash/debounce';
 import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
 import GlIcon from '../../icon/icon';
 import GlTabs from './tabs';
@@ -30,7 +29,7 @@ var script = {
       if (!attrsNavClass) {
         return [NAV_CLASS];
       }
-      if (_isArray(attrsNavClass)) {
+      if (Array.isArray(attrsNavClass)) {
         return [NAV_CLASS, ...attrsNavClass];
       }
       return [NAV_CLASS, attrsNavClass];
@@ -53,7 +52,7 @@ var script = {
     this.$nextTick(() => {
       this.navScrollWidth = this.getScrollWidth();
     });
-    this.handleNavScroll = _debounce(e => {
+    this.handleNavScroll = debounce(e => {
       this.scrollLeft = e.target.scrollLeft;
     }, 100);
     this.getNavContainer().addEventListener('scroll', this.handleNavScroll);

package/dist/components/base/toast/toast.js

@@ -1,7 +1,8 @@
-import _isFunction from 'lodash/isFunction';
 import { ToastPlugin } from 'bootstrap-vue/esm/index.js';
+import isFunction from 'lodash/isFunction';
 import CloseButton from '../../shared_components/close_button/close_button';
 
+/* eslint-disable import/no-default-export */
 const DEFAULT_OPTIONS = {
   autoHideDelay: 5000,
   toastClass: 'gl-toast',
@@ -39,7 +40,7 @@ function showToast(message) {
     id,
     hide
   };
-  if (_isFunction(options.onComplete)) {
+  if (isFunction(options.onComplete)) {
     const toastHiddenCallback = e => {
       if (e.componentId === id) {
         this.$root.$off('bv::toast:hidden', toastHiddenCallback);

package/dist/components/base/toggle/toggle.js

@@ -1,9 +1,10 @@
-import _uniqueId from 'lodash/uniqueId';
+import uniqueId from 'lodash/uniqueId';
 import { toggleLabelPosition } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 let uuid = 0;
 var script = {
   components: {
@@ -82,7 +83,7 @@ var script = {
   },
   data() {
     return {
-      labelId: _uniqueId('toggle-label-')
+      labelId: uniqueId('toggle-label-')
     };
   },
   computed: {

package/dist/components/base/token_selector/token_selector.js

@@ -1,4 +1,4 @@
-import _uniqueId from 'lodash/uniqueId';
+import uniqueId from 'lodash/uniqueId';
 import { tokensValidator } from './helpers';
 import GlTokenContainer from './token_container';
 import GlTokenSelectorDropdown from './token_selector_dropdown';
@@ -6,7 +6,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlTokenSelector',
-  componentId: _uniqueId('token-selector'),
+  componentId: uniqueId('token-selector'),
   components: {
     GlTokenContainer,
     GlTokenSelectorDropdown
@@ -293,7 +293,7 @@ var script = {
     addToken() {
       let dropdownItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       const token = dropdownItem !== null ? dropdownItem : {
-        id: _uniqueId('user-defined-token'),
+        id: uniqueId('user-defined-token'),
         name: this.inputText
       };
 

package/dist/components/charts/gauge/gauge.js

@@ -1,11 +1,11 @@
-import _sortBy from 'lodash/sortBy';
-import _uniq from 'lodash/uniq';
-import _isFinite from 'lodash/isFinite';
-import _merge from 'lodash/merge';
+import merge from 'lodash/merge';
+import uniq from 'lodash/uniq';
+import sortBy from 'lodash/sortBy';
 import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
 import Chart from '../chart/chart';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 const AXIS_LABEL_FONT_SIZE_PX = 14;
 const ARC_RADIUS = '80%';
 const DETAIL_FONT_SIZE_PX = 30;
@@ -27,7 +27,7 @@ const gaugeChartSeries = _ref => {
     detail: {
       show: true,
       formatter: () => {
-        const currentValue = _isFinite(value) ? value : null;
+        const currentValue = Number.isFinite(value) ? value : null;
         return text || (currentValue !== null && currentValue !== void 0 ? currentValue : '--');
       },
       color: `${gaugeNeutralHues[0]}`,
@@ -38,7 +38,7 @@ const gaugeChartSeries = _ref => {
     axisLabel: {
       show: true,
       fontSize: AXIS_LABEL_FONT_SIZE_PX,
-      formatter: theValue => _isFinite(theValue) ? theValue : '--',
+      formatter: theValue => Number.isFinite(theValue) ? theValue : '--',
       color: `${gaugeNeutralHues[1]}`
     },
     axisLine: {
@@ -83,7 +83,7 @@ var script = {
       required: false,
       default: () => [],
       validator: value => {
-        return value !== null && value !== void 0 && value.length ? value.every(item => _isFinite(item)) : true;
+        return value !== null && value !== void 0 && value.length ? value.every(item => Number.isFinite(item)) : true;
       }
     },
     text: {
@@ -104,7 +104,7 @@ var script = {
   },
   computed: {
     options() {
-      const mergedOptions = _merge({}, {
+      const mergedOptions = merge({}, {
         series: gaugeChartSeries({
           value: this.value,
           text: this.text,
@@ -123,15 +123,15 @@ var script = {
         max
       } = this;
       if (!(thresholds !== null && thresholds !== void 0 && thresholds.length)) return [];
-      const uniqueThresholds = _uniq(thresholds);
+      const uniqueThresholds = uniq(thresholds);
       const filteredThresholds = uniqueThresholds.filter(threshold => {
-        return _isFinite(threshold) && threshold > min && threshold < max;
+        return Number.isFinite(threshold) && threshold > min && threshold < max;
       });
       /**
        * Only the first two thresholds will be used
        */
       const reducedThresholdsList = filteredThresholds.length > 2 ? [filteredThresholds[0], filteredThresholds[1]] : [...filteredThresholds];
-      const sortedThresholds = _sortBy(reducedThresholdsList);
+      const sortedThresholds = sortBy(reducedThresholdsList);
       return sortedThresholds;
     },
     valueIsInLastThreshold() {

package/dist/components/utilities/intersection_observer/intersection_observer.js

@@ -1,7 +1,7 @@
-import _memoize from 'lodash/memoize';
+import memoize from 'lodash/memoize';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const getObserver = _memoize(options => new IntersectionObserver(entries => {
+const getObserver = memoize(options => new IntersectionObserver(entries => {
   entries.forEach(entry => {
     entry.target.$_gl_intersectionHandler(entry);
   });

package/dist/components/utilities/sprintf/sprintf.js

@@ -1,7 +1,8 @@
-import _isString from 'lodash/isString';
-import _has from 'lodash/has';
+import has from 'lodash/has';
+import isString from 'lodash/isString';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+//
 const PREFIX = '%{';
 const SUFFIX = '}';
 const START_SUFFIX = 'Start';
@@ -20,7 +21,7 @@ function groupPlaceholdersByStartTag() {
 }
 function getPlaceholderDefinition(chunk, placeholdersByStartTag) {
   const tagName = chunk.slice(PREFIX.length, -SUFFIX.length);
-  if (_has(placeholdersByStartTag, tagName)) {
+  if (has(placeholdersByStartTag, tagName)) {
     // Use provided custom placeholder definition
     return {
       ...placeholdersByStartTag[tagName],
@@ -61,7 +62,7 @@ var script = {
       type: Object,
       required: false,
       default: undefined,
-      validator: value => Object.values(value).every(tagPair => Array.isArray(tagPair) && tagPair.length === 2 && tagPair.every(_isString))
+      validator: value => Object.values(value).every(tagPair => Array.isArray(tagPair) && tagPair.length === 2 && tagPair.every(isString))
     }
   },
   /**
@@ -109,7 +110,7 @@ var script = {
           // between them and skip past the end placeholder
           const content = chunks.slice(i, indexOfEnd);
           i = indexOfEnd + 1;
-          if (!_has(slots, slotName)) {
+          if (!has(slots, slotName)) {
             // Slot hasn't been provided; return placeholders and content as-is
             vnodes.push(chunk, ...content, chunks[indexOfEnd]);
             continue;
@@ -124,7 +125,7 @@ var script = {
       }
 
       // By process of elimination, chunk must be a plain placeholder
-      vnodes.push(_has(slots, tagName) ? slots[tagName]() : chunk);
+      vnodes.push(has(slots, tagName) ? slots[tagName]() : chunk);
       continue;
     }
     return vnodes;

package/dist/utils/charts/config.js

@@ -1,5 +1,4 @@
 import castArray from 'lodash/castArray';
-import isArray from 'lodash/isArray';
 import merge from 'lodash/merge';
 import { GlBreakpointInstance } from '../breakpoints';
 import { columnOptions } from '../constants';
@@ -155,7 +154,7 @@ const mergeAnnotationAxisToOptions = function (options) {
 };
 const dataZoomAdjustments = dataZoom => {
   // handle cases where dataZoom is array and object.
-  const useSlider = dataZoom && isArray(dataZoom) ? dataZoom.length : Boolean(dataZoom);
+  const useSlider = dataZoom && Array.isArray(dataZoom) ? dataZoom.length : Boolean(dataZoom);
   return useSlider ? getDataZoomConfig({
     filterMode: 'weakFilter'
   }) : [];

package/dist/utils/use_mock_intersection_observer.js

@@ -1,5 +1,6 @@
-import _isArray from 'lodash/isArray';
-import _isMatch from 'lodash/isMatch';
+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
@@ -46,7 +47,7 @@ class MockObserver {
     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);
+      return node === obvNode && isMatch(options, obvOptions);
     });
   }
   $_getNodesFromParam(nodeParam) {
@@ -56,7 +57,7 @@ class MockObserver {
         return node;
       });
     }
-    if (!_isArray(nodeParam)) {
+    if (!Array.isArray(nodeParam)) {
       return [nodeParam];
     }
     return nodeParam;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "56.1.1",
+  "version": "56.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -77,17 +77,18 @@
     "vue": "^2.6.10"
   },
   "resolutions": {
+    "@storybook/vue/webpack": "^5.9.0",
     "chokidar": "^3.5.2",
     "sane": "^5.0.1"
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@gitlab/eslint-plugin": "18.1.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.20.0",
+    "@gitlab/svgs": "3.21.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -97,6 +98,8 @@
     "@storybook/addon-storyshots": "6.5.16",
     "@storybook/addon-storyshots-puppeteer": "6.5.16",
     "@storybook/addon-viewport": "6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/theming": "6.5.16",
     "@storybook/vue": "6.5.16",
     "@vue/compat": "^3.2.40",
@@ -108,7 +111,6 @@
     "autoprefixer": "^9.7.6",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
-    "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.5.3",
@@ -123,9 +125,9 @@
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.4.2",
-    "jest-circus": "29.4.2",
-    "jest-environment-jsdom": "29.4.2",
+    "jest": "^29.4.3",
+    "jest-circus": "29.4.3",
+    "jest-environment-jsdom": "29.4.3",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "npm-run-all": "^4.1.5",
@@ -155,7 +157,8 @@
     "vue": "2.7.14",
     "vue-loader": "^15.8.3",
     "vue-template-compiler": "2.7.14",
-    "vue-test-utils-compat": "^0.0.10"
+    "vue-test-utils-compat": "^0.0.10",
+    "webpack": "^5.9.0"
   },
   "release": {
     "branches": [

package/scss_to_js/scss_variables.js

@@ -247,6 +247,7 @@ export const tGrayA16 = 'rgba(31, 30, 36, 0.16)'
 export const tGrayA24 = 'rgba(31, 30, 36, 0.24)'
 export const glTextColor = '#333238'
 export const glTextColorSecondary = '#737278'
+export const glTextColorDisabled = '#89888d'
 export const glFontWeightLight = '300'
 export const glFontWeightNormal = '400'
 export const glFontWeightBold = '600'

package/scss_to_js/scss_variables.json

@@ -1272,6 +1272,11 @@
       "value": "$gray-500",
       "compiledValue": "#737278"
     },
+    {
+      "name": "$gl-text-color-disabled",
+      "value": "$gray-400",
+      "compiledValue": "#89888d"
+    },
     {
       "name": "$gl-font-weight-light",
       "value": "300",

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

@@ -1,5 +1,5 @@
 <script>
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 
 export default {
   name: 'GlAccordion',

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

@@ -1,6 +1,6 @@
 <script>
 import { BCollapse } from 'bootstrap-vue';
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button.vue';
 

package/src/components/base/avatar/avatar.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { isNumber } from 'lodash';
+import isNumber from 'lodash/isNumber';
 import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
 import { getAvatarChar } from '../../../utils/string_utils';
 

package/src/components/base/avatars_inline/avatars_inline.vue

@@ -1,5 +1,6 @@
 <script>
-import { get, truncate } from 'lodash';
+import truncate from 'lodash/truncate';
+import get from 'lodash/get';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
 import GlAvatar from '../avatar/avatar.vue';
 import GlTooltip from '../tooltip/tooltip.vue';

package/src/components/base/datepicker/datepicker.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { isString } from 'lodash';
+import isString from 'lodash/isString';
 import Pikaday from 'pikaday';
 import { defaultDateFormat, datepickerSizeOptionsMap } from '../../../utils/constants';
 import { areDatesEqual } from '../../../utils/datetime_utility';

package/src/components/base/dropdown/dropdown.md

@@ -5,9 +5,8 @@ collapsed behind a button.
 > more suited to the various use cases for dropdowns. Consider using a more
 > appropriate component instead:
 >
-> - For single or multiselect options, use `GlListbox`.
-> - For other use cases (e.g., displaying a list of actions like "Edit user",
->   "Delete user"), continue to use `GlDropdown` for now.
+> - For single or multiselect options, use `GlCollapsibleListbox`.
+> - For displaying a list of actions like "Edit user", "Delete user", use `GlDisclosureDropdown`.
 >
 > See [this epic](https://gitlab.com/groups/gitlab-org/-/epics/1059) for the
 > most up-to-date information about what to use and when.

package/src/components/base/dropdown/dropdown.vue

@@ -3,7 +3,7 @@
 import Vue from 'vue';
 import { BDropdown } from 'bootstrap-vue';
 import { isVisible, selectAll } from 'bootstrap-vue/src/utils/dom';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,

package/src/components/base/filtered_search/filtered_search.spec.js

@@ -1,5 +1,5 @@
 import Vue, { nextTick } from 'vue';
-import { omit } from 'lodash';
+import omit from 'lodash/omit';
 import { shallowMount, mount } from '@vue/test-utils';
 import GlFilteredSearch from './filtered_search.vue';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';

package/src/components/base/filtered_search/filtered_search.vue

@@ -1,5 +1,6 @@
 <script>
-import { cloneDeep, isEqual } from 'lodash';
+import isEqual from 'lodash/isEqual';
+import cloneDeep from 'lodash/cloneDeep';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -1,5 +1,5 @@
 <script>
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 import { COMMA } from '../../../utils/constants';
 import GlToken from '../token/token.vue';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -1,5 +1,5 @@
 <script>
-import { last } from 'lodash';
+import last from 'lodash/last';
 import { Portal } from 'portal-vue';
 import { COMMA, LEFT_MOUSE_BUTTON } from '../../../utils/constants';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';

package/src/components/base/filtered_search/filtered_search_utils.js

@@ -1,4 +1,6 @@
-import { first, last, isString } from 'lodash';
+import first from 'lodash/first';
+import last from 'lodash/last';
+import isString from 'lodash/isString';
 
 export const TERM_TOKEN_TYPE = 'filtered-search-term';
 

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

@@ -1,6 +1,6 @@
 <script>
 import { BFormCheckbox } from 'bootstrap-vue';
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 
 export default {
   name: 'GlFormCheckbox',

package/src/components/base/form/form_combobox/form_combobox.spec.js

@@ -1,5 +1,5 @@
 import { nextTick } from 'vue';
-import { cloneDeep } from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
 import { mount } from '@vue/test-utils';
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
 import GlFormInput from '../form_input/form_input.vue';

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

@@ -1,5 +1,5 @@
 <script>
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 
 import GlDropdownItem from '../../dropdown/dropdown_item.vue';
 import GlDropdownDivider from '../../dropdown/dropdown_divider.vue';

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

@@ -1,5 +1,5 @@
 <script>
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 import GlFormInput from '../form_input/form_input.vue';
 
 export default {

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

@@ -1,6 +1,7 @@
 <script>
 import { BFormGroup } from 'bootstrap-vue';
-import { isString, isArray, isPlainObject } from 'lodash';
+import isString from 'lodash/isString';
+import isPlainObject from 'lodash/isPlainObject';
 
 export default {
   components: {
@@ -37,7 +38,7 @@ export default {
       if (isString(labelClass)) {
         return `${labelClass} ${defaultClass}`;
       }
-      if (isArray(labelClass)) {
+      if (Array.isArray(labelClass)) {
         return [...labelClass, defaultClass];
       }
       if (isPlainObject(labelClass)) {

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

@@ -1,5 +1,5 @@
 <script>
-import { isObject } from 'lodash';
+import isObject from 'lodash/isObject';
 import { BFormInput } from 'bootstrap-vue';
 
 import { formInputSizes } from '../../../../utils/constants';

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

@@ -1,6 +1,6 @@
 <script>
 import { BFormSelect } from 'bootstrap-vue';
-import { isObject } from 'lodash';
+import isObject from 'lodash/isObject';
 import { formInputSizes } from '../../../../utils/constants';
 
 export default {

package/src/components/base/modal/modal.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { BModal } from 'bootstrap-vue';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { modalButtonDefaults } from '~/utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import Button from '../button/button.vue';

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

@@ -1,5 +1,5 @@
 <script>
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 import { createPopper } from '@popperjs/core';
 import {
   buttonCategoryOptions,

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { clamp, uniqueId } from 'lodash';
+import clamp from 'lodash/clamp';
+import uniqueId from 'lodash/uniqueId';
 import { stopEvent, filterVisible } from '../../../../utils/utils';
 import {
   GL_DROPDOWN_SHOWN,

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -1,5 +1,5 @@
 <script>
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
 import { isGroup } from './utils';
 import { DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';

package/src/components/base/new_dropdowns/disclosure/utils.js

@@ -1,4 +1,4 @@
-import { isFunction } from 'lodash';
+import isFunction from 'lodash/isFunction';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 
 const itemValidator = (item) => item?.text?.length > 0 && !Array.isArray(item?.items);