@gitlab/ui 60.0.0 → 60.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "60.0.0",
+  "version": "60.2.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/broadcast_message/broadcast_message.vue

@@ -74,7 +74,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-broadcast-message" :class="`${theme} ${type}`" role="alert">
+  <div class="gl-broadcast-message" :class="`${theme} ${type}`">
     <div class="gl-broadcast-message-content">
       <div class="gl-broadcast-message-icon gl-line-height-normal">
         <gl-icon :name="iconName" />

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);