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 |
| 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 |
| 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 |
| 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 |

2
docs/src/COMPONENT_API.json
View file

@ -3318,7 +3318,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of the dropdown field",
"type": "\"sm\" | \"lg\" | \"xl\"",
"type": "\"sm\" | \"lg\" ",
"isFunction": false,
"isFunctionDeclaration": 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: "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: "2", text: "Fax"}]}" />

12
src/Dropdown/Dropdown.svelte
View file

@ -39,7 +39,7 @@
/**
* Specify the size of the dropdown field
* @type {"sm" | "lg" | "xl"}
* @type {"sm" | "lg" }
*/
export let size = undefined;
@ -197,13 +197,13 @@
size="{size}"
name="{name}"
aria-label="{$$props['aria-label']}"
class="bx--dropdown
{direction === 'top' && 'bx--list-box--up'}
{invalid && 'bx--dropdown--invalid'}
{!invalid && warn && 'bx--dropdown--warning'}
class="bx--dropdown
{direction === 'top' && 'bx--list-box--up'}
{invalid && 'bx--dropdown--invalid'}
{!invalid && warn && 'bx--dropdown--warning'}
{open && 'bx--dropdown--open'}
{size === 'sm' && 'bx--dropdown--sm'}
{size === 'xl' && 'bx--dropdown--xl'}
{(size === 'lg' || size === 'xl') && 'bx--dropdown--lg'}
{inline && 'bx--dropdown--inline'}
{disabled && 'bx--dropdown--disabled'}
{light && 'bx--dropdown--light'}"

2
tests/Dropdown.test.svelte
View file

@ -82,7 +82,7 @@
/>
<Dropdown
size="xl"
size="lg"
titleText="Contact"
selectedId="0"
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
* @default undefined
*/
size?: "sm" | "lg" | "xl";
size?: "sm" | "lg";
/**
* Set to `true` to open the dropdown