@xsolla/xui-cell 0.150.0 → 0.152.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 +121 -144
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,219 +1,196 @@
|
|
|
1
1
|
# Cell
|
|
2
2
|
|
|
3
|
-
A cross-platform
|
|
3
|
+
A cross-platform layout primitive for list rows and card-like surfaces, with leading/trailing slots, a flexible content area, and an opinionated multi-line text block.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-cell
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-cell
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
14
|
-
|
|
15
|
-
### Basic Cell
|
|
11
|
+
## Imports
|
|
16
12
|
|
|
17
13
|
```tsx
|
|
18
|
-
import * as React from 'react';
|
|
19
14
|
import { Cell } from '@xsolla/xui-cell';
|
|
20
|
-
|
|
21
|
-
export default function BasicCell() {
|
|
22
|
-
return (
|
|
23
|
-
<Cell>
|
|
24
|
-
<Cell.Content>
|
|
25
|
-
Basic cell content
|
|
26
|
-
</Cell.Content>
|
|
27
|
-
</Cell>
|
|
28
|
-
);
|
|
29
|
-
}
|
|
30
15
|
```
|
|
31
16
|
|
|
32
|
-
|
|
17
|
+
## Quick start
|
|
33
18
|
|
|
34
19
|
```tsx
|
|
35
20
|
import * as React from 'react';
|
|
36
21
|
import { Cell } from '@xsolla/xui-cell';
|
|
37
|
-
import { Avatar } from '@xsolla/xui-avatar';
|
|
38
|
-
import { ChevronRight } from '@xsolla/xui-icons-base';
|
|
39
22
|
|
|
40
|
-
export default function
|
|
23
|
+
export default function QuickStart() {
|
|
41
24
|
return (
|
|
42
25
|
<Cell>
|
|
43
|
-
<Cell.
|
|
44
|
-
<Avatar size="md" name="John Doe" />
|
|
45
|
-
</Cell.Slot>
|
|
46
|
-
<Cell.Content>
|
|
47
|
-
<span style={{ fontWeight: 500 }}>John Doe</span>
|
|
48
|
-
<span style={{ color: '#888' }}>john@example.com</span>
|
|
49
|
-
</Cell.Content>
|
|
50
|
-
<Cell.Slot>
|
|
51
|
-
<ChevronRight size={20} />
|
|
52
|
-
</Cell.Slot>
|
|
26
|
+
<Cell.Content>Basic cell content</Cell.Content>
|
|
53
27
|
</Cell>
|
|
54
28
|
);
|
|
55
29
|
}
|
|
56
30
|
```
|
|
57
31
|
|
|
58
|
-
|
|
32
|
+
## API Reference
|
|
59
33
|
|
|
60
|
-
|
|
61
|
-
import * as React from 'react';
|
|
62
|
-
import { Cell } from '@xsolla/xui-cell';
|
|
34
|
+
### `<Cell>`
|
|
63
35
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
36
|
+
Container row. Extends `BoxProps`, so any layout/style prop the underlying `Box` accepts is forwarded.
|
|
37
|
+
|
|
38
|
+
| Prop | Type | Default | Description |
|
|
39
|
+
| --- | --- | --- | --- |
|
|
40
|
+
| `children` | `ReactNode` | - | Slots, content, or text block. |
|
|
41
|
+
| `view` | `"default" \| "stroke" \| "surface"` | `"default"` | Visual variant. `default` is a plain row (min height 56px). `stroke` adds a 1px border and 8px radius. `surface` adds a secondary background fill and 8px radius. |
|
|
42
|
+
| `withBoard` | `boolean` | `false` | **Deprecated.** When `true` and `view` is unset, behaves like `view="stroke"`. |
|
|
43
|
+
| `onPress` | `() => void` | - | Press/click handler. When set, the cell becomes interactive and shows a pointer cursor with a hover background. |
|
|
44
|
+
|
|
45
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
46
|
+
|
|
47
|
+
### `<Cell.Slot>`
|
|
48
|
+
|
|
49
|
+
Fixed-width container for leading or trailing content (icons, avatars, buttons). Does not flex.
|
|
50
|
+
|
|
51
|
+
| Prop | Type | Default | Description |
|
|
52
|
+
| --- | --- | --- | --- |
|
|
53
|
+
| `children` | `ReactNode` | - | Slot content. |
|
|
54
|
+
|
|
55
|
+
### `<Cell.Content>`
|
|
56
|
+
|
|
57
|
+
Flexible content area that fills the remaining space.
|
|
58
|
+
|
|
59
|
+
| Prop | Type | Default | Description |
|
|
60
|
+
| --- | --- | --- | --- |
|
|
61
|
+
| `children` | `ReactNode` | - | Content elements. |
|
|
62
|
+
|
|
63
|
+
### `<Cell.Text>`
|
|
64
|
+
|
|
65
|
+
Pre-styled multi-row text block. Each row has independent left and right slots with size and weight tuned for cells.
|
|
66
|
+
|
|
67
|
+
| Prop | Type | Default | Description |
|
|
68
|
+
| --- | --- | --- | --- |
|
|
69
|
+
| `title` | `ReactNode` | - | Primary text on the title row (left). 16px / 500 weight when string. |
|
|
70
|
+
| `titleRight` | `ReactNode` | - | Secondary text on the title row (right). 12px / 400 weight when string. |
|
|
71
|
+
| `description` | `ReactNode` | - | Description on the second row (left). 12px / 400 weight when string. |
|
|
72
|
+
| `descriptionRight` | `ReactNode` | - | Description on the second row (right). 12px / 400 weight when string. |
|
|
73
|
+
| `caption` | `ReactNode` | - | Caption on the third row (left). 12px / 400 weight when string, tertiary content colour. |
|
|
74
|
+
| `captionRight` | `ReactNode` | - | Caption on the third row (right). 12px / 400 weight when string, tertiary content colour. |
|
|
75
|
+
|
|
76
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
74
77
|
|
|
75
78
|
## Anatomy
|
|
76
79
|
|
|
77
|
-
```
|
|
80
|
+
```tsx
|
|
78
81
|
import { Cell } from '@xsolla/xui-cell';
|
|
79
82
|
|
|
80
|
-
<Cell
|
|
81
|
-
|
|
82
|
-
>
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</Cell.Slot>
|
|
86
|
-
<Cell.Content> {/* Main content area (flexes to fill) */}
|
|
87
|
-
<Text>Title</Text>
|
|
88
|
-
<Text>Subtitle</Text>
|
|
89
|
-
</Cell.Content>
|
|
90
|
-
<Cell.Slot> {/* Trailing content (chevron, button) */}
|
|
91
|
-
<Icon />
|
|
92
|
-
</Cell.Slot>
|
|
83
|
+
<Cell view="default">
|
|
84
|
+
<Cell.Slot>{/* leading */}</Cell.Slot>
|
|
85
|
+
<Cell.Content>{/* flexible body */}</Cell.Content>
|
|
86
|
+
{/* or use Cell.Text instead of Cell.Content */}
|
|
87
|
+
<Cell.Text title="Title" description="Description" caption="Caption" />
|
|
88
|
+
<Cell.Slot>{/* trailing */}</Cell.Slot>
|
|
93
89
|
</Cell>
|
|
94
90
|
```
|
|
95
91
|
|
|
96
92
|
## Examples
|
|
97
93
|
|
|
98
|
-
###
|
|
94
|
+
### View variants
|
|
99
95
|
|
|
100
96
|
```tsx
|
|
101
97
|
import * as React from 'react';
|
|
102
98
|
import { Cell } from '@xsolla/xui-cell';
|
|
103
|
-
import { User, Bell } from '@xsolla/xui-icons';
|
|
104
|
-
import { ChevronRight, Shield } from '@xsolla/xui-icons-base';
|
|
105
99
|
|
|
106
|
-
export default function
|
|
100
|
+
export default function Views() {
|
|
107
101
|
return (
|
|
108
|
-
<div>
|
|
109
|
-
<Cell>
|
|
110
|
-
<Cell.
|
|
111
|
-
<User size={20} />
|
|
112
|
-
</Cell.Slot>
|
|
113
|
-
<Cell.Content>
|
|
114
|
-
<span>Profile</span>
|
|
115
|
-
</Cell.Content>
|
|
116
|
-
<Cell.Slot>
|
|
117
|
-
<ChevronRight size={16} />
|
|
118
|
-
</Cell.Slot>
|
|
102
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
103
|
+
<Cell view="default">
|
|
104
|
+
<Cell.Content>Default</Cell.Content>
|
|
119
105
|
</Cell>
|
|
120
|
-
<Cell>
|
|
121
|
-
<Cell.
|
|
122
|
-
<Bell size={20} />
|
|
123
|
-
</Cell.Slot>
|
|
124
|
-
<Cell.Content>
|
|
125
|
-
<span>Notifications</span>
|
|
126
|
-
</Cell.Content>
|
|
127
|
-
<Cell.Slot>
|
|
128
|
-
<ChevronRight size={16} />
|
|
129
|
-
</Cell.Slot>
|
|
106
|
+
<Cell view="stroke">
|
|
107
|
+
<Cell.Content>Stroke</Cell.Content>
|
|
130
108
|
</Cell>
|
|
131
|
-
<Cell>
|
|
132
|
-
<Cell.
|
|
133
|
-
<Shield size={20} />
|
|
134
|
-
</Cell.Slot>
|
|
135
|
-
<Cell.Content>
|
|
136
|
-
<span>Security</span>
|
|
137
|
-
</Cell.Content>
|
|
138
|
-
<Cell.Slot>
|
|
139
|
-
<ChevronRight size={16} />
|
|
140
|
-
</Cell.Slot>
|
|
109
|
+
<Cell view="surface">
|
|
110
|
+
<Cell.Content>Surface</Cell.Content>
|
|
141
111
|
</Cell>
|
|
142
112
|
</div>
|
|
143
113
|
);
|
|
144
114
|
}
|
|
145
115
|
```
|
|
146
116
|
|
|
147
|
-
###
|
|
117
|
+
### With Cell.Text
|
|
148
118
|
|
|
149
119
|
```tsx
|
|
150
120
|
import * as React from 'react';
|
|
151
121
|
import { Cell } from '@xsolla/xui-cell';
|
|
152
122
|
import { Avatar } from '@xsolla/xui-avatar';
|
|
153
|
-
import {
|
|
123
|
+
import { ChevronRight } from '@xsolla/xui-icons-base';
|
|
154
124
|
|
|
155
|
-
export default function
|
|
125
|
+
export default function CellWithText() {
|
|
156
126
|
return (
|
|
157
|
-
<Cell
|
|
127
|
+
<Cell view="stroke">
|
|
158
128
|
<Cell.Slot>
|
|
159
|
-
<Avatar
|
|
160
|
-
size="lg"
|
|
161
|
-
src="https://example.com/avatar.jpg"
|
|
162
|
-
name="Jane Smith"
|
|
163
|
-
/>
|
|
129
|
+
<Avatar size="md" name="Jane Smith" />
|
|
164
130
|
</Cell.Slot>
|
|
165
|
-
<Cell.
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
131
|
+
<Cell.Text
|
|
132
|
+
title="Jane Smith"
|
|
133
|
+
titleRight="Pro"
|
|
134
|
+
description="jane@example.com"
|
|
135
|
+
descriptionRight="2h ago"
|
|
136
|
+
caption="Product Manager"
|
|
137
|
+
/>
|
|
169
138
|
<Cell.Slot>
|
|
170
|
-
<
|
|
139
|
+
<ChevronRight size={20} aria-hidden />
|
|
171
140
|
</Cell.Slot>
|
|
172
141
|
</Cell>
|
|
173
142
|
);
|
|
174
143
|
}
|
|
175
144
|
```
|
|
176
145
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
### Cell
|
|
180
|
-
|
|
181
|
-
Container component for cell layout.
|
|
182
|
-
|
|
183
|
-
**Cell Props:**
|
|
184
|
-
|
|
185
|
-
| Prop | Type | Default | Description |
|
|
186
|
-
| :--- | :--- | :------ | :---------- |
|
|
187
|
-
| children | `ReactNode` | - | Cell content (Slot and Content components). |
|
|
188
|
-
| withBoard | `boolean` | `false` | Add background, border, and rounded corners. |
|
|
189
|
-
|
|
190
|
-
---
|
|
191
|
-
|
|
192
|
-
### Cell.Slot
|
|
146
|
+
### Pressable cell
|
|
193
147
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
| Prop | Type | Default | Description |
|
|
199
|
-
| :--- | :--- | :------ | :---------- |
|
|
200
|
-
| children | `ReactNode` | - | Slot content (icons, avatars, buttons). |
|
|
201
|
-
|
|
202
|
-
---
|
|
148
|
+
```tsx
|
|
149
|
+
import * as React from 'react';
|
|
150
|
+
import { Cell } from '@xsolla/xui-cell';
|
|
151
|
+
import { ChevronRight } from '@xsolla/xui-icons-base';
|
|
203
152
|
|
|
204
|
-
|
|
153
|
+
export default function PressableCell() {
|
|
154
|
+
return (
|
|
155
|
+
<Cell onPress={() => console.log('pressed')}>
|
|
156
|
+
<Cell.Text title="Account settings" description="Email, password, sessions" />
|
|
157
|
+
<Cell.Slot>
|
|
158
|
+
<ChevronRight size={20} aria-hidden />
|
|
159
|
+
</Cell.Slot>
|
|
160
|
+
</Cell>
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
```
|
|
205
164
|
|
|
206
|
-
|
|
165
|
+
### Settings list
|
|
207
166
|
|
|
208
|
-
|
|
167
|
+
```tsx
|
|
168
|
+
import * as React from 'react';
|
|
169
|
+
import { Cell } from '@xsolla/xui-cell';
|
|
170
|
+
import { ChevronRight } from '@xsolla/xui-icons-base';
|
|
209
171
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
172
|
+
export default function SettingsList() {
|
|
173
|
+
return (
|
|
174
|
+
<div>
|
|
175
|
+
<Cell onPress={() => {}}>
|
|
176
|
+
<Cell.Text title="Profile" />
|
|
177
|
+
<Cell.Slot><ChevronRight size={16} aria-hidden /></Cell.Slot>
|
|
178
|
+
</Cell>
|
|
179
|
+
<Cell onPress={() => {}}>
|
|
180
|
+
<Cell.Text title="Notifications" />
|
|
181
|
+
<Cell.Slot><ChevronRight size={16} aria-hidden /></Cell.Slot>
|
|
182
|
+
</Cell>
|
|
183
|
+
<Cell onPress={() => {}}>
|
|
184
|
+
<Cell.Text title="Security" />
|
|
185
|
+
<Cell.Slot><ChevronRight size={16} aria-hidden /></Cell.Slot>
|
|
186
|
+
</Cell>
|
|
187
|
+
</div>
|
|
188
|
+
);
|
|
189
|
+
}
|
|
190
|
+
```
|
|
213
191
|
|
|
214
|
-
##
|
|
192
|
+
## Accessibility
|
|
215
193
|
|
|
216
|
-
-
|
|
217
|
-
-
|
|
218
|
-
-
|
|
219
|
-
- `withBoard` adds: secondary background, border, 8px border radius, and 12px vertical padding
|
|
194
|
+
- Provide an accessible label on the cell (or its leading slot) when used as an action.
|
|
195
|
+
- When `onPress` is set, ensure the cell receives keyboard focus on web; pair it with a `role` such as `button` if the surrounding context does not already imply interactivity.
|
|
196
|
+
- Decorative icons inside slots should be marked `aria-hidden`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-cell",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.152.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
"build:native": "PLATFORM=native tsup"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@xsolla/xui-avatar": "0.
|
|
14
|
-
"@xsolla/xui-button": "0.
|
|
15
|
-
"@xsolla/xui-core": "0.
|
|
16
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-avatar": "0.152.0",
|
|
14
|
+
"@xsolla/xui-button": "0.152.0",
|
|
15
|
+
"@xsolla/xui-core": "0.152.0",
|
|
16
|
+
"@xsolla/xui-primitives-core": "0.152.0"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"react": ">=16.8.0",
|