@atlaskit/avatar-group 12.10.1 → 12.10.3
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 +12 -0
- package/avatar-group.docs.tsx +43 -41
- package/dist/cjs/components/more-indicator.compiled.css +0 -2
- package/dist/cjs/components/more-indicator.js +1 -3
- package/dist/es2019/components/more-indicator.compiled.css +0 -2
- package/dist/es2019/components/more-indicator.js +1 -3
- package/dist/esm/components/more-indicator.compiled.css +0 -2
- package/dist/esm/components/more-indicator.js +1 -3
- package/package.json +8 -10
package/CHANGELOG.md
CHANGED
package/avatar-group.docs.tsx
CHANGED
|
@@ -1,48 +1,50 @@
|
|
|
1
1
|
import path from 'path';
|
|
2
2
|
|
|
3
|
-
import type {
|
|
3
|
+
import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
|
|
4
4
|
|
|
5
|
-
const documentation:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
description:
|
|
9
|
-
'A component for displaying multiple avatars in a group with overlap and overflow handling.',
|
|
10
|
-
status: 'general-availability',
|
|
11
|
-
import: {
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
12
8
|
name: 'AvatarGroup',
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
'Provide clear user identification',
|
|
23
|
-
],
|
|
24
|
-
contentGuidelines: [
|
|
25
|
-
'Use meaningful names for users',
|
|
26
|
-
'Consider group context and purpose',
|
|
27
|
-
'Provide clear overflow indicators',
|
|
28
|
-
'Use consistent naming patterns',
|
|
29
|
-
],
|
|
30
|
-
accessibilityGuidelines: [
|
|
31
|
-
'Provide clear labels for avatar groups',
|
|
32
|
-
'Use appropriate overflow handling',
|
|
33
|
-
'Ensure keyboard navigation support',
|
|
34
|
-
'Provide clear user identification',
|
|
35
|
-
],
|
|
36
|
-
examples: [
|
|
37
|
-
{
|
|
38
|
-
name: 'Avatar Group',
|
|
39
|
-
description: 'Avatar Group example',
|
|
40
|
-
source: path.resolve(__dirname, './examples/ai/avatar-group.tsx'),
|
|
9
|
+
description:
|
|
10
|
+
'A component for displaying multiple avatars in a group with overlap and overflow handling.',
|
|
11
|
+
status: 'general-availability',
|
|
12
|
+
import: {
|
|
13
|
+
name: 'AvatarGroup',
|
|
14
|
+
package: '@atlaskit/avatar-group',
|
|
15
|
+
type: 'default',
|
|
16
|
+
packagePath: path.resolve(__dirname),
|
|
17
|
+
packageJson: require('./package.json'),
|
|
41
18
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
19
|
+
usageGuidelines: [
|
|
20
|
+
'Use for displaying multiple users or team members',
|
|
21
|
+
'Consider overflow behavior for large groups',
|
|
22
|
+
'Use appropriate sizing for context',
|
|
23
|
+
'Provide clear user identification',
|
|
24
|
+
],
|
|
25
|
+
contentGuidelines: [
|
|
26
|
+
'Use meaningful names for users',
|
|
27
|
+
'Consider group context and purpose',
|
|
28
|
+
'Provide clear overflow indicators',
|
|
29
|
+
'Use consistent naming patterns',
|
|
30
|
+
],
|
|
31
|
+
accessibilityGuidelines: [
|
|
32
|
+
'Provide clear labels for avatar groups',
|
|
33
|
+
'Use appropriate overflow handling',
|
|
34
|
+
'Ensure keyboard navigation support',
|
|
35
|
+
'Provide clear user identification',
|
|
36
|
+
],
|
|
37
|
+
examples: [
|
|
38
|
+
{
|
|
39
|
+
name: 'Avatar Group',
|
|
40
|
+
description: 'Avatar Group example',
|
|
41
|
+
source: path.resolve(__dirname, './examples/ai/avatar-group.tsx'),
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
keywords: ['avatar', 'group', 'multiple', 'users', 'team', 'overlap'],
|
|
45
|
+
categories: ['data-display'],
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
};
|
|
47
49
|
|
|
48
50
|
export default documentation;
|
|
@@ -51,7 +51,6 @@
|
|
|
51
51
|
._syaz6x5g{color:var(--ds-text-selected,#1868db)}
|
|
52
52
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
53
53
|
._t9ec1aqe{transform:translateZ(0)}
|
|
54
|
-
._t9ec1np6{transform:scale(.9)}
|
|
55
54
|
._vchh1ntv{box-sizing:content-box}
|
|
56
55
|
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
|
|
57
56
|
._128myh40:focus-visible{outline-width:2px}
|
|
@@ -65,7 +64,6 @@
|
|
|
65
64
|
._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
|
|
66
65
|
._1di61gdz:active{background-color:var(--ds-background-neutral-pressed,#080f214a)}
|
|
67
66
|
._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
|
|
68
|
-
._1q8w1np6:active{transform:scale(.9)}
|
|
69
67
|
._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
|
|
70
68
|
._9h8hi7uo:active{color:var(--ds-text,#292a2e)}
|
|
71
69
|
@media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
|
|
@@ -19,9 +19,7 @@ var boxShadowCssVar = '--avatar-box-shadow';
|
|
|
19
19
|
var styles = {
|
|
20
20
|
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu1v1w _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _jlxit94y",
|
|
21
21
|
circle: "_2rko1qll",
|
|
22
|
-
activeScale: "_1q8w1np6",
|
|
23
22
|
active: "_bfhk15s3 _16qsdfwd _syaz6x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g",
|
|
24
|
-
activeStateScale: "_t9ec1np6",
|
|
25
23
|
disabled: "_80om13gf _1peq2wxo _1hfkvuon",
|
|
26
24
|
hexagon: "_mkrz1k6g"
|
|
27
25
|
};
|
|
@@ -89,7 +87,7 @@ var MoreIndicator = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
89
87
|
"aria-haspopup": ariaHaspopup,
|
|
90
88
|
"aria-label": ariaLabel,
|
|
91
89
|
style: (0, _defineProperty2.default)({}, boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
|
|
92
|
-
className: (0, _runtime.ax)([styles.root,
|
|
90
|
+
className: (0, _runtime.ax)([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, appearance === 'hexagon' && (0, _platformFeatureFlags.fg)('jira-ai-agent-stack') && styles.hexagon, widthHeightMap[size], fontMap[size], isActive && styles.active])
|
|
93
91
|
}), "+", displayCount);
|
|
94
92
|
});
|
|
95
93
|
MoreIndicator.displayName = 'MoreIndicator';
|
|
@@ -51,7 +51,6 @@
|
|
|
51
51
|
._syaz6x5g{color:var(--ds-text-selected,#1868db)}
|
|
52
52
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
53
53
|
._t9ec1aqe{transform:translateZ(0)}
|
|
54
|
-
._t9ec1np6{transform:scale(.9)}
|
|
55
54
|
._vchh1ntv{box-sizing:content-box}
|
|
56
55
|
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
|
|
57
56
|
._128myh40:focus-visible{outline-width:2px}
|
|
@@ -65,7 +64,6 @@
|
|
|
65
64
|
._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
|
|
66
65
|
._1di61gdz:active{background-color:var(--ds-background-neutral-pressed,#080f214a)}
|
|
67
66
|
._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
|
|
68
|
-
._1q8w1np6:active{transform:scale(.9)}
|
|
69
67
|
._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
|
|
70
68
|
._9h8hi7uo:active{color:var(--ds-text,#292a2e)}
|
|
71
69
|
@media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
|
|
@@ -9,9 +9,7 @@ const boxShadowCssVar = '--avatar-box-shadow';
|
|
|
9
9
|
const styles = {
|
|
10
10
|
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu1v1w _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _jlxit94y",
|
|
11
11
|
circle: "_2rko1qll",
|
|
12
|
-
activeScale: "_1q8w1np6",
|
|
13
12
|
active: "_bfhk15s3 _16qsdfwd _syaz6x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g",
|
|
14
|
-
activeStateScale: "_t9ec1np6",
|
|
15
13
|
disabled: "_80om13gf _1peq2wxo _1hfkvuon",
|
|
16
14
|
hexagon: "_mkrz1k6g"
|
|
17
15
|
};
|
|
@@ -77,7 +75,7 @@ const MoreIndicator = /*#__PURE__*/forwardRef(({
|
|
|
77
75
|
style: {
|
|
78
76
|
[boxShadowCssVar]: `0 0 0 2px ${borderColor}`
|
|
79
77
|
},
|
|
80
|
-
className: ax([styles.root,
|
|
78
|
+
className: ax([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, appearance === 'hexagon' && fg('jira-ai-agent-stack') && styles.hexagon, widthHeightMap[size], fontMap[size], isActive && styles.active])
|
|
81
79
|
}), "+", displayCount);
|
|
82
80
|
});
|
|
83
81
|
MoreIndicator.displayName = 'MoreIndicator';
|
|
@@ -51,7 +51,6 @@
|
|
|
51
51
|
._syaz6x5g{color:var(--ds-text-selected,#1868db)}
|
|
52
52
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
53
53
|
._t9ec1aqe{transform:translateZ(0)}
|
|
54
|
-
._t9ec1np6{transform:scale(.9)}
|
|
55
54
|
._vchh1ntv{box-sizing:content-box}
|
|
56
55
|
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
|
|
57
56
|
._128myh40:focus-visible{outline-width:2px}
|
|
@@ -65,7 +64,6 @@
|
|
|
65
64
|
._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
|
|
66
65
|
._1di61gdz:active{background-color:var(--ds-background-neutral-pressed,#080f214a)}
|
|
67
66
|
._1di6nozp:active{background-color:var(--ds-background-selected-pressed,#8fb8f6)}
|
|
68
|
-
._1q8w1np6:active{transform:scale(.9)}
|
|
69
67
|
._9h8h6x5g:active{color:var(--ds-text-selected,#1868db)}
|
|
70
68
|
._9h8hi7uo:active{color:var(--ds-text,#292a2e)}
|
|
71
69
|
@media screen and (forced-colors:active){._jlxit94y:focus-visible{outline-width:1px}}
|
|
@@ -10,9 +10,7 @@ var boxShadowCssVar = '--avatar-box-shadow';
|
|
|
10
10
|
var styles = {
|
|
11
11
|
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _1pfhv77o _12l2v77o _6rthv77o _ahbqv77o _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhki8nm _syazi7uo _16qs1nhn _t9ec1aqe _1ejjglyw _mizu1v1w _ra3xnqa1 _1ah3yh40 _128myh40 _irr3plhp _30l3i7uo _1di61gdz _9h8hi7uo _jlxit94y",
|
|
12
12
|
circle: "_2rko1qll",
|
|
13
|
-
activeScale: "_1q8w1np6",
|
|
14
13
|
active: "_bfhk15s3 _16qsdfwd _syaz6x5g _irr3ufnl _30l36x5g _1di6nozp _9h8h6x5g",
|
|
15
|
-
activeStateScale: "_t9ec1np6",
|
|
16
14
|
disabled: "_80om13gf _1peq2wxo _1hfkvuon",
|
|
17
15
|
hexagon: "_mkrz1k6g"
|
|
18
16
|
};
|
|
@@ -80,7 +78,7 @@ var MoreIndicator = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
80
78
|
"aria-haspopup": ariaHaspopup,
|
|
81
79
|
"aria-label": ariaLabel,
|
|
82
80
|
style: _defineProperty({}, boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
|
|
83
|
-
className: ax([styles.root,
|
|
81
|
+
className: ax([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, appearance === 'hexagon' && fg('jira-ai-agent-stack') && styles.hexagon, widthHeightMap[size], fontMap[size], isActive && styles.active])
|
|
84
82
|
}), "+", displayCount);
|
|
85
83
|
});
|
|
86
84
|
MoreIndicator.displayName = 'MoreIndicator';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/avatar-group",
|
|
3
|
-
"version": "12.10.
|
|
3
|
+
"version": "12.10.3",
|
|
4
4
|
"description": "An avatar group displays a number of avatars grouped together in a stack or grid.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -31,16 +31,16 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@atlaskit/avatar": "^25.
|
|
34
|
+
"@atlaskit/avatar": "^25.15.0",
|
|
35
35
|
"@atlaskit/css": "^0.19.0",
|
|
36
36
|
"@atlaskit/ds-lib": "^7.0.0",
|
|
37
37
|
"@atlaskit/menu": "^8.5.0",
|
|
38
38
|
"@atlaskit/motion": "^6.2.0",
|
|
39
39
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
40
|
-
"@atlaskit/popup": "^4.
|
|
40
|
+
"@atlaskit/popup": "^4.21.0",
|
|
41
41
|
"@atlaskit/tokens": "^13.0.0",
|
|
42
|
-
"@atlaskit/tooltip": "^22.
|
|
43
|
-
"@atlaskit/top-layer": "^0.
|
|
42
|
+
"@atlaskit/tooltip": "^22.3.0",
|
|
43
|
+
"@atlaskit/top-layer": "^0.9.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@compiled/react": "^0.20.0",
|
|
46
46
|
"bind-event-listener": "^3.0.0"
|
|
@@ -58,9 +58,9 @@
|
|
|
58
58
|
"@atlaskit/form": "^15.5.0",
|
|
59
59
|
"@atlaskit/icon": "^35.0.0",
|
|
60
60
|
"@atlaskit/link": "^3.4.0",
|
|
61
|
-
"@atlaskit/modal-dialog": "^15.
|
|
61
|
+
"@atlaskit/modal-dialog": "^15.2.0",
|
|
62
62
|
"@atlaskit/primitives": "^19.0.0",
|
|
63
|
-
"@atlaskit/section-message": "^8.
|
|
63
|
+
"@atlaskit/section-message": "^8.13.0",
|
|
64
64
|
"@atlaskit/toggle": "^15.6.0",
|
|
65
65
|
"@atlassian/feature-flags-test-utils": "^1.1.0",
|
|
66
66
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
@@ -70,6 +70,7 @@
|
|
|
70
70
|
"@testing-library/react": "^16.3.0",
|
|
71
71
|
"@testing-library/user-event": "^14.4.3",
|
|
72
72
|
"lodash": "^4.17.21",
|
|
73
|
+
"react": "^18.2.0",
|
|
73
74
|
"react-dom": "^18.2.0"
|
|
74
75
|
},
|
|
75
76
|
"keywords": [
|
|
@@ -119,9 +120,6 @@
|
|
|
119
120
|
"platform-dst-motion-uplift": {
|
|
120
121
|
"type": "boolean"
|
|
121
122
|
},
|
|
122
|
-
"remove_scaling_from_avatar_stack": {
|
|
123
|
-
"type": "boolean"
|
|
124
|
-
},
|
|
125
123
|
"platform-avatar-group-pass-avatar-to-item": {
|
|
126
124
|
"type": "boolean"
|
|
127
125
|
}
|