@xsolla/xui-field-group 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 +184 -23
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,42 +1,203 @@
|
|
|
1
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Field Group
|
|
3
|
+
subtitle: A wrapper for form fields with labels.
|
|
4
|
+
description: A cross-platform React field group component that adds labels, required indicators, and helper text to form fields.
|
|
5
|
+
---
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
# Field Group
|
|
8
|
+
|
|
9
|
+
A cross-platform React wrapper component that adds consistent labeling, required indicators, helper text, and spacing to form fields.
|
|
4
10
|
|
|
5
11
|
## Installation
|
|
6
12
|
|
|
7
13
|
```bash
|
|
14
|
+
npm install @xsolla/xui-field-group
|
|
15
|
+
# or
|
|
8
16
|
yarn add @xsolla/xui-field-group
|
|
9
17
|
```
|
|
10
18
|
|
|
11
|
-
##
|
|
19
|
+
## Demo
|
|
20
|
+
|
|
21
|
+
### Basic Field Group
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import * as React from 'react';
|
|
25
|
+
import { FieldGroup } from '@xsolla/xui-field-group';
|
|
26
|
+
import { Input } from '@xsolla/xui-input';
|
|
27
|
+
|
|
28
|
+
export default function BasicFieldGroup() {
|
|
29
|
+
return (
|
|
30
|
+
<FieldGroup label="Username">
|
|
31
|
+
<Input placeholder="Enter username" />
|
|
32
|
+
</FieldGroup>
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Required Field
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import * as React from 'react';
|
|
41
|
+
import { FieldGroup } from '@xsolla/xui-field-group';
|
|
42
|
+
import { Input } from '@xsolla/xui-input';
|
|
43
|
+
|
|
44
|
+
export default function RequiredField() {
|
|
45
|
+
return (
|
|
46
|
+
<FieldGroup label="Email" required>
|
|
47
|
+
<Input type="email" placeholder="Enter email" />
|
|
48
|
+
</FieldGroup>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### With Helper Text
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import * as React from 'react';
|
|
57
|
+
import { FieldGroup } from '@xsolla/xui-field-group';
|
|
58
|
+
import { Input } from '@xsolla/xui-input';
|
|
59
|
+
|
|
60
|
+
export default function HelperField() {
|
|
61
|
+
return (
|
|
62
|
+
<FieldGroup
|
|
63
|
+
label="Password"
|
|
64
|
+
helper="Must be at least 8 characters"
|
|
65
|
+
>
|
|
66
|
+
<Input type="password" placeholder="Enter password" />
|
|
67
|
+
</FieldGroup>
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### With Icon
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
import * as React from 'react';
|
|
76
|
+
import { FieldGroup } from '@xsolla/xui-field-group';
|
|
77
|
+
import { Input } from '@xsolla/xui-input';
|
|
78
|
+
import { Info } from '@xsolla/xui-icons-base';
|
|
79
|
+
|
|
80
|
+
export default function IconField() {
|
|
81
|
+
return (
|
|
82
|
+
<FieldGroup
|
|
83
|
+
label="API Key"
|
|
84
|
+
icon={<Info />}
|
|
85
|
+
>
|
|
86
|
+
<Input placeholder="Enter API key" />
|
|
87
|
+
</FieldGroup>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Anatomy
|
|
93
|
+
|
|
94
|
+
```jsx
|
|
95
|
+
import { FieldGroup } from '@xsolla/xui-field-group';
|
|
96
|
+
|
|
97
|
+
<FieldGroup
|
|
98
|
+
label="Field Label" // Label text
|
|
99
|
+
required={false} // Show required asterisk
|
|
100
|
+
helper="Helper text" // Helper text below field
|
|
101
|
+
icon={<Icon />} // Icon next to label
|
|
102
|
+
size="md" // Size variant
|
|
103
|
+
marginBottom={16} // Bottom margin (spacing)
|
|
104
|
+
htmlFor="field-id" // Associate with form field
|
|
105
|
+
>
|
|
106
|
+
<FormField /> // Form control component
|
|
107
|
+
</FieldGroup>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Examples
|
|
111
|
+
|
|
112
|
+
### Form with Field Groups
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
import * as React from 'react';
|
|
116
|
+
import { FieldGroup } from '@xsolla/xui-field-group';
|
|
117
|
+
import { Input } from '@xsolla/xui-input';
|
|
118
|
+
import { Select } from '@xsolla/xui-select';
|
|
119
|
+
import { Textarea } from '@xsolla/xui-textarea';
|
|
120
|
+
import { Button } from '@xsolla/xui-button';
|
|
121
|
+
|
|
122
|
+
export default function CompleteForm() {
|
|
123
|
+
return (
|
|
124
|
+
<div style={{ maxWidth: 400 }}>
|
|
125
|
+
<FieldGroup label="Full Name" required>
|
|
126
|
+
<Input placeholder="John Doe" />
|
|
127
|
+
</FieldGroup>
|
|
128
|
+
<FieldGroup label="Email" required helper="We'll never share your email">
|
|
129
|
+
<Input type="email" placeholder="john@example.com" />
|
|
130
|
+
</FieldGroup>
|
|
131
|
+
<FieldGroup label="Country">
|
|
132
|
+
<Select
|
|
133
|
+
options={['United States', 'Canada', 'United Kingdom']}
|
|
134
|
+
placeholder="Select country"
|
|
135
|
+
/>
|
|
136
|
+
</FieldGroup>
|
|
137
|
+
<FieldGroup label="Bio" helper="Max 500 characters">
|
|
138
|
+
<Textarea placeholder="Tell us about yourself" />
|
|
139
|
+
</FieldGroup>
|
|
140
|
+
<FieldGroup marginBottom={0}>
|
|
141
|
+
<Button>Submit</Button>
|
|
142
|
+
</FieldGroup>
|
|
143
|
+
</div>
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Field Group Sizes
|
|
12
149
|
|
|
13
150
|
```tsx
|
|
151
|
+
import * as React from 'react';
|
|
14
152
|
import { FieldGroup } from '@xsolla/xui-field-group';
|
|
15
153
|
import { Input } from '@xsolla/xui-input';
|
|
16
154
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
155
|
+
export default function FieldGroupSizes() {
|
|
156
|
+
return (
|
|
157
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
158
|
+
<FieldGroup size="sm" label="Small Field" required helper="Small helper">
|
|
159
|
+
<Input size="sm" placeholder="Small input" />
|
|
160
|
+
</FieldGroup>
|
|
161
|
+
<FieldGroup size="md" label="Medium Field" required helper="Medium helper">
|
|
162
|
+
<Input size="md" placeholder="Medium input" />
|
|
163
|
+
</FieldGroup>
|
|
164
|
+
<FieldGroup size="lg" label="Large Field" required helper="Large helper">
|
|
165
|
+
<Input size="lg" placeholder="Large input" />
|
|
166
|
+
</FieldGroup>
|
|
167
|
+
</div>
|
|
168
|
+
);
|
|
169
|
+
}
|
|
28
170
|
```
|
|
29
171
|
|
|
30
|
-
##
|
|
172
|
+
## API Reference
|
|
31
173
|
|
|
32
174
|
### FieldGroup
|
|
33
175
|
|
|
176
|
+
**FieldGroup Props:**
|
|
177
|
+
|
|
34
178
|
| Prop | Type | Default | Description |
|
|
35
|
-
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
|
179
|
+
| :--- | :--- | :------ | :---------- |
|
|
180
|
+
| children | `ReactNode` | - | Form field component. |
|
|
181
|
+
| label | `string` | - | Label text. |
|
|
182
|
+
| required | `boolean` | `false` | Show required asterisk (*). |
|
|
183
|
+
| helper | `string` | - | Helper text below field. |
|
|
184
|
+
| icon | `ReactElement` | - | Icon next to label. |
|
|
185
|
+
| size | `"sm" \| "md" \| "lg"` | `"md"` | Size variant. |
|
|
186
|
+
| marginBottom | `number` | Based on size | Bottom margin for spacing. |
|
|
187
|
+
| htmlFor | `string` | - | Associate label with field by ID. |
|
|
188
|
+
| data-testid | `string` | - | Test identifier. |
|
|
189
|
+
|
|
190
|
+
## Size Specifications
|
|
191
|
+
|
|
192
|
+
| Size | Label Font | Label Line Height | Helper Font | Margin Bottom |
|
|
193
|
+
| :--- | :--------- | :---------------- | :---------- | :------------ |
|
|
194
|
+
| sm | 10px | 16px | 12px | 8px |
|
|
195
|
+
| md | 12px | 20px | 12px | 16px |
|
|
196
|
+
| lg | 14px | 24px | 12px | 24px |
|
|
197
|
+
|
|
198
|
+
## Behavior
|
|
199
|
+
|
|
200
|
+
- Required asterisk (*) appears before label in red
|
|
201
|
+
- Icon appears after label with appropriate spacing
|
|
202
|
+
- Helper text appears below the field content
|
|
203
|
+
- Consistent vertical rhythm with configurable margins
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-field-group",
|
|
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",
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.100.0",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.100.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|