import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs"; import { Examples, Example, Note, Title, CustomArgsTable, VariantRow, VariantsTable, } from "@calcom/storybook/components"; import { Plus } from "../../icon"; 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" }, { value: 3, label: "Option Three" }, { value: 4, label: "Option Four" }, ]; ## 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]" isFullWidth> <SelectField label={"Single Select"} options={options} /> </Example> <Example title="Single Select [Selected]" isFullWidth> <SelectField label={"Single Select"} options={options} defaultValue={options[0]} /> </Example> <Example title="Multi Select [Unselected]" isFullWidth> <SelectField label={"Multi Select"} options={options} isMulti={true} /> </Example> <Example title="Multi Select [Selected]" isFullWidth> <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={Plus} />; 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"> <VariantsTable titles={["Default"]} columnMinWidth={450}> <VariantRow> <SelectField options={options} label={"Default Select"} /> </VariantRow> </VariantsTable> </Story> </Canvas>