Skip to content

Commit 2e82d78

Browse files
author
chenyueban
committed
feat(Select): New component Select
1 parent 0d85378 commit 2e82d78

17 files changed

Lines changed: 455 additions & 71 deletions

File tree

‎packages/fluent-ui.com/src/components/docs/nav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ const Nav = ({ data }: TemplateProps): React.ReactElement => {
135135
{titles.map(
136136
(title): React.ReactElement => (
137137
<Item
138-
id={title}
138+
value={title}
139139
key={title}
140140
className={activeId === title ? 'active-item' : ''}
141141
onClick={handleNavigation.bind(undefined, title, type)}
@@ -183,7 +183,7 @@ const Nav = ({ data }: TemplateProps): React.ReactElement => {
183183
{titles.map(
184184
(title): React.ReactElement => (
185185
<Item
186-
id={title}
186+
value={title}
187187
key={title}
188188
className={activeId === title ? 'active-item' : ''}
189189
onClick={handleNavigation.bind(undefined, title, type)}

‎packages/fluent-ui.com/src/docs/components/Item/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,21 @@ type: DataDisplay
1616
</Item>
1717
```
1818

19+
## Active Item
20+
21+
```jsx
22+
<>
23+
<Item value={1} prefix={<Icon.Connected />} active>
24+
hello
25+
</Item>
26+
<Item value={2} prefix={<Icon.Connected />}>
27+
hello
28+
</Item>
29+
</>
30+
```
31+
1932
## Use with other components
2033

2134
- Use with [`Navigation`](/components/navigation)
2235
- Use with [`List`](/components/list)
36+
- Use with [`Select`](/components/select)

‎packages/fluent-ui.com/src/docs/components/Item/api.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import { Item } from '@fluent-ui/core'
1616

1717
| Name | Type | Default | Description |
1818
| --- | --- | --- | --- |
19-
| id | string &or; number | | The uniquely identifies |
19+
| value | string &or; number | | The uniquely identifies |
2020
| prefix | React.ReactElement | | The prefix displayed. |
21+
| active | boolean | | If `true`, the `Item` will be active, need to match `value`. |
2122
| children | React.ReactChild | | Display portion of text and other content. |
2223
| onClick | React.MouseEventHandler<HTMLDivElement> | | Set the handler to handle click event. |

‎packages/fluent-ui.com/src/docs/components/Navigation/README.md‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,25 @@ type: Navigation
1313
```jsx
1414
() => {
1515
const [activeId, setActiveId] = React.useState(1)
16-
function handleActiveId(id) {
17-
setActiveId(id)
16+
function handleActiveId(value) {
17+
setActiveId(value)
1818
}
1919
return (
2020
<Navigation height={600} value={activeId} onChange={handleActiveId}>
2121
<Navigation.Header>
2222
<Item prefix={<Icon.GlobalNavigationButton />} />
2323
</Navigation.Header>
2424

25-
<Item id={1} prefix={<Icon.Connected />}>
25+
<Item value={1} prefix={<Icon.Connected />}>
2626
Option 1
2727
</Item>
28-
<Item id={2} prefix={<Icon.Connected />}>
28+
<Item value={2} prefix={<Icon.Connected />}>
2929
Option 2
3030
</Item>
31-
<Item id={3} prefix={<Icon.Connected />}>
31+
<Item value={3} prefix={<Icon.Connected />}>
3232
Option 3
3333
</Item>
34-
<Item id={4} prefix={<Icon.Connected />}>
34+
<Item value={4} prefix={<Icon.Connected />}>
3535
Option 4
3636
</Item>
3737

@@ -50,8 +50,8 @@ type: Navigation
5050
```jsx
5151
() => {
5252
const [activeId, setActiveId] = React.useState(1)
53-
function handleActiveId(id) {
54-
setActiveId(id)
53+
function handleActiveId(value) {
54+
setActiveId(value)
5555
}
5656
const [expanded, setExpanded] = React.useState(true)
5757
function handleExpanded() {
@@ -65,34 +65,34 @@ type: Navigation
6565
<Item prefix={<Icon.GlobalNavigationButton />} />
6666
</Navigation.Header>
6767

68-
<Item id={1} prefix={<Icon.Connected />}>
68+
<Item value={1} prefix={<Icon.Connected />}>
6969
Option 1
7070
</Item>
71-
<Item id={2} prefix={<Icon.Connected />}>
71+
<Item value={2} prefix={<Icon.Connected />}>
7272
Option 2
7373
</Item>
74-
<Item id={3} prefix={<Icon.Connected />}>
74+
<Item value={3} prefix={<Icon.Connected />}>
7575
Option 3
7676
</Item>
7777
<ItemGroup title="group" prefix={<Icon.Connected />}>
78-
<Item id={4} prefix={<Icon.Connected />}>
78+
<Item value={4} prefix={<Icon.Connected />}>
7979
Option 4
8080
</Item>
81-
<Item id={5} prefix={<Icon.Connected />}>
81+
<Item value={5} prefix={<Icon.Connected />}>
8282
Option 5
8383
</Item>
8484
<ItemGroup title="group inside" prefix={<Icon.Connected />}>
85-
<Item id={7} prefix={<Icon.Connected />}>
85+
<Item value={7} prefix={<Icon.Connected />}>
8686
Option 7
8787
</Item>
88-
<Item id={8} prefix={<Icon.Connected />}>
88+
<Item value={8} prefix={<Icon.Connected />}>
8989
Option 8
9090
</Item>
9191
<ItemGroup title="group inside" prefix={<Icon.Connected />}>
92-
<Item id={9} prefix={<Icon.Connected />}>
92+
<Item value={9} prefix={<Icon.Connected />}>
9393
Option 9
9494
</Item>
95-
<Item id={10} prefix={<Icon.Connected />}>
95+
<Item value={10} prefix={<Icon.Connected />}>
9696
Option 10
9797
</Item>
9898
</ItemGroup>
@@ -115,8 +115,8 @@ type: Navigation
115115
```jsx
116116
() => {
117117
const [activeId, setActiveId] = React.useState(1)
118-
function handleActiveId(id) {
119-
setActiveId(id)
118+
function handleActiveId(value) {
119+
setActiveId(value)
120120
}
121121
const [expanded, setExpanded] = React.useState(true)
122122
function handleExpanded() {
@@ -130,16 +130,16 @@ type: Navigation
130130
<Item prefix={<Icon.GlobalNavigationButton />} />
131131
</Navigation.Header>
132132

133-
<Item id={1} prefix={<Icon.Connected />}>
133+
<Item value={1} prefix={<Icon.Connected />}>
134134
Option 1
135135
</Item>
136-
<Item id={2} prefix={<Icon.Connected />}>
136+
<Item value={2} prefix={<Icon.Connected />}>
137137
Option 2
138138
</Item>
139-
<Item id={3} prefix={<Icon.Connected />}>
139+
<Item value={3} prefix={<Icon.Connected />}>
140140
Option 3
141141
</Item>
142-
<Item id={4} prefix={<Icon.Connected />}>
142+
<Item value={4} prefix={<Icon.Connected />}>
143143
Option 4
144144
</Item>
145145

@@ -159,8 +159,8 @@ type: Navigation
159159
```jsx
160160
() => {
161161
const [activeId, setActiveId] = React.useState(1)
162-
function handleActiveId(id) {
163-
setActiveId(id)
162+
function handleActiveId(value) {
163+
setActiveId(value)
164164
}
165165
const [expanded, setExpanded] = React.useState(true)
166166
function handleExpanded() {
@@ -178,16 +178,16 @@ type: Navigation
178178
<Item prefix={<Icon.GlobalNavigationButton />} />
179179
</Navigation.Header>
180180

181-
<Item id={1} prefix={<Icon.Connected />}>
181+
<Item value={1} prefix={<Icon.Connected />}>
182182
Option 1
183183
</Item>
184-
<Item id={2} prefix={<Icon.Connected />}>
184+
<Item value={2} prefix={<Icon.Connected />}>
185185
Option 2
186186
</Item>
187-
<Item id={3} prefix={<Icon.Connected />}>
187+
<Item value={3} prefix={<Icon.Connected />}>
188188
Option 3
189189
</Item>
190-
<Item id={4} prefix={<Icon.Connected />}>
190+
<Item value={4} prefix={<Icon.Connected />}>
191191
Option 4
192192
</Item>
193193

@@ -208,8 +208,8 @@ type: Navigation
208208
```jsx
209209
() => {
210210
const [activeId, setActiveId] = React.useState(1)
211-
function handleActiveId(id) {
212-
setActiveId(id)
211+
function handleActiveId(value) {
212+
setActiveId(value)
213213
}
214214
const [expanded, setExpanded] = React.useState(true)
215215
function handleExpanded() {
@@ -223,16 +223,16 @@ type: Navigation
223223
<Item prefix={<Icon.GlobalNavigationButton />} />
224224
</Navigation.Header>
225225

226-
<Item id={1} prefix={<Icon.Connected />}>
226+
<Item value={1} prefix={<Icon.Connected />}>
227227
Option 1
228228
</Item>
229-
<Item id={2} prefix={<Icon.Connected />}>
229+
<Item value={2} prefix={<Icon.Connected />}>
230230
Option 2
231231
</Item>
232-
<Item id={3} prefix={<Icon.Connected />}>
232+
<Item value={3} prefix={<Icon.Connected />}>
233233
Option 3
234234
</Item>
235-
<Item id={4} prefix={<Icon.Connected />}>
235+
<Item value={4} prefix={<Icon.Connected />}>
236236
Option 4
237237
</Item>
238238

@@ -252,8 +252,8 @@ type: Navigation
252252
```jsx
253253
() => {
254254
const [activeId, setActiveId] = React.useState(1)
255-
function handleActiveId(id) {
256-
setActiveId(id)
255+
function handleActiveId(value) {
256+
setActiveId(value)
257257
}
258258
const [expanded, setExpanded] = React.useState(true)
259259
function handleExpanded() {
@@ -277,40 +277,40 @@ type: Navigation
277277
<Item prefix={<Icon.GlobalNavigationButton />} />
278278
</Navigation.Header>
279279

280-
<Item id={1} prefix={<Icon.Connected />}>
280+
<Item value={1} prefix={<Icon.Connected />}>
281281
Option 1
282282
</Item>
283-
<Item id={2} prefix={<Icon.Connected />}>
283+
<Item value={2} prefix={<Icon.Connected />}>
284284
Option 2
285285
</Item>
286-
<Item id={3} prefix={<Icon.Connected />}>
286+
<Item value={3} prefix={<Icon.Connected />}>
287287
Option 3
288288
</Item>
289289
<ItemGroup title="group" prefix={<Icon.Connected />}>
290-
<Item id={4}>
290+
<Item value={4}>
291291
Option 4
292292
</Item>
293-
<Item id={5}>
293+
<Item value={5}>
294294
Option 5
295295
</Item>
296296
<ItemGroup title="group inside">
297-
<Item id={7}>
297+
<Item value={7}>
298298
Option 7
299299
</Item>
300-
<Item id={8}>
300+
<Item value={8}>
301301
Option 8
302302
</Item>
303303
<ItemGroup title="group inside">
304-
<Item id={9}>
304+
<Item value={9}>
305305
Option 9
306306
</Item>
307-
<Item id={10}>
307+
<Item value={10}>
308308
Option 10
309309
</Item>
310310
</ItemGroup>
311311
</ItemGroup>
312312
</ItemGroup>
313-
<Item id={6}>
313+
<Item value={6}>
314314
Option 6
315315
</Item>
316316

‎packages/fluent-ui.com/src/docs/components/Select/README.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Select
3+
components: Select
4+
type: Inputs
5+
---
6+
7+
# Select
8+
9+
<p class="description">Select components are used for collecting user provided information from a list of options.</p>
10+
11+
## Controlled
12+
13+
```jsx
14+
() => {
15+
const [select, set] = React.useState(1)
16+
function handleChange(value) {
17+
set(value)
18+
}
19+
return (
20+
<>
21+
<Box>{select}</Box>
22+
<Select value={select} onChange={handleChange}>
23+
<Item value={1}>green</Item>
24+
<Item value={2}>blue</Item>
25+
<Item value={3}>ryan</Item>
26+
</Select>
27+
</>
28+
)
29+
}
30+
```
31+
32+
## Disabled
33+
34+
```jsx
35+
() => {
36+
const [select, set] = React.useState(1)
37+
function handleChange(value) {
38+
set(value)
39+
}
40+
return (
41+
<Select value={select} onChange={handleChange} disabled>
42+
<Item value={1}>green</Item>
43+
<Item value={2}>blue</Item>
44+
<Item value={3}>ryan</Item>
45+
</Select>
46+
)
47+
}
48+
```

‎packages/fluent-ui.com/src/docs/components/Select/api.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: Select
3+
components: Select
4+
api: true
5+
---
6+
7+
## API
8+
9+
```
10+
import Select from '@fluent-ui/core/Select'
11+
// or
12+
import { Select } from '@fluent-ui/core'
13+
```
14+
15+
### Props
16+
17+
| Name | Type | Default | Description |
18+
| --- | --- | --- | --- |
19+
| value | string &or; number | | As the currently selected value |
20+
| onChange | (value: string &or; number) => void | | Callback fired when the state is changed. |
21+
| disabled | boolean | false | If `true`, the `Select` will be disabled. |
22+
| children | React.ReactElement &or; React.ReactElement[] | | Render as the label of `Select`. |

0 commit comments

Comments
 (0)