import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs'; import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components' import { Icon } from "@calcom/ui"; import {SelectField} from "./Select" ## Definition Dropdown fields allow users to input existing options that is preset by the deisgner/ developer. It can be just one choice per field, or they might be multiple choices depends on the circumstances. ## Structure <CustomArgsTable of={SelectField} /> export const options = [ { value: 0, label: "Option One" }, { value: 1, label: "Option Two" }, ]; ## Examples <Examples title=" Single Selected / Unselected" footnote={ <ul> <li>The difference between the types are when they are filled. </li> </ul> }> <Example title="Single Select [Unselected]"> <SelectField label={"Single Select"} options={options} /> </Example> <Example title="Single Select [Selected]"> <SelectField label={"Single Select"} options={options} defaultValue={options[0]} /> </Example> <Example title="Multi Select [Unselected]"> <SelectField label={"Multi Select"} options={options} isMulti={true} /> </Example> <Example title="Multi Select [Selected]"> <SelectField label={"Multi Select"} options={options} isMulti={true} defaultValue={options[0]} /> </Example> </Examples> <Examples title="Variants"> <Example title="Default"> <SelectField label={"Default Select"} options={options}/> </Example> <Example title="Icon Left"> WIP {/* <SelectField options={options} components={{ Control }}/> */} </Example> </Examples> ## Variant Caviats (WIP) - To be updated Using Icons is a bit of a strange one cause you can't simpily pass in an icon as a prop. You have to pass in a component. To the select field. ```js // Bad: Inline declaration will cause remounting issues const BadSelect = props => ( <Select {...props} components={{ Control: ({ children, ...rest }) => ( <components.Control {...rest}> 👎 {children} </components.Control> )}} /> ) // Good: Custom component declared outside of the Select scope const Control = <IconLeading icon={Icon.FiPlus}/> const GoodSelect = props => <Select {...props} components={{ Control }} /> ``` <Examples title="States "> <Example title="Default"> <SelectField options={options} label={"Default Select"}/> </Example> {/* <Example title="Hover"> <SelectField options={options} className="sb-pseudo--hover"/> </Example> <Example title="Focus"> <SelectField options={options} className="sb-pseudo--focus"/> </Example> */} </Examples> ## Select Story <Canvas> <Story name="Default"> <SelectField options={options} label={"Default Select"}/> </Story> </Canvas>