@gitlab/ui 39.3.0 → 39.4.0

package/dist/utils/utils.js

@@ -119,5 +119,28 @@ function logWarning() {
     console.warn(message); // eslint-disable-line no-console
   }
 }
+/**
+ * Stop default event handling and propagation
+ */
+
+function stopEvent(event) {
+  let {
+    preventDefault = true,
+    stopPropagation = true,
+    stopImmediatePropagation = false
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (preventDefault) {
+    event.preventDefault();
+  }
+
+  if (stopPropagation) {
+    event.stopPropagation();
+  }
+
+  if (stopImmediatePropagation) {
+    event.stopImmediatePropagation();
+  }
+}
 
-export { colorFromBackground, debounceByAnimationFrame, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, logWarning, rgbFromHex, rgbFromString, throttle, uid };
+export { colorFromBackground, debounceByAnimationFrame, focusFirstFocusableElement, hexToRgba, isDev, isElementFocusable, logWarning, rgbFromHex, rgbFromString, stopEvent, throttle, uid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "39.3.0",
+  "version": "39.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -17,8 +17,7 @@
   "files": [
     "src",
     "dist",
-    "scss_to_js",
-    "documentation"
+    "scss_to_js"
   ],
   "scripts": {
     "build": "NODE_ENV=production rollup -c",
@@ -56,17 +55,13 @@
     "generate:component": "plop"
   },
   "dependencies": {
-    "@babel/standalone": "^7.0.0",
+    "@popperjs/core": "^2.11.2",
     "bootstrap-vue": "2.20.1",
-    "copy-to-clipboard": "^3.0.8",
     "dompurify": "^2.3.6",
     "echarts": "^5.2.1",
-    "highlight.js": "^10.6.0",
     "iframe-resizer": "^4.3.2",
-    "js-beautify": "^1.8.8",
     "lodash": "^4.17.20",
     "portal-vue": "^2.1.6",
-    "url-search-params-polyfill": "^5.0.0",
     "vue-runtime-helpers": "^1.1.2"
   },
   "peerDependencies": {
@@ -88,7 +83,7 @@
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "12.0.1",
     "@gitlab/stylelint-config": "4.0.0",
-    "@gitlab/svgs": "2.10.0",
+    "@gitlab/svgs": "2.11.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -132,7 +127,6 @@
     "postcss-loader": "^3.0.0",
     "postcss-scss": "^2.1.1",
     "prettier": "2.2.1",
-    "pug": "^2.0.3",
     "puppeteer": "11.0.0",
     "raw-loader": "^0.5.1",
     "rollup": "^2.53.1",
@@ -149,10 +143,10 @@
     "stylelint": "14.3.0",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-prettier": "2.0.0",
-    "vue": "^2.6.11",
+    "vue": "2.6.11",
     "vue-jest": "4.0.0-rc.0",
     "vue-loader": "^15.8.3",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "2.6.11"
   },
   "release": {
     "branches": [

package/scss_to_js/scss_variables.js

@@ -27,6 +27,7 @@ export const limitedLayoutWidth = '990px'
 export const black = '#000'
 export const blackNormal = '#333'
 export const white = '#fff'
+export const whiteContrast = '#fff'
 export const whiteNormal = '#f0f0f0'
 export const whiteDark = '#eaeaea'
 export const whiteTransparent = 'rgba(255, 255, 255, 0.8)'

package/scss_to_js/scss_variables.json

@@ -172,6 +172,11 @@
       "value": "#fff",
       "compiledValue": "#fff"
     },
+    {
+      "name": "$white-contrast",
+      "value": "#fff",
+      "compiledValue": "#fff"
+    },
     {
       "name": "$white-normal",
       "value": "#f0f0f0",

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

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { GlAvatarLabeled, GlBadge } from '../../../index';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
+import avatarPath from '../../../../static/img/avatar.png';
 import readme from './avatar_labeled.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);
@@ -13,7 +14,7 @@ const generateProps = ({
   subLabel = '@gitlab',
   size = 32,
   shape = 'circle',
-  src = 'https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=64',
+  src = avatarPath,
 } = {}) => ({
   label,
   subLabel,

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

@@ -1,5 +1,6 @@
 import { GlAvatarLink, GlAvatar, GlAvatarLabeled } from '../../../index';
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
+import avatarPath from '../../../../static/img/avatar.png';
 import readme from './avatar_link.md';
 
 const components = { GlAvatarLink, GlAvatar, GlAvatarLabeled };
@@ -19,9 +20,7 @@ const generateLabelsProps = ({ label = 'GitLab User', subLabel = '@gitlab' } = {
   subLabel,
 });
 
-const generateImageProps = ({
-  src = 'https://assets.gitlab-static.net/uploads/-/system/project/avatar/278964/logo-extra-whitespace.png?width=64',
-} = {}) => ({
+const generateImageProps = ({ src = avatarPath } = {}) => ({
   src,
 });
 

package/src/components/base/breadcrumb/breadcrumb.md

@@ -18,7 +18,7 @@ to draw a `/`
     <img 
       alt=""
       class="gl-breadcrumb-avatar-tile"
-      src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16"
+      src="/path/to/image.png"
       width="16"
       height="16"
     />

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

@@ -1,4 +1,5 @@
 import { GlBreadcrumb } from '../../../index';
+import avatarPath from '../../../../static/img/avatar.png';
 import readme from './breadcrumb.md';
 
 const template = `
@@ -7,7 +8,7 @@ const template = `
     >
       <template #avatar>
         <img alt=""
-            class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16"
+            class="gl-breadcrumb-avatar-tile" src="${avatarPath}"
             width="16"
             height="16" />
       </template>

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -1,5 +1,5 @@
 .gl-broadcast-message {
-  @include gl-text-white;
+  @include gl-text-contrast-light;
   @include gl-display-flex;
   @include gl-justify-content-space-between;
   @include gl-align-items-flex-start;

package/src/components/base/button/button.scss

@@ -136,7 +136,7 @@
   &.btn-success,
   &.btn-danger,
   &.btn-warning {
-    @include gl-text-white;
+    @include gl-text-contrast-light;
   }
 
   &.btn-confirm,

package/src/components/base/dropdown/dropdown.scss

@@ -128,8 +128,14 @@
     }
   }
 
-  .gl-dropdown-toggle.btn-block {
-    @include gl-justify-content-space-between;
+  .gl-dropdown-toggle {
+    &.btn-block {
+      @include gl-justify-content-space-between;
+    }
+
+    .gl-button-text {
+      @include gl-display-inline-flex;
+    }
   }
 
   .gl-new-dropdown-button-text {
@@ -173,7 +179,8 @@
   }
 
   .dropdown-icon-only {
-    .dropdown-icon {
+    .dropdown-icon,
+    .gl-button-icon.gl-button-icon {
       @include gl-mr-0;
     }
 

package/src/components/base/dropdown/dropdown_item.scss

@@ -20,6 +20,7 @@
 .gl-new-dropdown-item {
   .dropdown-item {
     @include gl-tmp-dropdown-item-style;
+    @include gl-cursor-pointer;
 
     .gl-avatar {
       @include gl-flex-shrink-0;

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

@@ -3,6 +3,7 @@ import { BModal } from 'bootstrap-vue';
 import { merge } from 'lodash';
 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';
 
@@ -21,6 +22,10 @@ const BModalStub = merge({}, BModal.options, {
   },
 });
 
+jest.mock('../../../utils/utils', () => ({
+  logWarning: jest.fn(),
+}));
+
 describe('Modal component', () => {
   let wrapperListeners;
   let wrapper;
@@ -217,6 +222,21 @@ describe('Modal component', () => {
     });
   });
 
+  describe('accessible name warning', () => {
+    it.each`
+      description                                            | title            | ariaLabel        | showWarning
+      ${'is logged when there is no title or ariaLabel'}     | ${undefined}     | ${undefined}     | ${true}
+      ${'is not logged when there is a title'}               | ${'modal title'} | ${undefined}     | ${false}
+      ${'is not logged when there is an ariaLabel'}          | ${undefined}     | ${'modal title'} | ${false}
+      ${'is not logged when there is a title and ariaLabel'} | ${'modal title'} | ${'modal title'} | ${false}
+    `('$description', ({ title, ariaLabel, showWarning }) => {
+      createComponent({ props: { title, ariaLabel } });
+
+      const calledTimes = showWarning ? 1 : 0;
+      expect(logWarning).toHaveBeenCalledTimes(calledTimes);
+    });
+  });
+
   it('it binds visible property to the BModal visible property', async () => {
     createComponent({ stubModal: false });
 

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

@@ -6,7 +6,7 @@ import {
   modalButtonDefaults,
   modalSizeOptions,
 } from '../../../utils/constants';
-import { focusFirstFocusableElement } from '../../../utils/utils';
+import { focusFirstFocusableElement, logWarning } from '../../../utils/utils';
 import CloseButton from '../../shared_components/close_button/close_button.vue';
 import GlButton from '../button/button.vue';
 
@@ -79,6 +79,11 @@ export default {
       required: false,
       default: false,
     },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     shouldRenderModalOk() {
@@ -96,6 +101,13 @@ export default {
       );
     },
   },
+  mounted() {
+    if (!this.ariaLabel && !this.title) {
+      logWarning(
+        '[gl-modal]: Accessible name for modal missing. Please add title prop or aria-label.'
+      );
+    }
+  },
   methods: {
     show() {
       this.$refs.modal.show();
@@ -165,6 +177,7 @@ export default {
     :title-tag="titleTag"
     :size="size"
     :visible="visible"
+    :aria-label="ariaLabel || title"
     v-bind="$attrs"
     lazy
     :modal-class="['gl-modal', modalClass]"

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

@@ -0,0 +1,171 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { GL_DROPDOWN_HIDDEN, GL_DROPDOWN_SHOWN, POPPER_CONFIG } from '../constants';
+import GlBaseDropdown from './base_dropdown.vue';
+
+const destroyPopper = jest.fn();
+const updatePopper = jest.fn();
+const mockCreatePopper = jest.fn().mockImplementation(() => ({
+  destroy: destroyPopper,
+  update: updatePopper,
+}));
+
+jest.mock('@popperjs/core', () => ({
+  createPopper: (...args) => mockCreatePopper(...args),
+}));
+
+const DEFAULT_BTN_TOGGLE_CLASSES = [
+  'btn',
+  'btn-default',
+  'btn-md',
+  'gl-button',
+  'dropdown-toggle',
+  'gl-dropdown-toggle',
+];
+
+describe('base dropdown', () => {
+  let wrapper;
+
+  const buildWrapper = (propsData, slots = {}) => {
+    wrapper = mount(GlBaseDropdown, {
+      propsData: {
+        toggleId: 'dropdown-toggle-btn-1',
+        ...propsData,
+      },
+      slots,
+      attachTo: document.body,
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const findDropdownToggle = () => wrapper.find('.btn.gl-dropdown-toggle');
+  const findDropdownMenu = () => wrapper.find('.dropdown-menu');
+
+  describe('popper.js instance', () => {
+    it('should initialize popper.js instance with toggle and menu elements and config for left-aligned menu', async () => {
+      await buildWrapper();
+      expect(mockCreatePopper).toHaveBeenCalledWith(
+        findDropdownToggle().element,
+        findDropdownMenu().element,
+        { ...POPPER_CONFIG, placement: 'bottom-start' }
+      );
+    });
+
+    it('should initialize popper.js instance with toggle and menu elements and config for right-aligned menu', async () => {
+      await buildWrapper({ right: true });
+      expect(mockCreatePopper).toHaveBeenCalledWith(
+        findDropdownToggle().element,
+        findDropdownMenu().element,
+        { ...POPPER_CONFIG, placement: 'bottom-end' }
+      );
+    });
+
+    it('should update popper instance when component is updated', async () => {
+      await buildWrapper();
+      await findDropdownToggle().trigger('click');
+      await wrapper.setProps({ category: 'tertiary' });
+      expect(updatePopper).toHaveBeenCalled();
+    });
+
+    it('should destroy popper instance when component is destroyed', async () => {
+      await buildWrapper();
+      wrapper.destroy();
+      expect(destroyPopper).toHaveBeenCalled();
+    });
+  });
+
+  describe('renders content to the default slot', () => {
+    const defaultContent = 'Some content here';
+    const slots = { default: defaultContent };
+
+    it('renders the content', () => {
+      buildWrapper({}, slots);
+      expect(wrapper.find('.gl-new-dropdown-inner').html()).toContain(defaultContent);
+    });
+  });
+
+  describe.each`
+    props                                                            | toggleClasses
+    ${{}}                                                            | ${[]}
+    ${{ toggleText: 'toggleText' }}                                  | ${[]}
+    ${{ toggleText: 'toggleText', icon: 'close' }}                   | ${['dropdown-icon-text']}
+    ${{ icon: 'close' }}                                             | ${['dropdown-icon-only']}
+    ${{ icon: 'close', toggleText: 'toggleText', textSrOnly: true }} | ${['dropdown-icon-only']}
+    ${{ icon: 'close', textSrOnly: true }}                           | ${['dropdown-icon-only']}
+    ${{ toggleText: 'toggleText', noCaret: true }}                   | ${['dropdown-toggle-no-caret']}
+  `('dropdown with props $props', ({ props, toggleClasses }) => {
+    beforeEach(async () => {
+      buildWrapper(props);
+
+      await nextTick();
+    });
+
+    it(`sets toggle button classes to '${toggleClasses}'`, () => {
+      const classes = findDropdownToggle().classes().sort();
+
+      expect(classes).toEqual([...DEFAULT_BTN_TOGGLE_CLASSES, ...toggleClasses].sort());
+    });
+  });
+
+  describe.each`
+    toggleClass             | expectedClasses                                      | type
+    ${'my-class'}           | ${[...DEFAULT_BTN_TOGGLE_CLASSES, 'my-class']}       | ${'string'}
+    ${{ 'my-class': true }} | ${[...DEFAULT_BTN_TOGGLE_CLASSES, 'my-class']}       | ${'object'}
+    ${['cls-1', 'cls-2']}   | ${[...DEFAULT_BTN_TOGGLE_CLASSES, 'cls-1', 'cls-2']} | ${'array'}
+    ${null}                 | ${[...DEFAULT_BTN_TOGGLE_CLASSES]}                   | ${'null'}
+  `('with toggle classes', ({ toggleClass, expectedClasses, type }) => {
+    beforeEach(async () => {
+      buildWrapper({ toggleClass });
+
+      await nextTick();
+    });
+
+    it(`class is inherited from toggle class of type ${type}`, () => {
+      expect(findDropdownToggle().classes().sort()).toEqual(
+        expect.arrayContaining(expectedClasses.sort())
+      );
+    });
+  });
+
+  describe('toggle visibility', () => {
+    beforeEach(() => {
+      buildWrapper();
+    });
+
+    it('should toggle menu visibility on toggle button click ', async () => {
+      const toggle = findDropdownToggle();
+      const menu = findDropdownMenu();
+
+      // open menu clicking toggle btn
+      await toggle.trigger('click');
+      expect(menu.classes('show')).toBe(true);
+      expect(toggle.attributes('aria-expanded')).toBe('true');
+      expect(wrapper.emitted(GL_DROPDOWN_SHOWN).length).toBe(1);
+
+      // close menu clicking toggle btn again
+      await toggle.trigger('click');
+      expect(menu.classes('show')).toBe(false);
+      expect(toggle.attributes('aria-expanded')).toBeUndefined();
+      expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
+    });
+
+    it('should close the menu when Escape is pressed inside menu and focus toggle', async () => {
+      const toggle = findDropdownToggle();
+      const menu = findDropdownMenu();
+
+      // open menu clicking toggle btn
+      await toggle.trigger('click');
+      expect(menu.classes('show')).toBe(true);
+
+      // close menu pressing ESC on it
+      await menu.trigger('keydown.esc');
+      expect(menu.classes('show')).toBe(false);
+      expect(toggle.attributes('aria-expanded')).toBeUndefined();
+      expect(wrapper.emitted(GL_DROPDOWN_HIDDEN).length).toBe(1);
+      expect(toggle.element).toHaveFocus();
+    });
+  });
+});