@gitlab/ui 78.2.3 → 78.3.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [78.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.2.3...v78.3.0) (2024-03-22)
+
+
+### Bug Fixes
+
+* **GlDisclosureDropdown:** Prevent unwanted slot overrides in Vue 3 ([6aef295](https://gitlab.com/gitlab-org/gitlab-ui/commit/6aef29519a86cbc187218ebe34437e98ddcdebd1))
+
+
+### Features
+
+* **GlBreadcrumb:** Always show as many breadcrumbs as possible ([b58ba76](https://gitlab.com/gitlab-org/gitlab-ui/commit/b58ba764e40ee70eace928f4ffa849eeafff0455))
+
 ## [78.2.3](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.2.2...v78.2.3) (2024-03-21)
 
 

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -1,19 +1,20 @@
 import { BBreadcrumb } from 'bootstrap-vue/esm/index.js';
-import GlButton from '../button/button';
+import debounce from 'lodash/debounce';
+import { translate } from '../../../utils/i18n';
 import GlAvatar from '../avatar/avatar';
+import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlBreadcrumbItem from './breadcrumb_item';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
-const COLLAPSE_AT_SIZE = 4;
 var script = {
   name: 'GlBreadcrumb',
   components: {
     BBreadcrumb,
-    GlButton,
     GlBreadcrumbItem,
-    GlAvatar
+    GlAvatar,
+    GlDisclosureDropdown
   },
   directives: {
     GlTooltip: GlTooltipDirective
@@ -41,45 +42,119 @@ var script = {
       type: String,
       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;
-      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.`);
+    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;
+
+        // 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;
@@ -91,7 +166,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",attrs:{"aria-label":_vm.ariaLabel}},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[_vm._l((_vm.items),function(item,index){return [_c('gl-breadcrumb-item',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isItemCollapsed(index)),expression:"!isItemCollapsed(index)"}],ref:_vm.isFirstItem(index) ? 'firstItem' : null,refInFor:true,attrs:{"text":item.text,"href":item.href,"to":item.to,"aria-current":_vm.getAriaCurrentAttr(index)}},[(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 gl-rounded-base!",attrs:{"src":item.avatarPath,"size":16,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',[_vm._v(_vm._s(item.text))])],1),_vm._v(" "),(_vm.showCollapsedBreadcrumbsExpander(index))?[_c('li',{staticClass:"gl-breadcrumb-item"},[_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.hover",value:('Show all breadcrumbs'),expression:"'Show all breadcrumbs'",modifiers:{"hover":true}}],attrs:{"aria-label":"Show all breadcrumbs","data-testid":"collapsed-expander","icon":"ellipsis_h","category":"primary"},on:{"click":_vm.expandBreadcrumbs}})],1)]:_vm._e()]})],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('b-breadcrumb',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list"},'b-breadcrumb',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible)?_c('li',{staticClass:"gl-breadcrumb-item"},[_c('gl-disclosure-dropdown',{staticStyle:{"height":"16px"},attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":"small","placement":"left"}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{ref:"breadcrumbs",refInFor:true,style:(_vm.itemStyle),attrs:{"text":item.text,"href":item.href,"to":item.to,"aria-current":_vm.getAriaCurrentAttr(index)}},[(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 gl-rounded-base!",attrs:{"src":item.avatarPath,"size":16,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',[_vm._v(_vm._s(item.text))])],1)})],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */
@@ -124,4 +199,3 @@ var __vue_staticRenderFns__ = [];
   );
 
 export default __vue_component__;
-export { COLLAPSE_AT_SIZE };

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -334,7 +334,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.$scopedSlots['list-item'])?_vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})}):_vm._e()],2)]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-base-dropdown',{ref:"baseDropdown",staticClass:"gl-disclosure-dropdown",attrs:{"aria-labelledby":_vm.toggleAriaLabelledBy,"toggle-id":_vm.toggleId,"toggle-text":_vm.toggleText,"toggle-class":_vm.toggleClass,"text-sr-only":_vm.textSrOnly,"category":_vm.category,"variant":_vm.variant,"size":_vm.size,"icon":_vm.icon,"disabled":_vm.disabled,"loading":_vm.loading,"no-caret":_vm.noCaret,"placement":_vm.placement,"block":_vm.block,"offset":_vm.dropdownOffset,"fluid-width":_vm.fluidWidth,"positioning-strategy":_vm.positioningStrategy},on:_vm._d({},[_vm.$options.events.GL_DROPDOWN_SHOWN,_vm.onShow,_vm.$options.events.GL_DROPDOWN_HIDDEN,_vm.onHide,_vm.$options.events.GL_DROPDOWN_BEFORE_CLOSE,_vm.onBeforeClose,_vm.$options.events.GL_DROPDOWN_FOCUS_CONTENT,_vm.onKeydown]),scopedSlots:_vm._u([(_vm.hasCustomToggle)?{key:"toggle",fn:function(){return [_vm._t("toggle")]},proxy:true}:null],null,true)},[_vm._v(" "),_vm._t("header"),_vm._v(" "),_c(_vm.disclosureTag,{ref:"content",tag:"component",class:_vm.$options.GL_DROPDOWN_CONTENTS_CLASS,attrs:{"id":_vm.disclosureId,"aria-labelledby":_vm.listAriaLabelledBy || _vm.toggleId,"data-testid":"disclosure-content","tabindex":"-1"},on:{"keydown":_vm.onKeydown,"click":_vm.handleAutoClose}},[_vm._t("default",function(){return [_vm._l((_vm.items),function(item,index){return [(_vm.isItem(item))?[_c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([('list-item' in _vm.$scopedSlots)?{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":item})]},proxy:true}:null],null,true)})]:[_c('gl-disclosure-dropdown-group',{key:item.name,attrs:{"bordered":index !== 0,"group":item},on:{"action":_vm.handleAction},scopedSlots:_vm._u([(_vm.$scopedSlots['group-label'])?{key:"group-label",fn:function(){return [_vm._t("group-label",null,{"group":item})]},proxy:true}:null],null,true)},[_vm._v(" "),(_vm.$scopedSlots['list-item'])?_vm._l((item.items),function(groupItem){return _c('gl-disclosure-dropdown-item',{key:_vm.uniqueItemId(),attrs:{"item":groupItem},on:{"action":_vm.handleAction},scopedSlots:_vm._u([{key:"list-item",fn:function(){return [_vm._t("list-item",null,{"item":groupItem})]},proxy:true}],null,true)})}):_vm._e()],2)]]})]})],2),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */