mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

33
COMPONENT_INDEX.md
View file

@ -1250,24 +1250,27 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------- | | :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files | | files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status | | status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader |
| accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types | | accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files | | multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files | | clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files |
| labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description | | labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title.<br />Alternatively, use the named slot "labelTitle" (e.g., `&lt;span slot="labelTitle"&gt;...&lt;/span&gt;`) |
| labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title | | labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description.<br />Alternatively, use the named slot "labelDescription" (e.g., `&lt;span slot="labelDescription"&gt;...&lt;/span&gt;`) |
| kind | No | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | <code>"primary"</code> | Specify the kind of file uploader button | | kind | No | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | <code>"primary"</code> | Specify the kind of file uploader button |
| buttonLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the button label | | buttonLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the button label |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Provide icon description"</code> | Specify the ARIA label used for the status icons | | iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Provide icon description"</code> | Specify the ARIA label used for the status icons |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the file button uploader input | | name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the file button uploader input |
### Slots ### Slots
None. | Slot name | Default | Props | Fallback |
| :--------------- | :------ | :---- | :------------------------------ |
| labelDescription | No | -- | <code>{labelDescription}</code> |
| labelTitle | No | -- | <code>{labelTitle}</code> |
### Events ### Events

23
docs/src/COMPONENT_API.json
View file

@ -3795,9 +3795,9 @@
"reactive": false "reactive": false
}, },
{ {
"name": "labelDescription", "name": "labelTitle",
"kind": "let", "kind": "let",
"description": "Specify the label description", "description": "Specify the label title.\nAlternatively, use the named slot \"labelTitle\" (e.g., `<span slot=\"labelTitle\">...</span>`)",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -3807,9 +3807,9 @@
"reactive": false "reactive": false
}, },
{ {
"name": "labelTitle", "name": "labelDescription",
"kind": "let", "kind": "let",
"description": "Specify the label title", "description": "Specify the label description.\nAlternatively, use the named slot \"labelDescription\" (e.g., `<span slot=\"labelDescription\">...</span>`)",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -3868,7 +3868,20 @@
} }
], ],
"moduleExports": [], "moduleExports": [],
"slots": [], "slots": [
{
"name": "labelDescription",
"default": false,
"fallback": "{labelDescription}",
"slot_props": "{}"
},
{
"name": "labelTitle",
"default": false,
"fallback": "{labelTitle}",
"slot_props": "{}"
}
],
"events": [ "events": [
{ {
"type": "dispatched", "type": "dispatched",

26
src/FileUploader/FileUploader.svelte
View file

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

18
types/FileUploader/FileUploader.svelte.d.ts vendored
View file

@ -35,17 +35,19 @@ export interface FileUploaderProps extends RestProps {
multiple?: boolean; multiple?: boolean;
/** /**
* Specify the label description * Specify the label title.
* @default "" * Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`)
*/
labelDescription?: string;
/**
* Specify the label title
* @default "" * @default ""
*/ */
labelTitle?: string; labelTitle?: string;
/**
* Specify the label description.
* Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`)
* @default ""
*/
labelDescription?: string;
/** /**
* Specify the kind of file uploader button * Specify the kind of file uploader button
* @default "primary" * @default "primary"
@ -85,7 +87,7 @@ export default class FileUploader extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"]; mouseleave: WindowEventMap["mouseleave"];
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
}, },
{} { labelDescription: {}; labelTitle: {} }
> { > {
/** /**
* Programmatically clear the uploaded files * Programmatically clear the uploaded files