@xsolla/xui-toggletip 0.150.0 → 0.151.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 +80 -180
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
# Toggletip
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A click-triggered popover that shows rich content (title, body, footer) anchored to a trigger element. Cross-platform via `@xsolla/xui-primitives`; click-outside and Escape dismissal are web-only.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-toggletip
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-toggletip
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
11
|
+
## Imports
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
```tsx
|
|
14
|
+
import { Toggletip, type ToggletipProps, type ToggletipPlacement } from '@xsolla/xui-toggletip';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
16
18
|
|
|
17
19
|
```tsx
|
|
18
20
|
import * as React from 'react';
|
|
@@ -20,12 +22,9 @@ import { Toggletip } from '@xsolla/xui-toggletip';
|
|
|
20
22
|
import { IconButton } from '@xsolla/xui-button';
|
|
21
23
|
import { HelpCircle } from '@xsolla/xui-icons-base';
|
|
22
24
|
|
|
23
|
-
export default function
|
|
25
|
+
export default function Example() {
|
|
24
26
|
return (
|
|
25
|
-
<Toggletip
|
|
26
|
-
title="Help"
|
|
27
|
-
content="Click here to learn more about this feature."
|
|
28
|
-
>
|
|
27
|
+
<Toggletip title="Help" content="Click here to learn more about this feature.">
|
|
29
28
|
<IconButton
|
|
30
29
|
icon={<HelpCircle size={20} />}
|
|
31
30
|
variant="secondary"
|
|
@@ -38,7 +37,29 @@ export default function BasicToggletip() {
|
|
|
38
37
|
}
|
|
39
38
|
```
|
|
40
39
|
|
|
41
|
-
|
|
40
|
+
## API Reference
|
|
41
|
+
|
|
42
|
+
### `<Toggletip>`
|
|
43
|
+
|
|
44
|
+
| Prop | Type | Default | Description |
|
|
45
|
+
| --- | --- | --- | --- |
|
|
46
|
+
| `children` | `ReactNode` | — | Trigger element. |
|
|
47
|
+
| `title` | `ReactNode` | — | Optional header content. Renders above the divider. |
|
|
48
|
+
| `content` | `ReactNode` | — | Main content. Strings/numbers render as themed text; other nodes render as-is. |
|
|
49
|
+
| `footer` | `ReactNode` | — | Optional footer (typically buttons). |
|
|
50
|
+
| `direction` | `ToggletipPlacement` | `"top"` | Placement relative to trigger. |
|
|
51
|
+
| `autoDirection` | `boolean` | `true` | Auto-adjust placement when near viewport edges. |
|
|
52
|
+
| `offset` | `number` | `12` | Distance from trigger in pixels. |
|
|
53
|
+
| `width` | `string` | `"288px"` | Popover width (CSS length). |
|
|
54
|
+
| `data-testid` | `string` | — | Test identifier. |
|
|
55
|
+
|
|
56
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
57
|
+
|
|
58
|
+
`ToggletipPlacement` is `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "right"`.
|
|
59
|
+
|
|
60
|
+
## Examples
|
|
61
|
+
|
|
62
|
+
### With footer actions
|
|
42
63
|
|
|
43
64
|
```tsx
|
|
44
65
|
import * as React from 'react';
|
|
@@ -50,7 +71,7 @@ export default function WithFooter() {
|
|
|
50
71
|
return (
|
|
51
72
|
<Toggletip
|
|
52
73
|
title="Confirmation"
|
|
53
|
-
content="Are you sure you want to proceed
|
|
74
|
+
content="Are you sure you want to proceed?"
|
|
54
75
|
footer={
|
|
55
76
|
<>
|
|
56
77
|
<Button size="sm" variant="secondary">Cancel</Button>
|
|
@@ -58,15 +79,13 @@ export default function WithFooter() {
|
|
|
58
79
|
</>
|
|
59
80
|
}
|
|
60
81
|
>
|
|
61
|
-
<Button size="sm" iconLeft={<Info size={16} />}>
|
|
62
|
-
Details
|
|
63
|
-
</Button>
|
|
82
|
+
<Button size="sm" iconLeft={<Info size={16} />}>Details</Button>
|
|
64
83
|
</Toggletip>
|
|
65
84
|
);
|
|
66
85
|
}
|
|
67
86
|
```
|
|
68
87
|
|
|
69
|
-
### Different
|
|
88
|
+
### Different directions
|
|
70
89
|
|
|
71
90
|
```tsx
|
|
72
91
|
import * as React from 'react';
|
|
@@ -76,99 +95,49 @@ import { Button } from '@xsolla/xui-button';
|
|
|
76
95
|
export default function Directions() {
|
|
77
96
|
return (
|
|
78
97
|
<div style={{ display: 'flex', gap: 16, padding: 100 }}>
|
|
79
|
-
<Toggletip direction="top" content="Appears above">
|
|
80
|
-
|
|
81
|
-
</Toggletip>
|
|
82
|
-
<Toggletip direction="
|
|
83
|
-
<Button size="sm">Bottom</Button>
|
|
84
|
-
</Toggletip>
|
|
85
|
-
<Toggletip direction="left" content="Appears left">
|
|
86
|
-
<Button size="sm">Left</Button>
|
|
87
|
-
</Toggletip>
|
|
88
|
-
<Toggletip direction="right" content="Appears right">
|
|
89
|
-
<Button size="sm">Right</Button>
|
|
90
|
-
</Toggletip>
|
|
98
|
+
<Toggletip direction="top" content="Appears above"><Button size="sm">Top</Button></Toggletip>
|
|
99
|
+
<Toggletip direction="bottom" content="Appears below"><Button size="sm">Bottom</Button></Toggletip>
|
|
100
|
+
<Toggletip direction="left" content="Appears left"><Button size="sm">Left</Button></Toggletip>
|
|
101
|
+
<Toggletip direction="right" content="Appears right"><Button size="sm">Right</Button></Toggletip>
|
|
91
102
|
</div>
|
|
92
103
|
);
|
|
93
104
|
}
|
|
94
105
|
```
|
|
95
106
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
```jsx
|
|
99
|
-
import { Toggletip } from '@xsolla/xui-toggletip';
|
|
100
|
-
|
|
101
|
-
<Toggletip
|
|
102
|
-
title="Title" // Optional header title
|
|
103
|
-
content="Description" // Main content (string or ReactNode)
|
|
104
|
-
footer={<Actions />} // Optional footer actions
|
|
105
|
-
direction="top" // Placement direction
|
|
106
|
-
autoDirection={true} // Auto-adjust if near edges
|
|
107
|
-
offset={12} // Distance from trigger
|
|
108
|
-
width="288px" // Popover width
|
|
109
|
-
>
|
|
110
|
-
<TriggerElement />
|
|
111
|
-
</Toggletip>
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
## Examples
|
|
115
|
-
|
|
116
|
-
### Feature Explanation
|
|
107
|
+
### Rich body content
|
|
117
108
|
|
|
118
109
|
```tsx
|
|
119
110
|
import * as React from 'react';
|
|
120
111
|
import { Toggletip } from '@xsolla/xui-toggletip';
|
|
112
|
+
import { IconButton } from '@xsolla/xui-button';
|
|
121
113
|
import { HelpCircle } from '@xsolla/xui-icons-base';
|
|
122
114
|
|
|
123
|
-
export default function
|
|
124
|
-
return (
|
|
125
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
126
|
-
<span>Premium Features</span>
|
|
127
|
-
<Toggletip
|
|
128
|
-
title="Premium Benefits"
|
|
129
|
-
content={
|
|
130
|
-
<ul style={{ margin: 0, paddingLeft: 20 }}>
|
|
131
|
-
<li>Unlimited downloads</li>
|
|
132
|
-
<li>Priority support</li>
|
|
133
|
-
<li>Advanced analytics</li>
|
|
134
|
-
<li>Custom branding</li>
|
|
135
|
-
</ul>
|
|
136
|
-
}
|
|
137
|
-
>
|
|
138
|
-
<HelpCircle size={16} style={{ cursor: 'pointer' }} />
|
|
139
|
-
</Toggletip>
|
|
140
|
-
</div>
|
|
141
|
-
);
|
|
142
|
-
}
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
### Info Popover
|
|
146
|
-
|
|
147
|
-
```tsx
|
|
148
|
-
import * as React from 'react';
|
|
149
|
-
import { Toggletip } from '@xsolla/xui-toggletip';
|
|
150
|
-
import { Button } from '@xsolla/xui-button';
|
|
151
|
-
|
|
152
|
-
export default function InfoPopover() {
|
|
115
|
+
export default function Rich() {
|
|
153
116
|
return (
|
|
154
117
|
<Toggletip
|
|
155
|
-
title="
|
|
156
|
-
content=
|
|
157
|
-
|
|
158
|
-
|
|
118
|
+
title="Premium benefits"
|
|
119
|
+
content={
|
|
120
|
+
<ul style={{ margin: 0, paddingLeft: 20 }}>
|
|
121
|
+
<li>Unlimited downloads</li>
|
|
122
|
+
<li>Priority support</li>
|
|
123
|
+
<li>Advanced analytics</li>
|
|
124
|
+
<li>Custom branding</li>
|
|
125
|
+
</ul>
|
|
159
126
|
}
|
|
160
|
-
direction="bottom"
|
|
161
|
-
width="320px"
|
|
162
127
|
>
|
|
163
|
-
<
|
|
164
|
-
|
|
165
|
-
|
|
128
|
+
<IconButton
|
|
129
|
+
icon={<HelpCircle size={16} />}
|
|
130
|
+
aria-label="Premium benefits"
|
|
131
|
+
variant="secondary"
|
|
132
|
+
tone="mono"
|
|
133
|
+
size="sm"
|
|
134
|
+
/>
|
|
166
135
|
</Toggletip>
|
|
167
136
|
);
|
|
168
137
|
}
|
|
169
138
|
```
|
|
170
139
|
|
|
171
|
-
### Quick
|
|
140
|
+
### Quick actions menu
|
|
172
141
|
|
|
173
142
|
```tsx
|
|
174
143
|
import * as React from 'react';
|
|
@@ -179,113 +148,44 @@ import { MoreVertical, Edit, Copy, Trash } from '@xsolla/xui-icons-base';
|
|
|
179
148
|
export default function QuickActions() {
|
|
180
149
|
return (
|
|
181
150
|
<Toggletip
|
|
151
|
+
direction="bottom-right"
|
|
152
|
+
width="160px"
|
|
182
153
|
content={
|
|
183
154
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
184
|
-
<Button size="sm" variant="secondary" iconLeft={<Edit size={16} />} fullWidth>
|
|
185
|
-
|
|
186
|
-
</Button>
|
|
187
|
-
<Button size="sm" variant="secondary" iconLeft={<Copy size={16} />} fullWidth>
|
|
188
|
-
Duplicate
|
|
189
|
-
</Button>
|
|
190
|
-
<Button size="sm" variant="secondary" tone="alert" iconLeft={<Trash size={16} />} fullWidth>
|
|
191
|
-
Delete
|
|
192
|
-
</Button>
|
|
155
|
+
<Button size="sm" variant="secondary" iconLeft={<Edit size={16} />} fullWidth>Edit</Button>
|
|
156
|
+
<Button size="sm" variant="secondary" iconLeft={<Copy size={16} />} fullWidth>Duplicate</Button>
|
|
157
|
+
<Button size="sm" variant="secondary" tone="alert" iconLeft={<Trash size={16} />} fullWidth>Delete</Button>
|
|
193
158
|
</div>
|
|
194
159
|
}
|
|
195
|
-
direction="bottom-right"
|
|
196
|
-
width="160px"
|
|
197
160
|
>
|
|
198
|
-
<IconButton
|
|
199
|
-
icon={<MoreVertical size={20} />}
|
|
200
|
-
variant="secondary"
|
|
201
|
-
tone="mono"
|
|
202
|
-
size="sm"
|
|
203
|
-
aria-label="More actions"
|
|
204
|
-
/>
|
|
161
|
+
<IconButton icon={<MoreVertical size={20} />} variant="secondary" tone="mono" size="sm" aria-label="More actions" />
|
|
205
162
|
</Toggletip>
|
|
206
163
|
);
|
|
207
164
|
}
|
|
208
165
|
```
|
|
209
166
|
|
|
210
|
-
|
|
167
|
+
## Behaviour
|
|
211
168
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
import { HelpCircle } from '@xsolla/xui-icons-base';
|
|
217
|
-
|
|
218
|
-
export default function FormFieldHelp() {
|
|
219
|
-
return (
|
|
220
|
-
<div>
|
|
221
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 4 }}>
|
|
222
|
-
<label>API Key</label>
|
|
223
|
-
<Toggletip
|
|
224
|
-
content="Your API key can be found in the Developer Console under Settings > API Keys. Keep this key secure and never share it publicly."
|
|
225
|
-
direction="right"
|
|
226
|
-
>
|
|
227
|
-
<HelpCircle size={14} style={{ cursor: 'pointer', color: '#666' }} />
|
|
228
|
-
</Toggletip>
|
|
229
|
-
</div>
|
|
230
|
-
<Input placeholder="Enter your API key" />
|
|
231
|
-
</div>
|
|
232
|
-
);
|
|
233
|
-
}
|
|
234
|
-
```
|
|
235
|
-
|
|
236
|
-
## API Reference
|
|
237
|
-
|
|
238
|
-
### Toggletip
|
|
239
|
-
|
|
240
|
-
**ToggletipProps:**
|
|
241
|
-
|
|
242
|
-
| Prop | Type | Default | Description |
|
|
243
|
-
| :--- | :--- | :------ | :---------- |
|
|
244
|
-
| children | `ReactNode` | - | Trigger element. |
|
|
245
|
-
| title | `string` | - | Optional title in header. |
|
|
246
|
-
| content | `ReactNode` | - | Main content (string or element). |
|
|
247
|
-
| footer | `ReactNode` | - | Optional footer (usually buttons). |
|
|
248
|
-
| direction | `ToggletipPlacement` | `"top"` | Placement relative to trigger. |
|
|
249
|
-
| autoDirection | `boolean` | `true` | Auto-adjust placement near edges. |
|
|
250
|
-
| offset | `number` | `12` | Distance from trigger in pixels. |
|
|
251
|
-
| width | `string` | `"288px"` | Popover width. |
|
|
252
|
-
| data-testid | `string` | - | Test identifier. |
|
|
253
|
-
|
|
254
|
-
**ToggletipPlacement:**
|
|
255
|
-
|
|
256
|
-
```typescript
|
|
257
|
-
type ToggletipPlacement =
|
|
258
|
-
| "top"
|
|
259
|
-
| "top-left"
|
|
260
|
-
| "top-right"
|
|
261
|
-
| "bottom"
|
|
262
|
-
| "bottom-left"
|
|
263
|
-
| "bottom-right"
|
|
264
|
-
| "left"
|
|
265
|
-
| "right";
|
|
266
|
-
```
|
|
267
|
-
|
|
268
|
-
## Behavior
|
|
269
|
-
|
|
270
|
-
- Opens on trigger click
|
|
271
|
-
- Closes on clicking outside
|
|
272
|
-
- Closes on Escape key
|
|
273
|
-
- Auto-adjusts position to stay in viewport (when `autoDirection` is true)
|
|
274
|
-
- Shadow and border from theme for visual elevation
|
|
169
|
+
- Opens on trigger click; closes on click outside (web only).
|
|
170
|
+
- Closes on Escape (web only).
|
|
171
|
+
- Auto-adjusts position to stay in viewport when `autoDirection` is `true`.
|
|
172
|
+
- Uses theme `shadow.popover` for elevation.
|
|
275
173
|
|
|
276
174
|
## Toggletip vs Tooltip
|
|
277
175
|
|
|
278
176
|
| Feature | Toggletip | Tooltip |
|
|
279
|
-
|
|
|
280
|
-
| Trigger | Click | Hover |
|
|
177
|
+
| --- | --- | --- |
|
|
178
|
+
| Trigger | Click | Hover/focus |
|
|
281
179
|
| Content | Rich (title, body, footer) | Simple text |
|
|
282
|
-
|
|
|
283
|
-
| Use case | Help text, mini forms,
|
|
180
|
+
| Interactivity | Can contain interactive elements | Non-interactive |
|
|
181
|
+
| Use case | Help text, mini forms, action menus | Quick hints |
|
|
284
182
|
|
|
285
183
|
## Accessibility
|
|
286
184
|
|
|
287
|
-
- Click-triggered
|
|
288
|
-
- Escape
|
|
289
|
-
-
|
|
290
|
-
|
|
291
|
-
|
|
185
|
+
- Click-triggered, so the trigger must be a focusable element.
|
|
186
|
+
- Escape dismisses the popover (web only).
|
|
187
|
+
- Provide an accessible name on the trigger (e.g. `aria-label` on icon-only triggers).
|
|
188
|
+
|
|
189
|
+
## Related
|
|
190
|
+
|
|
191
|
+
- [Tooltip](./tooltip.md) — hover/focus-triggered hint variant.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-toggletip",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.151.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-button": "0.
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-button": "0.151.0",
|
|
17
|
+
"@xsolla/xui-core": "0.151.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.151.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|