@gitlab/ui 39.3.2 → 39.5.1

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.2",
+  "version": "39.5.1",
   "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",
@@ -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/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/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/filtered_search/filtered_search_term.vue

@@ -65,7 +65,8 @@ export default {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
   },
@@ -111,24 +112,29 @@ export default {
       Emitted when this term token is clicked.
       @event activate
     -->
+
     <!--
       Emitted when this term token will lose its focus.
       @event deactivate
     -->
+
     <!--
       Emitted when autocomplete entry is selected.
       @event replace
       @property {object} token Replacement token configuration.
     -->
+
     <!--
       Emitted when the token is submitted.
       @event submit
     -->
+
     <!--
       Emitted when Space is pressed in-between term text.
       @event split
       @property {array} newTokens Token configurations
     -->
+
     <gl-filtered-search-token-segment
       ref="segment"
       v-model="internalValue"
@@ -158,6 +164,7 @@ export default {
           {{ item.title }}
         </gl-filtered-search-suggestion>
       </template>
+
       <template #view>
         <input
           v-if="placeholder"
@@ -167,6 +174,7 @@ export default {
           :aria-label="placeholder"
           data-testid="filtered-search-term-input"
         />
+
         <template v-else>{{ value.data }}</template>
       </template>
     </gl-filtered-search-token-segment>

package/src/components/base/filtered_search/filtered_search_token.vue

@@ -67,7 +67,8 @@ export default {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
   },
@@ -299,6 +300,7 @@ export default {
       Emitted when the token is submitted.
       @event submit
     -->
+
     <gl-filtered-search-token-segment
       key="title-segment"
       :value="config.title"
@@ -318,10 +320,12 @@ export default {
           class="gl-filtered-search-token-type"
           :class="getAdditionalSegmentClasses($options.segments.SEGMENT_TITLE)"
           view-only
-          >{{ inputValue }}</gl-token
         >
+          {{ inputValue }}
+        </gl-token>
       </template>
     </gl-filtered-search-token-segment>
+
     <gl-filtered-search-token-segment
       key="operator-segment"
       v-model="tokenValue.operator"
@@ -343,9 +347,11 @@ export default {
           variant="search-value"
           :class="getAdditionalSegmentClasses($options.segments.SEGMENT_OPERATOR)"
           view-only
-          >{{ operatorDescription }}</gl-token
         >
+          {{ operatorDescription }}
+        </gl-token>
       </template>
+
       <template #option="{ option }">
         <div class="gl-display-flex">
           {{ option.value }}
@@ -355,16 +361,19 @@ export default {
         </div>
       </template>
     </gl-filtered-search-token-segment>
+
     <!--
       Emitted when a suggestion has been selected.
       @event select
       @type {string} value The value of the selected suggestion.
     -->
+
     <!--
       Emitted when Space is pressed in-between term text.
       @event split
       @property {array} newTokens Token configurations
     -->
+
     <gl-filtered-search-token-segment
       v-if="hasDataOrDataSegmentIsCurrentlyActive"
       key="data-segment"
@@ -386,10 +395,13 @@ export default {
     >
       <template #suggestions>
         <!-- @slot The suggestions (implemented with GlFilteredSearchSuggestion). -->
+
         <slot name="suggestions"></slot>
       </template>
+
       <template #view="{ inputValue }">
         <!-- @slot Used to customize how the token is rendered. -->
+
         <slot
           name="view-token"
           v-bind="{
@@ -412,6 +424,7 @@ export default {
               @slot Template for token value in inactive state
               @binding {array} suggestions Slot for rendering autocomplete suggestions when no options are provided.
               -->
+
               <slot name="view" v-bind="{ inputValue }">{{ inputValue }}</slot>
             </span>
           </gl-token>

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -79,7 +79,8 @@ export default {
     },
     cursorPosition: {
       type: String,
-      required: true,
+      required: false,
+      default: 'end',
       validator: (value) => ['start', 'end'].includes(value),
     },
   },
@@ -346,6 +347,7 @@ export default {
         @keydown="handleInputKeydown"
         @blur="handleBlur"
       />
+
       <portal :key="`operator-${_uid}`" :to="portalName">
         <gl-filtered-search-suggestion-list
           v-if="hasOptionsOrSuggestions"
@@ -361,11 +363,10 @@ export default {
               :value="option.value"
               :icon-name="option.icon"
             >
-              <slot name="option" v-bind="{ option }">
-                {{ option[optionTextField] }}
-              </slot>
+              <slot name="option" v-bind="{ option }"> {{ option[optionTextField] }} </slot>
             </gl-filtered-search-suggestion>
           </template>
+
           <slot v-else name="suggestions"></slot>
         </gl-filtered-search-suggestion-list>
       </portal>

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