@xsolla/xui-avatar 0.174.2 → 0.175.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/README.md +50 -0
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,6 +1,56 @@
|
|
|
1
1
|
# Avatar
|
|
2
2
|
|
|
3
3
|
A cross-platform React avatar component that displays a user image, icon, or text initials. Supports notification badges and grouping via `AvatarGroup`.
|
|
4
|
+
<!-- BEGIN:xui-mcp-instructions:avatar -->
|
|
5
|
+
A visual representation of a user or entity. Supports three content types — initials, icon, and image — across six sizes and two tonal variants. Can be circular or square, and optionally interactive with a hover state.
|
|
6
|
+
|
|
7
|
+
### When to use
|
|
8
|
+
|
|
9
|
+
- To identify a user in a profile header, comment thread, or account menu
|
|
10
|
+
- In lists, tables, or cards where a visual identity marker helps scan rows quickly
|
|
11
|
+
- In AvatarGroup to represent multiple users in a compact space
|
|
12
|
+
- As a touch target for opening a user profile or account dropdown
|
|
13
|
+
|
|
14
|
+
### When not to use
|
|
15
|
+
|
|
16
|
+
- As a generic decorative image — use an IconWrapper component instead
|
|
17
|
+
- When the entity being represented is not a person or named account (e.g. a product, category, or abstract concept)
|
|
18
|
+
- When you need a logo — use a BrandLogo or Icon Wrapper with a brand asset instead
|
|
19
|
+
|
|
20
|
+
### Content guidelines
|
|
21
|
+
|
|
22
|
+
Text type: use the first letter of the first name and the first letter of the last name (e.g. *"J"* or *"JD"*). Never use more than two characters.
|
|
23
|
+
|
|
24
|
+
Image type: always use a square source image; the component clips it to fit. Avoid images with important content near the edges.
|
|
25
|
+
|
|
26
|
+
Alt text: always provide a meaningful aria-label or alt string for the Avatar — e.g. the user's full name — regardless of content type.
|
|
27
|
+
|
|
28
|
+
### Behaviour guidelines
|
|
29
|
+
|
|
30
|
+
Fallback chain — always define a fallback order for content type: attempt to load Image first; if the image fails to load or is unavailable, fall back to Text (initials); if the name is also unknown, fall back to Icon. Never leave the container empty.
|
|
31
|
+
|
|
32
|
+
Image loading — while the photo is loading, render the Icon variant as a placeholder. Avoid layout shift by reserving the Avatar's dimensions before the image resolves.
|
|
33
|
+
|
|
34
|
+
Interactive vs decorative — an Avatar that opens a profile, menu, or action sheet must have Hover=True and receive keyboard focus. An Avatar used purely for identification (e.g. in a comment or log entry) must not be focusable and must not have hover styling.
|
|
35
|
+
|
|
36
|
+
Click / tap target — when interactive, the entire Avatar container is the tap target. Do not wrap only the image or icon in a link while leaving the container unresponsive.
|
|
37
|
+
|
|
38
|
+
Tooltip on hover — where the initials or icon may be hard to identify, show a tooltip with the user's full name on hover and on focus.
|
|
39
|
+
|
|
40
|
+
Badge visibility — the Badge reflects live status data (e.g. online / offline). It should update in real time without a full component remount. If status data is unavailable, hide the Badge (Badge=False) rather than showing a stale or unknown state.
|
|
41
|
+
|
|
42
|
+
Square vs circle — do not switch shape dynamically for the same entity. The shape is a semantic signal (circle = person, square = bot/service) and must remain stable across contexts where the same Avatar appears.
|
|
43
|
+
|
|
44
|
+
### Accessibility
|
|
45
|
+
|
|
46
|
+
Provide aria-label with the user's name on every Avatar instance.
|
|
47
|
+
|
|
48
|
+
If the Avatar is interactive, it must receive keyboard focus and respond to Enter / Space.
|
|
49
|
+
|
|
50
|
+
Use role=*"img"* for non-interactive Avatars and role=*"button"* for interactive ones.
|
|
51
|
+
|
|
52
|
+
Do not rely on color (Tone) alone to convey meaning — pair it with a label or tooltip where necessary.
|
|
53
|
+
<!-- END:xui-mcp-instructions:avatar -->
|
|
4
54
|
|
|
5
55
|
## Installation
|
|
6
56
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-avatar",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.175.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-badge": "0.
|
|
14
|
-
"@xsolla/xui-core": "0.
|
|
15
|
-
"@xsolla/xui-icons-base": "0.
|
|
16
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
-
"@xsolla/xui-tooltip": "0.
|
|
13
|
+
"@xsolla/xui-badge": "0.175.0",
|
|
14
|
+
"@xsolla/xui-core": "0.175.0",
|
|
15
|
+
"@xsolla/xui-icons-base": "0.175.0",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.175.0",
|
|
17
|
+
"@xsolla/xui-tooltip": "0.175.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|