@gitlab/ui 40.2.1 → 40.4.0

package/src/components/base/paginated_list/paginated_list.vue

@@ -150,7 +150,7 @@ export default {
 
     <ul class="list-group list-group-flush list-unstyled">
       <li v-for="listItem in paginatedList" :key="listItem[itemKey]" class="list-group-item">
-        <slot :listItem="listItem" :query="queryStr">{{ listItem.id }}</slot>
+        <slot :list-item="listItem" :query="queryStr">{{ listItem.id }}</slot>
       </li>
     </ul>
 

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

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import debounce from 'lodash/debounce';
-import Pagination from './pagination.vue';
 import { breakpoints } from '~/utils/breakpoints';
+import Pagination from './pagination.vue';
 
 jest.mock('lodash/debounce', () => jest.fn((fn) => fn));
 

package/src/components/base/pagination/pagination.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import debounce from 'lodash/debounce';
 import isFunction from 'lodash/isFunction';

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { uniqueId, findLast } from 'lodash';

package/src/components/base/popover/popover.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BPopover } from 'bootstrap-vue';
 import tooltipMixin from '../../mixins/tooltip_mixin';

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

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
+import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
 import GlDropdownItem from '../dropdown/dropdown_item.vue';
 import GlFormInput from '../form/form_input/form_input.vue';
 import SearchBoxByClick from './search_box_by_click.vue';
-import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
 
 const GlFormInputGroupStub = {
   template: `

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -237,7 +237,7 @@ export default {
             @click="selectHistoryItem(item)"
           >
             <!-- @slot Slot to customize history item in history dropdown. Used only with history-items prop -->
-            <slot name="history-item" :historyItem="item">{{ item }}</slot>
+            <slot name="history-item" :history-item="item">{{ item }}</slot>
           </gl-dropdown-item>
           <gl-dropdown-divider />
           <gl-dropdown-item ref="clearHistory" @click="emitClearHistory">{{
@@ -269,7 +269,7 @@ export default {
       data-testid="filtered-search-clear-button"
       @click="clearInput"
     />
-    <template #append class="gl-search-box-by-click-input-group-control">
+    <template #append>
       <gl-button
         v-bind="searchButtonAttributes"
         ref="searchButton"

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

@@ -1,7 +1,7 @@
 import { mount, shallowMount } from '@vue/test-utils';
+import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
 import LoadingIcon from '../loading_icon/loading_icon.vue';
 import SearchBoxByType from './search_box_by_type.vue';
-import ClearIcon from '~/components/shared_components/clear_icon_button/clear_icon_button.vue';
 
 const modelEvent = SearchBoxByType.model.event;
 const newValue = 'new value';

package/src/components/base/table/table.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTable } from 'bootstrap-vue';
 import { logWarning, isDev } from '../../../utils/utils';

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTab } from 'bootstrap-vue';
 import { isArray, isPlainObject } from 'lodash';

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

@@ -1,9 +1,9 @@
 import { mount } from '@vue/test-utils';
 import { range, mapValues } from 'lodash';
+import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 import GlTab from '../tab/tab.vue';
 import GlScrollableTabs from './scrollable_tabs.vue';
 import GlTabs from './tabs.vue';
-import { useMockResizeObserver } from '~helpers/mock_dom_observer';
 
 const { NAV_CLASS } = GlScrollableTabs;
 const TEST_WIDTH = 600;

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTabs } from 'bootstrap-vue';
 import { tabsButtonDefaults } from '../../../../utils/constants';

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

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

package/src/components/base/token/token.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { tokenVariants } from '../../../utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button.vue';

package/src/components/base/token_selector/token_container.spec.js

@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils';
 
+import { keyboard } from '~/utils/constants';
 import GlToken from '../token/token.vue';
 import GlTokenContainer from './token_container.vue';
-import { keyboard } from '~/utils/constants';
 
 describe('GlTokenContainer', () => {
   const tokens = [

package/src/components/base/tooltip/tooltip.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BTooltip } from 'bootstrap-vue';
 import { tooltipDelay } from '../../../utils/constants';

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

@@ -1,12 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
 
+import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import AreaChart from './area.vue';
 
-import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
-import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
-
 let mockChartInstance;
 
 jest.mock('echarts', () => ({

package/src/components/charts/area/area.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 /**
  * Area charts as of %12.10 support annotations.

package/src/components/charts/bar/bar.spec.js

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import Chart from '../chart/chart.vue';
-import BarChart from './bar.vue';
 import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
 import { createMockChartInstance } from '~helpers/chart_stubs';
+import Chart from '../chart/chart.vue';
+import BarChart from './bar.vue';
 
 let mockChartInstance;
 

package/src/components/charts/bar/bar.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import truncate from 'lodash/truncate';

package/src/components/charts/chart/chart.spec.js

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import * as echarts from 'echarts';
-import Chart from './chart.vue';
 import createTheme from '~/utils/charts/theme';
 import { useMockResizeObserver } from '~helpers/mock_dom_observer';
+import Chart from './chart.vue';
 
 const defaultHeight = 400;
 

package/src/components/charts/chart/chart.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
 import { defaultHeight, defaultWidth, validRenderers } from '../../../utils/charts/config';

package/src/components/charts/column/column.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import defaultChartOptions, {

package/src/components/charts/column/column_chart.spec.js

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 import {
   mockDefaultLineData,
   mockDefaultBarData,
@@ -6,7 +7,6 @@ import {
 } from '../../../utils/charts/mock_data';
 import Chart from '../chart/chart.vue';
 import ColumnChart from './column.vue';
-import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 
 let mockChartInstance;
 
@@ -28,7 +28,7 @@ describe('column chart component', () => {
   const findTooltip = () => wrapper.findComponent(ChartTooltipStub);
   const getChartOptions = () => findChart().props('options');
 
-  const factory = (props = defaultChartProps, slots) => {
+  const factory = (props = defaultChartProps, slots = {}) => {
     wrapper = shallowMount(ColumnChart, {
       propsData: { ...props },
       stubs: {

package/src/components/charts/gauge/gauge.spec.js

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
+import { createMockChartInstance } from '~helpers/chart_stubs';
 import { gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
 import Chart from '../chart/chart.vue';
 import GlGauge from './gauge.vue';
-import { createMockChartInstance } from '~helpers/chart_stubs';
 
 const placeholder = '--';
 

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { merge, isFinite, uniq, sortBy } from 'lodash';
 import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';

package/src/components/charts/heatmap/heatmap.spec.js

@@ -1,10 +1,10 @@
 import { shallowMount } from '@vue/test-utils';
 
+import { TOOLTIP_LEFT_OFFSET } from '~/utils/charts/constants';
+import { createMockChartInstance } from '~helpers/chart_stubs';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../tooltip/tooltip.vue';
 import HeatMapChart from './heatmap.vue';
-import { TOOLTIP_LEFT_OFFSET } from '~/utils/charts/constants';
-import { createMockChartInstance } from '~helpers/chart_stubs';
 
 let mockChartInstance;
 

package/src/components/charts/heatmap/heatmap.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import merge from 'lodash/merge';
 import { white, gray100 } from '../../../../scss_to_js/scss_variables';

package/src/components/charts/legend/legend.spec.js

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
+import { createMockChartInstance } from '~helpers/chart_stubs';
 import Chart from '../chart/chart.vue';
 import GlChartSeriesLabel from '../series_label/series_label.vue';
 import Legend from './legend.vue';
-import { createMockChartInstance } from '~helpers/chart_stubs';
 
 let mockChartInstance;
 

package/src/components/charts/legend/legend.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
 import { gray200 } from '../../../../scss_to_js/scss_variables'; // eslint-disable-line import/no-unresolved

package/src/components/charts/line/line.spec.js

@@ -1,13 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
 
+import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
 import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import LineChart from './line.vue';
 
-import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
-
-import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
-
 let mockChartInstance;
 
 jest.mock('echarts', () => ({

package/src/components/charts/line/line.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 /**
  * Line charts as of %12.10 support annotations.

package/src/components/charts/sparkline/sparkline.spec.js

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
-import Chart from '../chart/chart.vue';
-import SparklineChart from './sparkline.vue';
 import { waitForAnimationFrame } from '~/utils/test_utils';
 import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import Chart from '../chart/chart.vue';
+import SparklineChart from './sparkline.vue';
 
 let mockChartInstance;
 

package/src/components/charts/sparkline/sparkline.vue

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

package/src/components/charts/stacked_column/stacked_column.spec.js

@@ -1,5 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 
+import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
+import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
+import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 import {
   mockDefaultStackedLineData,
   mockDefaultStackedBarData,
@@ -9,10 +12,6 @@ import Chart from '../chart/chart.vue';
 import ChartLegend from '../legend/legend.vue';
 import * as themeUtils from '../../../utils/charts/theme';
 import StackedColumnChart from './stacked_column.vue';
-import TooltipDefaultFormat from '~/components/shared_components/charts/tooltip_default_format.vue';
-
-import { createMockChartInstance, ChartTooltipStub } from '~helpers/chart_stubs';
-import { LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE } from '~/utils/charts/constants';
 
 let mockChartInstance;
 

package/src/components/charts/tooltip/tooltip.spec.js

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
+import { createMockChartInstance } from '~helpers/chart_stubs';
 import GlPopover from '../../base/popover/popover.vue';
 import { popoverPlacements } from '../../../utils/constants';
 import ChartTooltip from './tooltip.vue';
-import { createMockChartInstance } from '~helpers/chart_stubs';
 
 let mockChartInstance;
 

package/src/components/charts/tooltip/tooltip.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import * as echarts from 'echarts';
 import { uid } from '../../../utils/utils';

package/src/components/regions/empty_state/empty_state.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import EmptyState from './empty_state.vue';
 import Button from '~/components/base/button/button.vue';
+import EmptyState from './empty_state.vue';
 
 describe('empty state component', () => {
   let component;

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

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import GlAnimatedNumber from './animated_number.vue';
 import { waitForAnimationFrame } from '~/utils/test_utils';
+import GlAnimatedNumber from './animated_number.vue';
 
 const duration = 2000;
 const ACTION_ANIMATED = 'animated';

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

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import GlIntersectionObserver from './intersection_observer.vue';
 import useMockIntersectionObserver from '~/utils/use_mock_intersection_observer';
+import GlIntersectionObserver from './intersection_observer.vue';
 
 const TEST_SLOT = '<p>Hello world! Lorem ipsum.</p>';
 const ENTRY_INTERSECTING = { ratio: 0.75, isIntersecting: true };

package/src/components/utilities/intersperse/intersperse.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import compose from 'lodash/fp/compose';
 import fill from 'lodash/fp/fill';

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

@@ -1760,6 +1760,24 @@
     inset 0 -#{$gl-border-size-1} 0 0 $gray-200 !important
 }
 
+.gl-inset-border-y-1-gray-100 {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-100,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-100
+}
+
+.gl-inset-border-y-1-gray-100\! {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-100,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-100 !important
+}
+
+.gl-inset-border-b-1-gray-100 {
+  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100
+}
+
+.gl-inset-border-b-1-gray-100\! {
+  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100 !important
+}
+
 .gl-inset-border-b-2-gray-100 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -36,6 +36,15 @@
     inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
 }
 
+@mixin gl-inset-border-y-1-gray-100 {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-100,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
+}
+
+@mixin gl-inset-border-b-1-gray-100 {
+  box-shadow: inset 0 -#{$gl-border-size-1} 0 0 $gray-100;
+}
+
 @mixin gl-inset-border-b-2-gray-100 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100;
 }

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 {