@atlaskit/avatar 25.8.3 → 25.9.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 +21 -0
- package/avatar.docs.tsx +236 -0
- package/dist/cjs/avatar-content.compiled.css +3 -8
- package/dist/cjs/avatar-content.js +5 -11
- package/dist/cjs/avatar.js +1 -1
- package/dist/cjs/skeleton.compiled.css +1 -5
- package/dist/cjs/skeleton.js +1 -10
- package/dist/es2019/avatar-content.compiled.css +3 -8
- package/dist/es2019/avatar-content.js +5 -11
- package/dist/es2019/avatar.js +1 -1
- package/dist/es2019/skeleton.compiled.css +1 -5
- package/dist/es2019/skeleton.js +1 -10
- package/dist/esm/avatar-content.compiled.css +3 -8
- package/dist/esm/avatar-content.js +5 -11
- package/dist/esm/avatar.js +1 -1
- package/dist/esm/skeleton.compiled.css +1 -5
- package/dist/esm/skeleton.js +1 -10
- package/package.json +6 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/avatar
|
|
2
2
|
|
|
3
|
+
## 25.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`a3d111d3b5a28`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3d111d3b5a28) -
|
|
8
|
+
[ux] Cleans up platform_dst_avatar_tile and platform_dst_avatar_tile_stage2 feature gates as they
|
|
9
|
+
are fully rolled out now.
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`0511c5b5930bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0511c5b5930bb) -
|
|
14
|
+
Adjust the hexagonal appearance Avatar's width and height to be aligned with other Avatars behind
|
|
15
|
+
fg platform_dst_hexagon_avatar_unified_size
|
|
16
|
+
|
|
17
|
+
## 25.8.4
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [`eb30d533bbb0f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eb30d533bbb0f) -
|
|
22
|
+
Added hexagon appearance support for avatargroup view more dropdown button
|
|
23
|
+
|
|
3
24
|
## 25.8.3
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
package/avatar.docs.tsx
ADDED
|
@@ -0,0 +1,236 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
|
|
3
|
+
import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
|
|
4
|
+
|
|
5
|
+
const documentation: ComponentStructuredContentSource[] = [
|
|
6
|
+
{
|
|
7
|
+
name: 'Avatar',
|
|
8
|
+
description:
|
|
9
|
+
'A component for displaying user avatars with support for images, initials, and status indicators.',
|
|
10
|
+
status: 'general-availability',
|
|
11
|
+
import: {
|
|
12
|
+
name: 'Avatar',
|
|
13
|
+
package: '@atlaskit/avatar',
|
|
14
|
+
type: 'default',
|
|
15
|
+
packagePath: path.resolve(__dirname),
|
|
16
|
+
packageJson: require('./package.json'),
|
|
17
|
+
},
|
|
18
|
+
usageGuidelines: [
|
|
19
|
+
'Use for user or entity (repo, space). Circle = person; hexagon = agent/AI; square = project/repo/space',
|
|
20
|
+
'Use presence for availability; status for approval/permission states',
|
|
21
|
+
'Use consistent sizing within the same context',
|
|
22
|
+
'Place avatars in logical groupings (e.g., team members)',
|
|
23
|
+
'Use presence indicators sparingly for real-time status only',
|
|
24
|
+
'Provide fallback initials when images fail to load',
|
|
25
|
+
'Always provide meaningful names for accessibility',
|
|
26
|
+
'Use the `name` prop to include alternative text for screen readers',
|
|
27
|
+
'For decorative images, remove the `name` prop or leave it empty so it will be ignored by assistive technologies',
|
|
28
|
+
"Don't use a tooltip with an avatar when it's non-interactive or disabled. The tooltip won't work for keyboard users and screen readers",
|
|
29
|
+
],
|
|
30
|
+
contentGuidelines: [
|
|
31
|
+
'Use full names when possible for better recognition',
|
|
32
|
+
'For companies/projects, use descriptive names',
|
|
33
|
+
"Avoid generic terms like 'User' or 'Admin'",
|
|
34
|
+
'Use consistent naming conventions across your app',
|
|
35
|
+
'Keep names concise but meaningful',
|
|
36
|
+
],
|
|
37
|
+
examples: [
|
|
38
|
+
{
|
|
39
|
+
name: 'Avatar',
|
|
40
|
+
description: 'Avatar example',
|
|
41
|
+
source: path.resolve(__dirname, './examples/ai/avatar.tsx'),
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
keywords: ['avatar', 'user', 'profile', 'image', 'presence', 'status', 'representation'],
|
|
45
|
+
categories: ['images', 'data-display'],
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: 'AvatarItem',
|
|
49
|
+
description:
|
|
50
|
+
'A component that combines an avatar with text content for displaying user information in lists. AvatarItem combines an avatar with primary and secondary text to create a rich user representation in lists and menus. It supports both interactive (clickable) and non-interactive modes, making it perfect for user lists, team members, or any context where you need to display user information with actions.',
|
|
51
|
+
status: 'general-availability',
|
|
52
|
+
import: {
|
|
53
|
+
name: 'AvatarItem',
|
|
54
|
+
package: '@atlaskit/avatar',
|
|
55
|
+
type: 'named',
|
|
56
|
+
packagePath: path.resolve(__dirname),
|
|
57
|
+
packageJson: require('./package.json'),
|
|
58
|
+
},
|
|
59
|
+
usageGuidelines: [
|
|
60
|
+
'Use for displaying user information in lists and menus',
|
|
61
|
+
'Choose between interactive and display-only based on context',
|
|
62
|
+
'Provide clear primary and secondary text hierarchy',
|
|
63
|
+
'Use consistent spacing and alignment within lists',
|
|
64
|
+
'Consider the interaction pattern before implementation',
|
|
65
|
+
'Use AvatarItem when you need to show user information with additional context like names, emails, or status information',
|
|
66
|
+
'Provide clear primary and secondary text',
|
|
67
|
+
'Use meaningful labels for accessibility',
|
|
68
|
+
'Consider the interaction pattern (clickable vs display-only) based on your use case',
|
|
69
|
+
],
|
|
70
|
+
contentGuidelines: [
|
|
71
|
+
'Use clear, descriptive primary text (usually names)',
|
|
72
|
+
'Provide relevant secondary text (emails, roles, etc.)',
|
|
73
|
+
'Keep text concise but informative',
|
|
74
|
+
'Use consistent formatting across similar items',
|
|
75
|
+
'Avoid redundant information between primary and secondary text',
|
|
76
|
+
],
|
|
77
|
+
examples: [
|
|
78
|
+
{
|
|
79
|
+
name: 'Avatar Item',
|
|
80
|
+
description: 'Avatar Item example',
|
|
81
|
+
source: path.resolve(__dirname, './examples/ai/avatar-item.tsx'),
|
|
82
|
+
},
|
|
83
|
+
],
|
|
84
|
+
keywords: ['avatar', 'item', 'list', 'user', 'profile', 'interactive'],
|
|
85
|
+
categories: ['images', 'data-display', 'interaction'],
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
name: 'Presence',
|
|
89
|
+
description:
|
|
90
|
+
"A standalone component for displaying user presence indicators. Presence indicators show the current availability status of users. They help other users understand when someone is available for communication and are useful in collaborative applications where knowing someone's availability is important for workflow.",
|
|
91
|
+
status: 'general-availability',
|
|
92
|
+
import: {
|
|
93
|
+
name: 'Presence',
|
|
94
|
+
package: '@atlaskit/avatar',
|
|
95
|
+
type: 'named',
|
|
96
|
+
packagePath: path.resolve(__dirname),
|
|
97
|
+
packageJson: require('./package.json'),
|
|
98
|
+
},
|
|
99
|
+
usageGuidelines: [
|
|
100
|
+
'Prefer using `<Avatar presence="…" />` instead of `<Presence presence="…" />`',
|
|
101
|
+
'Use sparingly for real-time status only',
|
|
102
|
+
"Don't overuse as they can create visual clutter",
|
|
103
|
+
'Show presence only when relevant to user workflow',
|
|
104
|
+
'Use consistent presence states across the application',
|
|
105
|
+
'Consider the context and user needs before showing presence',
|
|
106
|
+
'Use presence indicators sparingly for real-time status',
|
|
107
|
+
"Don't overuse them as they can create visual clutter",
|
|
108
|
+
"Only show presence when it's relevant to the user's workflow",
|
|
109
|
+
],
|
|
110
|
+
contentGuidelines: [
|
|
111
|
+
'Use clear, universally understood presence states',
|
|
112
|
+
'Be consistent with presence terminology',
|
|
113
|
+
'Provide clear visual distinction between states',
|
|
114
|
+
'Avoid ambiguous or unclear presence indicators',
|
|
115
|
+
],
|
|
116
|
+
examples: [
|
|
117
|
+
{
|
|
118
|
+
name: 'Presence',
|
|
119
|
+
description: 'Presence example',
|
|
120
|
+
source: path.resolve(__dirname, './examples/ai/presence.tsx'),
|
|
121
|
+
},
|
|
122
|
+
],
|
|
123
|
+
keywords: ['presence', 'status', 'online', 'offline', 'busy', 'focus', 'indicator'],
|
|
124
|
+
categories: ['status', 'data-display'],
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
name: 'Status',
|
|
128
|
+
description:
|
|
129
|
+
'A standalone component for displaying status indicators. Status indicators show the approval or permission state of users or entities. They help communicate important state information at a glance and are useful in workflow applications where approval states or permissions are important for user understanding.',
|
|
130
|
+
status: 'general-availability',
|
|
131
|
+
import: {
|
|
132
|
+
name: 'Status',
|
|
133
|
+
package: '@atlaskit/avatar',
|
|
134
|
+
type: 'named',
|
|
135
|
+
packagePath: path.resolve(__dirname),
|
|
136
|
+
packageJson: require('./package.json'),
|
|
137
|
+
},
|
|
138
|
+
usageGuidelines: [
|
|
139
|
+
'Prefer using `<Avatar status="…" />` instead of `<Status status="…" />`',
|
|
140
|
+
'Use for approval states, permission levels, or important state information',
|
|
141
|
+
'Make sure the status is relevant and helpful to user workflow',
|
|
142
|
+
'Use consistent status states across the application',
|
|
143
|
+
'Consider the context and user needs before showing status',
|
|
144
|
+
"Don't overuse status indicators to avoid visual clutter",
|
|
145
|
+
'Use status indicators to show approval states, permission levels, or other important state information that affects how users should interact with the entity',
|
|
146
|
+
"Make sure the status is relevant and helpful to the user's workflow",
|
|
147
|
+
],
|
|
148
|
+
contentGuidelines: [
|
|
149
|
+
'Use clear, universally understood status states',
|
|
150
|
+
'Be consistent with status terminology',
|
|
151
|
+
'Provide clear visual distinction between states',
|
|
152
|
+
'Avoid ambiguous or unclear status indicators',
|
|
153
|
+
],
|
|
154
|
+
examples: [
|
|
155
|
+
{
|
|
156
|
+
name: 'Status',
|
|
157
|
+
description: 'Status example',
|
|
158
|
+
source: path.resolve(__dirname, './examples/ai/status.tsx'),
|
|
159
|
+
},
|
|
160
|
+
],
|
|
161
|
+
keywords: ['status', 'approved', 'declined', 'locked', 'indicator', 'permission'],
|
|
162
|
+
categories: ['status', 'data-display'],
|
|
163
|
+
},
|
|
164
|
+
{
|
|
165
|
+
name: 'Skeleton',
|
|
166
|
+
description:
|
|
167
|
+
"A skeleton loading component for avatars that shows a placeholder while content is loading. Skeleton components provide visual feedback during loading states, helping users understand that content is being fetched. Skeleton components should match the size and shape of the actual content they're replacing to prevent layout shifts.",
|
|
168
|
+
status: 'general-availability',
|
|
169
|
+
import: {
|
|
170
|
+
name: 'Skeleton',
|
|
171
|
+
package: '@atlaskit/avatar',
|
|
172
|
+
type: 'named',
|
|
173
|
+
packagePath: path.resolve(__dirname),
|
|
174
|
+
packageJson: require('./package.json'),
|
|
175
|
+
},
|
|
176
|
+
usageGuidelines: [
|
|
177
|
+
'Use during loading states to maintain layout stability',
|
|
178
|
+
'Match the size and shape of the actual avatar content',
|
|
179
|
+
'Prevent layout shifts by maintaining consistent dimensions',
|
|
180
|
+
'Use for short loading periods (under 3 seconds)',
|
|
181
|
+
'Consider using spinners for longer loading times',
|
|
182
|
+
'Use skeleton avatars when user data is loading to maintain layout stability and provide visual feedback',
|
|
183
|
+
'Match the size and shape of the actual avatar content to prevent layout shifts',
|
|
184
|
+
],
|
|
185
|
+
contentGuidelines: [
|
|
186
|
+
'Keep skeleton content minimal and non-distracting',
|
|
187
|
+
'Use consistent skeleton patterns across similar components',
|
|
188
|
+
'Avoid overly detailed skeleton content',
|
|
189
|
+
'Ensure skeleton content is clearly distinguishable from real content',
|
|
190
|
+
],
|
|
191
|
+
examples: [
|
|
192
|
+
{
|
|
193
|
+
name: 'Skeleton',
|
|
194
|
+
description: 'Skeleton example',
|
|
195
|
+
source: path.resolve(__dirname, './examples/ai/skeleton.tsx'),
|
|
196
|
+
},
|
|
197
|
+
],
|
|
198
|
+
keywords: ['skeleton', 'loading', 'placeholder', 'shimmer', 'avatar'],
|
|
199
|
+
categories: ['loading', 'data-display'],
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
name: 'AvatarContent',
|
|
203
|
+
description:
|
|
204
|
+
'A wrapper component for custom avatar content that provides consistent styling and behavior.',
|
|
205
|
+
status: 'general-availability',
|
|
206
|
+
import: {
|
|
207
|
+
name: 'AvatarContent',
|
|
208
|
+
package: '@atlaskit/avatar',
|
|
209
|
+
type: 'named',
|
|
210
|
+
packagePath: path.resolve(__dirname),
|
|
211
|
+
packageJson: require('./package.json'),
|
|
212
|
+
},
|
|
213
|
+
usageGuidelines: [
|
|
214
|
+
'Use for custom avatar content that needs consistent styling',
|
|
215
|
+
'Wrap custom content to maintain avatar behavior',
|
|
216
|
+
'Ensure custom content follows avatar design principles',
|
|
217
|
+
"Use when standard avatar props don't meet your needs",
|
|
218
|
+
],
|
|
219
|
+
contentGuidelines: [
|
|
220
|
+
'Ensure custom content is appropriate for avatar context',
|
|
221
|
+
'Maintain consistent visual hierarchy',
|
|
222
|
+
'Keep custom content simple and clear',
|
|
223
|
+
],
|
|
224
|
+
examples: [
|
|
225
|
+
{
|
|
226
|
+
name: 'Avatar Content',
|
|
227
|
+
description: 'Avatar Content example',
|
|
228
|
+
source: path.resolve(__dirname, './examples/ai/avatar-content.tsx'),
|
|
229
|
+
},
|
|
230
|
+
],
|
|
231
|
+
keywords: ['avatar', 'content', 'custom', 'children', 'wrapper'],
|
|
232
|
+
categories: ['images', 'data-display'],
|
|
233
|
+
},
|
|
234
|
+
];
|
|
235
|
+
|
|
236
|
+
export default documentation;
|
|
@@ -1,27 +1,22 @@
|
|
|
1
1
|
|
|
2
|
-
._14mj12b0:after{border-radius:var(--ds-radius-small,4px)}
|
|
3
|
-
._14mj1qi0:after{border-radius:var(--ds-radius-medium,6px)}
|
|
4
2
|
._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
|
|
5
3
|
._14mjidpf:after{border-radius:0}
|
|
6
|
-
._14mjlb4i:after{border-radius:var(--ds-radius-xsmall,2px)}
|
|
7
|
-
._14mjpb1k:after{border-radius:var(--ds-radius-xlarge,9pt)}
|
|
8
4
|
._19itglyw{border:none}
|
|
9
|
-
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
10
|
-
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
11
5
|
._2rko1qll{border-radius:var(--ds-radius-full,50%)}
|
|
12
6
|
._2rkoidpf{border-radius:0}
|
|
13
7
|
._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
|
|
14
|
-
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
|
|
15
|
-
._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
|
|
16
8
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
17
9
|
._qc5o1p41:after{transition:opacity .2s}
|
|
18
10
|
._v564ieh6{transition:transform .2s,opacity .2s}
|
|
19
11
|
._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
|
|
20
12
|
._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
|
|
13
|
+
._195g1ksc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1)}
|
|
21
14
|
._195g1ukp{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 8px)}
|
|
22
15
|
._195g8ocb{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 4px)}
|
|
23
16
|
._195gcwjc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 1px)}
|
|
24
17
|
._195gs7t4{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 2px)}
|
|
18
|
+
._195gzwb8{margin-inline:calc(var(--ds-border-width-selected, 2px)*.4*-1)}
|
|
19
|
+
._1mou18m8{margin-block:calc(var(--ds-border-width-selected, 2px)*.5*-1)}
|
|
25
20
|
._1mou5h37{margin-block:calc(var(--ds-border-width-selected, 2px)*1.25*-1)}
|
|
26
21
|
._1rjc1wgn{padding-block:calc(var(--ds-border-width-selected, 2px)*1.25)}
|
|
27
22
|
._1rjcf6hp{padding-block:calc(var(--ds-border-width-selected, 2px)*.5)}._11fnglyw:after{pointer-events:none}
|
|
@@ -28,7 +28,9 @@ var styles = {
|
|
|
28
28
|
var unboundStyles = {
|
|
29
29
|
root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
|
|
30
30
|
hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _bfhk1j28 _mkrz1k6g _1o9o1v1w",
|
|
31
|
+
hexagonFocusContainerMarginFg: "_195g1ksc",
|
|
31
32
|
hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
|
|
33
|
+
hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
|
|
32
34
|
hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
|
|
33
35
|
interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
|
|
34
36
|
};
|
|
@@ -48,14 +50,6 @@ var marginAdjustmentMap = {
|
|
|
48
50
|
xlarge: "_195g8ocb",
|
|
49
51
|
xxlarge: "_195g1ukp"
|
|
50
52
|
};
|
|
51
|
-
var borderRadiusMap = {
|
|
52
|
-
xsmall: "_2rkolb4i _14mjlb4i",
|
|
53
|
-
small: "_2rkolb4i _14mjlb4i",
|
|
54
|
-
medium: "_2rko12b0 _14mj12b0",
|
|
55
|
-
large: "_2rko12b0 _14mj12b0",
|
|
56
|
-
xlarge: "_2rko1qi0 _14mj1qi0",
|
|
57
|
-
xxlarge: "_2rkopb1k _14mjpb1k"
|
|
58
|
-
};
|
|
59
53
|
/**
|
|
60
54
|
* __Avatar content__
|
|
61
55
|
*
|
|
@@ -106,7 +100,7 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
106
100
|
target: target,
|
|
107
101
|
rel: target === '_blank' ? 'noopener noreferrer' : undefined
|
|
108
102
|
}, {
|
|
109
|
-
className: (0, _runtime.ax)([unboundStyles.root, styles.root,
|
|
103
|
+
className: (0, _runtime.ax)([unboundStyles.root, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
|
|
110
104
|
}), children || avatarImage);
|
|
111
105
|
if (appearance !== 'hexagon') {
|
|
112
106
|
return renderedContent;
|
|
@@ -117,9 +111,9 @@ var AvatarContent = exports.AvatarContent = /*#__PURE__*/(0, _react.forwardRef)(
|
|
|
117
111
|
return /*#__PURE__*/React.createElement("div", {
|
|
118
112
|
style: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
|
|
119
113
|
"data-testid": testId ? "".concat(testId, "-hexagon-focus-container") : 'hexagon-focus-container',
|
|
120
|
-
className: (0, _runtime.ax)([unboundStyles.hexagonFocusContainer, marginAdjustmentMap[size]])
|
|
114
|
+
className: (0, _runtime.ax)([unboundStyles.hexagonFocusContainer, !(0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], (0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
|
|
121
115
|
}, /*#__PURE__*/React.createElement("div", {
|
|
122
116
|
"data-testid": testId ? "".concat(testId, "-hexagon-border-container") : 'hexagon-border-container',
|
|
123
|
-
className: (0, _runtime.ax)([unboundStyles.hexagonBorderContainer])
|
|
117
|
+
className: (0, _runtime.ax)([unboundStyles.hexagonBorderContainer, (0, _platformFeatureFlags.fg)('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
|
|
124
118
|
}, renderedContent));
|
|
125
119
|
});
|
package/dist/cjs/avatar.js
CHANGED
|
@@ -24,7 +24,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
24
24
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
25
25
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
26
26
|
var packageName = "@atlaskit/avatar";
|
|
27
|
-
var packageVersion = "
|
|
27
|
+
var packageVersion = "25.8.4";
|
|
28
28
|
var containerStyles = null;
|
|
29
29
|
|
|
30
30
|
// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
3
|
-
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
2
|
._2rko1qll{border-radius:var(--ds-radius-full,50%)}
|
|
5
|
-
._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
|
|
6
|
-
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
|
|
7
|
-
._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
|
|
3
|
+
._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
|
|
8
4
|
._1dqonqa1{border-style:solid}
|
|
9
5
|
._1h6d1j28{border-color:transparent}
|
|
10
6
|
._1bsb16xz{width:6pc}
|
package/dist/cjs/skeleton.js
CHANGED
|
@@ -11,7 +11,6 @@ require("./skeleton.compiled.css");
|
|
|
11
11
|
var React = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _runtime = require("@compiled/react/runtime");
|
|
13
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
15
14
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
16
15
|
var bgColorCssVar = '--avatar-skeleton-background-color';
|
|
17
16
|
var styles = {
|
|
@@ -28,14 +27,6 @@ var sizeStyles = {
|
|
|
28
27
|
xlarge: "_1bsb16xz _4t3i16xz",
|
|
29
28
|
xxlarge: "_1bsb1qr7 _4t3i1qr7"
|
|
30
29
|
};
|
|
31
|
-
var borderRadiusMap = {
|
|
32
|
-
xsmall: "_2rkolb4i",
|
|
33
|
-
small: "_2rkolb4i",
|
|
34
|
-
medium: "_2rko12b0",
|
|
35
|
-
large: "_2rko12b0",
|
|
36
|
-
xlarge: "_2rko1qi0",
|
|
37
|
-
xxlarge: "_2rkopb1k"
|
|
38
|
-
};
|
|
39
30
|
|
|
40
31
|
/**
|
|
41
32
|
* __Skeleton__
|
|
@@ -52,7 +43,7 @@ var Skeleton = function Skeleton(_ref) {
|
|
|
52
43
|
weight = _ref.weight;
|
|
53
44
|
return /*#__PURE__*/React.createElement("div", {
|
|
54
45
|
style: (0, _defineProperty2.default)({}, bgColorCssVar, color !== null && color !== void 0 ? color : 'currentColor'),
|
|
55
|
-
className: (0, _runtime.ax)([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' &&
|
|
46
|
+
className: (0, _runtime.ax)([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && styles.square, appearance === 'hexagon' && styles.hexagon, weight === 'strong' && styles.strongOpacity])
|
|
56
47
|
});
|
|
57
48
|
};
|
|
58
49
|
var _default = exports.default = Skeleton;
|
|
@@ -1,27 +1,22 @@
|
|
|
1
1
|
|
|
2
|
-
._14mj12b0:after{border-radius:var(--ds-radius-small,4px)}
|
|
3
|
-
._14mj1qi0:after{border-radius:var(--ds-radius-medium,6px)}
|
|
4
2
|
._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
|
|
5
3
|
._14mjidpf:after{border-radius:0}
|
|
6
|
-
._14mjlb4i:after{border-radius:var(--ds-radius-xsmall,2px)}
|
|
7
|
-
._14mjpb1k:after{border-radius:var(--ds-radius-xlarge,9pt)}
|
|
8
4
|
._19itglyw{border:none}
|
|
9
|
-
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
10
|
-
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
11
5
|
._2rko1qll{border-radius:var(--ds-radius-full,50%)}
|
|
12
6
|
._2rkoidpf{border-radius:0}
|
|
13
7
|
._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
|
|
14
|
-
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
|
|
15
|
-
._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
|
|
16
8
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
17
9
|
._qc5o1p41:after{transition:opacity .2s}
|
|
18
10
|
._v564ieh6{transition:transform .2s,opacity .2s}
|
|
19
11
|
._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
|
|
20
12
|
._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
|
|
13
|
+
._195g1ksc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1)}
|
|
21
14
|
._195g1ukp{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 8px)}
|
|
22
15
|
._195g8ocb{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 4px)}
|
|
23
16
|
._195gcwjc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 1px)}
|
|
24
17
|
._195gs7t4{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 2px)}
|
|
18
|
+
._195gzwb8{margin-inline:calc(var(--ds-border-width-selected, 2px)*.4*-1)}
|
|
19
|
+
._1mou18m8{margin-block:calc(var(--ds-border-width-selected, 2px)*.5*-1)}
|
|
25
20
|
._1mou5h37{margin-block:calc(var(--ds-border-width-selected, 2px)*1.25*-1)}
|
|
26
21
|
._1rjc1wgn{padding-block:calc(var(--ds-border-width-selected, 2px)*1.25)}
|
|
27
22
|
._1rjcf6hp{padding-block:calc(var(--ds-border-width-selected, 2px)*.5)}._11fnglyw:after{pointer-events:none}
|
|
@@ -18,7 +18,9 @@ const styles = {
|
|
|
18
18
|
const unboundStyles = {
|
|
19
19
|
root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
|
|
20
20
|
hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _bfhk1j28 _mkrz1k6g _1o9o1v1w",
|
|
21
|
+
hexagonFocusContainerMarginFg: "_195g1ksc",
|
|
21
22
|
hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
|
|
23
|
+
hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
|
|
22
24
|
hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
|
|
23
25
|
interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
|
|
24
26
|
};
|
|
@@ -38,14 +40,6 @@ const marginAdjustmentMap = {
|
|
|
38
40
|
xlarge: "_195g8ocb",
|
|
39
41
|
xxlarge: "_195g1ukp"
|
|
40
42
|
};
|
|
41
|
-
const borderRadiusMap = {
|
|
42
|
-
xsmall: "_2rkolb4i _14mjlb4i",
|
|
43
|
-
small: "_2rkolb4i _14mjlb4i",
|
|
44
|
-
medium: "_2rko12b0 _14mj12b0",
|
|
45
|
-
large: "_2rko12b0 _14mj12b0",
|
|
46
|
-
xlarge: "_2rko1qi0 _14mj1qi0",
|
|
47
|
-
xxlarge: "_2rkopb1k _14mjpb1k"
|
|
48
|
-
};
|
|
49
43
|
/**
|
|
50
44
|
* __Avatar content__
|
|
51
45
|
*
|
|
@@ -100,7 +94,7 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
|
|
|
100
94
|
target,
|
|
101
95
|
rel: target === '_blank' ? 'noopener noreferrer' : undefined
|
|
102
96
|
}, {
|
|
103
|
-
className: ax([unboundStyles.root, styles.root,
|
|
97
|
+
className: ax([unboundStyles.root, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
|
|
104
98
|
}), children || avatarImage);
|
|
105
99
|
if (appearance !== 'hexagon') {
|
|
106
100
|
return renderedContent;
|
|
@@ -114,9 +108,9 @@ export const AvatarContent = /*#__PURE__*/forwardRef(({
|
|
|
114
108
|
[boxShadowCssVar]: `0 0 0 2px ${borderColor}`
|
|
115
109
|
},
|
|
116
110
|
"data-testid": testId ? `${testId}-hexagon-focus-container` : 'hexagon-focus-container',
|
|
117
|
-
className: ax([unboundStyles.hexagonFocusContainer, marginAdjustmentMap[size]])
|
|
111
|
+
className: ax([unboundStyles.hexagonFocusContainer, !fg('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
|
|
118
112
|
}, /*#__PURE__*/React.createElement("div", {
|
|
119
113
|
"data-testid": testId ? `${testId}-hexagon-border-container` : 'hexagon-border-container',
|
|
120
|
-
className: ax([unboundStyles.hexagonBorderContainer])
|
|
114
|
+
className: ax([unboundStyles.hexagonBorderContainer, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
|
|
121
115
|
}, renderedContent));
|
|
122
116
|
});
|
package/dist/es2019/avatar.js
CHANGED
|
@@ -12,7 +12,7 @@ import { PresenceWrapper } from './presence';
|
|
|
12
12
|
import { StatusWrapper } from './status';
|
|
13
13
|
import { getCustomElement } from './utilities';
|
|
14
14
|
const packageName = "@atlaskit/avatar";
|
|
15
|
-
const packageVersion = "
|
|
15
|
+
const packageVersion = "25.8.4";
|
|
16
16
|
const containerStyles = null;
|
|
17
17
|
|
|
18
18
|
// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
3
|
-
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
2
|
._2rko1qll{border-radius:var(--ds-radius-full,50%)}
|
|
5
|
-
._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
|
|
6
|
-
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
|
|
7
|
-
._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
|
|
3
|
+
._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
|
|
8
4
|
._1dqonqa1{border-style:solid}
|
|
9
5
|
._1h6d1j28{border-color:transparent}
|
|
10
6
|
._1bsb16xz{width:6pc}
|
package/dist/es2019/skeleton.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import "./skeleton.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
const bgColorCssVar = '--avatar-skeleton-background-color';
|
|
7
6
|
const styles = {
|
|
8
7
|
root: "_2rko1qll _189e1dm9 _1dqonqa1 _1h6d1j28 _1e0c1o8l _bfhk1r8p _tzy4nh7s",
|
|
@@ -18,14 +17,6 @@ const sizeStyles = {
|
|
|
18
17
|
xlarge: "_1bsb16xz _4t3i16xz",
|
|
19
18
|
xxlarge: "_1bsb1qr7 _4t3i1qr7"
|
|
20
19
|
};
|
|
21
|
-
const borderRadiusMap = {
|
|
22
|
-
xsmall: "_2rkolb4i",
|
|
23
|
-
small: "_2rkolb4i",
|
|
24
|
-
medium: "_2rko12b0",
|
|
25
|
-
large: "_2rko12b0",
|
|
26
|
-
xlarge: "_2rko1qi0",
|
|
27
|
-
xxlarge: "_2rkopb1k"
|
|
28
|
-
};
|
|
29
20
|
|
|
30
21
|
/**
|
|
31
22
|
* __Skeleton__
|
|
@@ -44,6 +35,6 @@ const Skeleton = ({
|
|
|
44
35
|
style: {
|
|
45
36
|
[bgColorCssVar]: color !== null && color !== void 0 ? color : 'currentColor'
|
|
46
37
|
},
|
|
47
|
-
className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' &&
|
|
38
|
+
className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && styles.square, appearance === 'hexagon' && styles.hexagon, weight === 'strong' && styles.strongOpacity])
|
|
48
39
|
});
|
|
49
40
|
export default Skeleton;
|
|
@@ -1,27 +1,22 @@
|
|
|
1
1
|
|
|
2
|
-
._14mj12b0:after{border-radius:var(--ds-radius-small,4px)}
|
|
3
|
-
._14mj1qi0:after{border-radius:var(--ds-radius-medium,6px)}
|
|
4
2
|
._14mj1qll:after{border-radius:var(--ds-radius-full,50%)}
|
|
5
3
|
._14mjidpf:after{border-radius:0}
|
|
6
|
-
._14mjlb4i:after{border-radius:var(--ds-radius-xsmall,2px)}
|
|
7
|
-
._14mjpb1k:after{border-radius:var(--ds-radius-xlarge,9pt)}
|
|
8
4
|
._19itglyw{border:none}
|
|
9
|
-
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
10
|
-
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
11
5
|
._2rko1qll{border-radius:var(--ds-radius-full,50%)}
|
|
12
6
|
._2rkoidpf{border-radius:0}
|
|
13
7
|
._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
|
|
14
|
-
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
|
|
15
|
-
._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
|
|
16
8
|
._9v7aze3t:after{inset:var(--ds-space-0,0)}
|
|
17
9
|
._qc5o1p41:after{transition:opacity .2s}
|
|
18
10
|
._v564ieh6{transition:transform .2s,opacity .2s}
|
|
19
11
|
._18zr1dm9{padding-inline:var(--ds-border-width-selected,2px)}
|
|
20
12
|
._18zruxly{padding-inline:calc(var(--ds-border-width-selected, 2px)*.4)}
|
|
13
|
+
._195g1ksc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1)}
|
|
21
14
|
._195g1ukp{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 8px)}
|
|
22
15
|
._195g8ocb{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 4px)}
|
|
23
16
|
._195gcwjc{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 1px)}
|
|
24
17
|
._195gs7t4{margin-inline:calc(var(--ds-border-width-selected, 2px)*-1 - 2px)}
|
|
18
|
+
._195gzwb8{margin-inline:calc(var(--ds-border-width-selected, 2px)*.4*-1)}
|
|
19
|
+
._1mou18m8{margin-block:calc(var(--ds-border-width-selected, 2px)*.5*-1)}
|
|
25
20
|
._1mou5h37{margin-block:calc(var(--ds-border-width-selected, 2px)*1.25*-1)}
|
|
26
21
|
._1rjc1wgn{padding-block:calc(var(--ds-border-width-selected, 2px)*1.25)}
|
|
27
22
|
._1rjcf6hp{padding-block:calc(var(--ds-border-width-selected, 2px)*.5)}._11fnglyw:after{pointer-events:none}
|
|
@@ -19,7 +19,9 @@ var styles = {
|
|
|
19
19
|
var unboundStyles = {
|
|
20
20
|
root: "_vchh1ntv _bfhkcxp3 _16qs1nhn",
|
|
21
21
|
hexagonFocusContainer: "_1rjc1wgn _18zr1dm9 _1mou5h37 _bfhk1j28 _mkrz1k6g _1o9o1v1w",
|
|
22
|
+
hexagonFocusContainerMarginFg: "_195g1ksc",
|
|
22
23
|
hexagonBorderContainer: "_1rjcf6hp _18zruxly _bfhkcxp3 _mkrz1kw7 _1o9ovuon",
|
|
24
|
+
hexagonBorderContainerMarginFg: "_1mou18m8 _195gzwb8",
|
|
23
25
|
hexagon: "_2rkoidpf _mkrz1kw7 _16qsn7od _14mjidpf _1ejjn7od _128midpf _4davidpf",
|
|
24
26
|
interactive: "_80omtlke _4tpu1g4v _ez1ykb7n _gcm1182g _eeh8kb7n _jlxit94y"
|
|
25
27
|
};
|
|
@@ -39,14 +41,6 @@ var marginAdjustmentMap = {
|
|
|
39
41
|
xlarge: "_195g8ocb",
|
|
40
42
|
xxlarge: "_195g1ukp"
|
|
41
43
|
};
|
|
42
|
-
var borderRadiusMap = {
|
|
43
|
-
xsmall: "_2rkolb4i _14mjlb4i",
|
|
44
|
-
small: "_2rkolb4i _14mjlb4i",
|
|
45
|
-
medium: "_2rko12b0 _14mj12b0",
|
|
46
|
-
large: "_2rko12b0 _14mj12b0",
|
|
47
|
-
xlarge: "_2rko1qi0 _14mj1qi0",
|
|
48
|
-
xxlarge: "_2rkopb1k _14mjpb1k"
|
|
49
|
-
};
|
|
50
44
|
/**
|
|
51
45
|
* __Avatar content__
|
|
52
46
|
*
|
|
@@ -97,7 +91,7 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
97
91
|
target: target,
|
|
98
92
|
rel: target === '_blank' ? 'noopener noreferrer' : undefined
|
|
99
93
|
}, {
|
|
100
|
-
className: ax([unboundStyles.root, styles.root,
|
|
94
|
+
className: ax([unboundStyles.root, styles.root, appearance === 'square' && styles.square, appearance === 'circle' && styles.circle, appearance === 'hexagon' && unboundStyles.hexagon, widthHeightMap[size], stackIndex !== undefined && styles.positionRelative, isInteractive && !isDisabled && unboundStyles.interactive, isDisabled && styles.disabled])
|
|
101
95
|
}), children || avatarImage);
|
|
102
96
|
if (appearance !== 'hexagon') {
|
|
103
97
|
return renderedContent;
|
|
@@ -108,9 +102,9 @@ export var AvatarContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
108
102
|
return /*#__PURE__*/React.createElement("div", {
|
|
109
103
|
style: _defineProperty(_defineProperty({}, bgColorCssVar, borderColor), boxShadowCssVar, "0 0 0 2px ".concat(borderColor)),
|
|
110
104
|
"data-testid": testId ? "".concat(testId, "-hexagon-focus-container") : 'hexagon-focus-container',
|
|
111
|
-
className: ax([unboundStyles.hexagonFocusContainer, marginAdjustmentMap[size]])
|
|
105
|
+
className: ax([unboundStyles.hexagonFocusContainer, !fg('platform_dst_hexagon_avatar_unified_size') && marginAdjustmentMap[size], fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonFocusContainerMarginFg])
|
|
112
106
|
}, /*#__PURE__*/React.createElement("div", {
|
|
113
107
|
"data-testid": testId ? "".concat(testId, "-hexagon-border-container") : 'hexagon-border-container',
|
|
114
|
-
className: ax([unboundStyles.hexagonBorderContainer])
|
|
108
|
+
className: ax([unboundStyles.hexagonBorderContainer, fg('platform_dst_hexagon_avatar_unified_size') && unboundStyles.hexagonBorderContainerMarginFg])
|
|
115
109
|
}, renderedContent));
|
|
116
110
|
});
|
package/dist/esm/avatar.js
CHANGED
|
@@ -15,7 +15,7 @@ import { PresenceWrapper } from './presence';
|
|
|
15
15
|
import { StatusWrapper } from './status';
|
|
16
16
|
import { getCustomElement } from './utilities';
|
|
17
17
|
var packageName = "@atlaskit/avatar";
|
|
18
|
-
var packageVersion = "
|
|
18
|
+
var packageVersion = "25.8.4";
|
|
19
19
|
var containerStyles = null;
|
|
20
20
|
|
|
21
21
|
// eslint-disable-next-line @repo/internal/react/consistent-types-definitions
|
|
@@ -1,10 +1,6 @@
|
|
|
1
1
|
|
|
2
|
-
._2rko12b0{border-radius:var(--ds-radius-small,4px)}
|
|
3
|
-
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
2
|
._2rko1qll{border-radius:var(--ds-radius-full,50%)}
|
|
5
|
-
._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
|
|
6
|
-
._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
|
|
7
|
-
._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
|
|
3
|
+
._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
|
|
8
4
|
._1dqonqa1{border-style:solid}
|
|
9
5
|
._1h6d1j28{border-color:transparent}
|
|
10
6
|
._1bsb16xz{width:6pc}
|
package/dist/esm/skeleton.js
CHANGED
|
@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
3
3
|
import "./skeleton.compiled.css";
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { ax, ix } from "@compiled/react/runtime";
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
var bgColorCssVar = '--avatar-skeleton-background-color';
|
|
8
7
|
var styles = {
|
|
9
8
|
root: "_2rko1qll _189e1dm9 _1dqonqa1 _1h6d1j28 _1e0c1o8l _bfhk1r8p _tzy4nh7s",
|
|
@@ -19,14 +18,6 @@ var sizeStyles = {
|
|
|
19
18
|
xlarge: "_1bsb16xz _4t3i16xz",
|
|
20
19
|
xxlarge: "_1bsb1qr7 _4t3i1qr7"
|
|
21
20
|
};
|
|
22
|
-
var borderRadiusMap = {
|
|
23
|
-
xsmall: "_2rkolb4i",
|
|
24
|
-
small: "_2rkolb4i",
|
|
25
|
-
medium: "_2rko12b0",
|
|
26
|
-
large: "_2rko12b0",
|
|
27
|
-
xlarge: "_2rko1qi0",
|
|
28
|
-
xxlarge: "_2rkopb1k"
|
|
29
|
-
};
|
|
30
21
|
|
|
31
22
|
/**
|
|
32
23
|
* __Skeleton__
|
|
@@ -43,7 +34,7 @@ var Skeleton = function Skeleton(_ref) {
|
|
|
43
34
|
weight = _ref.weight;
|
|
44
35
|
return /*#__PURE__*/React.createElement("div", {
|
|
45
36
|
style: _defineProperty({}, bgColorCssVar, color !== null && color !== void 0 ? color : 'currentColor'),
|
|
46
|
-
className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' &&
|
|
37
|
+
className: ax([styles.root, sizeStyles[size !== null && size !== void 0 ? size : 'medium'], appearance === 'square' && styles.square, appearance === 'hexagon' && styles.hexagon, weight === 'strong' && styles.strongOpacity])
|
|
47
38
|
});
|
|
48
39
|
};
|
|
49
40
|
export default Skeleton;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/avatar",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.9.0",
|
|
4
4
|
"description": "An avatar is a visual representation of a user or entity.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@atlaskit/analytics-next": "^11.1.0",
|
|
36
36
|
"@atlaskit/css": "^0.19.0",
|
|
37
37
|
"@atlaskit/ds-lib": "^6.0.0",
|
|
38
|
-
"@atlaskit/icon": "^32.
|
|
38
|
+
"@atlaskit/icon": "^32.1.0",
|
|
39
39
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
40
40
|
"@atlaskit/primitives": "^18.0.0",
|
|
41
41
|
"@atlaskit/theme": "^22.0.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@af/visual-regression": "workspace:^",
|
|
53
53
|
"@atlaskit/button": "^23.10.0",
|
|
54
54
|
"@atlaskit/code": "^17.4.0",
|
|
55
|
-
"@atlaskit/docs": "^11.
|
|
55
|
+
"@atlaskit/docs": "^11.7.0",
|
|
56
56
|
"@atlaskit/form": "^15.4.0",
|
|
57
57
|
"@atlaskit/heading": "^5.3.0",
|
|
58
58
|
"@atlaskit/link": "^3.3.0",
|
|
@@ -96,11 +96,9 @@
|
|
|
96
96
|
"platform.design-system-team.avatar-item-font-size_830x6": {
|
|
97
97
|
"type": "boolean"
|
|
98
98
|
},
|
|
99
|
-
"
|
|
100
|
-
"type": "boolean"
|
|
101
|
-
|
|
102
|
-
"platform_dst_avatar_tile_stage2": {
|
|
103
|
-
"type": "boolean"
|
|
99
|
+
"platform_dst_hexagon_avatar_unified_size": {
|
|
100
|
+
"type": "boolean",
|
|
101
|
+
"showOnWebsiteForTransitiveDependencies": true
|
|
104
102
|
}
|
|
105
103
|
}
|
|
106
104
|
}
|