@gitlab/ui 108.4.0 → 108.5.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [108.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.4.1...v108.5.0) (2025-02-26)
+
+
+### Features
+
+* **GlTable:** Update empty state to use text.subtle ([10b8cda](https://gitlab.com/gitlab-org/gitlab-ui/commit/10b8cdac7ea2ce923e8ae3801ca4dacfede73f16))
+
+## [108.4.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.4.0...v108.4.1) (2025-02-21)
+
+
+### Bug Fixes
+
+* **GlBreadcrumb:** Hide breadcrumb item if it has no text ([d9badd5](https://gitlab.com/gitlab-org/gitlab-ui/commit/d9badd5613402e0fcf5d93d3ae6e3e4d414a3cda))
+
 # [108.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v108.3.1...v108.4.0) (2025-02-21)
 
 

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

@@ -200,6 +200,12 @@ var script = {
         this.resizeObserver = null;
       }
       this.resetItems();
+    },
+    hideItemClass(item) {
+      // TODO once https://gitlab.com/gitlab-org/gitlab/-/issues/520089 is addressed:
+      // - Remove this hiding of empty breadcrumbs.
+      // - Tighten `items` validator to require non-empty `text`.
+      return !item.text ? 'gl-hidden' : '';
     }
   }
 };
@@ -208,7 +214,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",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible)?_c('li',{class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,style:(_vm.itemStyle),attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"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":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])],1)})],2)])};
+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('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible)?_c('li',{class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:_vm.hideItemClass(item),style:(_vm.itemStyle),attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"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":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])],1)})],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/table/table.js

@@ -125,7 +125,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('b-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.computedFields,"sort-by":_vm.localSortBy,"sort-desc":_vm.localSortDesc,"no-sort-reset":""},on:{"update:sortBy":function($event){_vm.localSortBy=$event;},"update:sort-by":function($event){_vm.localSortBy=$event;},"update:sortDesc":function($event){_vm.localSortDesc=$event;},"update:sort-desc":function($event){_vm.localSortDesc=$event;}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slotName){return {key:slotName,fn:function(scope){return [_vm._t(slotName,null,null,scope)]}}}),_vm._l((_vm.headSlots),function(headSlotName){return {key:headSlotName,fn:function(scope){return [_c('div',{key:headSlotName,staticClass:"gl-flex"},[_vm._t(headSlotName,function(){return [_c('span',[_vm._v(_vm._s(scope.label))])]},null,scope),(_vm.isSortable(scope))?[_c('div',{staticClass:"gl-table-th-sort-icon-wrapper gl-flex gl-w-5 gl-justify-center"},[_c('span',{class:{ 'gl-hidden': !_vm.activeSortingColumn(scope) },attrs:{"name":"sort-icon","data-testid":"sort-icon"}},[_vm._v("\n            "+_vm._s(_vm.getSortingIcon(scope))+"\n          ")])])]:_vm._e()],2)]}}})],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.computedFields,"sort-by":_vm.localSortBy,"sort-desc":_vm.localSortDesc,"no-sort-reset":""},on:{"update:sortBy":function($event){_vm.localSortBy=$event;},"update:sort-by":function($event){_vm.localSortBy=$event;},"update:sortDesc":function($event){_vm.localSortDesc=$event;},"update:sort-desc":function($event){_vm.localSortDesc=$event;}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slotName){return {key:slotName,fn:function(scope){return [_vm._t(slotName,null,null,scope)]}}}),_vm._l((_vm.headSlots),function(headSlotName){return {key:headSlotName,fn:function(scope){return [_c('div',{key:headSlotName,staticClass:"gl-flex"},[_vm._t(headSlotName,function(){return [_c('span',[_vm._v(_vm._s(scope.label))])]},null,scope),(_vm.isSortable(scope))?[_c('div',{staticClass:"gl-table-th-sort-icon-wrapper gl-flex gl-w-5 gl-justify-center"},[_c('span',{class:{ 'gl-hidden': !_vm.activeSortingColumn(scope) },attrs:{"name":"sort-icon","data-testid":"sort-icon"}},[_vm._v("\n            "+_vm._s(_vm.getSortingIcon(scope))+"\n          ")])])]:_vm._e()],2)]}}}),{key:"empty",fn:function(scope){return [_vm._t("empty",function(){return [_c('p',{staticClass:"gl-mb-0 gl-py-2 gl-text-subtle"},[_vm._v(_vm._s(scope.emptyText))])]},null,scope)]}}],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "108.4.0",
+  "version": "108.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -201,6 +201,12 @@ export default {
       }
       this.resetItems();
     },
+    hideItemClass(item) {
+      // TODO once https://gitlab.com/gitlab-org/gitlab/-/issues/520089 is addressed:
+      // - Remove this hiding of empty breadcrumbs.
+      // - Tighten `items` validator to require non-empty `text`.
+      return !item.text ? 'gl-hidden' : '';
+    },
   },
 };
 </script>
@@ -229,6 +235,7 @@ export default {
         :to="item.to"
         :size="size"
         :aria-current="getAriaCurrentAttr(index)"
+        :class="hideItemClass(item)"
         ><gl-avatar
           v-if="item.avatarPath"
           :src="item.avatarPath"

package/src/components/base/table/table.vue

@@ -140,5 +140,10 @@ export default {
         </template>
       </div>
     </template>
+    <template #empty="scope">
+      <slot name="empty" v-bind="scope">
+        <p class="gl-mb-0 gl-py-2 gl-text-subtle">{{ scope.emptyText }}</p>
+      </slot>
+    </template>
   </b-table>
 </template>