@gitlab/ui 59.5.0 → 60.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "59.5.0",
+  "version": "60.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -90,7 +90,7 @@
     "@gitlab/eslint-plugin": "18.3.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.36.0",
+    "@gitlab/svgs": "3.38.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/scss_to_js/scss_variables.js

@@ -331,7 +331,8 @@ export const glIconRadio = ''
 export const defaultIconSize = '1rem'
 export const glIconSizes = '8 12 14 16 24 32 48 72'
 export const glDropdownWidth = '15rem'
-export const glNewDropdownWidth = '16rem'
+export const glNewDropdownMinWidth = '15.5rem'
+export const glNewDropdownMaxWidth = '28.5rem'
 export const glDropdownWidthNarrow = '10rem'
 export const glDropdownWidthWide = '25rem'
 export const glMaxDropdownMaxHeight = '19.5rem'

package/scss_to_js/scss_variables.json

@@ -1766,9 +1766,14 @@
       "compiledValue": "15rem"
     },
     {
-      "name": "$gl-new-dropdown-width",
-      "value": "px-to-rem(256px)",
-      "compiledValue": "16rem"
+      "name": "$gl-new-dropdown-min-width",
+      "value": "px-to-rem(248px)",
+      "compiledValue": "15.5rem"
+    },
+    {
+      "name": "$gl-new-dropdown-max-width",
+      "value": "px-to-rem(456px)",
+      "compiledValue": "28.5rem"
     },
     {
       "name": "$gl-dropdown-width-narrow",

package/src/components/base/banner/banner.vue

@@ -95,7 +95,7 @@ export default {
     body-class="gl-display-flex gl-p-0!"
   >
     <div v-if="svgPath" class="gl-banner-illustration">
-      <img :src="svgPath" alt="" role="presentation" />
+      <img :src="svgPath" alt="" />
     </div>
     <div class="gl-banner-content">
       <h2 class="gl-banner-title">{{ title }}</h2>

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

@@ -1,22 +1,23 @@
 ## Usage
 
-This component provides a `<slot #avatar>` so an avatar can appear before the first breadcrumb.
+This component also allows for optional avatars on each item.
+
+`avatarPath` should passed along with `text` and `href` in `items`.
+Here is an example of how an item with an avatar should look:
 
 **note:** the component supports passing the property `to` in the list items to enable navigation
 through `vue-router`
 
 ### Example
 
-```html
-<gl-breadcrumb :items="items">
-  <template #avatar>
-    <img 
-      alt=""
-      class="gl-breadcrumb-avatar-tile"
-      src="/path/to/image.png"
-      width="16"
-      height="16"
-    />
-  </template>
-</gl-breadcrumb>
+```js
+items = [
+  {
+    text: 'First item',
+    href: '#',
+    avatarPath: '/avatar.png',
+  },
+];
+
+<gl-breadcrumb :items="items" />
 ```

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -16,14 +16,6 @@ $breadcrumb-max-width: $grid-size * 16;
   }
 }
 
-.gl-breadcrumb-avatar-tile {
-  @include gl-mr-2;
-  @include gl-border-1;
-  @include gl-border-solid;
-  @include gl-border-gray-a-08;
-  @include gl-rounded-base;
-}
-
 // bootstrap overrides
 .gl-breadcrumb-item {
   @include gl-font-sm;

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

@@ -1,5 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import avatarPath1 from '../../../../static/img/avatar.png';
+import avatarPath3 from '../../../../static/img/avatar_1.png';
 import Breadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
@@ -7,23 +9,27 @@ describe('Breadcrumb component', () => {
   let wrapper;
 
   const items = [
-    { text: 'first_breadcrumb', href: 'http://gitlab.com' },
+    { text: 'first_breadcrumb', href: 'https://gitlab.com', avatarPath: avatarPath1 },
     {
       text: 'second_breadcrumb',
       to: 'to_value',
     },
-    { text: 'third_breadcrumb', href: 'http://about.gitlab.com' },
+    {
+      text: 'third_breadcrumb',
+      href: 'https://about.gitlab.com',
+      avatarPath: avatarPath3,
+    },
   ];
 
   const extraItems = [
-    { text: 'fourth_breadcrumb', href: 'http://gitlab.com' },
+    { text: 'fourth_breadcrumb', href: 'https://gitlab.com' },
     {
       text: 'fifth_breadcrumb',
       to: 'to_value',
     },
   ];
 
-  const findAvatarSlot = () => wrapper.find('[data-testid="avatar-slot"]');
+  const findAllAvatars = () => wrapper.findAll('[data-testid="avatar"]');
   const findBreadcrumbItems = () => wrapper.findAllComponents(GlBreadcrumbItem);
   const findCollapsedListExpander = () => wrapper.find('[data-testid="collapsed-expander"]');
 
@@ -35,9 +41,6 @@ describe('Breadcrumb component', () => {
   const createComponent = (propsData = { items }) => {
     wrapper = shallowMount(Breadcrumb, {
       propsData,
-      slots: {
-        avatar: '<div data-testid="avatar-slot"></div>',
-      },
       stubs: {
         GlBreadcrumbItem,
       },
@@ -50,19 +53,19 @@ describe('Breadcrumb component', () => {
     ];
   };
 
-  describe('slots', () => {
-    it('has an avatar slot', () => {
+  describe('items', () => {
+    it('has one breadcrumb-item for each item in the items props', () => {
       createComponent();
 
-      expect(findAvatarSlot().exists()).toBe(true);
+      expect(findBreadcrumbItems()).toHaveLength(items.length);
     });
   });
 
-  describe('items', () => {
-    it('has one breadcrumb-item for each item in the items props', () => {
+  describe('avatars', () => {
+    it('renders 2 avatars when 2 avatarPaths are passed', () => {
       createComponent();
 
-      expect(findBreadcrumbItems()).toHaveLength(items.length);
+      expect(findAllAvatars()).toHaveLength(2);
     });
   });
 

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

@@ -1,24 +1,19 @@
-import avatarPath from '../../../../static/img/avatar.png';
+import avatarPath1 from '../../../../static/img/avatar_1.png';
+import avatarPath2 from '../../../../static/img/avatar_2.png';
 import GlBreadcrumb from './breadcrumb.vue';
 import readme from './breadcrumb.md';
 
 const template = `
     <gl-breadcrumb
         :items="items"
-    >
-      <template #avatar>
-        <img alt=""
-            class="gl-breadcrumb-avatar-tile" src="${avatarPath}"
-            width="16"
-            height="16" />
-      </template>
-    </gl-breadcrumb>
+    />
   `;
 
 const defaultItems = [
   {
     text: 'First item',
     href: '#',
+    avatarPath: avatarPath1,
   },
   {
     text: 'Second item',
@@ -27,6 +22,7 @@ const defaultItems = [
   {
     text: 'Third item',
     href: '#',
+    avatarPath: avatarPath2,
   },
   {
     text: 'Fourth item',

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -2,6 +2,7 @@
 <script>
 import { BBreadcrumb } from 'bootstrap-vue';
 import GlButton from '../button/button.vue';
+import GlAvatar from '../avatar/avatar.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
@@ -12,6 +13,7 @@ export default {
     BBreadcrumb,
     GlButton,
     GlBreadcrumbItem,
+    GlAvatar,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -25,9 +27,9 @@ export default {
       type: Array,
       required: true,
       default: () => [{ text: '', href: '' }],
-      validator: (links) => {
-        return links.every((link) => {
-          const keys = Object.keys(link);
+      validator: (items) => {
+        return items.every((item) => {
+          const keys = Object.keys(item);
           return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
         });
       },
@@ -82,8 +84,6 @@ export default {
 </script>
 <template>
   <nav class="gl-breadcrumbs" aria-label="Breadcrumb">
-    <!-- @slot The avatar to display. -->
-    <slot name="avatar"></slot>
     <b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
       <template v-for="(item, index) in items">
         <!-- eslint-disable-next-line vue/valid-v-for (for @vue/compat) -->
@@ -94,8 +94,16 @@ export default {
           :href="item.href"
           :to="item.to"
           :aria-current="getAriaCurrentAttr(index)"
-          >{{ item.text }}</gl-breadcrumb-item
-        >
+          ><gl-avatar
+            v-if="item.avatarPath"
+            :src="item.avatarPath"
+            :size="16"
+            aria-hidden="true"
+            class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 gl-rounded-base!"
+            shape="rect"
+            data-testid="avatar"
+          /><span>{{ item.text }}</span>
+        </gl-breadcrumb-item>
 
         <template v-if="showCollapsedBreadcrumbsExpander(index)">
           <!-- eslint-disable-next-line vue/require-v-for-key (for @vue/compat) -->

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

@@ -80,6 +80,15 @@ describe('base dropdown', () => {
       );
     });
 
+    it('should pass custom options to popper.js, overriding built-in ones', async () => {
+      await buildWrapper({ placement: 'right', popperOptions: { placement: 'auto-start' } });
+      expect(mockCreatePopper).toHaveBeenCalledWith(
+        findDefaultDropdownToggle().element,
+        findDropdownMenu().element,
+        { ...POPPER_CONFIG, placement: 'auto-start' }
+      );
+    });
+
     it('should update popper instance when component is updated', async () => {
       await buildWrapper();
       await findDefaultDropdownToggle().trigger('click');

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

@@ -117,6 +117,11 @@ export default {
       required: false,
       default: null,
     },
+    popperOptions: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -192,6 +197,7 @@ export default {
       return {
         placement: dropdownPlacements[this.placement],
         ...POPPER_CONFIG,
+        ...this.popperOptions,
       };
     },
   },

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.md

@@ -122,3 +122,11 @@ To render custom group labels, use the `group-label` scoped slot:
 
 Besides default components, disclosure dropdown can render miscellaneous content inside it.
 In this case the user is responsible for handling all events and navigation inside the disclosure.
+
+#### Dealing with long option texts
+
+- Some options might have long non-wrapping text that would overflow the dropdown maximum width. In
+such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
+`GlTruncate`.
+- If the toggle text reflects the selected option text, it might be necessary to truncate
+it too by overriding the `#toggle` slot.

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

@@ -37,6 +37,13 @@ describe('GlDisclosureDropdown', () => {
 
   jest.spyOn(utils, 'filterVisible').mockImplementation((items) => items);
 
+  it('passes custom popper.js options to the base dropdown', () => {
+    const popperOptions = { foo: 'bar' };
+    buildWrapper({ popperOptions });
+
+    expect(findBaseDropdown().props('popperOptions')).toEqual(popperOptions);
+  });
+
   describe('toggle text', () => {
     it('should pass toggle text to the base dropdown', () => {
       const toggleText = 'Merge requests';

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

@@ -164,6 +164,15 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Options to be passed to the underlying Popper.js instance.
+     * Overrides built-in options.
+     */
+    popperOptions: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -278,6 +287,7 @@ export default {
     :loading="loading"
     :no-caret="noCaret"
     :placement="placement"
+    :popper-options="popperOptions"
     class="gl-disclosure-dropdown"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"

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

@@ -20,7 +20,8 @@
     @include gl-border-gray-200;
     @include gl-rounded-lg;
     @include gl-shadow-md;
-    width: $gl-new-dropdown-width;
+    min-width: $gl-new-dropdown-min-width;
+    max-width: $gl-new-dropdown-max-width;
     z-index: 1000;
   }
 

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

@@ -141,3 +141,11 @@ Screen reader will announce this text when the list is updated.
   </template>
 </gl-collapsible-listbox>
 ```
+
+#### Dealing with long option texts
+
+- Some options might have long non-wrapping text that would overflow the dropdown maximum width. In
+such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
+`GlTruncate`.
+- If the toggle text reflects the selected option text, it might be necessary to truncate
+it too by overriding the `#toggle` slot.

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

@@ -43,6 +43,13 @@ describe('GlCollapsibleListbox', () => {
   const findResetButton = () => wrapper.find("[data-testid='listbox-reset-button']");
   const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
 
+  it('passes custom popper.js options to the base dropdown', () => {
+    const popperOptions = { foo: 'bar' };
+    buildWrapper({ popperOptions });
+
+    expect(findBaseDropdown().props('popperOptions')).toEqual(popperOptions);
+  });
+
   describe('toggle text', () => {
     describe.each`
       toggleText          | multiple | selected                  | expectedToggleText

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -10,6 +10,7 @@ import GlButtonGroup from '../../button_group/button_group.vue';
 import GlButton from '../../button/button.vue';
 import GlBadge from '../../badge/badge.vue';
 import GlAvatar from '../../avatar/avatar.vue';
+import GlTruncate from '../../../utilities/truncate/truncate.vue';
 import { makeContainer } from '../../../../utils/story_decorators/container';
 import { setStoryTimeout } from '../../../../utils/test_utils';
 import { disableControls } from '../../../../utils/stories_utils';
@@ -20,6 +21,7 @@ import {
   ARG_TYPE_SUBCATEGORY_ACCESSIBILITY,
   ARG_TYPE_SUBCATEGORY_INFINITE_SCROLL,
 } from '../../../../utils/stories_constants';
+import { POSITION } from '../../../utilities/truncate/constants';
 import readme from './listbox.md';
 import { mockOptions, mockGroups, mockUsers } from './mock_data';
 import { flattenedOptions } from './utils';
@@ -755,7 +757,6 @@ export const InfiniteScroll = (
     },
   }),
 });
-
 InfiniteScroll.argTypes = {
   ...disableControls(['infiniteScroll', 'infiniteScrollLoading', 'items']),
 };
@@ -764,3 +765,59 @@ InfiniteScroll.parameters = {
 };
 InfiniteScroll.args = generateProps();
 InfiniteScroll.decorators = [makeContainer({ height: '370px' })];
+
+export const WithLongContent = (args, { argTypes: { items, ...argTypes } }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    GlCollapsibleListbox,
+    GlButton,
+    GlTruncate,
+  },
+  data() {
+    const positions = Object.values(POSITION);
+    const longItems = Array.from({ length: positions.length }).map((_, index) => ({
+      value: `long_value_${index}`,
+      text: `${
+        index + 1
+      }. This is a super long option. Its text is so long that it overflows the max content width. Thankfully, we are truncating it!`,
+      truncatePosition: positions[index],
+    }));
+
+    return {
+      selected: longItems[0].value,
+      items: longItems,
+    };
+  },
+  mounted() {
+    if (this.startOpened) {
+      openListbox(this);
+    }
+  },
+  computed: {
+    customToggleText() {
+      return this.items.find(({ value }) => value === this.selected).text;
+    },
+    numberOfSearchResults() {
+      return this.filteredItems.length === 1 ? '1 result' : `${this.filteredItems.length} results`;
+    },
+  },
+  template: template(
+    `
+    <template #toggle>
+      <gl-button class="gl-w-30">
+        <gl-truncate :text="customToggleText" />
+      </gl-button>
+    </template>
+    <template #list-item="{ item }">
+      <gl-truncate :text="item.text" :position="item.truncatePosition" />
+    </template>
+  `,
+    {
+      label: `<span class="gl-my-0" id="listbox-label">Select the longest option</span>`,
+      bindingOverrides: {
+        ':items': 'items',
+      },
+    }
+  ),
+});
+WithLongContent.args = generateProps();

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

@@ -287,6 +287,15 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Options to be passed to the underlying Popper.js instance.
+     * Overrides built-in options.
+     */
+    popperOptions: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -585,6 +594,7 @@ export default {
     :loading="loading"
     :no-caret="noCaret"
     :placement="placement"
+    :popper-options="popperOptions"
     @[$options.events.GL_DROPDOWN_SHOWN]="onShow"
     @[$options.events.GL_DROPDOWN_HIDDEN]="onHide"
   >

package/src/scss/variables.scss

@@ -464,7 +464,8 @@ $gl-icon-sizes: 8 12 14 16 24 32 48 72;
 
 // Dropdowns
 $gl-dropdown-width: px-to-rem(240px);
-$gl-new-dropdown-width: px-to-rem(256px);
+$gl-new-dropdown-min-width: px-to-rem(248px);
+$gl-new-dropdown-max-width: px-to-rem(456px);
 $gl-dropdown-width-narrow: px-to-rem(160px);
 $gl-dropdown-width-wide: px-to-rem(400px);
 $gl-max-dropdown-max-height: px-to-rem(312px);