@gitlab/ui 40.2.1 → 40.4.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.1",
+  "version": "40.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -81,7 +81,7 @@
     "@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.14.0",
     "@rollup/plugin-commonjs": "^11.1.0",

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.scss

@@ -1,7 +1,7 @@
 $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $green-50, $orange-50,
   $gray-50;
 
-.gl-avatar {
+@mixin gl-avatar {
   @include gl-border-1;
   @include gl-border-solid;
   @include gl-border-gray-a-08;
@@ -9,7 +9,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-flex-shrink-0;
 }
 
-.gl-avatar-s16 {
+@mixin gl-avatar-s16 {
   @include gl-w-5;
   @include gl-h-5;
   @include gl-font-sm;
@@ -17,7 +17,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-small;
 }
 
-.gl-avatar-s24 {
+@mixin gl-avatar-s24 {
   @include gl-w-6;
   @include gl-h-6;
   @include gl-font-sm;
@@ -25,7 +25,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-base;
 }
 
-.gl-avatar-s32 {
+@mixin gl-avatar-s32 {
   @include gl-w-7;
   @include gl-h-7;
   @include gl-font-base;
@@ -33,7 +33,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-base;
 }
 
-.gl-avatar-s48 {
+@mixin gl-avatar-s48 {
   @include gl-w-9;
   @include gl-h-9;
   @include gl-font-size-h2;
@@ -41,7 +41,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-lg;
 }
 
-.gl-avatar-s64 {
+@mixin gl-avatar-s64 {
   @include gl-w-11;
   @include gl-h-11;
   @include gl-font-size-h-display;
@@ -49,7 +49,7 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-lg;
 }
 
-.gl-avatar-s96 {
+@mixin gl-avatar-s96 {
   @include gl-w-13;
   @include gl-h-13;
   @include gl-font-size-h-display-xl;
@@ -57,6 +57,142 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
   @include gl-rounded-lg;
 }
 
+.gl-avatar {
+  @include gl-avatar;
+}
+
+.gl-avatar-s16 {
+  @include gl-avatar-s16;
+}
+
+.gl-avatar-s24 {
+  @include gl-avatar-s24;
+}
+
+.gl-avatar-s32 {
+  @include gl-avatar-s32;
+}
+
+.gl-avatar-s48 {
+  @include gl-avatar-s48;
+}
+
+.gl-avatar-s64 {
+  @include gl-avatar-s64;
+}
+
+.gl-avatar-s96 {
+  @include gl-avatar-s96;
+}
+
+.gl-sm-avatar-s16 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s16;
+  }
+}
+
+.gl-md-avatar-s16 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s16;
+  }
+}
+
+.gl-lg-avatar-s16 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s16;
+  }
+}
+
+.gl-sm-avatar-s24 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s24;
+  }
+}
+
+.gl-md-avatar-s24 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s24;
+  }
+}
+
+.gl-lg-avatar-s24 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s24;
+  }
+}
+
+.gl-sm-avatar-s32 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s32;
+  }
+}
+
+.gl-md-avatar-s32 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s32;
+  }
+}
+
+.gl-lg-avatar-s32 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s32;
+  }
+}
+
+.gl-sm-avatar-s48 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s48;
+  }
+}
+
+.gl-md-avatar-s48 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s48;
+  }
+}
+
+.gl-lg-avatar-s48 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s48;
+  }
+}
+
+.gl-sm-avatar-s64 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s64;
+  }
+}
+
+.gl-md-avatar-s64 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s64;
+  }
+}
+
+.gl-lg-avatar-s64 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s64;
+  }
+}
+
+.gl-sm-avatar-s96 {
+  @include gl-media-breakpoint-up(sm) {
+    @include gl-avatar-s96;
+  }
+}
+
+.gl-md-avatar-s96 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-avatar-s96;
+  }
+}
+
+.gl-lg-avatar-s96 {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-avatar-s96;
+  }
+}
+
 .gl-avatar-circle {
   @include gl-rounded-full;
 }

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

@@ -18,16 +18,42 @@ describe('GlAvatar', () => {
       expect(wrapper.props('size')).toBe(avatarSizeOptions[1]);
     });
 
-    it.each([96, 64, 48, 32, 24, 16])('accepts size %s', (size) => {
-      createWrapper({ size });
+    describe('when number is passed', () => {
+      it.each([96, 64, 48, 32, 24, 16])('accepts size %s', (size) => {
+        createWrapper({ size });
 
-      expect(wrapper.props('size')).toBe(size);
+        expect(wrapper.props('size')).toBe(size);
+      });
+
+      it.each([12, 28, 36, 54, 98])('displays an error for size %s', (size) => {
+        createWrapper({ size });
+
+        expect(wrapper).toHaveLoggedVueErrors();
+      });
+
+      it('adds correct CSS class to avatar', () => {
+        createWrapper({ size: 16 });
+
+        expect(wrapper.classes()).toContain('gl-avatar-s16');
+      });
     });
 
-    it.each([12, 28, 36, 54, 98])('displays an error for size %s', (size) => {
-      createWrapper({ size });
+    describe('when object is passed', () => {
+      it('displays error if any of the sizes are invalid', () => {
+        createWrapper({ size: { default: 16, md: 32, lg: 65 } });
+
+        expect(wrapper).toHaveLoggedVueErrors();
+      });
+
+      it('adds correct CSS classes to avatar', () => {
+        createWrapper({ size: { default: 16, md: 32, lg: 64 } });
 
-      expect(wrapper).toHaveLoggedVueErrors();
+        expect(wrapper.classes()).toContain(
+          'gl-avatar-s16',
+          'gl-md-avatar-s32',
+          'gl-lg-avatar-s64'
+        );
+      });
     });
   });
 });

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

@@ -59,6 +59,22 @@ export const Image = (args, { argTypes }) => ({
 });
 Image.args = generateImageProps();
 
+export const ResponsiveImage = (args, { argTypes }) => ({
+  components,
+  props: Object.keys(argTypes),
+  template: `
+      <gl-avatar
+        :size="size"
+        :shape="shape"
+        src="https://about.gitlab.com/images/press/gitlab-summit-south-africa.jpg"
+      />
+    `,
+});
+ResponsiveImage.args = generateImageProps({ size: { default: 24, sm: 32, md: 48, lg: 96 } });
+ResponsiveImage.argTypes = {
+  size: { control: 'object' },
+};
+
 export const ProjectFallback = (args, { argTypes }) => ({
   components,
   props: Object.keys(argTypes),

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

@@ -1,4 +1,6 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script>
+import { isNumber } from 'lodash';
 import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
 import { getAvatarChar } from '../../../utils/string_utils';
 
@@ -27,18 +29,24 @@ export default {
       default: 'avatar',
     },
     size: {
-      type: Number,
+      type: [Number, Object],
       required: false,
       default: avatarSizeOptions[1],
       validator: (value) => {
-        const isValidSize = avatarSizeOptions.includes(value);
+        const sizes = isNumber(value) ? [value] : Object.values(value);
+
+        const areValidSizes = sizes.every((size) => {
+          const isValidSize = avatarSizeOptions.includes(size);
+
+          if (!isValidSize) {
+            /* eslint-disable-next-line no-console */
+            console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
+          }
 
-        if (!isValidSize) {
-          /* eslint-disable-next-line no-console */
-          console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${value}`);
-        }
+          return isValidSize;
+        });
 
-        return isValidSize;
+        return areValidSizes;
       },
     },
     shape: {
@@ -48,8 +56,19 @@ export default {
     },
   },
   computed: {
-    sizeClass() {
-      return `gl-avatar-s${this.size}`;
+    sizeClasses() {
+      if (isNumber(this.size)) {
+        return `gl-avatar-s${this.size}`;
+      }
+
+      const { default: defaultSize, ...nonDefaultSizes } = this.size;
+
+      return [
+        `gl-avatar-s${defaultSize || avatarSizeOptions[1]}`,
+        ...Object.entries(nonDefaultSizes).map(
+          ([breakpoint, size]) => `gl-${breakpoint}-avatar-s${size}`
+        ),
+      ];
     },
     isCircle() {
       return this.shape === avatarShapeOptions.circle;
@@ -73,14 +92,14 @@ export default {
     v-if="src"
     :src="src"
     :alt="alt"
-    :class="['gl-avatar', { 'gl-avatar-circle': isCircle }, sizeClass]"
+    :class="['gl-avatar', { 'gl-avatar-circle': isCircle }, sizeClasses]"
   />
   <div
     v-else
     :class="[
       'gl-avatar gl-avatar-identicon',
       { 'gl-avatar-circle': isCircle },
-      sizeClass,
+      sizeClasses,
       identiconBackgroundClass,
     ]"
   >

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';