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

[ui][select] add errorMessage and placeholder

Browse Source
This commit is contained in:
Yangshun Tay
2022-10-12 18:57:37 +08:00
parent c7a0c095de
commit b87afb1383
2 changed files with 106 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,9 @@ export default {
control: { type: 'select' },
options: SelectDisplays,
},
errorMessage: {
control: 'text',
},
isLabelHidden: {
control: 'boolean',
},
@ -23,6 +26,9 @@ export default {
name: {
control: 'text',
},
placeholder: {
control: 'text',
},
},
component: Select,
title: 'Select',
@ -181,28 +187,78 @@ export function Required() {
const [value, setValue] = useState('apple');
return (
<div className="space-x-4">
<Select
label="Select a fruit"
options={[
{
label: 'Apple',
value: 'apple',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Orange',
value: 'orange',
},
]}
required={true}
value={value}
onChange={setValue}
/>
</div>
<Select
label="Select a fruit"
options={[
{
label: 'Apple',
value: 'apple',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Orange',
value: 'orange',
},
]}
required={true}
value={value}
onChange={setValue}
/>
);
}
export function Placeholder() {
return (
<Select
label="Select a fruit"
options={[
{
label: 'Apple',
value: 'apple',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Orange',
value: 'orange',
},
]}
placeholder="Select a fruit"
required={true}
/>
);
}
export function Error() {
const [value, setValue] = useState('banana');
return (
<Select
errorMessage={value !== 'apple' ? 'Must select apple' : undefined}
label="Select a fruit"
options={[
{
label: 'Apple',
value: 'apple',
},
{
label: 'Banana',
value: 'banana',
},
{
label: 'Orange',
value: 'orange',
},
]}
required={true}
value={value}
onChange={setValue}
/>
);
}