@gitlab/ui 56.1.1 → 56.1.2

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

@@ -1,5 +1,5 @@
-A listbox dropdown is a button that toggles a panel containing a list of options.
-Listbox supports single and multi-selection.
+A collapsible listbox is a button that toggles a panel containing a list of options.
+It supports single and multi-selection.
 
 **Single-select:** By default, selecting an option will update the toggle label with the choice.
 But the custom toggle text can be provided.
@@ -18,7 +18,7 @@ by default.
 Optionally, you can use `no-caret` to remove the caret and `category="tertiary"` to remove the border.
 
 ```html
-<gl-listbox
+<gl-collapsible-listbox
   icon="ellipsis_v"
   toggle-text="More options"
   text-sr-only
@@ -30,7 +30,7 @@ Optionally, you can use `no-caret` to remove the caret and `category="tertiary"`
 ### Opening the listbox
 
 Listbox will open on toggle button click (if it was previously closed).
-On open, `GlListbox` will emit the `shown` event.
+On open, `GlCollapsibleListbox` will emit the `shown` event.
 
 ### Closing the listbox
 
@@ -40,7 +40,7 @@ The listbox is closed by any of the following:
 - clicking anywhere outside the component
 - selecting an option in single-select mode
 
-After closing, `GlListbox` emits a `hidden` event.
+After closing, `GlCollapsibleListbox` emits a `hidden` event.
 
 ### Selecting items
 
@@ -51,7 +51,8 @@ On selection the listbox will emit the `select` event with the selected values.
 
 ### Resetting the selection
 
-`GlListbox` can render a reset button if the `headerText` and `resetButtonLabel` props are provided.
+`GlCollapsibleListbox` can render a reset button if the `headerText` and
+`resetButtonLabel` props are provided.
 When clicking on the reset button, a `reset` event is emitted. It is the consumer's responsibility
 to listen to that event and to update the model as needed.
 
@@ -85,7 +86,7 @@ template. If you want to render a custom template for items, use the
 `list-item` scoped slot:
 
 ```html
-<gl-listbox :items="items">
+<gl-collapsible-listbox :items="items">
   <template #list-item="{ item }">
     <span class="gl-display-flex gl-align-items-center">
       <gl-avatar :size="32" class-="gl-mr-3"/>
@@ -95,7 +96,7 @@ template. If you want to render a custom template for items, use the
       </span>
     </span>
   </template>
-</gl-listbox>
+</gl-collapsible-listbox>
 ```
 
 #### Groups
@@ -112,11 +113,11 @@ or they are all groups.
 To render custom group labels, use the `group-label` scoped slot:
 
 ```html
-<gl-listbox :items="groups">
+<gl-collapsible-listbox :items="groups">
   <template #group-label="{ group }">
     {{ group.text }} <gl-badge size="sm">{{ group.options.length }}</gl-badge>
   </template>
-</gl-listbox>
+</gl-collapsible-listbox>
 ```
 
 #### Search
@@ -134,9 +135,9 @@ with a number of found search results text.
 Screen reader will announce this text when the list is updated.
 
 ```html
-<gl-listbox :items="items" searchable>
+<gl-collapsible-listbox :items="items" searchable>
   <template #search-summary-sr-only>
     5 users found
   </template>
-</gl-listbox>
+</gl-collapsible-listbox>
 ```

package/src/components/base/new_dropdowns/listbox/listbox.spec.js

@@ -12,16 +12,16 @@ import {
   ENTER,
 } from '../constants';
 import GlIntersectionObserver from '../../../utilities/intersection_observer/intersection_observer.vue';
-import GlListbox, { ITEM_SELECTOR } from './listbox.vue';
+import GlCollapsibleListbox, { ITEM_SELECTOR } from './listbox.vue';
 import GlListboxItem from './listbox_item.vue';
 import GlListboxGroup from './listbox_group.vue';
 import { mockOptions, mockGroups } from './mock_data';
 
-describe('GlListbox', () => {
+describe('GlCollapsibleListbox', () => {
   let wrapper;
 
   const buildWrapper = (propsData, slots = {}) => {
-    wrapper = mount(GlListbox, {
+    wrapper = mount(GlCollapsibleListbox, {
       propsData,
       slots,
       attachTo: document.body,

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -6,7 +6,7 @@ import {
 } from '../../../../utils/constants';
 import {
   GlIcon,
-  GlListbox,
+  GlCollapsibleListbox,
   GlSearchBoxByType,
   GlButtonGroup,
   GlButton,
@@ -27,7 +27,7 @@ import readme from './listbox.md';
 import { mockOptions, mockGroups, mockUsers } from './mock_data';
 import { flattenedOptions } from './utils';
 
-const defaultValue = (prop) => GlListbox.props[prop].default;
+const defaultValue = (prop) => GlCollapsibleListbox.props[prop].default;
 
 const generateProps = ({
   items = mockOptions,
@@ -124,20 +124,20 @@ const template = (content, { label = '', bindingOverrides = {} } = {}) => `
   <div>
     ${label}
     ${label && '<br/>'}
-    <gl-listbox
+    <gl-collapsible-listbox
       ref="listbox"
       v-model="selected"
       ${makeBindings(bindingOverrides)}
     >
       ${content}
-    </gl-listbox>
+    </gl-collapsible-listbox>
   </div>
 `;
 
 export const Default = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: {
-    GlListbox,
+    GlCollapsibleListbox,
   },
   data() {
     return {
@@ -159,7 +159,7 @@ Default.decorators = [makeContainer({ height: '370px' })];
 export const HeaderAndFooter = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: {
-    GlListbox,
+    GlCollapsibleListbox,
     GlSearchBoxByType,
     GlButtonGroup,
     GlButton,
@@ -220,7 +220,7 @@ export const CustomListItem = (args, { argTypes }) => ({
     };
   },
   components: {
-    GlListbox,
+    GlCollapsibleListbox,
     GlIcon,
     GlAvatar,
   },
@@ -273,7 +273,7 @@ CustomListItem.decorators = [makeContainer({ height: '200px' })];
 export const CustomToggle = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: {
-    GlListbox,
+    GlCollapsibleListbox,
     GlAvatar,
   },
   data() {
@@ -319,7 +319,7 @@ const makeGroupedExample = (changes) => {
     props: Object.keys(argTypes),
     components: {
       GlBadge,
-      GlListbox,
+      GlCollapsibleListbox,
     },
     data() {
       return {
@@ -401,7 +401,7 @@ export const CustomGroupsAndItems = makeGroupedExample({
 
 export default {
   title: 'base/new-dropdowns/listbox',
-  component: GlListbox,
+  component: GlCollapsibleListbox,
   parameters: {
     docs: {
       description: {
@@ -552,7 +552,7 @@ export default {
 export const Searchable = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: {
-    GlListbox,
+    GlCollapsibleListbox,
   },
   data() {
     return {
@@ -625,7 +625,7 @@ Searchable.decorators = [makeContainer({ height: '370px' })];
 export const SearchableGroups = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: {
-    GlListbox,
+    GlCollapsibleListbox,
   },
   data() {
     return {
@@ -716,7 +716,7 @@ export const InfiniteScroll = (
 ) => ({
   props: Object.keys(argTypes),
   components: {
-    GlListbox,
+    GlCollapsibleListbox,
   },
   data() {
     return {

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

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

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

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

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

@@ -1,4 +1,5 @@
-import { isString, isNumber } from 'lodash';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
 
 const isOption = (item) => Boolean(item) && (isString(item.value) || isNumber(item.value));
 

package/src/components/base/path/__snapshots__/path.spec.js.snap

@@ -4,7 +4,7 @@ exports[`Path matches the snapshot 1`] = `
 <div
   class="gl-path-nav"
   data-testid="gl-path-nav"
-  style="--path-bg-color: white;"
+  style="--path-bg-color: rgba(0,0,0,0);"
 >
   <span
     class="gl-path-fade gl-path-fade-left"
@@ -197,7 +197,7 @@ exports[`Path renders the list of items with icons matches the snapshot 1`] = `
 <div
   class="gl-path-nav"
   data-testid="gl-path-nav"
-  style="--path-bg-color: white;"
+  style="--path-bg-color: rgba(0,0,0,0);"
 >
   <span
     class="gl-path-fade gl-path-fade-left"
@@ -396,7 +396,7 @@ exports[`Path renders the list of items with metrics matches the snapshot 1`] =
 <div
   class="gl-path-nav"
   data-testid="gl-path-nav"
-  style="--path-bg-color: white;"
+  style="--path-bg-color: rgba(0,0,0,0);"
 >
   <span
     class="gl-path-fade gl-path-fade-left"

package/src/components/base/path/path.scss

@@ -13,7 +13,7 @@ $path-chevron-right-margin: px-to-rem(14px);
 
 // Mixins
 @mixin gl-path-active-item-color($color) {
-  @include gl-text-white;
+  @include gl-text-contrast-light;
   background-color: $color;
 
   &::after {
@@ -94,13 +94,13 @@ $path-chevron-right-margin: px-to-rem(14px);
     }
 
     &[disabled] {
-      @include gl-text-gray-400;
+      color: $gl-text-color-disabled;
       @include gl-cursor-not-allowed;
     }
 
     &:not([disabled]):hover {
       @include gl-path-active-item-color($gray-100);
-      @include gl-text-gray-900;
+      color: $gl-text-color;
     }
 
     &:active,

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

@@ -5,7 +5,7 @@ import GlPath from './path.vue';
 
 const SELECTED_CLASS_INDIGO = 'gl-path-active-item-indigo';
 const SELECTED_CLASS_GREEN = 'gl-path-active-item-green';
-const BACKGROUND_COLOR_WHITE = 'white';
+const BACKGROUND_COLOR_DEFAULT = 'rgba(0,0,0,0)';
 const BACKGROUND_COLOR_LIGHT_GRAY = '#f0f0f0';
 
 describe('Path', () => {
@@ -70,7 +70,7 @@ describe('Path', () => {
   describe('background color selection', () => {
     describe('with no background color specified', () => {
       it('displays the default background color', () => {
-        expect(pathNav().style.getPropertyValue('--path-bg-color')).toBe(BACKGROUND_COLOR_WHITE);
+        expect(pathNav().style.getPropertyValue('--path-bg-color')).toBe(BACKGROUND_COLOR_DEFAULT);
       });
     });
 

package/src/components/base/path/path.vue

@@ -1,7 +1,8 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { uniqueId, findLast } from 'lodash';
+import uniqueId from 'lodash/uniqueId';
+import findLast from 'lodash/findLast';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { glThemes } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
@@ -49,7 +50,7 @@ export default {
     backgroundColor: {
       type: String,
       required: false,
-      default: 'white',
+      default: 'rgba(0,0,0,0)',
     },
   },
   data() {

package/src/components/base/skeleton_loader/skeleton_loader.vue

@@ -1,5 +1,5 @@
 <script>
-import { range } from 'lodash';
+import range from 'lodash/range';
 import { uid } from '../../../utils/utils';
 
 const DEFAULT_LINE_MAX_WIDTH = 235;

package/src/components/base/tabs/tab/tab.vue

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTab } from 'bootstrap-vue';
-import { isArray, isPlainObject } from 'lodash';
+import isPlainObject from 'lodash/isPlainObject';
 
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 
@@ -29,7 +29,7 @@ export default {
     linkClass() {
       const { titleLinkClass } = this;
 
-      if (isArray(titleLinkClass)) {
+      if (Array.isArray(titleLinkClass)) {
         return [...titleLinkClass, DEFAULT_TAB_TITLE_LINK_CLASS];
       }
       if (isPlainObject(titleLinkClass)) {

package/src/components/base/tabs/tabs/scrollable_tabs.spec.js

@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
-import { range, mapValues } from 'lodash';
+import range from 'lodash/range';
+import mapValues from 'lodash/mapValues';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 import GlTab from '../tab/tab.vue';
 import GlScrollableTabs from './scrollable_tabs.vue';

package/src/components/base/tabs/tabs/scrollable_tabs.vue

@@ -1,5 +1,5 @@
 <script>
-import { debounce, isArray } from 'lodash';
+import debounce from 'lodash/debounce';
 import { GlResizeObserverDirective } from '../../../../directives/resize_observer/resize_observer';
 import GlIcon from '../../icon/icon.vue';
 import GlTabs from './tabs.vue';
@@ -31,7 +31,7 @@ export default {
       if (!attrsNavClass) {
         return [NAV_CLASS];
       }
-      if (isArray(attrsNavClass)) {
+      if (Array.isArray(attrsNavClass)) {
         return [NAV_CLASS, ...attrsNavClass];
       }
 

package/src/components/base/tabs/tabs/tabs.stories.js

@@ -1,4 +1,4 @@
-import { range } from 'lodash';
+import range from 'lodash/range';
 import { GlTabs, GlTab, GlScrollableTabs, GlBadge } from '../../../../index';
 import { badgeVariantOptions } from '../../../../utils/constants';
 import readme from './tabs.md';

package/src/components/base/toast/toast.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-default-export */
 import { ToastPlugin } from 'bootstrap-vue';
-import { isFunction } from 'lodash';
+import isFunction from 'lodash/isFunction';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 
 const DEFAULT_OPTIONS = {

package/src/components/base/toggle/toggle.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 
 import { toggleLabelPosition } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';

package/src/components/base/token_selector/token_selector.vue

@@ -1,5 +1,5 @@
 <script>
-import { uniqueId } from 'lodash';
+import uniqueId from 'lodash/uniqueId';
 import { tokensValidator } from './helpers';
 import GlTokenContainer from './token_container.vue';
 import GlTokenSelectorDropdown from './token_selector_dropdown.vue';

package/src/components/charts/area/area.stories.js

@@ -1,4 +1,4 @@
-import { times } from 'lodash';
+import times from 'lodash/times';
 import { GlAreaChart } from '../../../charts';
 import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';

package/src/components/charts/gauge/gauge.vue

@@ -1,6 +1,8 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { merge, isFinite, uniq, sortBy } from 'lodash';
+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.vue';
 
@@ -19,7 +21,7 @@ const gaugeChartSeries = ({ value, text, min, max, splitNumber, axisColor }) =>
     detail: {
       show: true,
       formatter: () => {
-        const currentValue = isFinite(value) ? value : null;
+        const currentValue = Number.isFinite(value) ? value : null;
 
         return text || (currentValue ?? '--');
       },
@@ -31,7 +33,7 @@ const gaugeChartSeries = ({ value, text, min, max, splitNumber, axisColor }) =>
     axisLabel: {
       show: true,
       fontSize: AXIS_LABEL_FONT_SIZE_PX,
-      formatter: (theValue) => (isFinite(theValue) ? theValue : '--'),
+      formatter: (theValue) => (Number.isFinite(theValue) ? theValue : '--'),
       color: `${gaugeNeutralHues[1]}`,
     },
     axisLine: {
@@ -72,7 +74,7 @@ export default {
       required: false,
       default: () => [],
       validator: (value) => {
-        return value?.length ? value.every((item) => isFinite(item)) : true;
+        return value?.length ? value.every((item) => Number.isFinite(item)) : true;
       },
     },
     text: {
@@ -117,7 +119,7 @@ export default {
 
       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

package/src/components/utilities/intersection_observer/intersection_observer.vue

@@ -1,5 +1,5 @@
 <script>
-import { memoize } from 'lodash';
+import memoize from 'lodash/memoize';
 
 const getObserver = memoize(
   (options) =>

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

@@ -1,7 +1,8 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 /* eslint-disable no-continue */
-import { has, isString } from 'lodash';
+import has from 'lodash/has';
+import isString from 'lodash/isString';
 
 const PREFIX = '%{';
 const SUFFIX = '}';

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { OutsideDirective } from './outside';
 
 describe('outside directive', () => {

package/src/scss/variables.scss

@@ -315,6 +315,7 @@ $t-gray-a-24: rgba($gray-950, 0.24);
 // Text
 $gl-text-color: $gray-900 !default;
 $gl-text-color-secondary: $gray-500 !default;
+$gl-text-color-disabled: $gray-400 !default;
 
 $gl-font-weight-light: 300;
 $gl-font-weight-normal: 400;

package/src/utils/charts/config.js

@@ -1,5 +1,4 @@
 import castArray from 'lodash/castArray';
-import isArray from 'lodash/isArray';
 import merge from 'lodash/merge';
 import { blue500 } from '../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved
 import { GlBreakpointInstance } from '../breakpoints';
@@ -155,7 +154,7 @@ export const mergeAnnotationAxisToOptions = (options, hasAnnotations = false) =>
 
 export 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/src/utils/use_mock_intersection_observer.js

@@ -1,6 +1,6 @@
 /* global jest, beforeEach, afterEach */
 /* eslint-disable class-methods-use-this, max-classes-per-file, camelcase */
-import { isMatch, isArray } from 'lodash';
+import isMatch from 'lodash/isMatch';
 
 /**
  * This class gives us a JSDom friendly DOM observer which we can manually trigger in tests
@@ -49,7 +49,7 @@ class MockObserver {
     if (!nodeParam) {
       return this.$_observers.map(([node]) => node);
     }
-    if (!isArray(nodeParam)) {
+    if (!Array.isArray(nodeParam)) {
       return [nodeParam];
     }