feat: support item.disabled key for Dropdown, MultiSelect, ComboBox (#1328)

Closes #1326

* feat: support item.disabled key for `Dropdown`, `MultiSelect`, `ComboBox`

* Run "yarn build:docs"

* test: assert disabled property

* docs: add "Disabled items" examples
This commit is contained in:
metonym 2022-06-02 17:56:30 -07:00 committed by GitHub
commit f25a10c9c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 150 additions and 19 deletions

View file

@ -112,11 +112,25 @@ items={[
{id: "2", text: "Fax"}
]} />
### Disabled
### Disabled state
<ComboBox disabled titleText="Contact" placeholder="Select contact method"
items={[
{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}
]} />
]} />
### Disabled items
Use the `disabled` property in the `items` prop to disable specific items.
<ComboBox
titleText="Contact"
placeholder="Select contact method"
items={[
{ id: "0", text: "Slack" },
{ id: "1", text: "Email", disabled: true },
{ id: "2", text: "Fax" },
]}
/>

View file

@ -95,6 +95,20 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" />
### Disabled items
Use the `disabled` property in the `items` prop to disable specific items.
<Dropdown
selectedId="0"
titleText="Contact"
items={[
{ id: "0", text: "Slack" },
{ id: "1", text: "Email", disabled: true },
{ id: "2", text: "Fax" },
]}
/>
### Skeleton
<DropdownSkeleton />

View file

@ -145,4 +145,18 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
/>
### Disabled items
Use the `disabled` property in the `items` prop to disable specific items.
<MultiSelect
titleText="Contact"
label="Select contact methods..."
items={[
{ id: "0", text: "Slack" },
{ id: "1", text: "Email", disabled: true },
{ id: "2", text: "Fax" },
]}
/>