feat: make titleText slottable in MultiSelect, ComboBox (#1750)

Closes #1747
This commit is contained in:
Sachin 2023-06-11 18:45:55 -07:00 committed by GitHub
commit 0b4f19c87e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 22 additions and 4 deletions

View file

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

View file

@ -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": [

View file

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

View file

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

View file

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

View file

@ -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: {} }
> {}