mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 02:41:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: v11 Dropdown

Browse source 
For better compatibility with existing codebases size xl is still supported.
This commit is contained in:
Gregor Wassmann 2023-03-27 16:40:13 +02:00 • committed by Enrico Sacchetti
commit 6be8d3f7d9
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
6 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -1163,7 +1163,7 @@ export interface DropdownItem {
| itemToString | No | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item | | itemToString | No | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item |
| type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown | | type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu | | direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the dropdown field | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Specify the size of the dropdown field |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text | | titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |

2
docs/src/COMPONENT_API.json
View file

@ -3318,7 +3318,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Specify the size of the dropdown field", "description": "Specify the size of the dropdown field",
"type": "\"sm\" | \"lg\" | \"xl\"", "type": "\"sm\" | \"lg\" ",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

4
docs/src/pages/components/Dropdown.svx
View file

@ -65,9 +65,9 @@ Set `direction` to `"top"` for the dropdown menu to appear above the input.
{id: "1", text: "Email"}, {id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" /> {id: "2", text: "Fax"}]}" />
## Extra-large size ## Large size
<Dropdown size="xl" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"}, <Dropdown size="lg" titleText="Contact" selectedId="0" items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"}, {id: "1", text: "Email"},
{id: "2", text: "Fax"}]}" /> {id: "2", text: "Fax"}]}" />

4
src/Dropdown/Dropdown.svelte
View file

@ -39,7 +39,7 @@
/** /**
* Specify the size of the dropdown field * Specify the size of the dropdown field
* @type {"sm" | "lg" | "xl"} * @type {"sm" | "lg" }
*/ */
export let size = undefined; export let size = undefined;
@ -203,7 +203,7 @@
{!invalid && warn && 'bx--dropdown--warning'} {!invalid && warn && 'bx--dropdown--warning'}
{open && 'bx--dropdown--open'} {open && 'bx--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'} {size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'} {(size === 'lg' || size === 'xl') && 'bx--dropdown--lg'}
{inline && 'bx--dropdown--inline'} {inline && 'bx--dropdown--inline'}
{disabled && 'bx--dropdown--disabled'} {disabled && 'bx--dropdown--disabled'}
{light && 'bx--dropdown--light'}" {light && 'bx--dropdown--light'}"

2
tests/Dropdown.test.svelte
View file

@ -82,7 +82,7 @@
/> />
<Dropdown <Dropdown
size="xl" size="lg"
titleText="Contact" titleText="Contact"
selectedId="0" selectedId="0"
items="{[ items="{[

2
types/Dropdown/Dropdown.svelte.d.ts vendored
View file

@ -48,7 +48,7 @@ export interface DropdownProps extends RestProps {
* Specify the size of the dropdown field * Specify the size of the dropdown field
* @default undefined * @default undefined
*/ */
size?: "sm" | "lg" | "xl"; size?: "sm" | "lg";
/** /**
* Set to `true` to open the dropdown * Set to `true` to open the dropdown