@gitlab/ui 33.0.1 → 34.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "33.0.1",
+  "version": "34.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -41,6 +41,7 @@
     "test:unit:watch": "yarn test:unit --watch --notify",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",
     "test:visual": "NODE_ENV=test IS_VISUAL_TEST=true start-test http-get://localhost:9001 'jest ./tests/storyshots.spec.js'",
+    "test:visual:minimal": "node ./bin/run_minimal_visual_tests.js",
     "test:visual:update": "NODE_ENV=test IS_VISUAL_TEST=true JEST_IMAGE_SNAPSHOT_TRACK_OBSOLETE=1 start-test http-get://localhost:9001 'jest ./tests/storyshots.spec.js --updateSnapshot'",
     "prettier": "prettier --check '**/*.{js,vue}'",
     "prettier:fix": "prettier --write '**/*.{js,vue}'",
@@ -60,7 +61,7 @@
     "@babel/standalone": "^7.0.0",
     "bootstrap-vue": "2.20.1",
     "copy-to-clipboard": "^3.0.8",
-    "dompurify": "^2.3.4",
+    "dompurify": "^2.3.5",
     "echarts": "^5.2.1",
     "highlight.js": "^10.6.0",
     "iframe-resizer": "^4.3.2",
@@ -90,15 +91,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.14",
-    "@storybook/addon-docs": "6.4.14",
-    "@storybook/addon-essentials": "6.4.14",
+    "@storybook/addon-a11y": "6.4.15",
+    "@storybook/addon-docs": "6.4.15",
+    "@storybook/addon-essentials": "6.4.15",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.14",
-    "@storybook/addon-storyshots-puppeteer": "6.4.14",
-    "@storybook/addon-viewport": "6.4.14",
-    "@storybook/theming": "6.4.14",
-    "@storybook/vue": "6.4.14",
+    "@storybook/addon-storyshots": "6.4.15",
+    "@storybook/addon-storyshots-puppeteer": "6.4.15",
+    "@storybook/addon-viewport": "6.4.15",
+    "@storybook/theming": "6.4.15",
+    "@storybook/vue": "6.4.15",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",
@@ -113,6 +114,7 @@
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "file-loader": "^4.2.0",
+    "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
     "jest": "^26.6.3",

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

@@ -4,9 +4,12 @@ import { uniqueId } from 'lodash';
 export default {
   name: 'GlAccordion',
   provide() {
+    const accordionId = uniqueId('accordion-set-');
+    // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
+    // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
     return {
-      defaultHeaderLevel: this.headerLevel,
-      accordionSetId: this.autoCollapse && uniqueId('accordion-set-'),
+      defaultHeaderLevel: () => this.headerLevel,
+      accordionSetId: () => this.autoCollapse && accordionId,
     };
   },
   props: {

package/src/components/base/accordion/accordion_item.spec.js

@@ -16,8 +16,8 @@ describe('GlAccordionItem', () => {
         GlCollapseToggle: GlCollapseToggleDirective,
       },
       provide: {
-        defaultHeaderLevel,
-        accordionSetId,
+        defaultHeaderLevel: () => defaultHeaderLevel,
+        accordionSetId: () => accordionSetId,
       },
       propsData: {
         title: defaultTitle,

package/src/components/base/accordion/accordion_item.stories.js

@@ -26,8 +26,8 @@ const Template = (args) => ({
   props: Object.keys(args),
   template,
   provide: {
-    defaultHeaderLevel: defaultValue('headerLevel'),
-    accordionSetId: '1',
+    defaultHeaderLevel: () => defaultValue('headerLevel'),
+    accordionSetId: () => '1',
   },
 });
 

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

@@ -51,11 +51,11 @@ When set, it will ensure the accordion item is initially visible
   },
   computed: {
     headerComponent() {
-      const level = this.headerLevel || this.defaultHeaderLevel;
+      const level = this.headerLevel || this.defaultHeaderLevel();
       return `h${level}`;
     },
     accordion() {
-      return this.accordionSetId || undefined;
+      return this.accordionSetId() || undefined;
     },
     icon() {
       return this.isVisible ? 'chevron-down' : 'chevron-right';

package/src/components/base/avatars_inline/avatars_inline.md

@@ -28,6 +28,11 @@ When the `collapse` property value is `true` and the `maxVisible` property value
 than the length of the `avatars` property array, `<avatars-inline>` will hide the overflown avatars
 and display a badge instead.
 
+### Badge description in screen readers
+
+The `badgeSrOnlyText` property provides a meaningful description of the badge that appears
+when avatars are collapsed for screen reader users.
+
 ### Supported sizes
 
 `<avatars-inline>` only supports avatars with `24` or `32` size.

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

@@ -11,10 +11,14 @@ describe('avatars inline', () => {
     { src: 'avatar 2', tooltip: 'Avatar 2' },
     { src: 'avatar 3', tooltip: 'Avatar 3' },
   ];
+  const badgeSrOnlyText = 'additional users';
 
   const buildWrapper = (propsData = {}) => {
     wrapper = shallowMount(AvatarsInline, {
-      propsData,
+      propsData: {
+        badgeSrOnlyText,
+        ...propsData,
+      },
       stubs: {
         GlTooltip,
       },
@@ -107,4 +111,20 @@ describe('avatars inline', () => {
       });
     });
   });
+
+  describe('a11y', () => {
+    it('renders screen reader only text for the collapse badge', () => {
+      buildWrapper({ avatars, maxVisible: 1, collapsed: true, avatarSize: 32 });
+
+      expect(wrapper.find('[data-testid="badge-sr-only-text"]').text()).toBe(badgeSrOnlyText);
+    });
+
+    it('hides badge text for screen readers', () => {
+      buildWrapper({ avatars, maxVisible: 1, collapsed: true, avatarSize: 32 });
+
+      expect(
+        wrapper.find('[data-testid="collapsed-avatars-badge"]').attributes('aria-hidden')
+      ).toBe('true');
+    });
+  });
 });

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

@@ -1,37 +1,49 @@
+import { GlAvatarsInline, GlAvatar, GlAvatarLink, GlTooltipDirective } from '../../../../index';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
 import readme from './avatars_inline.md';
 
 const defaultAvatars = [
-  { src: 'https://picsum.photos/id/1005/32' },
-  { src: 'https://picsum.photos/id/1006/32' },
-  { src: 'https://picsum.photos/id/1009/32' },
-  { src: 'https://picsum.photos/id/1011/32' },
-  { src: 'https://picsum.photos/id/1012/32' },
+  { src: 'https://picsum.photos/id/1005/32', alt: 'Administrator’s user avatar' },
+  { src: 'https://picsum.photos/id/1006/32', alt: 'Ops Manager’s user avatar' },
+  { src: 'https://picsum.photos/id/1009/32', alt: 'Developer’s user avatar' },
+  { src: 'https://picsum.photos/id/1011/32', alt: 'Business Admin’s user avatar' },
+  { src: 'https://picsum.photos/id/1012/32', alt: 'Product designer’s user avatar' },
 ];
 
 const generateProps = (
   avatars = defaultAvatars,
-  { maxVisible = 2, collapsed = true, avatarSize = 24 } = {}
+  {
+    maxVisible = 2,
+    collapsed = true,
+    avatarSize = 24,
+    badgeTooltipProp = '',
+    badgeSrOnlyText = `${avatars.length - maxVisible} additional users`,
+  } = {}
 ) => ({
   maxVisible,
   collapsed,
   avatarSize,
   avatars,
+  badgeTooltipProp,
+  badgeSrOnlyText,
 });
 
 export const Default = (args, { argTypes }) => ({
+  components: { GlAvatarsInline },
   props: Object.keys(argTypes),
   template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible" :badgeTooltipProp="badgeTooltipProp" :badgeSrOnlyText="badgeSrOnlyText">
     </gl-avatars-inline>
     `,
 });
 Default.args = generateProps();
 
 export const WithLinksAndTooltips = (args, { argTypes }) => ({
+  components: { GlAvatarsInline, GlAvatar, GlAvatarLink },
+  directives: { GlTooltip: GlTooltipDirective },
   props: Object.keys(argTypes),
   template: `
-    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible">
+    <gl-avatars-inline :avatars="avatars" :collapsed="collapsed" :avatar-size="avatarSize" :max-visible="maxVisible" :badgeTooltipProp="badgeTooltipProp" :badgeSrOnlyText="badgeSrOnlyText">
       <template #avatar="{ avatar }">
         <gl-avatar-link target="blank" :href="avatar.href" v-gl-tooltip :title="avatar.tooltip">
           <gl-avatar :src="avatar.src" :size="avatarSize" />
@@ -45,11 +57,13 @@ WithLinksAndTooltips.args = generateProps(
     ...avatar,
     href: '//gitlab.com',
     tooltip: `Avatar ${index}`,
-  }))
+  })),
+  { badgeTooltipProp: 'tooltip' }
 );
 
 export default {
   title: 'base/avatar/avatars-inline',
+  component: GlAvatarsInline,
   parameters: {
     knobs: { disable: true },
     docs: {

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

@@ -29,6 +29,10 @@ export default {
       required: false,
       default: false,
     },
+    badgeSrOnlyText: {
+      type: String,
+      required: true,
+    },
     badgeTooltipProp: {
       type: String,
       required: false,
@@ -111,9 +115,15 @@ export default {
       <gl-tooltip v-if="badgeTooltipProp" :target="() => $refs.badge">
         {{ badgeTooltipTitle }}
       </gl-tooltip>
-      <span ref="badge" :class="['gl-avatars-inline-badge', badgeSize]">
+      <span
+        ref="badge"
+        data-testid="collapsed-avatars-badge"
+        :class="['gl-avatars-inline-badge', badgeSize]"
+        aria-hidden="true"
+      >
         {{ badgeLabel }}
       </span>
+      <span data-testid="badge-sr-only-text" class="sr-only">{{ badgeSrOnlyText }}</span>
     </div>
   </div>
 </template>

package/src/components/base/popover/popover.scss

@@ -67,11 +67,6 @@ $gl-popover-max-width: $grid-size * 35;
     @include gl-font-sm;
     @include gl-font-weight-bold;
     @include gl-m-0;
-
-    .gl-button.close {
-      margin-top: -$gl-spacing-scale-3;
-      margin-right: -$gl-spacing-scale-4;
-    }
   }
 
   .popover-body {

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

@@ -5,16 +5,18 @@ import GlPopover from './popover.vue';
 describe('GlPopover', () => {
   let wrapper;
 
-  const createWrapper = (props) => {
+  const createWrapper = (props, stubs = {}) => {
     wrapper = shallowMount(GlPopover, {
       propsData: {
         target: document.body,
         ...props,
       },
+      stubs,
     });
   };
 
   const findBVPopover = () => wrapper.findComponent({ ref: 'bPopover' });
+  const findCloseButton = () => findBVPopover().find('[data-testid="close-button"]');
 
   it.each(tooltipActionEvents)('passes through the %s event to the bvPopover instance', (event) => {
     createWrapper();
@@ -46,4 +48,43 @@ describe('GlPopover', () => {
       expect(findBVPopover().props('title')).toBe(title);
     });
   });
+
+  describe('close button', () => {
+    let doCloseMock;
+
+    beforeEach(() => {
+      doCloseMock = jest.fn();
+      createWrapper(
+        { showCloseButton: true },
+        {
+          BPopover: {
+            template: `
+              <div>
+                <slot name="title" />
+              </div>
+            `,
+            methods: {
+              doClose: doCloseMock,
+            },
+          },
+        }
+      );
+    });
+
+    it('renders a close button', () => {
+      expect(findCloseButton().exists()).toBe(true);
+    });
+
+    it("calls BPopover's doClose method when clicking on the close button", () => {
+      findCloseButton().vm.$emit('click');
+
+      expect(doCloseMock).toHaveBeenCalled();
+    });
+
+    it('emits close-button-clicked event when clicking on the close button', () => {
+      findCloseButton().vm.$emit('click');
+
+      expect(wrapper.emitted('close-button-clicked')).toHaveLength(1);
+    });
+  });
 });

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

@@ -60,6 +60,24 @@ documentedStoriesOf('base/popover', '')
     template,
     props: generateProps(),
   }))
+  .add('with close button', () => ({
+    template: `
+      <div class="gl-display-flex gl-justify-content-center gl-p-6">
+        <gl-button id="pop-with-close-button">{{placement}}</gl-button>
+        <gl-popover
+          target="pop-with-close-button"
+          data-testid="popover-with-close-button"
+          triggers="hover focus"
+          :title="title"
+          :placement="placement"
+          content="${contentString}"
+          show
+          show-close-button
+          />
+      </div>
+    `,
+    props: generateProps(),
+  }))
   .add(
     'on click',
     () => ({

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

@@ -1,12 +1,14 @@
 <script>
 import { BPopover } from 'bootstrap-vue';
 import tooltipMixin from '../../mixins/tooltip_mixin';
+import CloseButton from '../../shared_components/close_button/close_button.vue';
 
 const popoverRefName = 'bPopover';
 
 export default {
   components: {
     BPopover,
+    CloseButton,
   },
   mixins: [tooltipMixin(popoverRefName)],
   inheritAttrs: false,
@@ -21,11 +23,30 @@ export default {
       required: false,
       default: 'hover focus',
     },
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    showCloseButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     customClass() {
       return ['gl-popover', ...this.cssClasses].join(' ');
     },
+    shouldShowTitle() {
+      return this.$scopedSlots.title || this.title || this.showCloseButton;
+    },
+  },
+  methods: {
+    close(e) {
+      this.$refs[popoverRefName].doClose();
+      this.$emit('close-button-clicked', e);
+    },
   },
   popoverRefName,
 };
@@ -36,11 +57,20 @@ export default {
     :ref="$options.popoverRefName"
     :custom-class="customClass"
     :triggers="triggers"
+    :title="title"
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <template v-if="$scopedSlots.title" #title>
-      <slot name="title"></slot>
+    <template v-if="shouldShowTitle" #title>
+      <slot name="title">
+        {{ title }}
+      </slot>
+      <close-button
+        v-if="showCloseButton"
+        class="gl-float-right gl-mt-n2 gl-mr-n3"
+        data-testid="close-button"
+        @click="close"
+      />
     </template>
     <slot></slot>
   </b-popover>