mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat: make titleText
slottable in MultiSelect
, ComboBox
(#1750)
Closes #1747
This commit is contained in:
parent
e2d7e04397
commit
0b4f19c87e
6 changed files with 22 additions and 4 deletions
|
@ -684,6 +684,7 @@ export interface ComboBoxItem {
|
|||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- |
|
||||
| -- | Yes | <code>{ item: ComboBoxItem; index: number } </code> | <code>{itemToString(item)}</code> |
|
||||
| titleText | No | -- | <code>{titleText}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
|
@ -2389,6 +2390,7 @@ export interface MultiSelectItem {
|
|||
| Slot name | Default | Props | Fallback |
|
||||
| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
|
||||
| -- | Yes | <code>{ item: MultiSelectItem; index: number } </code> | <code>{itemToString(item)}</code> |
|
||||
| titleText | No | -- | <code>{titleText}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
|
|
|
@ -1743,6 +1743,12 @@
|
|||
"default": true,
|
||||
"fallback": "{itemToString(item)}",
|
||||
"slot_props": "{ item: ComboBoxItem; index: number }"
|
||||
},
|
||||
{
|
||||
"name": "titleText",
|
||||
"default": false,
|
||||
"fallback": "{titleText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
|
@ -7354,6 +7360,12 @@
|
|||
"default": true,
|
||||
"fallback": "{itemToString(item)}",
|
||||
"slot_props": "{ item: MultiSelectItem; index: number }"
|
||||
},
|
||||
{
|
||||
"name": "titleText",
|
||||
"default": false,
|
||||
"fallback": "{titleText}",
|
||||
"slot_props": "{}"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
|
|
|
@ -218,13 +218,15 @@
|
|||
/>
|
||||
|
||||
<div class:bx--list-box__wrapper="{true}">
|
||||
{#if titleText}
|
||||
{#if titleText || $$slots.titleText}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
>
|
||||
<slot name="titleText">
|
||||
{titleText}
|
||||
</slot>
|
||||
</label>
|
||||
{/if}
|
||||
<ListBox
|
||||
|
|
|
@ -293,14 +293,16 @@
|
|||
class:bx--list-box__wrapper--inline="{inline}"
|
||||
class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
|
||||
>
|
||||
{#if titleText}
|
||||
{#if titleText || $$slots.titleText}
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
>
|
||||
<slot name="titleText">
|
||||
{titleText}
|
||||
</slot>
|
||||
</label>
|
||||
{/if}
|
||||
<ListBox
|
||||
|
|
2
types/ComboBox/ComboBox.svelte.d.ts
vendored
2
types/ComboBox/ComboBox.svelte.d.ts
vendored
|
@ -169,7 +169,7 @@ export default class ComboBox extends SvelteComponentTyped<
|
|||
clear: WindowEventMap["clear"];
|
||||
scroll: WindowEventMap["scroll"];
|
||||
},
|
||||
{ default: { item: ComboBoxItem; index: number } }
|
||||
{ default: { item: ComboBoxItem; index: number }; titleText: {} }
|
||||
> {
|
||||
/**
|
||||
* Clear the combo box programmatically
|
||||
|
|
2
types/MultiSelect/MultiSelect.svelte.d.ts
vendored
2
types/MultiSelect/MultiSelect.svelte.d.ts
vendored
|
@ -253,5 +253,5 @@ export default class MultiSelect extends SvelteComponentTyped<
|
|||
focus: WindowEventMap["focus"];
|
||||
paste: DocumentAndElementEventHandlersEventMap["paste"];
|
||||
},
|
||||
{ default: { item: MultiSelectItem; index: number } }
|
||||
{ default: { item: MultiSelectItem; index: number }; titleText: {} }
|
||||
> {}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue