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