Skip to content

Commit 15480fe

Browse files
stuarthendrenstuarthendren
authored
Merge pull request #241 from commitd/ka-radix-select
Updates Select component to be based on Radix Select
2 parents 1a57fd7 + 4ea6c79 commit 15480fe

File tree

4 files changed

+296
-185
lines changed

4 files changed

+296
-185
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,7 @@
221221
"@radix-ui/react-switch": "0.1.1",
222222
"@radix-ui/react-tabs": "0.1.1",
223223
"@radix-ui/react-tooltip": "0.1.1",
224+
"@radix-ui/react-select": "0.1.1",
224225
"@radix-ui/react-visually-hidden": "^0.1.1",
225226
"@stitches/react": "^1.2.5"
226227
}

‎src/components/Select/Select.stories.tsx

Lines changed: 131 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,24 @@
11
import { Meta, Story } from '@storybook/react'
22
import { action } from '@storybook/addon-actions'
33
import React from 'react'
4-
import { Select, SelectItem } from '.'
4+
import {
5+
Select,
6+
SelectContent,
7+
SelectGroup,
8+
SelectIcon,
9+
SelectItem,
10+
SelectItemIndicator,
11+
SelectItemText,
12+
SelectLabel,
13+
SelectRoot,
14+
SelectRootItem,
15+
SelectScrollDownButton,
16+
SelectScrollUpButton,
17+
SelectSeparator,
18+
SelectTrigger,
19+
SelectValue,
20+
SelectViewport,
21+
} from '.'
522
import { Button } from '../Button'
623
import { Box } from '../Box'
724
import { Dialog, DialogContent, DialogTrigger } from '../Dialog'
@@ -11,89 +28,148 @@ import {
1128
ConfirmDialogTrigger,
1229
ConfirmDialogActions,
1330
} from '../ConfirmDialog'
31+
import {
32+
mdiArrowUpDropCircleOutline,
33+
mdiArrowDownDropCircleOutline,
34+
mdiThumbUp,
35+
} from '@mdi/js'
36+
import { Svg } from '../Svg'
1437

1538
export default {
1639
title: 'Components/Select',
1740
component: Select,
1841
subcomponents: {
42+
SelectContent,
43+
SelectGroup,
44+
SelectIcon,
1945
SelectItem,
46+
SelectItemIndicator,
47+
SelectItemText,
48+
SelectLabel,
49+
SelectScrollDownButton,
50+
SelectScrollUpButton,
51+
SelectTrigger,
52+
SelectValue,
53+
SelectViewport,
54+
SelectRoot,
55+
SelectRootItem,
2056
},
2157
} as Meta
2258

23-
const Template: Story = (args) => (
24-
<Select {...args}>
25-
<SelectItem value="one">One</SelectItem>
26-
<SelectItem value="two">Two</SelectItem>
27-
<SelectItem value="three">Three</SelectItem>
59+
const SimpleSelect: Story = (args) => (
60+
<Select defaultValue="1" {...args}>
61+
<SelectItem value="1">Item 1</SelectItem>
62+
<SelectItem value="2">Item 2</SelectItem>
63+
<SelectItem value="3">Item 3</SelectItem>
2864
</Select>
2965
)
3066

31-
export const Default = Template.bind({})
32-
export const Label = Template.bind({})
33-
Label.args = {
34-
label: 'Select',
35-
}
36-
export const Placeholder = Template.bind({})
37-
Placeholder.args = {
38-
placeholder: '--Select an option--',
39-
}
40-
export const Header = Template.bind({})
41-
Header.args = {
42-
header: '--Select an option--',
43-
}
44-
export const Disabled = Template.bind({})
45-
Disabled.args = {
46-
disabled: true,
47-
}
67+
export const Default = SimpleSelect
68+
69+
/** This shows how to group items in the select popover */
70+
export const Grouped = () => (
71+
<Select defaultValue="grapes">
72+
<SelectGroup>
73+
<SelectLabel>Fruits</SelectLabel>
74+
<SelectItem value="apple">Apple</SelectItem>
75+
<SelectItem value="banana">Banana</SelectItem>
76+
<SelectItem value="blueberry">Blueberry</SelectItem>
77+
<SelectItem value="grapes">Grapes</SelectItem>
78+
<SelectItem value="pineapple">Pineapple</SelectItem>
79+
</SelectGroup>
80+
<SelectSeparator />
81+
<SelectGroup>
82+
<SelectLabel>Vegetables</SelectLabel>
83+
<SelectItem value="aubergine">Aubergine</SelectItem>
84+
<SelectItem value="broccoli">Broccoli</SelectItem>
85+
<SelectItem value="carrot">Carrot</SelectItem>
86+
<SelectItem value="courgette">Courgette</SelectItem>
87+
<SelectItem value="leek">Leek</SelectItem>
88+
</SelectGroup>
89+
<SelectSeparator />
90+
<SelectGroup>
91+
<SelectLabel>Meats</SelectLabel>
92+
<SelectItem value="chicken">Chicken</SelectItem>
93+
<SelectItem value="pork">Pork</SelectItem>
94+
<SelectItem value="beef">Beef</SelectItem>
95+
</SelectGroup>
96+
</Select>
97+
)
98+
99+
export const WithDisabledItems = () => (
100+
<Select defaultValue="1">
101+
<SelectItem value="1">Item 1</SelectItem>
102+
<SelectItem value="2">Item 2</SelectItem>
103+
<SelectItem disabled value="3">
104+
Item 3
105+
</SelectItem>
106+
<SelectItem disabled value="4">
107+
Item 4
108+
</SelectItem>
109+
<SelectItem value="5">Item 5</SelectItem>
110+
</Select>
111+
)
112+
113+
export const Scrollable = () => (
114+
<Select defaultValue="19">
115+
{[...Array(50)].map((x, i) => (
116+
<SelectItem value={i.toString()}>Item {i}</SelectItem>
117+
))}
118+
</Select>
119+
)
120+
121+
export const WithLabel = () => <SimpleSelect label="Label" />
122+
123+
/** Using `<SelectRoot>` and `<SelectRootItem>` gives further access to the underlying Radix implementation, allowing for more customization */
124+
export const Customization = () => (
125+
<SelectRoot defaultValue="19">
126+
<SelectTrigger>
127+
<SelectValue />
128+
<SelectIcon>
129+
<Svg path={mdiArrowDownDropCircleOutline} />
130+
</SelectIcon>
131+
</SelectTrigger>
132+
<SelectContent>
133+
<SelectScrollUpButton>
134+
<Svg path={mdiArrowUpDropCircleOutline} />
135+
</SelectScrollUpButton>
136+
<SelectViewport>
137+
{[...Array(50)].map((x, i) => (
138+
<SelectRootItem value={i.toString()}>
139+
<SelectItemText>Item {i}</SelectItemText>
140+
<SelectItemIndicator>
141+
<Svg css={{ color: '$success9' }} path={mdiThumbUp} />
142+
</SelectItemIndicator>
143+
</SelectRootItem>
144+
))}
145+
</SelectViewport>
146+
<SelectScrollDownButton>
147+
<Svg path={mdiArrowDownDropCircleOutline} />
148+
</SelectScrollDownButton>
149+
</SelectContent>
150+
</SelectRoot>
151+
)
48152

49-
/**
50-
* This dialog tests currently fail in storybook canvas
51-
*
52-
* The menu seems to be confined to the bounds of the iframe, even though the dialog isn't.
53-
*/
54153
export const DialogSelect = () => (
55154
<Dialog>
56155
<DialogTrigger>
57156
<Button>Show Dialog</Button>
58157
</DialogTrigger>
59158
<DialogContent>
60-
<Select>
61-
<SelectItem value="one">One</SelectItem>
62-
<SelectItem value="two">Two</SelectItem>
63-
<SelectItem value="three">Three</SelectItem>
64-
</Select>
159+
<SimpleSelect />
65160
</DialogContent>
66161
</Dialog>
67162
)
68163

69164
/**
70-
* In this version, we add a `fullscreen` Box - here the Select works properly.
71-
*
72-
* As this is likely to be the case generally we leave this as a known issue and will check if radix-ui Select fixes it on release.
73-
* <https://github.com/commitd/components/issues/230>
165+
* In this version, we add a `fullscreen` Box
74166
* */
75167
export const ConfirmDialogSelect = () => (
76168
<Box variant="fullscreen">
77169
<ConfirmDialog>
78170
<ConfirmDialogContent description="This is a test" title="Test Select">
79-
<Select label="Label" placeholder="Placeholder" header="Pick a number">
80-
<SelectItem value="one">One</SelectItem>
81-
<SelectItem value="two">Two</SelectItem>
82-
<SelectItem value="three">Three</SelectItem>
83-
<SelectItem value="four">Four</SelectItem>
84-
<SelectItem value="five">Five</SelectItem>
85-
<SelectItem value="six">Six</SelectItem>
86-
<SelectItem value="seven">Seven</SelectItem>
87-
</Select>
88-
<Select label="Label" placeholder="Placeholder">
89-
<SelectItem value="one">A</SelectItem>
90-
<SelectItem value="two">B</SelectItem>
91-
<SelectItem value="three">C</SelectItem>
92-
<SelectItem value="four">D</SelectItem>
93-
<SelectItem value="five">E</SelectItem>
94-
<SelectItem value="six">F</SelectItem>
95-
<SelectItem value="seven">G</SelectItem>
96-
</Select>
171+
<SimpleSelect />
172+
<SimpleSelect />
97173
<ConfirmDialogActions confirm="Confirm" onConfirm={action('Confirm')} />
98174
</ConfirmDialogContent>
99175
<ConfirmDialogTrigger>

0 commit comments

Comments
 (0)