@gitlab/ui 118.1.1 → 119.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/base/breadcrumb/breadcrumb.js +7 -4
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/figma/contextual.tokens.json +8 -4
- package/dist/tokens/json/tokens.dark.json +8 -0
- package/dist/tokens/json/tokens.json +8 -0
- package/dist/utils/constants.js +0 -1
- package/package.json +1 -1
- package/src/components/base/breadcrumb/breadcrumb.vue +10 -3
- package/src/components/base/button/button.scss +1 -23
- package/src/components/base/button_group/button_group.scss +0 -28
- package/src/components/base/pagination/pagination.scss +1 -1
- package/src/components/base/tabs/tabs/tabs.scss +2 -2
- package/src/scss/mixins.scss +0 -24
- package/src/tokens/build/figma/contextual.tokens.json +8 -4
- package/src/tokens/build/json/tokens.dark.json +8 -0
- package/src/tokens/build/json/tokens.json +8 -0
- package/src/tokens/contextual/button.tokens.json +8 -4
- package/src/utils/constants.js +0 -1
- package/tailwind.defaults.js +20 -0
|
@@ -79,6 +79,8 @@ var script = {
|
|
|
79
79
|
// the total width of all breadcrumb items combined
|
|
80
80
|
widthPerItem: [],
|
|
81
81
|
// array with the individual widths of each breadcrumb item
|
|
82
|
+
dropdownWidth: 0,
|
|
83
|
+
// the width of the breadcrumb item containing the dropdown toggle
|
|
82
84
|
resizeDone: false // to apply some CSS only during/after resizing
|
|
83
85
|
};
|
|
84
86
|
},
|
|
@@ -145,14 +147,15 @@ var script = {
|
|
|
145
147
|
this.totalBreadcrumbsWidth += width;
|
|
146
148
|
this.widthPerItem[index] = width;
|
|
147
149
|
});
|
|
150
|
+
|
|
151
|
+
// The dropdown gets rendered during `!resizeDone` so we can mesuare its real width here.
|
|
152
|
+
this.dropdownWidth = this.$refs.dropdown.clientWidth;
|
|
148
153
|
this.makeBreadcrumbsFit();
|
|
149
154
|
},
|
|
150
155
|
makeBreadcrumbsFit() {
|
|
151
156
|
this.resizeDone = false;
|
|
152
157
|
this.resetItems();
|
|
153
158
|
const containerWidth = this.$el.clientWidth;
|
|
154
|
-
const buttonWidth = this.size === 'sm' ? 40 : 48; // px
|
|
155
|
-
|
|
156
159
|
if (this.totalBreadcrumbsWidth > containerWidth) {
|
|
157
160
|
// Not all breadcrumb items fit. Start moving items over to the dropdown.
|
|
158
161
|
const startSlicingAt = 0;
|
|
@@ -167,7 +170,7 @@ var script = {
|
|
|
167
170
|
widthNeeded -= this.widthPerItem[index];
|
|
168
171
|
|
|
169
172
|
// Does it fit now? Then stop.
|
|
170
|
-
if (widthNeeded +
|
|
173
|
+
if (widthNeeded + this.dropdownWidth < containerWidth) break;
|
|
171
174
|
}
|
|
172
175
|
}
|
|
173
176
|
this.resizeDone = true;
|
|
@@ -203,7 +206,7 @@ var script = {
|
|
|
203
206
|
const __vue_script__ = script;
|
|
204
207
|
|
|
205
208
|
/* template */
|
|
206
|
-
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)])};
|
|
209
|
+
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)])};
|
|
207
210
|
var __vue_staticRenderFns__ = [];
|
|
208
211
|
|
|
209
212
|
/* style */
|