@gitlab/ui 118.1.2 → 119.1.0

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

@@ -79,6 +79,8 @@ var script = {
       // the total width of all breadcrumb items combined
       widthPerItem: [],
       // array with the individual widths of each breadcrumb item
+      dropdownWidth: 0,
+      // the width of the breadcrumb item containing the dropdown toggle
       resizeDone: false // to apply some CSS only during/after resizing
     };
   },
@@ -145,14 +147,15 @@ var script = {
         this.totalBreadcrumbsWidth += width;
         this.widthPerItem[index] = width;
       });
+
+      // The dropdown gets rendered during `!resizeDone` so we can mesuare its real width here.
+      this.dropdownWidth = this.$refs.dropdown.clientWidth;
       this.makeBreadcrumbsFit();
     },
     makeBreadcrumbsFit() {
       this.resizeDone = false;
       this.resetItems();
       const containerWidth = this.$el.clientWidth;
-      const buttonWidth = this.size === 'sm' ? 40 : 48; // px
-
       if (this.totalBreadcrumbsWidth > containerWidth) {
         // Not all breadcrumb items fit. Start moving items over to the dropdown.
         const startSlicingAt = 0;
@@ -167,7 +170,7 @@ var script = {
           widthNeeded -= this.widthPerItem[index];
 
           // Does it fit now? Then stop.
-          if (widthNeeded + buttonWidth < containerWidth) break;
+          if (widthNeeded + this.dropdownWidth < containerWidth) break;
         }
       }
       this.resizeDone = true;
@@ -203,7 +206,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,class:[_vm.hideItemClass(item), _vm.itemClass],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 || !_vm.resizeDone)?_c('li',{ref:"dropdown",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), _vm.itemClass],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/daterange_picker/daterange_picker.js

@@ -6,7 +6,7 @@ import GlIcon from '../icon/icon';
 import { datepickerWidthOptionsMap } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const CONTAINER_CLASSES = ['gl-flex', 'gl-items-baseline', 'gl-flex-wrap', 'sm:gl-flex-nowrap', 'sm:gl-gap-3'];
+const CONTAINER_CLASSES = ['gl-flex', 'gl-items-baseline', 'gl-flex-wrap', '@sm:gl-flex-nowrap', '@sm:gl-gap-3'];
 var script = {
   name: 'GlDaterangePicker',
   components: {

package/dist/components/base/pagination/pagination.js

@@ -377,13 +377,13 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.labelNav}},[_c('ul',{class:_vm.wrapperClasses},[_c('li',{class:{
         disabled: _vm.prevPageIsDisabled,
         'gl-flex-auto': _vm.isFillAlign,
-      },attrs:{"aria-disabled":_vm.prevPageIsDisabled,"aria-hidden":_vm.prevPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-prev","aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){!_vm.prevPageIsDisabled ? _vm.handlePrevious($event, _vm.value - 1) : null;}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',{staticClass:"gl-hidden sm:gl-block"},[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,class:{
+      },attrs:{"aria-disabled":_vm.prevPageIsDisabled,"aria-hidden":_vm.prevPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-prev","aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){!_vm.prevPageIsDisabled ? _vm.handlePrevious($event, _vm.value - 1) : null;}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',{staticClass:"gl-hidden @sm:gl-block"},[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,class:{
         disabled: item.disabled,
         'gl-flex-auto': _vm.isFillAlign,
       },attrs:{"data-testid":"gl-pagination-li"}},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-item","size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{class:{
         disabled: _vm.nextPageIsDisabled,
         'gl-flex-auto': _vm.isFillAlign,
-      },attrs:{"aria-disabled":_vm.nextPageIsDisabled,"aria-hidden":_vm.nextPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-next","aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){!_vm.nextPageIsDisabled ? _vm.handleNext($event, _vm.value + 1) : null;}}},[_vm._t("next",function(){return [_c('span',{staticClass:"gl-hidden sm:gl-block"},[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
+      },attrs:{"aria-disabled":_vm.nextPageIsDisabled,"aria-hidden":_vm.nextPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-next","aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){!_vm.nextPageIsDisabled ? _vm.handleNext($event, _vm.value + 1) : null;}}},[_vm._t("next",function(){return [_c('span',{staticClass:"gl-hidden @sm:gl-block"},[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/regions/dashboard_skeleton/dashboard_skeleton.js

@@ -19,7 +19,7 @@ const __vue_script__ = script;
 
 /* template */
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"row dashboard-cards"},_vm._l((_vm.cards),function(index){return _c('div',{key:index,staticClass:"col-12 col-md-6 col-xl-4 gl-px-3"},[_c('div',{staticClass:"gl-rounded-t-base gl-bg-status-neutral gl-py-6"}),_vm._v(" "),_vm._m(0,true)])}),0)};
-var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dashboard-card-body card-body gl-bg-gray-50"},[_c('div',{staticClass:"row"},[_c('div',{staticClass:"col-1 gl-self-center"},[_c('div',{staticClass:"gl-rounded-full gl-bg-status-neutral gl-p-5"})]),_vm._v(" "),_c('div',{staticClass:"col-10 col-sm-6 gl-self-center gl-pl-6"},[_c('div',{staticClass:"dashboard-card-skeleton-info gl-mb-3 gl-w-full gl-bg-status-neutral gl-py-3"}),_vm._v(" "),_c('div',{staticClass:"dashboard-card-skeleton-info gl-w-full gl-bg-status-neutral gl-py-3"})]),_vm._v(" "),_c('div',{staticClass:"col-sm-5 gl-hidden gl-self-center sm:gl-block"},[_c('div',{staticClass:"dashboard-card-skeleton-info gl-w-full gl-bg-status-neutral gl-py-3"})])]),_vm._v(" "),_c('div',{staticClass:"dashboard-card-footer gl-mt-5 gl-bg-status-neutral gl-py-5"})])}];
+var __vue_staticRenderFns__ = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dashboard-card-body card-body gl-bg-gray-50"},[_c('div',{staticClass:"row"},[_c('div',{staticClass:"col-1 gl-self-center"},[_c('div',{staticClass:"gl-rounded-full gl-bg-status-neutral gl-p-5"})]),_vm._v(" "),_c('div',{staticClass:"col-10 col-sm-6 gl-self-center gl-pl-6"},[_c('div',{staticClass:"dashboard-card-skeleton-info gl-mb-3 gl-w-full gl-bg-status-neutral gl-py-3"}),_vm._v(" "),_c('div',{staticClass:"dashboard-card-skeleton-info gl-w-full gl-bg-status-neutral gl-py-3"})]),_vm._v(" "),_c('div',{staticClass:"col-sm-5 gl-hidden gl-self-center @sm:gl-block"},[_c('div',{staticClass:"dashboard-card-skeleton-info gl-w-full gl-bg-status-neutral gl-py-3"})])]),_vm._v(" "),_c('div',{staticClass:"dashboard-card-footer gl-mt-5 gl-bg-status-neutral gl-py-5"})])}];
 
   /* style */
   const __vue_inject_styles__ = undefined;

package/dist/components/regions/empty_state/empty_state.js

@@ -136,7 +136,7 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"gl-flex",class:{
     'gl-empty-state gl-flex-col gl-text-center': !_vm.compact,
     'gl-flex-row': _vm.compact,
-  }},[_c('div',{class:{ 'gl-hidden gl-px-4 sm:gl-block': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","height":_vm.height}}):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"gl-empty-state-content gl-mx-auto gl-my-0",class:_vm.contentClasses,attrs:{"data-testid":"gl-empty-state-content"}},[_vm._t("title",function(){return [_c(_vm.headerComponent,{tag:"component",staticClass:"gl-mb-0 gl-mt-0 gl-text-size-h-display gl-leading-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n        "+_vm._s(_vm.title)+"\n      ")])]}),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mb-0 gl-mt-4 gl-text-subtle"},[_vm._t("description",function(){return [_vm._v("\n        "+_vm._s(_vm.description)+"\n      ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-mt-5 gl-flex gl-flex-wrap",class:{ 'gl-justify-center': !_vm.compact }},[_vm._t("actions",function(){return [(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ '!gl-mx-2': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n        ")]):_vm._e()]})],2)],2)])};
+  }},[_c('div',{class:{ 'gl-hidden gl-px-4 @sm:gl-block': _vm.compact, 'gl-max-w-full': !_vm.compact }},[(_vm.svgPath)?_c('img',{staticClass:"gl-max-w-full",class:{ 'gl-dark-invert-keep-hue': _vm.invertInDarkMode },attrs:{"src":_vm.svgPath,"alt":"","height":_vm.height}}):_vm._e()]),_vm._v(" "),_c('div',{staticClass:"gl-empty-state-content gl-mx-auto gl-my-0",class:_vm.contentClasses,attrs:{"data-testid":"gl-empty-state-content"}},[_vm._t("title",function(){return [_c(_vm.headerComponent,{tag:"component",staticClass:"gl-mb-0 gl-mt-0 gl-text-size-h-display gl-leading-36",class:_vm.compact ? 'h5' : 'h4'},[_vm._v("\n        "+_vm._s(_vm.title)+"\n      ")])]}),_vm._v(" "),(_vm.description || _vm.$scopedSlots.description)?_c('p',{ref:"description",staticClass:"gl-mb-0 gl-mt-4 gl-text-subtle"},[_vm._t("description",function(){return [_vm._v("\n        "+_vm._s(_vm.description)+"\n      ")]})],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-mt-5 gl-flex gl-flex-wrap",class:{ 'gl-justify-center': !_vm.compact }},[_vm._t("actions",function(){return [(_vm.shouldRenderPrimaryButton)?_c('gl-button',{staticClass:"gl-mb-3",class:_vm.compact ? 'gl-mr-3' : 'gl-mx-2',attrs:{"variant":"confirm","href":_vm.primaryButtonLink}},[_vm._v(_vm._s(_vm.primaryButtonText))]):_vm._e(),_vm._v(" "),(_vm.shouldRenderSecondaryButton)?_c('gl-button',{staticClass:"gl-mb-3 gl-mr-3",class:{ '!gl-mx-2': !_vm.compact },attrs:{"href":_vm.secondaryButtonLink}},[_vm._v(_vm._s(_vm.secondaryButtonText)+"\n        ")]):_vm._e()]})],2)],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */