@gitlab/ui 64.3.0 → 64.4.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/avatar_labeled/avatar_labeled.js +11 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +1 -1
- package/src/components/base/avatar_labeled/avatar_labeled.scss +6 -0
- package/src/components/base/avatar_labeled/avatar_labeled.spec.js +8 -0
- package/src/components/base/avatar_labeled/avatar_labeled.stories.js +18 -0
- package/src/components/base/avatar_labeled/avatar_labeled.vue +11 -1
package/package.json
CHANGED
|
@@ -58,6 +58,14 @@ describe('avatar labeled', () => {
|
|
|
58
58
|
expect(wrapper.find('[data-testid="default-slot"]').exists()).toBe(true);
|
|
59
59
|
});
|
|
60
60
|
|
|
61
|
+
describe('with labels as rows', () => {
|
|
62
|
+
it('adds the correct css classes', () => {
|
|
63
|
+
buildWrapper({ label, subLabel, inlineLabels: true });
|
|
64
|
+
|
|
65
|
+
expect(wrapper.find('.gl-avatar-labeled-labels').classes('inline-labels')).toBe(true);
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
|
|
61
69
|
describe('with label links', () => {
|
|
62
70
|
beforeEach(() => {
|
|
63
71
|
buildWrapper({ label, subLabel, labelLink: 'http://label', subLabelLink: 'http://subLabel' });
|
|
@@ -18,6 +18,7 @@ const generateProps = ({
|
|
|
18
18
|
size = 32,
|
|
19
19
|
shape = 'circle',
|
|
20
20
|
src = avatarPath,
|
|
21
|
+
inlineLabels = false,
|
|
21
22
|
labelLink,
|
|
22
23
|
} = {}) => ({
|
|
23
24
|
label,
|
|
@@ -25,6 +26,7 @@ const generateProps = ({
|
|
|
25
26
|
size,
|
|
26
27
|
shape,
|
|
27
28
|
src,
|
|
29
|
+
inlineLabels,
|
|
28
30
|
labelLink,
|
|
29
31
|
});
|
|
30
32
|
|
|
@@ -48,6 +50,22 @@ export const Default = (args, { argTypes }) => ({
|
|
|
48
50
|
});
|
|
49
51
|
Default.args = generateProps();
|
|
50
52
|
|
|
53
|
+
export const WithInlineLabels = (args, { argTypes }) => ({
|
|
54
|
+
components,
|
|
55
|
+
props: Object.keys(argTypes),
|
|
56
|
+
template: `
|
|
57
|
+
<gl-avatar-labeled
|
|
58
|
+
:shape="shape"
|
|
59
|
+
:size="size"
|
|
60
|
+
:src="src"
|
|
61
|
+
:label="label"
|
|
62
|
+
:sub-label="subLabel"
|
|
63
|
+
:inline-labels="inlineLabels"
|
|
64
|
+
/>
|
|
65
|
+
`,
|
|
66
|
+
});
|
|
67
|
+
WithInlineLabels.args = generateProps({ inlineLabels: true });
|
|
68
|
+
|
|
51
69
|
export const WithTooltip = (args, { argTypes }) => ({
|
|
52
70
|
components,
|
|
53
71
|
props: Object.keys(argTypes),
|
|
@@ -28,6 +28,11 @@ export default {
|
|
|
28
28
|
required: false,
|
|
29
29
|
default: '',
|
|
30
30
|
},
|
|
31
|
+
inlineLabels: {
|
|
32
|
+
type: Boolean,
|
|
33
|
+
required: false,
|
|
34
|
+
default: false,
|
|
35
|
+
},
|
|
31
36
|
},
|
|
32
37
|
computed: {
|
|
33
38
|
hasLabelLink() {
|
|
@@ -51,6 +56,11 @@ export default {
|
|
|
51
56
|
'gl-cursor-pointer': this.hasLabelLink,
|
|
52
57
|
};
|
|
53
58
|
},
|
|
59
|
+
avatarRowLayoutClass() {
|
|
60
|
+
return {
|
|
61
|
+
'inline-labels': this.inlineLabels,
|
|
62
|
+
};
|
|
63
|
+
},
|
|
54
64
|
},
|
|
55
65
|
methods: {
|
|
56
66
|
onAvatarClick() {
|
|
@@ -62,7 +72,7 @@ export default {
|
|
|
62
72
|
<template>
|
|
63
73
|
<div class="gl-avatar-labeled">
|
|
64
74
|
<gl-avatar v-bind="$attrs" :class="avatarCssClasses" alt v-on="avatarListeners" />
|
|
65
|
-
<div class="gl-avatar-labeled-labels gl-text-left!">
|
|
75
|
+
<div class="gl-avatar-labeled-labels gl-text-left!" :class="avatarRowLayoutClass">
|
|
66
76
|
<div
|
|
67
77
|
class="gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"
|
|
68
78
|
>
|