feat(file-uploader): make labelTitle, labelDescription slottable (#1780)

This commit is contained in:
Eric Liu 2023-07-23 12:25:31 -07:00 committed by GitHub
commit 239f1b10e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 64 additions and 36 deletions

View file

@ -37,12 +37,18 @@
files = [];
};
/** Specify the label description */
export let labelDescription = "";
/** Specify the label title */
/**
* Specify the label title.
* Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`)
*/
export let labelTitle = "";
/**
* Specify the label description.
* Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`)
*/
export let labelDescription = "";
/**
* Specify the kind of file uploader button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"}
@ -103,20 +109,24 @@
on:mouseenter
on:mouseleave
>
{#if labelTitle}
{#if labelTitle || $$slots.labelTitle}
<p
class:bx--file--label="{true}"
class:bx--label-description--disabled="{disabled}"
>
{labelTitle}
<slot name="labelTitle">
{labelTitle}
</slot>
</p>
{/if}
{#if labelDescription}
{#if labelDescription || $$slots.labelDescription}
<p
class:bx--label-description="{true}"
class:bx--label-description--disabled="{disabled}"
>
{labelDescription}
<slot name="labelDescription">
{labelDescription}
</slot>
</p>
{/if}
<FileUploaderButton