@gitlab/ui 73.2.0 → 73.3.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/CHANGELOG.md +7 -0
- package/dist/components/base/breadcrumb/breadcrumb.js +6 -1
- package/dist/tokens/css/tokens.css +1 -1
- package/dist/tokens/css/tokens.dark.css +1 -1
- package/dist/tokens/js/tokens.dark.js +1 -1
- package/dist/tokens/js/tokens.js +1 -1
- package/dist/tokens/scss/_tokens.dark.scss +1 -1
- package/dist/tokens/scss/_tokens.scss +1 -1
- package/package.json +1 -1
- package/src/components/base/breadcrumb/breadcrumb.spec.js +16 -2
- package/src/components/base/breadcrumb/breadcrumb.stories.js +1 -0
- package/src/components/base/breadcrumb/breadcrumb.vue +6 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [73.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v73.2.0...v73.3.0) (2024-02-02)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **GlBreadcrumb:** Add ariaLabel prop ([5527740](https://gitlab.com/gitlab-org/gitlab-ui/commit/5527740d8b6399224b6bd4acbfd672b9786a3c91))
|
|
7
|
+
|
|
1
8
|
# [73.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v73.1.1...v73.2.0) (2024-02-02)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -36,6 +36,11 @@ var script = {
|
|
|
36
36
|
return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
|
|
37
37
|
});
|
|
38
38
|
}
|
|
39
|
+
},
|
|
40
|
+
ariaLabel: {
|
|
41
|
+
type: String,
|
|
42
|
+
required: false,
|
|
43
|
+
default: 'Breadcrumb'
|
|
39
44
|
}
|
|
40
45
|
},
|
|
41
46
|
data() {
|
|
@@ -86,7 +91,7 @@ var script = {
|
|
|
86
91
|
const __vue_script__ = script;
|
|
87
92
|
|
|
88
93
|
/* template */
|
|
89
|
-
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":
|
|
94
|
+
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)};
|
|
90
95
|
var __vue_staticRenderFns__ = [];
|
|
91
96
|
|
|
92
97
|
/* style */
|
package/dist/tokens/js/tokens.js
CHANGED
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
|
|
|
2
2
|
import { nextTick } from 'vue';
|
|
3
3
|
import avatarPath1 from '../../../../static/img/avatar.png';
|
|
4
4
|
import avatarPath3 from '../../../../static/img/avatar_1.png';
|
|
5
|
-
import
|
|
5
|
+
import GlBreadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue';
|
|
6
6
|
import GlBreadcrumbItem from './breadcrumb_item.vue';
|
|
7
7
|
|
|
8
8
|
describe('Breadcrumb component', () => {
|
|
@@ -39,7 +39,7 @@ describe('Breadcrumb component', () => {
|
|
|
39
39
|
findBreadcrumbItems().wrappers.filter((item) => !item.isVisible());
|
|
40
40
|
|
|
41
41
|
const createComponent = (propsData = { items }) => {
|
|
42
|
-
wrapper = shallowMount(
|
|
42
|
+
wrapper = shallowMount(GlBreadcrumb, {
|
|
43
43
|
propsData,
|
|
44
44
|
stubs: {
|
|
45
45
|
GlBreadcrumbItem,
|
|
@@ -61,6 +61,20 @@ describe('Breadcrumb component', () => {
|
|
|
61
61
|
});
|
|
62
62
|
});
|
|
63
63
|
|
|
64
|
+
describe('ariaLabel', () => {
|
|
65
|
+
it('uses prop if provided', () => {
|
|
66
|
+
createComponent({ items, ariaLabel: 'Folder breadcrumbs' });
|
|
67
|
+
|
|
68
|
+
expect(wrapper.attributes('aria-label')).toBe('Folder breadcrumbs');
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
it('uses default if prop not provided', () => {
|
|
72
|
+
createComponent();
|
|
73
|
+
|
|
74
|
+
expect(wrapper.attributes('aria-label')).toBe('Breadcrumb');
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
|
|
64
78
|
describe('avatars', () => {
|
|
65
79
|
it('renders 2 avatars when 2 avatarPaths are passed', () => {
|
|
66
80
|
createComponent();
|
|
@@ -35,6 +35,11 @@ export default {
|
|
|
35
35
|
});
|
|
36
36
|
},
|
|
37
37
|
},
|
|
38
|
+
ariaLabel: {
|
|
39
|
+
type: String,
|
|
40
|
+
required: false,
|
|
41
|
+
default: 'Breadcrumb',
|
|
42
|
+
},
|
|
38
43
|
},
|
|
39
44
|
data() {
|
|
40
45
|
return {
|
|
@@ -84,7 +89,7 @@ export default {
|
|
|
84
89
|
};
|
|
85
90
|
</script>
|
|
86
91
|
<template>
|
|
87
|
-
<nav class="gl-breadcrumbs" aria-label="
|
|
92
|
+
<nav class="gl-breadcrumbs" :aria-label="ariaLabel">
|
|
88
93
|
<b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
|
|
89
94
|
<template v-for="(item, index) in items">
|
|
90
95
|
<!-- eslint-disable-next-line vue/valid-v-for (for @vue/compat) -->
|