cal.pub0.org/packages/ui/components/form/select/select.stories.mdx

112 lines
3.1 KiB
Plaintext
Raw Normal View History

2023-08-15 00:42:10 +00:00
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import {
Examples,
Example,
Note,
Title,
CustomArgsTable,
VariantRow,
VariantsTable,
} from "@calcom/storybook/components";
2023-08-15 00:42:10 +00:00
import { Plus } from "../../icon";
import { SelectField } from "./Select";
<Meta title="UI/Form/Select Field" component={SelectField} />
2023-08-15 00:42:10 +00:00
<Title title="Select" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
## Definition
2023-08-15 00:42:10 +00:00
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
2023-08-15 00:42:10 +00:00
<CustomArgsTable of={SelectField} />
export const options = [
2023-08-15 00:42:10 +00:00
{ value: 0, label: "Option One" },
{ value: 1, label: "Option Two" },
{ value: 3, label: "Option Three" },
{ value: 4, label: "Option Four" },
];
## Examples
2023-08-15 00:42:10 +00:00
<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>
2023-08-15 00:42:10 +00:00
<SelectField label={"Single Select"} options={options} />
</Example>
2023-08-15 00:42:10 +00:00
<Example title="Single Select [Selected]" isFullWidth>
<SelectField label={"Single Select"} options={options} defaultValue={options[0]} />
</Example>
2023-08-15 00:42:10 +00:00
<Example title="Multi Select [Unselected]" isFullWidth>
<SelectField label={"Multi Select"} options={options} isMulti={true} />
</Example>
<Example title="Multi Select [Selected]" isFullWidth>
2023-08-15 00:42:10 +00:00
<SelectField label={"Multi Select"} options={options} isMulti={true} defaultValue={options[0]} />
</Example>
</Examples>
<Examples title="Variants">
<Example title="Default">
2023-08-15 00:42:10 +00:00
<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
2023-08-15 00:42:10 +00:00
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
2023-08-15 00:42:10 +00:00
const BadSelect = (props) => (
<Select
{...props}
components={{
Control: ({ children, ...rest }) => <components.Control {...rest}>👎 {children}</components.Control>,
}}
/>
2023-08-15 00:42:10 +00:00
);
// Good: Custom component declared outside of the Select scope
2023-08-15 00:42:10 +00:00
const Control = <IconLeading icon={Plus} />;
2023-08-15 00:42:10 +00:00
const GoodSelect = (props) => <Select {...props} components={{ Control }} />;
```
<Examples title="States ">
<Example title="Default">
2023-08-15 00:42:10 +00:00
<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
2023-08-15 00:42:10 +00:00
<Canvas>
<Story name="Default">
2023-08-15 00:42:10 +00:00
<VariantsTable titles={["Default"]} columnMinWidth={450}>
<VariantRow>
2023-08-15 00:42:10 +00:00
<SelectField options={options} label={"Default Select"} />
</VariantRow>
</VariantsTable>
</Story>
</Canvas>