@gitlab/ui 40.2.0 → 40.3.0

package/dist/utils/test_utils.js

@@ -7,7 +7,9 @@ function setStoryTimeout(fn, 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 waitForAnimationFrame = () => new Promise(resolve => {
+  requestAnimationFrame(resolve);
+});
 const getResetAnimationsCSS = () => `
   *, *::after, *::before {
     -webkit-transition: none !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.2.0",
+  "version": "40.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -57,7 +57,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "bootstrap-vue": "2.20.1",
-    "dompurify": "^2.3.6",
+    "dompurify": "^2.3.7",
     "echarts": "^5.2.1",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -81,9 +81,9 @@
     "@arkweid/lefthook": "0.7.7",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "12.0.1",
+    "@gitlab/eslint-plugin": "12.2.0",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.13.0",
+    "@gitlab/svgs": "2.14.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/alert/alert.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import {
   alertVariantOptions,

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

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

package/src/components/base/badge/badge.vue

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

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

@@ -1,8 +1,8 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { createMockDirective } from '~helpers/vue_mock_directive';
 import Breadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
-import { createMockDirective } from '~helpers/vue_mock_directive';
 
 describe('Breadcrumb component', () => {
   let wrapper;

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BBreadcrumb } from 'bootstrap-vue';
 import GlIcon from '../icon/icon.vue';

package/src/components/base/button/button.vue

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

package/src/components/base/card/card.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
   props: {

package/src/components/base/carousel/carousel.vue

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

package/src/components/base/collapse/collapse.vue

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

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

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

package/src/components/base/drawer/drawer.vue

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

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BDropdown } from 'bootstrap-vue';
 import { isVisible, selectAll } from 'bootstrap-vue/src/utils/dom';

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BForm } from 'bootstrap-vue/src/components/form';
 

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

@@ -25,7 +25,10 @@
 
   .form-control {
     + .invalid-feedback,
-    + .text-gl-muted {
+    + .text-gl-muted,
+    &.is-valid + .invalid-feedback + .text-gl-muted {
+      // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2806
+      // for the reasoning behind the "valid+invalid" selector above
       @include gl-mt-3;
     }
   }

package/src/components/base/form/form_group/form_group.stories.js

@@ -81,7 +81,7 @@ export const WithValidations = (_args, { argTypes }) => ({
     invalidFeedback() {
       let feedbackText = 'This field is required.';
 
-      if (this.name.length > 4) {
+      if (this.name.length >= 4) {
         feedbackText = '';
       } else if (this.name.length > 0) {
         feedbackText = 'Enter at least 4 characters.';

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

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import Icon from './icon.vue';
 import { iconSizeOptions } from '~/utils/constants';
+import Icon from './icon.vue';
 
 const ICONS_PATH = '/path/to/icons.svg';
 const TEST_SIZE = 8;

package/src/components/base/icon/icon.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import iconsPath from '@gitlab/svgs/dist/icons.svg';
 import { iconSizeOptions } from '../../../utils/constants';

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

@@ -10,7 +10,7 @@ describe('GlKeysetPagination', () => {
   const buttonTagName = 'BUTTON';
   const linkTagName = 'A';
 
-  const createComponent = (props = {}, scopedSlots) => {
+  const createComponent = (props = {}, scopedSlots = {}) => {
     wrapper = mount(GlKeysetPagination, {
       propsData: props,
       scopedSlots,

package/src/components/base/label/label.vue

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

package/src/components/base/link/link.vue

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

package/src/components/base/markdown/markdown.scss

@@ -181,6 +181,31 @@
       }
     }
   }
+
+  table {
+    @include gl-my-7;
+
+    th,
+    td {
+      @include gl-px-3;
+      @include gl-py-4;
+      @include gl-inset-border-b-1-gray-100;
+      @include gl-vertical-align-top;
+    }
+
+    th {
+      @include gl-inset-border-y-1-gray-100;
+      @include gl-font-weight-bold;
+    }
+
+    thead {
+      @include gl-bg-gray-50;
+    }
+
+    tr:nth-child(even) {
+      @include gl-bg-gray-10;
+    }
+  }
 }
 
 .gl-compact-markdown {
@@ -262,4 +287,11 @@
       @include gl-font-size-monospace-sm;
     }
   }
+
+  table {
+    th,
+    td {
+      @include gl-py-3;
+    }
+  }
 }

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

@@ -3,7 +3,7 @@ import GlMarkdown from './markdown.vue';
 import markdownTypescaleDemoContent from './markdown_typescale_demo.html';
 
 const template = `
-  <gl-markdown :compact="compact">${markdownTypescaleDemoContent}</gl-markdown> 
+  <gl-markdown :compact="compact">${markdownTypescaleDemoContent}</gl-markdown>
   `;
 
 const generateProps = ({ compact = false } = {}) => ({ compact });
@@ -14,8 +14,11 @@ const Template = (args, { argTypes }) => ({
   template,
 });
 
-export const Typescale = Template.bind({});
-Typescale.args = generateProps();
+export const Documentation = Template.bind({});
+Documentation.args = generateProps();
+
+export const Compact = Template.bind({});
+Compact.args = generateProps({ compact: true });
 
 export default {
   title: 'base/markdown',

package/src/components/base/markdown/markdown.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
 export default {
   props: {

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -27,6 +27,52 @@
 <p>MD Doc Paragraph • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few
   significant ways to add some useful functionality. You can use GFM in the following areas: comments, issues, merge
   requests, milestones, snippets and more.</p>
+
+<table>
+  <thead>
+    <tr>
+      <th>Widget</th>
+      <th>Wording</th>
+      <th>Proposed</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        Test summary
+      </td>
+      <td>
+        Test summary contained 3 failed, 1 fixed test result out of 15 total tests
+      </td>
+      <td>
+        This is the only one that doesn't include the breakdown in the Level 1 subtext. Does it need to be updated?
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Browser performance
+      </td>
+      <td>
+        Browser performance test metrics: 7 changes
+      </td>
+      <td>
+        Browser performance test metrics detected 7 changes
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Load performance
+      </td>
+      <td>
+        Load performance test metrics detected 4 changes
+      </td>
+      <td>
+        ✅
+      </td>
+    </tr>
+  </tbody>
+</table>
+
 <blockquote>
   <p>
     MD Doc Blockquote • GitLab uses "GitLab Flavored Markdown" (GFM). It extends the standard Markdown in a few

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

@@ -1,11 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
 import { BModal } from 'bootstrap-vue';
 import { merge } from 'lodash';
+import { modalButtonDefaults } from '~/utils/constants';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import Button from '../button/button.vue';
 import { logWarning } from '../../../utils/utils';
 import Modal from './modal.vue';
-import { modalButtonDefaults } from '~/utils/constants';
 
 const BModalStub = merge({}, BModal.options, {
   methods: {

package/src/components/base/modal/modal.vue

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

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

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

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