@gitlab/ui 52.10.0 → 52.12.0

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.spec.js

@@ -0,0 +1,82 @@
+import { shallowMount } from '@vue/test-utils';
+import GlDisclosureDropdownGroup, {
+  GROUP_TOP_BORDER_CLASSES,
+} from './disclosure_dropdown_group.vue';
+import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
+import { mockGroups, mockProfileGroups } from './mock_data';
+
+describe('GlDisclosureDropdownGroup', () => {
+  let wrapper;
+
+  const buildWrapper = ({ propsData, slots } = {}) => {
+    wrapper = shallowMount(GlDisclosureDropdownGroup, {
+      propsData: {
+        group: mockGroups[0],
+        ...propsData,
+      },
+      slots,
+    });
+  };
+
+  const findGroup = () => wrapper.find('ul[role="group"]');
+  const findItems = () => wrapper.findAllComponents(GlDisclosureDropdownItem);
+  const findByTestId = (testid, root = wrapper) => root.find(`[data-testid="${testid}"]`);
+  const findLabelElement = () => {
+    const labelElementId = findGroup().attributes('aria-labelledby');
+    return wrapper.find(`#${labelElementId}`);
+  };
+
+  it('renders default slot content', () => {
+    buildWrapper({ slots: { default: '<li data-testid="default-slot-content"></li>' } });
+
+    expect(findByTestId('default-slot-content').exists()).toBe(true);
+  });
+
+  it('renders list of items if default content was not provided', () => {
+    buildWrapper();
+
+    expect(findItems()).toHaveLength(mockGroups[0].items.length);
+  });
+
+  it('renders `list-item` content in a default slot of `GlDisclosureDropdownItem`', () => {
+    buildWrapper({
+      slots: { 'list-item': '<li data-testid="list-item-content"></li>' },
+    });
+
+    expect(findItems()).toHaveLength(mockGroups[0].items.length);
+
+    expect(findItems().at(0).find('[data-testid="list-item-content"]').exists()).toBe(true);
+  });
+
+  describe('label', () => {
+    it('labels the group when label provided', () => {
+      buildWrapper();
+      expect(findLabelElement().text()).toBe(mockGroups[0].name);
+    });
+
+    it('does not label the group when label is not provided', () => {
+      buildWrapper({ propsData: { group: mockProfileGroups[0] } });
+      expect(findLabelElement().exists()).toBe(false);
+    });
+
+    it('allows arbitrary content for group label', () => {
+      buildWrapper({ slots: { 'group-label': '<i data-testid="custom-name"></i>' } });
+
+      expect(findByTestId('custom-name', findLabelElement()).exists()).toBe(true);
+    });
+  });
+
+  describe('separator', () => {
+    const topBorderClasses = GROUP_TOP_BORDER_CLASSES.split(' ');
+
+    it('should not add top border by default', () => {
+      buildWrapper();
+      expect(wrapper.classes()).not.toEqual(expect.arrayContaining(topBorderClasses));
+    });
+
+    it('should add top border classes when `bordered` props is set to `true`', () => {
+      buildWrapper({ propsData: { bordered: true } });
+      expect(wrapper.classes()).toEqual(expect.arrayContaining(topBorderClasses));
+    });
+  });
+});

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -0,0 +1,77 @@
+<script>
+import { uniqueId } from 'lodash';
+import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
+import { isGroup } from './utils';
+
+export const GROUP_TOP_BORDER_CLASSES = 'gl-border-t gl-pt-3 gl-mt-3';
+
+export default {
+  components: {
+    GlDisclosureDropdownItem,
+  },
+  props: {
+    /**
+     * Group of items
+     */
+    group: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: isGroup,
+    },
+    /**
+     * If 'true', will set top border for the group
+     * to separate from other groups
+     */
+    bordered: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    borderClass() {
+      return this.bordered ? GROUP_TOP_BORDER_CLASSES : null;
+    },
+    showHeader() {
+      return this.$scopedSlots['group-label'] || this.group?.name;
+    },
+    groupLabeledBy() {
+      return this.showHeader ? this.nameId : null;
+    },
+  },
+  created() {
+    this.nameId = uniqueId('gl-disclosure-dropdown-group-');
+  },
+  methods: {
+    handleAction(action) {
+      this.$emit('action', action);
+    },
+  },
+};
+</script>
+
+<template>
+  <div :class="borderClass">
+    <div
+      v-if="showHeader"
+      :id="nameId"
+      aria-hidden="true"
+      class="gl-pl-5 gl-py-2 gl-font-sm gl-font-weight-bold"
+    >
+      <slot name="group-label">{{ group.name }}</slot>
+    </div>
+    <ul role="group" :aria-labelledby="groupLabeledBy" class="gl-mb-0 gl-pl-0 gl-list-style-none">
+      <slot>
+        <gl-disclosure-dropdown-item
+          v-for="item in group.items"
+          :key="item.text"
+          :item="item"
+          @action="handleAction"
+        >
+          <slot name="list-item" :item="item"> </slot>
+        </gl-disclosure-dropdown-item>
+      </slot>
+    </ul>
+  </div>
+</template>

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.spec.js

@@ -0,0 +1,94 @@
+import { mount } from '@vue/test-utils';
+import { ENTER, SPACE } from '../constants';
+import { mockItems } from './mock_data';
+
+import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
+
+describe('GlDisclosureDropdownItem', () => {
+  let wrapper;
+
+  const buildWrapper = (propsData, slots = {}) => {
+    wrapper = mount(GlDisclosureDropdownItem, {
+      propsData,
+      slots,
+    });
+  };
+  const findItem = () => wrapper.find('[data-testid="disclosure-dropdown-item"]');
+
+  describe('when default slot content provided', () => {
+    const content = 'This is an item';
+    const slots = { default: content };
+    beforeEach(() => {
+      buildWrapper({}, slots);
+    });
+
+    it('renders it', () => {
+      expect(wrapper.text()).toContain(content);
+    });
+
+    it.each`
+      trigger                                                 | event
+      ${() => findItem().trigger('click')}                    | ${'click'}
+      ${() => findItem().trigger('keydown', { code: ENTER })} | ${'ENTER'}
+      ${() => findItem().trigger('keydown', { code: SPACE })} | ${'SPACE'}
+    `(`$event should emit 'action' event`, ({ trigger }) => {
+      trigger();
+      expect(wrapper.emitted('action')).toHaveLength(1);
+    });
+  });
+
+  describe('when item has an `href`', () => {
+    beforeEach(() => {
+      buildWrapper({ item: mockItems[0] });
+    });
+
+    const findLink = () => wrapper.find('a.dropdown-item');
+
+    it('should render a link', () => {
+      expect(findLink().exists()).toBe(true);
+    });
+
+    it('should set correct attributes', () => {
+      expect(findLink().attributes('href')).toBe(mockItems[0].href);
+      expect(findLink().attributes()).toMatchObject(mockItems[0].extraAttrs);
+    });
+  });
+
+  describe('when item has an `action`', () => {
+    const action = jest.spyOn(mockItems[1], 'action');
+
+    beforeEach(() => {
+      buildWrapper({ item: mockItems[1] });
+      action.mockClear();
+    });
+
+    const findButton = () => wrapper.find('button.dropdown-item');
+
+    it('should render a button', () => {
+      expect(findButton().exists()).toBe(true);
+    });
+
+    it('should set correct attributes', () => {
+      const attrs = { ...mockItems[1].extraAttrs };
+      delete attrs.class;
+      expect(findButton().classes()).toContain(mockItems[1].extraAttrs.class);
+      expect(findButton().attributes()).toMatchObject(attrs);
+    });
+
+    it('should call `action` on `click`', () => {
+      findButton().trigger('click');
+      expect(action).toHaveBeenCalled();
+      expect(wrapper.emitted('action')).toHaveLength(1);
+    });
+
+    it.each`
+      trigger                                                 | event
+      ${() => findItem().trigger('click')}                    | ${'click'}
+      ${() => findItem().trigger('keydown', { code: ENTER })} | ${'ENTER'}
+      ${() => findItem().trigger('keydown', { code: SPACE })} | ${'SPACE'}
+    `(`$event will execute action and emit 'action' event`, ({ trigger }) => {
+      trigger();
+      expect(wrapper.emitted('action')).toHaveLength(1);
+    });
+  });
+});

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue

@@ -0,0 +1,98 @@
+<script>
+import { ENTER, SPACE } from '../constants';
+import { stopEvent } from '../../../../utils/utils';
+import { isItem } from './utils';
+
+export const ITEM_CLASS = 'gl-dropdown-item';
+
+export default {
+  ITEM_CLASS,
+  props: {
+    item: {
+      type: Object,
+      required: false,
+      default: null,
+      validator: isItem,
+    },
+  },
+  computed: {
+    isActionItem() {
+      return this.item?.action;
+    },
+    isCustomContent() {
+      return Boolean(this.$scopedSlots.default);
+    },
+    itemComponent() {
+      if (this.isActionItem)
+        return {
+          is: 'button',
+          attrs: {
+            ...this.item.extraAttrs,
+          },
+          listeners: {
+            click: () => this.item.action(),
+          },
+        };
+      return {
+        is: 'a',
+        attrs: {
+          href: this.item.href,
+          ...this.item.extraAttrs,
+        },
+        listeners: {},
+      };
+    },
+  },
+  methods: {
+    onKeydown(event) {
+      const { code } = event;
+
+      if (code === ENTER || code === SPACE) {
+        stopEvent(event);
+        /** Instead of simply navigating or calling the action, we want
+         * the `a/button` to be the target of the event as it might have additional attributes.
+         * E.g. `a` might have `target` attribute.
+         * `bubbles` is set to `true` as the parent `li` item has this event listener and thus we'll get a loop.
+         */
+        this.$refs.item?.dispatchEvent(new MouseEvent('click', { bubbles: false }));
+        this.action();
+      }
+    },
+    action() {
+      this.$emit('action', this.item);
+    },
+  },
+};
+</script>
+
+<template>
+  <li
+    tabindex="0"
+    :class="$options.ITEM_CLASS"
+    class="gl-dropdown-item gl-focusable-dropdown-item"
+    data-testid="disclosure-dropdown-item"
+    @click="action"
+    @keydown="onKeydown"
+  >
+    <div v-if="isCustomContent" class="dropdown-item">
+      <div class="gl-dropdown-item-text-wrapper">
+        <slot></slot>
+      </div>
+    </div>
+
+    <template v-else>
+      <component
+        :is="itemComponent.is"
+        v-bind="itemComponent.attrs"
+        ref="item"
+        class="dropdown-item"
+        tabindex="-1"
+        v-on="itemComponent.listeners"
+      >
+        <span class="gl-dropdown-item-text-wrapper">
+          {{ item.text }}
+        </span>
+      </component>
+    </template>
+  </li>
+</template>

package/src/components/base/new_dropdowns/disclosure/mock_data.js

@@ -0,0 +1,156 @@
+export const mockItems = [
+  {
+    text: 'Mark as draft',
+    href: 'https://gitlab.com',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow',
+      'data-method': 'put',
+    },
+  },
+  {
+    text: 'Close merge request',
+    action: () => {
+      // eslint-disable-next-line no-console
+      console.log('CLOSED');
+    },
+    extraAttrs: {
+      class: 'gl-text-red-500!',
+      rel: 'nofollow',
+      'data-method': 'put',
+    },
+  },
+  {
+    text: 'Create new',
+    href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
+    extraAttrs: {
+      rel: 'nofollow',
+      target: '_blank',
+    },
+  },
+];
+
+export const mockItemsCustomItem = [
+  {
+    text: 'Assigned to you',
+    href: 'https://gitlab.com/dashboard/merge_requests',
+    count: '2',
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow',
+    },
+  },
+  {
+    text: 'Review requests from you',
+    href: 'https://gitlab.com/dashboard/merge_requests',
+    count: 0,
+    extraAttrs: {
+      target: '_blank',
+      rel: 'nofollow',
+    },
+  },
+];
+
+export const mockGroups = [
+  {
+    name: 'This project',
+    items: [
+      {
+        text: 'New issue',
+        href: 'https://gitlab.com/gitlab-org/gitlab/-/issues/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'New merge request',
+        href: 'https://gitlab.com/gitlab-org/gitlab/-/merge_requests/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'New snippet',
+        href: 'https://gitlab.com/gitlab-org/gitlab/-/snippets/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+    ],
+  },
+  {
+    name: 'GitLab',
+    items: [
+      {
+        text: 'New project',
+        href: 'https://gitlab.com/projects/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'New group',
+        href: 'https://gitlab.com/groups/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'New snippet',
+        href: 'https://gitlab.com/snippets/new',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+    ],
+  },
+];
+
+export const mockProfileGroups = [
+  {
+    items: [
+      {
+        text: 'Set status',
+        href: 'https://gitlab.com',
+        icon: 'status_success',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'Edit profile',
+        href: '#',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+      {
+        text: 'Preferences',
+        href: '#',
+        extraAttrs: {
+          target: '_blank',
+          rel: 'nofollow',
+        },
+      },
+    ],
+  },
+  {
+    items: [
+      {
+        text: 'Sign out',
+        action: () => {
+          // eslint-disable-next-line no-alert
+          window.confirm('Are you sure?');
+        },
+      },
+    ],
+  },
+];

package/src/components/base/new_dropdowns/disclosure/utils.js

@@ -0,0 +1,18 @@
+const itemValidator = ({ text, href, action }) =>
+  Boolean(text?.length && (href?.length || typeof action === 'function'));
+
+const isItem = (item) => Boolean(item) && itemValidator(item);
+
+const isGroup = (group) =>
+  Boolean(group) &&
+  Array.isArray(group.items) &&
+  Boolean(group.items.length) &&
+  group.items.every(isItem);
+
+const itemsValidator = (items) => items.every(isItem) || items.every(isGroup);
+
+const isAllItems = (items) => items.every(isItem);
+
+const isAllGroups = (items) => items.every(isGroup);
+
+export { itemsValidator, isItem, isGroup, isAllItems, isAllGroups };

package/src/components/base/new_dropdowns/disclosure/utils.spec.js

@@ -0,0 +1,73 @@
+import { itemsValidator, isItem, isGroup } from './utils';
+import { mockItems, mockGroups } from './mock_data';
+
+describe('isItem', () => {
+  it.each([null, undefined, {}, { text: null }, { text: 'group', items: [] }])(
+    'isItem(%p) === false',
+    (notAnItem) => {
+      expect(isItem(notAnItem)).toBe(false);
+    }
+  );
+
+  it.each([
+    { text: 'Action', href: 'gitlab.com' },
+    {
+      text: 'Action',
+      action: () => {},
+    },
+    {
+      text: 'Action',
+      href: 'gitlab.com',
+      action: () => {},
+    },
+  ])('isItem(%p) === true', (item) => {
+    expect(isItem(item)).toBe(true);
+  });
+});
+
+describe('isGroup', () => {
+  it.each([null, undefined, {}, { name: null }, { name: 'group', items: [] }])(
+    'isGroup(%p) === false',
+    (notAGroup) => {
+      expect(isGroup(notAGroup)).toBe(false);
+    }
+  );
+
+  it.each([
+    {
+      name: 'group',
+      items: [
+        { text: 'Action', href: 'gitlab.com' },
+        {
+          text: 'Action',
+          action: () => {},
+        },
+      ],
+    },
+    {
+      items: [
+        { text: 'Action', href: 'gitlab.com' },
+        {
+          text: 'Action',
+          action: () => {},
+        },
+      ],
+    },
+  ])('isGroup(%p) === true', (group) => {
+    expect(isGroup(group)).toBe(true);
+  });
+});
+
+describe('itemsValidator', () => {
+  it.each`
+    description                   | value                                        | expected
+    ${'valid flat items'}         | ${mockItems}                                 | ${true}
+    ${'valid grouped items'}      | ${mockGroups}                                | ${true}
+    ${'empty list'}               | ${[]}                                        | ${true}
+    ${'invalid items'}            | ${[{ foo: true }]}                           | ${false}
+    ${'group with invalid items'} | ${[{ name: 'foo', items: [{ foo: true }] }]} | ${false}
+    ${'sibling groups and items'} | ${[...mockItems, ...mockGroups]}             | ${false}
+  `('returns $expected given $description', ({ value, expected }) => {
+    expect(itemsValidator(value)).toBe(expected);
+  });
+});

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

@@ -0,0 +1,6 @@
+// TODO: remove in scope of https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2111
+.gl-focusable-dropdown-item {
+  &:focus {
+    @include gl-focus($inset: true);
+  }
+}

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -40,9 +40,3 @@ $clear-button-size: 24px;
     right: $gl-spacing-scale-2;
   }
 }
-
-.gl-listbox-item {
-  &:focus {
-    @include gl-focus($inset: true);
-  }
-}

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

@@ -105,7 +105,7 @@ export default {
       type: String,
       required: false,
       default: buttonCategoryOptions.primary,
-      validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
+      validator: (value) => value in buttonCategoryOptions,
     },
     /**
      * Styling option - dropdown's toggle variant
@@ -114,7 +114,7 @@ export default {
       type: String,
       required: false,
       default: dropdownVariantOptions.default,
-      validator: (value) => Object.keys(dropdownVariantOptions).includes(value),
+      validator: (value) => value in dropdownVariantOptions,
     },
     /**
      * The size of the dropdown toggle
@@ -123,7 +123,7 @@ export default {
       type: String,
       required: false,
       default: 'medium',
-      validator: (value) => Object.keys(buttonSizeOptions).includes(value),
+      validator: (value) => value in buttonSizeOptions,
     },
     /**
      * Icon name that will be rendered in the toggle button
@@ -610,7 +610,7 @@ export default {
     <component
       :is="listboxTag"
       v-if="showList"
-      id="listbox"
+      :id="listboxId"
       ref="list"
       :aria-labelledby="listAriaLabelledBy || headerId || toggleId"
       role="listbox"

package/src/components/base/new_dropdowns/listbox/listbox_group.vue

@@ -16,7 +16,7 @@ export default {
 
 <template>
   <ul role="group" :aria-labelledby="nameId" class="gl-mb-0 gl-pl-0 gl-list-style-none">
-    <li :id="nameId" role="presentation" class="gl-pl-5! gl-py-2! gl-font-base gl-font-weight-bold">
+    <li :id="nameId" role="presentation" class="gl-pl-5! gl-py-2! gl-font-sm gl-font-weight-bold">
       <slot name="group-label">{{ name }}</slot>
     </li>
     <slot></slot>

package/src/components/base/new_dropdowns/listbox/listbox_item.vue

@@ -51,7 +51,7 @@ export default {
 
 <template>
   <li
-    class="gl-dropdown-item gl-listbox-item"
+    class="gl-dropdown-item gl-focusable-dropdown-item"
     role="option"
     :tabindex="isFocused ? 0 : -1"
     :aria-selected="isSelected"