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

fix(types): correctly type kind prop in FileUploader, FileUploaderButton (#1781)

Browse source
This commit is contained in:
Eric Liu 2023-07-23 12:42:33 -07:00 • committed by GitHub
commit a7443c2dca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

56
COMPONENT_INDEX.md
View file

@ -1250,20 +1250,20 @@ None.
### Props
| 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 |
| 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 |
| 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 |
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files |
| 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;`) |
| 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 |
| 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 |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the file button uploader input |
| 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 |
| 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 |
| 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 |
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files |
| 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;`) |
| 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>import("../Button/Button.svelte").ButtonProps["kind"]</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 |
| 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 |
### Slots
@ -1289,20 +1289,20 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| labelText | No | <code>let</code> | Yes | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| 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 |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| disableLabelChanges | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable label changes |
| 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 |
| role | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the label role |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify `tabindex` attribute |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| labelText | No | <code>let</code> | Yes | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| 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 |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| disableLabelChanges | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable label changes |
| kind | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["kind"]</code> | <code>"primary"</code> | Specify the kind of file uploader button |
| role | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the label role |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify `tabindex` attribute |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
### Slots

4
docs/src/COMPONENT_API.json
View file

@ -3822,7 +3822,7 @@
"name": "kind",
"kind": "let",
"description": "Specify the kind of file uploader button",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"",
"type": "import(\"../Button/Button.svelte\").ButtonProps[\"kind\"]",
"value": "\"primary\"",
"isFunction": false,
"isFunctionDeclaration": false,
@ -3975,7 +3975,7 @@
"name": "kind",
"kind": "let",
"description": "Specify the kind of file uploader button",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"",
"type": "import(\"../Button/Button.svelte\").ButtonProps[\"kind\"]",
"value": "\"primary\"",
"isFunction": false,
"isFunctionDeclaration": false,

2
src/FileUploader/FileUploader.svelte
View file

@ -51,7 +51,7 @@
/**
* Specify the kind of file uploader button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"}
* @type {import("../Button/Button.svelte").ButtonProps["kind"]}
*/
export let kind = "primary";

2
src/FileUploader/FileUploaderButton.svelte
View file

@ -26,7 +26,7 @@
/**
* Specify the kind of file uploader button
* @type {"primary" | "secondary" | "tertiary" | "ghost" | "danger"}
* @type {import("../Button/Button.svelte").ButtonProps["kind"]}
*/
export let kind = "primary";

2
tests/FileUploader.test.svelte
View file

@ -20,6 +20,7 @@
</script>
<FileUploaderButton
kind="tertiary"
labelText="Add files"
on:change="{(e) => {
console.log(e.detail); // File[]
@ -27,6 +28,7 @@
/>
<FileUploader
kind="danger-ghost"
bind:this="{fileUploader}"
multiple
labelTitle="Upload files"

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

@ -52,7 +52,7 @@ export interface FileUploaderProps extends RestProps {
* Specify the kind of file uploader button
* @default "primary"
*/
kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
kind?: import("../Button/Button.svelte").ButtonProps["kind"];
/**
* Specify the button label

2
types/FileUploader/FileUploaderButton.svelte.d.ts vendored
View file

@ -38,7 +38,7 @@ export interface FileUploaderButtonProps extends RestProps {
* Specify the kind of file uploader button
* @default "primary"
*/
kind?: "primary" | "secondary" | "tertiary" | "ghost" | "danger";
kind?: import("../Button/Button.svelte").ButtonProps["kind"];
/**
* Specify the label text