@gitlab/ui 78.2.3 → 78.3.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Mar 2024 17:32:26 GMT
+ * Generated on Fri, 22 Mar 2024 12:26:32 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Mar 2024 17:32:27 GMT
+ * Generated on Fri, 22 Mar 2024 12:26:32 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Mar 2024 17:32:27 GMT
+ * Generated on Fri, 22 Mar 2024 12:26:32 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Mar 2024 17:32:26 GMT
+ * Generated on Fri, 22 Mar 2024 12:26:32 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 21 Mar 2024 17:32:27 GMT
+// Generated on Fri, 22 Mar 2024 12:26:32 GMT
 
 $gl-text-tertiary: #737278 !default;
 $gl-text-secondary: #89888d !default;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 21 Mar 2024 17:32:27 GMT
+// Generated on Fri, 22 Mar 2024 12:26:32 GMT
 
 $gl-text-tertiary: #89888d !default;
 $gl-text-secondary: #737278 !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "78.2.3",
+  "version": "78.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -171,7 +171,7 @@
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
     "storybook": "^7.6.17",
-    "storybook-dark-mode": "4.0.0",
+    "storybook-dark-mode": "4.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",
     "tailwind-config-viewer": "1.7.3",

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

@@ -11,15 +11,15 @@ $breadcrumb-max-width: $grid-size * 16;
   @include gl-align-items-center;
   @include gl-line-height-normal;
   @include gl-m-0;
-  @include media-breakpoint-down(xs) {
-    @include gl-flex-wrap;
-  }
+  @include gl-flex-nowrap;
+  @include gl-max-w-full;
 }
 
 // bootstrap overrides
 .gl-breadcrumb-item {
   @include gl-font-sm;
   @include gl-line-height-normal;
+  @include gl-flex-shrink-0;
 
   &:not(:last-child)::after {
     @include gl-text-gray-200;
@@ -29,9 +29,6 @@ $breadcrumb-max-width: $grid-size * 16;
 
   > a {
     @include gl-text-gray-700;
-    @include media-breakpoint-down(xs) {
-      @include str-truncated($breadcrumb-max-width);
-    }
 
     &:active,
     &:focus,

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

@@ -1,15 +1,20 @@
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import avatarPath1 from '../../../../static/img/avatar.png';
 import avatarPath3 from '../../../../static/img/avatar_1.png';
-import GlBreadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue';
+import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
+import GlDisclosureDropdownItem from '../new_dropdowns/disclosure/disclosure_dropdown_item.vue';
+import GlBreadcrumb from './breadcrumb.vue';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
 describe('Breadcrumb component', () => {
   let wrapper;
 
   const items = [
-    { text: 'first_breadcrumb', href: 'https://gitlab.com', avatarPath: avatarPath1 },
+    {
+      text: 'first_breadcrumb',
+      href: 'https://gitlab.com',
+      avatarPath: avatarPath1,
+    },
     {
       text: 'second_breadcrumb',
       to: 'to_value',
@@ -21,41 +26,44 @@ describe('Breadcrumb component', () => {
     },
   ];
 
-  const extraItems = [
-    { text: 'fourth_breadcrumb', href: 'https://gitlab.com' },
-    {
-      text: 'fifth_breadcrumb',
-      to: 'to_value',
-    },
-  ];
-
   const findAllAvatars = () => wrapper.findAll('[data-testid="avatar"]');
   const findBreadcrumbItems = () => wrapper.findAllComponents(GlBreadcrumbItem);
-  const findCollapsedListExpander = () => wrapper.find('[data-testid="collapsed-expander"]');
+  const findOverflowDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
 
   const findVisibleBreadcrumbItems = () =>
     findBreadcrumbItems().wrappers.filter((item) => item.isVisible());
-  const findHiddenBreadcrumbItems = () =>
-    findBreadcrumbItems().wrappers.filter((item) => !item.isVisible());
 
   const createComponent = (propsData = { items }) => {
-    wrapper = shallowMount(GlBreadcrumb, {
+    wrapper = mount(GlBreadcrumb, {
       propsData,
       stubs: {
         GlBreadcrumbItem,
+        GlDisclosureDropdown,
       },
     });
+  };
+
+  const mockWrapperWidth = (widthInPx) => {
+    wrapper.element.style.width = `${widthInPx}px`;
+
+    Object.defineProperty(wrapper.element, 'clientWidth', {
+      get: () => widthInPx,
+      configurable: true,
+    });
+  };
 
-    wrapper.vm.$refs.firstItem = [
-      {
-        querySelector: () => ({ focus: jest.fn() }),
-      },
-    ];
+  const mockWideWrapperWidth = () => {
+    mockWrapperWidth(1000);
+  };
+
+  const mockSmallWrapperWidth = () => {
+    mockWrapperWidth(1);
   };
 
   describe('items', () => {
-    it('has one breadcrumb-item for each item in the items props', () => {
+    it('has one breadcrumb-item for each item in the items props', async () => {
       createComponent();
+      await wrapper.vm.$nextTick();
 
       expect(findBreadcrumbItems()).toHaveLength(items.length);
     });
@@ -75,9 +83,36 @@ describe('Breadcrumb component', () => {
     });
   });
 
+  describe('showMoreLabel', () => {
+    describe('when provided', () => {
+      beforeEach(async () => {
+        createComponent({ items, showMoreLabel: 'More...' });
+        mockSmallWrapperWidth();
+        await wrapper.vm.$nextTick();
+      });
+
+      it('uses prop', () => {
+        expect(findOverflowDropdown().props('toggleText')).toBe('More...');
+      });
+    });
+
+    describe('when not provided', () => {
+      beforeEach(async () => {
+        createComponent();
+        mockSmallWrapperWidth();
+        await wrapper.vm.$nextTick();
+      });
+
+      it('uses default', () => {
+        expect(findOverflowDropdown().props('toggleText')).toBe('Show more breadcrumbs');
+      });
+    });
+  });
+
   describe('avatars', () => {
-    it('renders 2 avatars when 2 avatarPaths are passed', () => {
+    it('renders 2 avatars when 2 avatarPaths are passed', async () => {
       createComponent();
+      await wrapper.vm.$nextTick();
 
       expect(findAllAvatars()).toHaveLength(2);
     });
@@ -86,6 +121,7 @@ describe('Breadcrumb component', () => {
   describe('bindings', () => {
     beforeEach(() => {
       createComponent();
+      mockWideWrapperWidth();
     });
 
     it('first breadcrumb has text, href && ariaCurrent=`false` bound', () => {
@@ -114,12 +150,14 @@ describe('Breadcrumb component', () => {
   });
 
   describe('collapsible', () => {
-    describe(`when breadcrumbs list size is NOT larger than ${COLLAPSE_AT_SIZE}`, () => {
+    describe(`when there is enough room to fit all items`, () => {
       beforeEach(() => {
         createComponent();
+        mockWideWrapperWidth();
       });
+
       it('should not display collapsed list expander', () => {
-        expect(findCollapsedListExpander().exists()).toBe(false);
+        expect(findOverflowDropdown().exists()).toBe(false);
       });
 
       it('should display all items visible', () => {
@@ -127,27 +165,21 @@ describe('Breadcrumb component', () => {
       });
     });
 
-    describe(`when breadcrumbs list size is larger than ${COLLAPSE_AT_SIZE}`, () => {
-      beforeEach(() => {
-        createComponent({ items: [...items, ...extraItems] });
-      });
-      it('should display collapsed list expander', () => {
-        expect(findCollapsedListExpander().exists()).toBe(true);
+    describe(`when there is NOT enough room to fit all items`, () => {
+      beforeEach(async () => {
+        createComponent();
+        mockSmallWrapperWidth();
+        await wrapper.vm.$nextTick();
       });
 
-      it('should display only first && 2 last items and the rest as hidden', () => {
-        const alwaysVisibleNum = 3;
-        expect(findVisibleBreadcrumbItems()).toHaveLength(alwaysVisibleNum);
-        expect(findHiddenBreadcrumbItems()).toHaveLength(
-          items.length + extraItems.length - alwaysVisibleNum
-        );
+      it('should display overflow dropdown', () => {
+        expect(findOverflowDropdown().exists()).toBe(true);
       });
 
-      it('should expand the list on expander click', async () => {
-        findCollapsedListExpander().vm.$emit('click');
-        await nextTick();
-        expect(findHiddenBreadcrumbItems()).toHaveLength(0);
-        expect(findVisibleBreadcrumbItems()).toHaveLength(items.length + extraItems.length);
+      it('moves the overflowing items into the dropdown', () => {
+        const fittingItems = findBreadcrumbItems().length;
+        const overflowingItems = wrapper.findAllComponents(GlDisclosureDropdownItem).length;
+        expect(fittingItems + overflowingItems).toEqual(items.length);
       });
     });
   });

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

@@ -10,6 +10,15 @@ const template = `
     />
   `;
 
+const collapsedTemplate = `
+  <div style="max-width: 300px">
+    <gl-breadcrumb
+        :items="items"
+        :aria-label="ariaLabel"
+    />
+  </div>
+`;
+
 const defaultItems = [
   {
     text: 'First item',
@@ -45,6 +54,14 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = generateProps();
 
+const CollapsedTemplate = (args, { argTypes }) => ({
+  components: {
+    GlBreadcrumb,
+  },
+  props: Object.keys(argTypes),
+  template: collapsedTemplate,
+});
+
 export default {
   title: 'base/breadcrumb',
   component: GlBreadcrumb,
@@ -77,5 +94,5 @@ const extraItems = [
   },
 ];
 
-export const CollapsedItems = Template.bind({});
+export const CollapsedItems = CollapsedTemplate.bind({});
 CollapsedItems.args = generateProps({ items: [...defaultItems, ...extraItems] });

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

@@ -1,20 +1,20 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BBreadcrumb } from 'bootstrap-vue';
-import GlButton from '../button/button.vue';
+import debounce from 'lodash/debounce';
+import { translate } from '../../../utils/i18n';
 import GlAvatar from '../avatar/avatar.vue';
+import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
-export const COLLAPSE_AT_SIZE = 4;
-
 export default {
   name: 'GlBreadcrumb',
   components: {
     BBreadcrumb,
-    GlButton,
     GlBreadcrumbItem,
     GlAvatar,
+    GlDisclosureDropdown,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -40,47 +40,118 @@ export default {
       required: false,
       default: 'Breadcrumb',
     },
+    /**
+     * The label for the collapsed dropdown toggle. Screen-reader only.
+     */
+    showMoreLabel: {
+      type: String,
+      required: false,
+      default: () => translate('GlBreadcrumb.showMoreLabel', 'Show more breadcrumbs'),
+    },
   },
   data() {
     return {
-      isListCollapsed: true,
+      fittingItems: [...this.items], // array of items that fit on the screen
+      overflowingItems: [], // array of items that didn't fit and were put in a dropdown instead
+      totalBreadcrumbsWidth: 0, // the total width of all breadcrumb items combined
+      widthPerItem: [], // array with the indivudal widths of each breadcrumb item
+      resizeDone: false, // to apply some CSS only during/after resizing
     };
   },
   computed: {
-    breadcrumbsSize() {
-      return this.items.length;
-    },
     hasCollapsible() {
-      return this.breadcrumbsSize > COLLAPSE_AT_SIZE;
+      return this.overflowingItems.length > 0;
     },
-    nonCollapsibleIndices() {
-      return [0, this.breadcrumbsSize - 1, this.breadcrumbsSize - 2];
+    breadcrumbStyle() {
+      return this.resizeDone ? {} : { opacity: 0 };
     },
+    itemStyle() {
+      /**
+       * If the last/only item, which is always visible, has a very long title,
+       * it could overflow the breadcrumb component. This CSS makes sure it
+       * shows an ellipsis instead.
+       * But this CSS cannot be active while we do the size calculation, as that
+       * would then not take the real unshrunk width of that item into account.
+       */
+      if (this.resizeDone && this.fittingItems.length === 1) {
+        return {
+          'flex-shrink': 1,
+          'text-overflow': 'ellipsis',
+          'overflow-x': 'hidden',
+          'text-wrap': 'nowrap',
+        };
+      }
+      return {};
+    },
+  },
+  watch: {
+    items: {
+      handler: 'measureAndMakeBreadcrumbsFit',
+      deep: true,
+    },
+  },
+  created() {
+    this.debounceMakeBreadcrumbsFit = debounce(this.makeBreadcrumbsFit, 25);
+  },
+  mounted() {
+    window.addEventListener('resize', this.debounceMakeBreadcrumbsFit);
+    this.measureAndMakeBreadcrumbsFit();
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.debounceMakeBreadcrumbsFit);
   },
   methods: {
-    isFirstItem(index) {
-      return index === 0;
+    resetItems() {
+      this.fittingItems = [...this.items];
+      this.overflowingItems = [];
     },
-    isLastItem(index) {
-      return index === this.breadcrumbsSize - 1;
+    async measureAndMakeBreadcrumbsFit() {
+      this.resizeDone = false;
+      this.resetItems();
+
+      // Wait for DOM update so all items get rendered and can be measured.
+      await this.$nextTick();
+
+      this.totalBreadcrumbsWidth = 0;
+      this.$refs.breadcrumbs.forEach((b, index) => {
+        const width = b.$el.clientWidth;
+        this.totalBreadcrumbsWidth += width;
+        this.widthPerItem[index] = width;
+      });
+
+      this.makeBreadcrumbsFit();
     },
-    expandBreadcrumbs() {
-      this.isListCollapsed = false;
+    makeBreadcrumbsFit() {
+      this.resizeDone = false;
+      this.resetItems();
+
+      const containerWidth = this.$el.clientWidth;
+      const buttonWidth = 50; // px
+
+      if (this.totalBreadcrumbsWidth + buttonWidth > containerWidth) {
+        // Not all breadcrumb items fit. Start moving items over to the dropdown.
+        const startSlicingAt = 0;
 
-      try {
-        this.$refs.firstItem[0].querySelector('a').focus();
-      } catch (e) {
-        /* eslint-disable-next-line no-console */
-        console.error(`Failed to set focus on the first breadcrumb item.`);
+        // The last item will never be moved into the dropdown.
+        const stopSlicingAt = this.items.length - 1;
+
+        let widthNeeded = this.totalBreadcrumbsWidth;
+        for (let index = startSlicingAt; index < stopSlicingAt; index += 1) {
+          // Move one breadcrumb item into the dropdown
+          this.overflowingItems.push(this.fittingItems[startSlicingAt]);
+          this.fittingItems.splice(startSlicingAt, 1);
+
+          widthNeeded -= this.widthPerItem[index];
+
+          // Does it fit now? Then stop.
+          if (widthNeeded + buttonWidth < containerWidth) break;
+        }
       }
+
+      this.resizeDone = true;
     },
-    showCollapsedBreadcrumbsExpander(index) {
-      return index === 0 && this.hasCollapsible && this.isListCollapsed;
-    },
-    isItemCollapsed(index) {
-      return (
-        this.hasCollapsible && this.isListCollapsed && !this.nonCollapsibleIndices.includes(index)
-      );
+    isLastItem(index) {
+      return index === this.fittingItems.length - 1;
     },
     getAriaCurrentAttr(index) {
       return this.isLastItem(index) ? 'page' : false;
@@ -89,42 +160,41 @@ export default {
 };
 </script>
 <template>
-  <nav class="gl-breadcrumbs" :aria-label="ariaLabel">
+  <nav class="gl-breadcrumbs" :aria-label="ariaLabel" :style="breadcrumbStyle">
     <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) -->
-        <gl-breadcrumb-item
-          v-show="!isItemCollapsed(index)"
-          :ref="isFirstItem(index) ? 'firstItem' : null"
-          :text="item.text"
-          :href="item.href"
-          :to="item.to"
-          :aria-current="getAriaCurrentAttr(index)"
-          ><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>
+      <li v-if="hasCollapsible" class="gl-breadcrumb-item">
+        <gl-disclosure-dropdown
+          :items="overflowingItems"
+          :toggle-text="showMoreLabel"
+          fluid-width
+          text-sr-only
+          no-caret
+          icon="ellipsis_h"
+          size="small"
+          style="height: 16px"
+          placement="left"
+        />
+      </li>
 
-        <template v-if="showCollapsedBreadcrumbsExpander(index)">
-          <!-- eslint-disable-next-line vue/require-v-for-key (for @vue/compat) -->
-          <li class="gl-breadcrumb-item">
-            <gl-button
-              v-gl-tooltip.hover="'Show all breadcrumbs'"
-              aria-label="Show all breadcrumbs"
-              data-testid="collapsed-expander"
-              icon="ellipsis_h"
-              category="primary"
-              @click="expandBreadcrumbs"
-            />
-          </li>
-        </template>
-      </template>
+      <!-- eslint-disable-next-line vue/valid-v-for (for @vue/compat) -->
+      <gl-breadcrumb-item
+        v-for="(item, index) in fittingItems"
+        ref="breadcrumbs"
+        :text="item.text"
+        :href="item.href"
+        :style="itemStyle"
+        :to="item.to"
+        :aria-current="getAriaCurrentAttr(index)"
+        ><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>
     </b-breadcrumb>
   </nav>
 </template>

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

@@ -404,7 +404,7 @@ export default {
           <template v-if="isItem(item)">
             <!-- eslint-disable-next-line vue/valid-v-for -->
             <gl-disclosure-dropdown-item :key="uniqueItemId()" :item="item" @action="handleAction">
-              <template #list-item>
+              <template v-if="'list-item' in $scopedSlots" #list-item>
                 <!-- @slot Custom template of the disclosure dropdown item -->
                 <slot name="list-item" :item="item"></slot>
               </template>

package/translations.json

@@ -4,5 +4,6 @@
   "GlSorting.sortDescending": "Sort direction: descending",
   "GlSearchBoxByType.clearButtonTitle": "Clear",
   "GlSearchBoxByType.input.placeholder": "Search",
+  "GlBreadcrumb.showMoreLabel": "Show more breadcrumbs",
   "GlCollapsibleListbox.srOnlyResultsLabel": "Results count"
 }