@xsolla/xui-supporting-text 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 +231 -11
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,29 +1,249 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Supporting Text
|
|
3
|
+
subtitle: Form field helper text.
|
|
4
|
+
description: A cross-platform React component for displaying labels, helper text, descriptions, and error messages for form fields.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Supporting Text
|
|
8
|
+
|
|
9
|
+
A cross-platform React component for displaying supporting text around form fields, including labels, helper text, descriptions, and error messages with proper accessibility.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-supporting-text
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-supporting-text
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### All Variants
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { SupportingText } from '@xsolla/xui-supporting-text';
|
|
26
|
+
|
|
27
|
+
export default function AllVariants() {
|
|
28
|
+
return (
|
|
29
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
30
|
+
<SupportingText variant="label">Label text</SupportingText>
|
|
31
|
+
<SupportingText variant="helper">Helper text with guidance</SupportingText>
|
|
32
|
+
<SupportingText variant="description">Description text for context</SupportingText>
|
|
33
|
+
<SupportingText variant="error">Error message</SupportingText>
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Different Sizes
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import * as React from 'react';
|
|
43
|
+
import { SupportingText } from '@xsolla/xui-supporting-text';
|
|
44
|
+
|
|
45
|
+
export default function Sizes() {
|
|
46
|
+
return (
|
|
47
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
48
|
+
<SupportingText size="xs">Extra small</SupportingText>
|
|
49
|
+
<SupportingText size="sm">Small</SupportingText>
|
|
50
|
+
<SupportingText size="md">Medium</SupportingText>
|
|
51
|
+
<SupportingText size="lg">Large</SupportingText>
|
|
52
|
+
<SupportingText size="xl">Extra large</SupportingText>
|
|
53
|
+
</div>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### With Icon
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
import * as React from 'react';
|
|
62
|
+
import { SupportingText } from '@xsolla/xui-supporting-text';
|
|
63
|
+
import { Info } from '@xsolla/xui-icons-base';
|
|
64
|
+
|
|
65
|
+
export default function WithIcon() {
|
|
66
|
+
return (
|
|
67
|
+
<SupportingText variant="helper" icon={<Info />} showIcon>
|
|
68
|
+
Click here for more information
|
|
69
|
+
</SupportingText>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Anatomy
|
|
75
|
+
|
|
76
|
+
```jsx
|
|
77
|
+
import { SupportingText } from '@xsolla/xui-supporting-text';
|
|
78
|
+
|
|
79
|
+
<SupportingText
|
|
80
|
+
variant="helper" // label, helper, description, error
|
|
81
|
+
size="md" // xs, s, m, l, xl
|
|
82
|
+
icon={<Icon />} // Optional icon
|
|
83
|
+
showIcon={true} // Show icon
|
|
84
|
+
id="field-hint" // ID for aria-describedby
|
|
85
|
+
aria-label="Hint" // Accessible label
|
|
86
|
+
>
|
|
87
|
+
Helper text content
|
|
88
|
+
</SupportingText>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Examples
|
|
92
|
+
|
|
93
|
+
### Form Field with Label and Error
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
import * as React from 'react';
|
|
97
|
+
import { SupportingText } from '@xsolla/xui-supporting-text';
|
|
98
|
+
import { Input } from '@xsolla/xui-input';
|
|
99
|
+
|
|
100
|
+
export default function FormField() {
|
|
101
|
+
const [email, setEmail] = React.useState('');
|
|
102
|
+
const [error, setError] = React.useState('');
|
|
103
|
+
|
|
104
|
+
const validate = (value: string) => {
|
|
105
|
+
if (value && !value.includes('@')) {
|
|
106
|
+
setError('Please enter a valid email address');
|
|
107
|
+
} else {
|
|
108
|
+
setError('');
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
return (
|
|
113
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
114
|
+
<SupportingText variant="label" id="email-label">
|
|
115
|
+
Email address
|
|
116
|
+
</SupportingText>
|
|
117
|
+
<Input
|
|
118
|
+
value={email}
|
|
119
|
+
onChangeText={(text) => {
|
|
120
|
+
setEmail(text);
|
|
121
|
+
validate(text);
|
|
122
|
+
}}
|
|
123
|
+
aria-labelledby="email-label"
|
|
124
|
+
aria-describedby={error ? 'email-error' : 'email-hint'}
|
|
125
|
+
error={!!error}
|
|
126
|
+
/>
|
|
127
|
+
{error ? (
|
|
128
|
+
<SupportingText variant="error" id="email-error">
|
|
129
|
+
{error}
|
|
130
|
+
</SupportingText>
|
|
131
|
+
) : (
|
|
132
|
+
<SupportingText variant="helper" id="email-hint">
|
|
133
|
+
We'll never share your email
|
|
134
|
+
</SupportingText>
|
|
135
|
+
)}
|
|
136
|
+
</div>
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### Password Requirements
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
import * as React from 'react';
|
|
145
|
+
import { SupportingText } from '@xsolla/xui-supporting-text';
|
|
146
|
+
import { InputPassword } from '@xsolla/xui-input-password';
|
|
147
|
+
|
|
148
|
+
export default function PasswordField() {
|
|
149
|
+
return (
|
|
150
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
151
|
+
<SupportingText variant="label">Password</SupportingText>
|
|
152
|
+
<InputPassword extraSee />
|
|
153
|
+
<SupportingText variant="description" size="sm">
|
|
154
|
+
Password must contain at least 8 characters, including uppercase, lowercase, and numbers.
|
|
155
|
+
</SupportingText>
|
|
156
|
+
</div>
|
|
157
|
+
);
|
|
158
|
+
}
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### Character Count Helper
|
|
12
162
|
|
|
13
163
|
```tsx
|
|
164
|
+
import * as React from 'react';
|
|
14
165
|
import { SupportingText } from '@xsolla/xui-supporting-text';
|
|
166
|
+
import { Textarea } from '@xsolla/xui-textarea';
|
|
167
|
+
|
|
168
|
+
export default function CharacterCount() {
|
|
169
|
+
const [text, setText] = React.useState('');
|
|
170
|
+
const maxLength = 280;
|
|
171
|
+
const isOverLimit = text.length > maxLength;
|
|
15
172
|
|
|
16
|
-
|
|
17
|
-
<
|
|
173
|
+
return (
|
|
174
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
175
|
+
<SupportingText variant="label">Bio</SupportingText>
|
|
176
|
+
<Textarea
|
|
177
|
+
value={text}
|
|
178
|
+
onChangeText={setText}
|
|
179
|
+
placeholder="Tell us about yourself"
|
|
180
|
+
/>
|
|
181
|
+
<SupportingText
|
|
182
|
+
variant={isOverLimit ? 'error' : 'helper'}
|
|
183
|
+
size="sm"
|
|
184
|
+
>
|
|
185
|
+
{text.length}/{maxLength} characters
|
|
186
|
+
</SupportingText>
|
|
187
|
+
</div>
|
|
188
|
+
);
|
|
189
|
+
}
|
|
18
190
|
```
|
|
19
191
|
|
|
20
|
-
|
|
192
|
+
### Field Group with Description
|
|
193
|
+
|
|
194
|
+
```tsx
|
|
195
|
+
import * as React from 'react';
|
|
196
|
+
import { SupportingText } from '@xsolla/xui-supporting-text';
|
|
197
|
+
import { Checkbox } from '@xsolla/xui-checkbox';
|
|
198
|
+
|
|
199
|
+
export default function FieldGroup() {
|
|
200
|
+
return (
|
|
201
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
202
|
+
<SupportingText variant="label">Notification preferences</SupportingText>
|
|
203
|
+
<SupportingText variant="description" size="sm">
|
|
204
|
+
Choose how you'd like to receive updates from us
|
|
205
|
+
</SupportingText>
|
|
206
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 8 }}>
|
|
207
|
+
<Checkbox label="Email notifications" />
|
|
208
|
+
<Checkbox label="Push notifications" />
|
|
209
|
+
<Checkbox label="SMS notifications" />
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
);
|
|
213
|
+
}
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
## API Reference
|
|
21
217
|
|
|
22
218
|
### SupportingText
|
|
23
219
|
|
|
220
|
+
**SupportingTextProps:**
|
|
221
|
+
|
|
24
222
|
| Prop | Type | Default | Description |
|
|
25
|
-
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
29
|
-
|
|
|
223
|
+
| :--- | :--- | :------ | :---------- |
|
|
224
|
+
| children | `ReactNode` | - | Text content to display. |
|
|
225
|
+
| variant | `"label" \| "helper" \| "description" \| "error"` | `"helper"` | Visual variant. |
|
|
226
|
+
| size | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Text size. |
|
|
227
|
+
| icon | `ReactNode` | - | Icon to display after text. |
|
|
228
|
+
| showIcon | `boolean` | `false` | Whether to show the icon. |
|
|
229
|
+
| id | `string` | - | HTML id for accessibility linking. |
|
|
230
|
+
| aria-label | `string` | - | Accessible label. |
|
|
231
|
+
| aria-describedby | `string` | - | ID of element this text describes. |
|
|
232
|
+
| testID | `string` | - | Test identifier. |
|
|
233
|
+
|
|
234
|
+
## Variants
|
|
235
|
+
|
|
236
|
+
| Variant | Color | Use Case |
|
|
237
|
+
| :------ | :---- | :------- |
|
|
238
|
+
| `label` | Primary | Field labels |
|
|
239
|
+
| `helper` | Tertiary | Guidance and hints |
|
|
240
|
+
| `description` | Tertiary | Additional context |
|
|
241
|
+
| `error` | Alert | Validation errors |
|
|
242
|
+
|
|
243
|
+
## Accessibility Features
|
|
244
|
+
|
|
245
|
+
- **Error variant**: Uses `role="alert"` for immediate announcement
|
|
246
|
+
- **Live regions**: Error messages use `aria-live="polite"`
|
|
247
|
+
- **ID linking**: Use `id` with `aria-describedby` on form fields
|
|
248
|
+
- **Color contrast**: Appropriate colors for all variants
|
|
249
|
+
- **Icon handling**: Icons are hidden from screen readers
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-supporting-text",
|
|
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-core": "0.
|
|
14
|
-
"@xsolla/xui-icons": "0.
|
|
15
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.100.0",
|
|
14
|
+
"@xsolla/xui-icons": "0.100.0",
|
|
15
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8.0",
|