@gitlab/ui 72.5.2 → 72.6.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/avatars_inline/avatars_inline.js +6 -12
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -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/dist/utils/constants.js +1 -1
- package/package.json +1 -1
- package/src/components/base/avatar/avatar.scss +2 -3
- package/src/components/base/avatars_inline/avatars_inline.md +1 -1
- package/src/components/base/avatars_inline/avatars_inline.scss +55 -19
- package/src/components/base/avatars_inline/avatars_inline.vue +10 -30
- package/src/utils/constants.js +1 -1
package/dist/tokens/js/tokens.js
CHANGED
package/dist/utils/constants.js
CHANGED
|
@@ -58,7 +58,7 @@ const labelColorOptions = {
|
|
|
58
58
|
...viewModeOptions
|
|
59
59
|
};
|
|
60
60
|
const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
|
|
61
|
-
const avatarsInlineSizeOptions = [32, 24];
|
|
61
|
+
const avatarsInlineSizeOptions = [32, 24, 16];
|
|
62
62
|
const avatarShapeOptions = {
|
|
63
63
|
circle: 'circle',
|
|
64
64
|
rect: 'rect'
|
package/package.json
CHANGED
|
@@ -3,13 +3,12 @@ $gl-avatar-identicon-bgs: $red-50, $purple-50, $theme-indigo-50, $blue-50, $gree
|
|
|
3
3
|
|
|
4
4
|
@mixin gl-avatar {
|
|
5
5
|
@include gl-display-inline-flex;
|
|
6
|
-
@include gl-border-1;
|
|
7
|
-
@include gl-border-solid;
|
|
8
|
-
@include gl-border-gray-a-08;
|
|
9
6
|
@include gl-overflow-hidden;
|
|
10
7
|
@include gl-flex-shrink-0;
|
|
11
8
|
@include gl-line-height-ratio-1000;
|
|
12
9
|
@include gl-object-fit-contain;
|
|
10
|
+
outline: 1px solid var(--t-gray-a-08, #{$t-gray-a-08});
|
|
11
|
+
outline-offset: -1px;
|
|
13
12
|
}
|
|
14
13
|
|
|
15
14
|
@mixin gl-avatar-s16 {
|
|
@@ -1,28 +1,64 @@
|
|
|
1
1
|
.gl-avatars-inline {
|
|
2
|
+
// Set a default and get the radius
|
|
3
|
+
--avatar-size: 24px;
|
|
4
|
+
--avatar-radius: calc(var(--avatar-size) * 0.5);
|
|
5
|
+
// Position the mask
|
|
6
|
+
--mask-offset: calc(var(--avatar-size) * -0.25);
|
|
7
|
+
// Mask size plus border cutout effect
|
|
8
|
+
--mask-cutout: calc(var(--avatar-radius) + 1.5px);
|
|
9
|
+
|
|
2
10
|
@include gl-display-inline-flex;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.gl-avatars-inline-sm {
|
|
14
|
+
--avatar-size: 16px;
|
|
15
|
+
}
|
|
3
16
|
|
|
4
|
-
|
|
5
|
-
|
|
17
|
+
.gl-avatars-inline-md {
|
|
18
|
+
--avatar-size: 24px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.gl-avatars-inline-lg {
|
|
22
|
+
--avatar-size: 32px;
|
|
23
|
+
}
|
|
6
24
|
|
|
7
|
-
|
|
8
|
-
|
|
25
|
+
.gl-avatars-inline-child {
|
|
26
|
+
@include gl-display-inline-flex;
|
|
27
|
+
|
|
28
|
+
// Don't include the badge
|
|
29
|
+
&:not(:last-child) {
|
|
30
|
+
margin-right: var(--mask-offset);
|
|
31
|
+
mask: radial-gradient(circle at calc(var(--avatar-size) * 1.25) center, transparent var(--mask-cutout), white 0);
|
|
32
|
+
|
|
33
|
+
&:hover+.gl-avatars-inline-child>.gl-avatar-link,
|
|
34
|
+
&:hover+.gl-avatars-inline-child>.gl-avatars-inline-badge {
|
|
35
|
+
mask: radial-gradient(circle at var(--mask-offset) center, transparent var(--mask-cutout), white 0);
|
|
9
36
|
}
|
|
10
37
|
}
|
|
11
38
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
@include gl-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
39
|
+
// Remove mask on hovered or focused avatar and bring it forward
|
|
40
|
+
&:not(:last-child):hover,
|
|
41
|
+
&:not(:last-child):focus-within {
|
|
42
|
+
@include gl-z-index-1;
|
|
43
|
+
mask: none;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.gl-avatars-inline-badge {
|
|
48
|
+
@include gl-display-inline-flex;
|
|
49
|
+
@include gl-align-items-center;
|
|
50
|
+
@include gl-justify-content-center;
|
|
51
|
+
@include gl-bg-gray-100;
|
|
52
|
+
@include gl-text-gray-900;
|
|
53
|
+
@include gl-font-sm;
|
|
54
|
+
@include gl-px-2;
|
|
55
|
+
@include gl-line-height-normal;
|
|
56
|
+
@include gl-rounded-pill;
|
|
57
|
+
height: var(--avatar-size);
|
|
58
|
+
min-width: var(--avatar-size);
|
|
59
|
+
|
|
60
|
+
&.lg {
|
|
61
|
+
@include gl-font-base;
|
|
62
|
+
@include gl-rounded-6;
|
|
27
63
|
}
|
|
28
64
|
}
|
|
@@ -56,7 +56,13 @@ export default {
|
|
|
56
56
|
return this.collapsed ? this.avatars.slice(0, this.maxVisible) : this.avatars;
|
|
57
57
|
},
|
|
58
58
|
badgeSize() {
|
|
59
|
-
return
|
|
59
|
+
return (
|
|
60
|
+
{
|
|
61
|
+
16: 'sm',
|
|
62
|
+
24: 'md',
|
|
63
|
+
32: 'lg',
|
|
64
|
+
}[this.avatarSize] || 'lg'
|
|
65
|
+
);
|
|
60
66
|
},
|
|
61
67
|
badgeLabel() {
|
|
62
68
|
return `+${this.hiddenAvatars.length}`;
|
|
@@ -77,42 +83,16 @@ export default {
|
|
|
77
83
|
: tooltipTitle;
|
|
78
84
|
},
|
|
79
85
|
},
|
|
80
|
-
methods: {
|
|
81
|
-
calcAvatarStyles(avatarIndex) {
|
|
82
|
-
// According to pajamas, overlap is 25% of the avatar height
|
|
83
|
-
const overlap = this.avatarSize * 0.25;
|
|
84
|
-
|
|
85
|
-
const marginRight =
|
|
86
|
-
avatarIndex === this.maxVisible ||
|
|
87
|
-
avatarIndex === this.avatars.length - 1 ||
|
|
88
|
-
!this.collapsed
|
|
89
|
-
? undefined
|
|
90
|
-
: `-${overlap}px`;
|
|
91
|
-
|
|
92
|
-
return {
|
|
93
|
-
marginRight,
|
|
94
|
-
};
|
|
95
|
-
},
|
|
96
|
-
},
|
|
97
86
|
};
|
|
98
87
|
</script>
|
|
99
88
|
<template>
|
|
100
|
-
<div class="gl-avatars-inline">
|
|
101
|
-
<div
|
|
102
|
-
v-for="(avatar, index) in visibleAvatars"
|
|
103
|
-
:key="index"
|
|
104
|
-
class="gl-avatars-inline-child"
|
|
105
|
-
:style="calcAvatarStyles(index)"
|
|
106
|
-
>
|
|
89
|
+
<div class="gl-avatars-inline" :class="`gl-avatars-inline-${badgeSize}`">
|
|
90
|
+
<div v-for="(avatar, index) in visibleAvatars" :key="index" class="gl-avatars-inline-child">
|
|
107
91
|
<slot name="avatar" :avatar="avatar">
|
|
108
92
|
<gl-avatar v-bind="avatar" :size="avatarSize" />
|
|
109
93
|
</slot>
|
|
110
94
|
</div>
|
|
111
|
-
<div
|
|
112
|
-
v-if="collapsed && collapsable"
|
|
113
|
-
class="gl-avatars-inline-child"
|
|
114
|
-
:style="calcAvatarStyles(visibleAvatars.length)"
|
|
115
|
-
>
|
|
95
|
+
<div v-if="collapsed && collapsable" class="gl-avatars-inline-child">
|
|
116
96
|
<gl-tooltip v-if="badgeTooltipProp" :target="() => $refs.badge">
|
|
117
97
|
{{ badgeTooltipTitle }}
|
|
118
98
|
</gl-tooltip>
|
package/src/utils/constants.js
CHANGED
|
@@ -69,7 +69,7 @@ export const labelColorOptions = {
|
|
|
69
69
|
|
|
70
70
|
export const avatarSizeOptions = [96, 64, 48, 32, 24, 16];
|
|
71
71
|
|
|
72
|
-
export const avatarsInlineSizeOptions = [32, 24];
|
|
72
|
+
export const avatarsInlineSizeOptions = [32, 24, 16];
|
|
73
73
|
|
|
74
74
|
export const avatarShapeOptions = {
|
|
75
75
|
circle: 'circle',
|