Skip to content

Commit

Permalink
feat(dropdown): integration and documentation with form-field
Browse files Browse the repository at this point in the history
  • Loading branch information
@andresin87
andresin87 committed Jan 3, 2024
1 parent 14b440b commit 5945593
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 26 deletions.
28 changes: 27 additions & 1 deletion packages/components/dropdown/src/Dropdown.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,32 @@ If your `Dropdown.Item` contains anything else than raw text, you may use any JS

<Canvas of={stories.CustomItem} />

### With form field label
## Form field

### Label

<Canvas of={stories.FormFieldLabel} />

### Hidden label

In certain cases, a visible label may not be necessary. To achieve this behavior, use the `VisuallyHidden` component.

<Canvas of={stories.FormFieldHiddenLabel} />

### Required

Use the `isRequired` prop of the `FormField` to indicate that the dropdown is required.

<Canvas of={stories.FormFieldRequired} />

### Disabled

The dropdown `disabled` field status can be managed by the FormField `disabled` flag.

<Canvas of={stories.FormFieldDisabled} />

### Validation

Set the `state` prop of the `FormField` to `error` to indicate that the dropdown is invalid. Optionally use the `FormField.ErrorMessage` to describe why the dropdown is invalid.

<Canvas of={stories.FormFieldValidation} />
162 changes: 137 additions & 25 deletions packages/components/dropdown/src/Dropdown.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Button } from '@spark-ui/button'
import { FormField } from '@spark-ui/form-field'
import { BookmarkFill } from '@spark-ui/icons/dist/icons/BookmarkFill'
import { Tag } from '@spark-ui/tag'
import { VisuallyHidden } from '@spark-ui/visually-hidden'
import { Meta, StoryFn } from '@storybook/react'
import { ComponentProps, useState } from 'react'

Expand Down Expand Up @@ -297,31 +298,6 @@ export const Statuses: StoryFn = () => {
)
}

export const FormFieldLabel: StoryFn = _args => {
return (
<div className="pb-[300px]">
<FormField>
<FormField.Label>Book</FormField.Label>
<Dropdown>
<Dropdown.Trigger>
<Dropdown.Value placeholder="Pick a book" />
</Dropdown.Trigger>
<Dropdown.Popover>
<Dropdown.Items>
<Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
<Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
<Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
<Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
<Dropdown.Item value="book-5">1984</Dropdown.Item>
<Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
</Dropdown.Items>
</Dropdown.Popover>
</Dropdown>
</FormField>
</div>
)
}

export const MultipleSelection: StoryFn = _args => {
return (
<div className="pb-[300px]">
Expand Down Expand Up @@ -369,3 +345,139 @@ export const MultipleSelectionControlled: StoryFn = () => {
</div>
)
}

export const FormFieldLabel: StoryFn = _args => {
return (
<div className="pb-[300px]">
<FormField>
<FormField.Label>Book</FormField.Label>
<Dropdown>
<Dropdown.Trigger>
<Dropdown.Value placeholder="Pick a book" />
</Dropdown.Trigger>
<Dropdown.Popover>
<Dropdown.Items>
<Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
<Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
<Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
<Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
<Dropdown.Item value="book-5">1984</Dropdown.Item>
<Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
</Dropdown.Items>
</Dropdown.Popover>
</Dropdown>
</FormField>
</div>
)
}

export const FormFieldHiddenLabel: StoryFn = _args => {
return (
<div className="pb-[300px]">
<FormField>
<FormField.Label>
<VisuallyHidden>Book</VisuallyHidden>
</FormField.Label>
<Dropdown>
<Dropdown.Trigger>
<Dropdown.Value placeholder="Pick a book" />
</Dropdown.Trigger>
<Dropdown.Popover>
<Dropdown.Items>
<Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
<Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
<Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
<Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
<Dropdown.Item value="book-5">1984</Dropdown.Item>
<Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
</Dropdown.Items>
</Dropdown.Popover>
</Dropdown>
</FormField>
</div>
)
}

export const FormFieldRequired: StoryFn = _args => {
return (
<div className="pb-[300px]">
<FormField isRequired>
<FormField.Label>Book</FormField.Label>
<Dropdown>
<Dropdown.Trigger>
<Dropdown.Value placeholder="Pick a book" />
</Dropdown.Trigger>
<Dropdown.Popover>
<Dropdown.Items>
<Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
<Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
<Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
<Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
<Dropdown.Item value="book-5">1984</Dropdown.Item>
<Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
</Dropdown.Items>
</Dropdown.Popover>
</Dropdown>
</FormField>
</div>
)
}

export const FormFieldDisabled: StoryFn = _args => {
return (
<div className="pb-[300px]">
<FormField disabled>
<FormField.Label>Book</FormField.Label>
<Dropdown>
<Dropdown.Trigger>
<Dropdown.Value placeholder="Pick a book" />
</Dropdown.Trigger>
<Dropdown.Popover>
<Dropdown.Items>
<Dropdown.Item value="book-1">To Kill a Mockingbird</Dropdown.Item>
<Dropdown.Item value="book-2">War and Peace</Dropdown.Item>
<Dropdown.Item value="book-3">The Idiot</Dropdown.Item>
<Dropdown.Item value="book-4">A Picture of Dorian Gray</Dropdown.Item>
<Dropdown.Item value="book-5">1984</Dropdown.Item>
<Dropdown.Item value="book-6">Pride and Prejudice</Dropdown.Item>
</Dropdown.Items>
</Dropdown.Popover>
</Dropdown>
</FormField>
</div>
)
}
export const FormFieldValidation: StoryFn = () => {
const [state, setState] = useState<undefined | 'success' | 'alert' | 'error'>('error')

return (
<div className="pb-[300px]">
<FormField state={state}>
<FormField.Label>Statuses</FormField.Label>
<Dropdown
onValueChange={value => {
setState(value === 'default' ? undefined : (value as 'success' | 'alert' | 'error'))
}}
>
<Dropdown.Trigger>
<Dropdown.Value placeholder="Pick an state" />
</Dropdown.Trigger>
<Dropdown.Popover>
<Dropdown.Items>
<Dropdown.Item value="default">default</Dropdown.Item>
<Dropdown.Item value="success">success</Dropdown.Item>
<Dropdown.Item value="alert">alert</Dropdown.Item>
<Dropdown.Item value="error">error</Dropdown.Item>
</Dropdown.Items>
</Dropdown.Popover>
</Dropdown>
<FormField.HelperMessage>
An effective title significantly increases your chances of making a sale
</FormField.HelperMessage>
<FormField.SuccessMessage>Well done!</FormField.SuccessMessage>
<FormField.AlertMessage>Take care of this field</FormField.AlertMessage>
<FormField.ErrorMessage>The field is invalid</FormField.ErrorMessage>
</FormField>
</div>
)
}

0 comments on commit 5945593

Please sign in to comment.