mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(multi-select): add direction prop

Browse source
This commit is contained in:
Eric Liu 2021-02-19 15:58:24 -08:00
commit 89a500e523
6 changed files with 36 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -2156,6 +2156,7 @@ export interface MultiSelectItem {
| itemToString | <code>let</code> | No | <code>(item: MultiSelectItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a multiselect item |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | -- | Set the size of the combobox |
| type | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
| direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
| selectionFeedback | <code>let</code> | No | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
| filterable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to filter items |

10
docs/src/COMPONENT_API.json
View file

@ -5182,6 +5182,16 @@
"constant": false,
"reactive": false
},
{
"name": "direction",
"kind": "let",
"description": "Specify the direction of the multiselect dropdown menu",
"type": "\"bottom\" | \"top\"",
"value": "\"bottom\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "selectionFeedback",
"kind": "let",

10
docs/src/pages/components/MultiSelect.svx
View file

@ -51,6 +51,16 @@ Use the `itemToString` prop to format the display of individual items.
sortItem="{() => {}}"
/>
### Top direction
Set `direction` to `"top"` for the dropdown menu to appear above the input.
<MultiSelect direction="top" titleText="Contact" label="Select contact methods..."
items="{[{id: "0", text: "Slack"},
{id: "1", text: "Email"},
{id: "2", text: "Fax"}]}"
/>
### Light variant
<MultiSelect light titleText="Contact" label="Select contact methods..."

9
src/MultiSelect/MultiSelect.svelte
View file

@ -32,6 +32,12 @@
*/
export let type = "default";
/**
* Specify the direction of the multiselect dropdown menu
* @type {"bottom" | "top"}
*/
export let direction = "bottom";
/**
* Specify the selection feedback after selecting items
* @type {"top" | "fixed" | "top-after-reopen"}
@ -252,7 +258,8 @@
size="{size}"
warn="{warn}"
warnText="{warnText}"
class="bx--multi-select {filterable && 'bx--combo-box'}
class="bx--multi-select {direction === 'top' &&
'bx--list-box--up'} {filterable && 'bx--combo-box'}
{filterable &&
'bx--multi-select--filterable'}
{invalid &&

1
tests/MultiSelect.test.svelte
View file

@ -3,6 +3,7 @@
</script>
<MultiSelect
direction="top"
titleText="Contact"
label="Select contact methods..."
items="{[

6
types/MultiSelect/MultiSelect.d.ts vendored
View file

@ -47,6 +47,12 @@ export interface MultiSelectProps
*/
type?: "default" | "inline";
/**
* Specify the direction of the multiselect dropdown menu
* @default "bottom"
*/
direction?: "bottom" | "top";
/**
* Specify the selection feedback after selecting items
* @default "top-after-reopen"