@gitlab/ui 39.3.1 → 39.5.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.1",
+  "version": "39.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -55,6 +55,7 @@
     "generate:component": "plop"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.2",
     "bootstrap-vue": "2.20.1",
     "dompurify": "^2.3.6",
     "echarts": "^5.2.1",
@@ -82,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",
@@ -122,10 +123,10 @@
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",
-    "postcss": "8.4.5",
+    "postcss": "8.4.12",
     "postcss-loader": "^3.0.0",
-    "postcss-scss": "^2.1.1",
-    "prettier": "2.2.1",
+    "postcss-scss": "4.0.4",
+    "prettier": "2.6.2",
     "puppeteer": "11.0.0",
     "raw-loader": "^0.5.1",
     "rollup": "^2.53.1",

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/alert/alert.spec.js

@@ -71,13 +71,15 @@ describe('Alert component', () => {
     expect(findDismissButton().exists()).toBe(false);
   });
 
-  it('renders the provided title', () => {
+  it('renders the provided title with heading level 2', () => {
     const title = 'foo';
     createComponent({ propsData: { title } });
 
     const titleWrapper = findTitle();
     expect(titleWrapper.exists()).toBe(true);
     expect(titleWrapper.text()).toContain(title);
+    // the title needs to be in a level 2 heading for accessibility reasons
+    expect(titleWrapper.element.tagName).toEqual('H2');
   });
 
   describe('given primaryButtonText', () => {

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

@@ -184,7 +184,7 @@ export default {
     />
 
     <div class="gl-alert-content" role="alert">
-      <h4 v-if="title" class="gl-alert-title">{{ title }}</h4>
+      <h2 v-if="title" class="gl-alert-title">{{ title }}</h2>
 
       <div class="gl-alert-body">
         <!-- @slot The alert message to display. -->

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/link/link.stories.js

@@ -7,13 +7,15 @@ const generateProps = ({ href = '#', target = null } = {}) => ({
   target,
 });
 
-const makeStory = (options) => (args, { argTypes }) => ({
-  components: {
-    GlLink,
-  },
-  props: Object.keys(argTypes),
-  ...options,
-});
+const makeStory =
+  (options) =>
+  (args, { argTypes }) => ({
+    components: {
+      GlLink,
+    },
+    props: Object.keys(argTypes),
+    ...options,
+  });
 
 export const DefaultLink = makeStory({
   components: { GlLink },

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();
+    });
+  });
+});

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

@@ -0,0 +1,221 @@
+<script>
+import { createPopper } from '@popperjs/core';
+import {
+  buttonCategoryOptions,
+  buttonSizeOptions,
+  dropdownVariantOptions,
+} from '../../../../utils/constants';
+import { POPPER_CONFIG, GL_DROPDOWN_SHOWN, GL_DROPDOWN_HIDDEN } from '../constants';
+
+import GlButton from '../../button/button.vue';
+import GlIcon from '../../icon/icon.vue';
+import { OutsideDirective } from '../../../../directives/outside/outside';
+
+export default {
+  components: {
+    GlButton,
+    GlIcon,
+  },
+  directives: { Outside: OutsideDirective },
+  props: {
+    toggleText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    textSrOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    category: {
+      type: String,
+      required: false,
+      default: buttonCategoryOptions.primary,
+      validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
+    },
+    variant: {
+      type: String,
+      required: false,
+      default: dropdownVariantOptions.default,
+      validator: (value) => Object.keys(dropdownVariantOptions).includes(value),
+    },
+    size: {
+      type: String,
+      required: false,
+      default: buttonSizeOptions.medium,
+      validator: (value) => Object.keys(buttonSizeOptions).includes(value),
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    toggleClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null,
+    },
+    noCaret: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Right align dropdown menu with respect to the toggle button
+     */
+    right: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    // ARIA props
+    ariaHaspopup: {
+      type: [String, Boolean],
+      required: false,
+      default: false,
+      validator: (value) => {
+        return ['menu', 'listbox', 'tree', 'grid', 'dialog', true, false].includes(value);
+      },
+    },
+    /**
+     * Id that will be referenced by `aria-labelledby` attribute of the dropdown content`
+     */
+    toggleId: {
+      type: String,
+      required: true,
+    },
+    /**
+     * The `aria-labelledby` attribute value for the  toggle `button`
+     */
+    ariaLabelledby: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  computed: {
+    isIconOnly() {
+      return Boolean(this.icon && (!this.toggleText?.length || this.textSrOnly));
+    },
+    isIconWithText() {
+      return Boolean(this.icon && this.toggleText?.length && !this.textSrOnly);
+    },
+    toggleButtonClasses() {
+      return [
+        this.toggleClass,
+        {
+          'gl-dropdown-toggle': true,
+          'dropdown-toggle': true,
+          'dropdown-icon-only': this.isIconOnly,
+          'dropdown-icon-text': this.isIconWithText,
+          'dropdown-toggle-no-caret': this.noCaret,
+        },
+      ];
+    },
+    toggleLabelledBy() {
+      return this.ariaLabelledby ? `${this.ariaLabelledby} ${this.toggleId}` : this.toggleId;
+    },
+    popperConfig() {
+      return {
+        placement: this.right ? 'bottom-end' : 'bottom-start',
+        ...POPPER_CONFIG,
+      };
+    },
+  },
+  updated() {
+    if (this.visible) {
+      this.popper?.update();
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.popper = createPopper(this.$refs.toggle.$el, this.$refs.content, this.popperConfig);
+    });
+  },
+  beforeDestroy() {
+    this.popper.destroy();
+  },
+  methods: {
+    toggle() {
+      this.visible = !this.visible;
+
+      if (this.visible) {
+        this.popper.update();
+        this.$emit(GL_DROPDOWN_SHOWN);
+      } else {
+        this.$emit(GL_DROPDOWN_HIDDEN);
+      }
+    },
+    close() {
+      if (!this.visible) {
+        return;
+      }
+      this.toggle();
+    },
+    closeAndFocus() {
+      if (!this.visible) {
+        return;
+      }
+      this.toggle();
+      this.focusToggle();
+    },
+    focusToggle() {
+      this.$refs.toggle.$el.focus();
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-outside="close" class="gl-new-dropdown dropdown btn-group">
+    <gl-button
+      :id="toggleId"
+      ref="toggle"
+      data-testid="base-dropdown-toggle"
+      :icon="icon"
+      :category="category"
+      :variant="variant"
+      :size="size"
+      :disabled="disabled"
+      :loading="loading"
+      :class="toggleButtonClasses"
+      :aria-haspopup="ariaHaspopup"
+      :aria-expanded="visible"
+      :aria-labelledby="toggleLabelledBy"
+      @click="toggle"
+    >
+      <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
+        {{ toggleText }}
+      </span>
+      <gl-icon v-if="!noCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />
+    </gl-button>
+
+    <div
+      ref="content"
+      data-testid="base-dropdown-menu"
+      class="dropdown-menu"
+      :class="{ show: visible }"
+      @keydown.esc.stop.prevent="closeAndFocus"
+    >
+      <div class="gl-new-dropdown-inner">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/base/new_dropdowns/constants.js

@@ -0,0 +1,22 @@
+export const POPPER_CONFIG = {
+  modifiers: [
+    {
+      name: 'offset',
+      options: {
+        offset: [0, 4],
+      },
+    },
+  ],
+};
+
+// base dropdown events
+export const GL_DROPDOWN_SHOWN = 'shown';
+export const GL_DROPDOWN_HIDDEN = 'hidden';
+
+// KEY Codes
+export const HOME = 'Home';
+export const END = 'End';
+export const ARROW_UP = 'ArrowUp';
+export const ARROW_DOWN = 'ArrowDown';
+export const ENTER = 'Enter';
+export const SPACE = 'Space';