@xsolla/xui-toast 0.174.3 → 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 +48 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -2,6 +2,54 @@
|
|
|
2
2
|
|
|
3
3
|
A cross-platform toast notification system matching the base Figma toast. Use it for short, non-blocking feedback with a title, optional description, optional action, and automatic or manual dismissal.
|
|
4
4
|
|
|
5
|
+
<!-- BEGIN:xui-mcp-instructions:toast -->
|
|
6
|
+
A toast is a short, non-blocking message that appears temporarily to inform the user about the result of an action or a change in system state. It appears as a compact bar that slides in from the top of the screen, stays briefly, then dismisses automatically — or can be dismissed manually.
|
|
7
|
+
|
|
8
|
+
### When to use
|
|
9
|
+
|
|
10
|
+
- To confirm that an action was completed successfully (e.g. *"Profile updated"*)
|
|
11
|
+
- To notify the user of a background event they didn't directly trigger (e.g. *"New rewards available"*)
|
|
12
|
+
- To surface a non-critical warning that doesn't block the user from continuing
|
|
13
|
+
- To inform about an error that occurred in the background (e.g. *"Connection lost"*)
|
|
14
|
+
|
|
15
|
+
### When not to use
|
|
16
|
+
|
|
17
|
+
For critical errors that require the user to take action before continuing — use a modal or inline error instead
|
|
18
|
+
|
|
19
|
+
For information that the user needs to refer back to — toasts disappear and can't be recalled
|
|
20
|
+
- For complex messages with multiple actions — keep it to one optional CTA at most
|
|
21
|
+
- As a substitute for form validation errors — those belong inline next to the relevant field
|
|
22
|
+
|
|
23
|
+
### Content guidelines
|
|
24
|
+
|
|
25
|
+
Title should be short and specific — 1 to 5 words: *"Profile saved"*, *"Connection lost"*, *"Reward claimed"*
|
|
26
|
+
|
|
27
|
+
Subtitle is optional — use it to add one line of supporting context, not to repeat the title
|
|
28
|
+
|
|
29
|
+
Button label should be a clear verb: *"Undo"*, *"Retry"*, *"View"* — not *"OK"* or *"Click here"*
|
|
30
|
+
- Avoid exclamation marks or dramatic language — keep the tone calm and factual
|
|
31
|
+
- Match the type to the message: use Alert only for errors, Warning for caution, Success for positive outcomes, Neutral for informational messages
|
|
32
|
+
|
|
33
|
+
### Behaviour guidelines
|
|
34
|
+
|
|
35
|
+
Toasts appear at the top of the viewport, offset from the status bar or navigation
|
|
36
|
+
|
|
37
|
+
They auto-dismiss after a set duration (typically 3–5 seconds) — the exact timing is set at the product layer
|
|
38
|
+
|
|
39
|
+
When Button=False, a close (×) icon is shown — tapping it dismisses the toast immediately
|
|
40
|
+
|
|
41
|
+
When Button=True, the action button replaces the close icon — the toast can be dismissed by tapping the button or waiting for auto-dismiss
|
|
42
|
+
- Multiple toasts stack in a ToastGroup — see below
|
|
43
|
+
- Toasts do not block interaction with the rest of the screen
|
|
44
|
+
|
|
45
|
+
### Accessibility
|
|
46
|
+
|
|
47
|
+
Use role=*"status"* for Neutral and Success toasts — screen readers announce them without interrupting the user
|
|
48
|
+
- Use role=*"alert"* for Warning and Alert toasts — these are announced immediately
|
|
49
|
+
- The close button must have aria-label=*"Dismiss notification"*
|
|
50
|
+
- Do not rely on color alone to convey the type — the icon and text must also communicate it
|
|
51
|
+
<!-- END:xui-mcp-instructions:toast -->
|
|
52
|
+
|
|
5
53
|
## Installation
|
|
6
54
|
|
|
7
55
|
```bash
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-toast",
|
|
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",
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"test:coverage": "vitest run --coverage"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-icons": "0.
|
|
19
|
-
"@xsolla/xui-icons-base": "0.
|
|
20
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
+
"@xsolla/xui-core": "0.175.0",
|
|
18
|
+
"@xsolla/xui-icons": "0.175.0",
|
|
19
|
+
"@xsolla/xui-icons-base": "0.175.0",
|
|
20
|
+
"@xsolla/xui-primitives-core": "0.175.0"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"react": ">=16.8.0",
|