algorithm/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2025-07-29 13:13:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui: add more props to Select

Browse Source
This commit is contained in:
Yangshun Tay
2022-10-05 20:30:45 +08:00
parent 0a3fb2503d
commit 4fcf80ae2a
3 changed files with 115 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
apps/storybook/stories/select.stories.tsx
View File

@ -7,6 +7,9 @@ const SelectDisplays: ReadonlyArray<SelectDisplay> = ['inline', 'block'];
export default {
argTypes: {
disabled: {
control: 'boolean',
},
display: {
control: { type: 'select' },
options: SelectDisplays,
@ -72,7 +75,7 @@ export function Display() {
const [value, setValue] = useState('apple');
return (
<div className="space-x-4">
<div className="space-y-4">
<Select
label="Select a fruit"
options={[
@ -92,6 +95,84 @@ export function Display() {
value={value}
onChange={setValue}
/>
<Select
display="block"
label="Select a fruit"
options={[
{
label: 'Apple',
value: 'apple',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Orange',
value: 'orange',
},
]}
value={value}
onChange={setValue}
/>
</div>
);
}
export function HiddenLabel() {
const [value, setValue] = useState('apple');
return (
<div className="space-x-4">
<Select
isLabelHidden={true}
label="Select a fruit"
options={[
{
label: 'Apple',
value: 'apple',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Orange',
value: 'orange',
},
]}
value={value}
onChange={setValue}
/>
</div>
);
}
export function Disabled() {
const [value, setValue] = useState('apple');
return (
<div className="space-x-4">
<Select
disabled={true}
label="Select a fruit"
options={[
{
label: 'Apple',
value: 'apple',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Orange',
value: 'orange',
},
]}
value={value}
onChange={setValue}
/>
</div>
);
}