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

feat(file-uploader): add size prop to FileUploaderButton (#1786)

Browse source
This commit is contained in:
Eric Liu 2023-07-24 06:33:53 -07:00 • committed by GitHub
commit 51c281de4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 70 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -1261,6 +1261,7 @@ None.
| 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 |
| size | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code> | Specify the size of the 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 |
@ -1299,6 +1300,7 @@ None.
| 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 |
| size | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code> | Specify the size of the 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 |

24
docs/src/COMPONENT_API.json
View file

@ -3830,6 +3830,18 @@
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Specify the size of the file uploader button",
"type": "import(\"../Button/Button.svelte\").ButtonProps[\"size\"]",
"value": "\"small\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "buttonLabel",
"kind": "let",
@ -3983,6 +3995,18 @@
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Specify the size of the file uploader button",
"type": "import(\"../Button/Button.svelte\").ButtonProps[\"size\"]",
"value": "\"small\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "labelText",
"kind": "let",

17
docs/src/pages/components/FileUploader.svx
View file

@ -13,13 +13,22 @@ By default, the file uploader only accepts one file.
Set `multiple` to `true` for multiple files to be accepted.
<FileUploaderButton labelText="Add files" />
<FileUploaderButton labelText="Add file" />
## Custom button kind
## Multiple files
By default, the `primary` button kind is used.
<FileUploaderButton multiple labelText="Add files" />
<FileUploaderButton kind="secondary" labelText="Add files" />
## Custom button kind, size
By default, the `primary` small button kind is used.
Use the `kind` and `size` props to customize the button.
<FileUploaderButton kind="secondary" size="field" />
<FileUploaderButton kind="tertiary" size="default" />
<FileUploaderButton kind="danger" size="lg" />
<FileUploaderButton kind="danger-tertiary" size="xl" />
## File uploader

7
src/FileUploader/FileUploader.svelte
View file

@ -55,6 +55,12 @@
*/
export let kind = "primary";
/**
* Specify the size of the file uploader button
* @type {import("../Button/Button.svelte").ButtonProps["size"]}
*/
export let size = "small";
/** Specify the button label */
export let buttonLabel = "";
@ -137,6 +143,7 @@
name="{name}"
multiple="{multiple}"
kind="{kind}"
size="{size}"
on:change
on:change="{(e) => {
files = e.detail;

11
src/FileUploader/FileUploaderButton.svelte
View file

@ -30,6 +30,12 @@
*/
export let kind = "primary";
/**
* Specify the size of the file uploader button
* @type {import("../Button/Button.svelte").ButtonProps["size"]}
*/
export let size = "small";
/** Specify the label text */
export let labelText = "Add file";
@ -67,7 +73,6 @@
for="{id}"
tabindex="{disabled ? '-1' : tabindex}"
class:bx--btn="{true}"
class:bx--btn--sm="{true}"
class:bx--btn--disabled="{disabled}"
class:bx--btn--primary="{kind === 'primary'}"
class:bx--btn--secondary="{kind === 'secondary'}"
@ -76,6 +81,10 @@
class:bx--btn--danger="{kind === 'danger'}"
class:bx--btn--danger-tertiary="{kind === 'danger-tertiary'}"
class:bx--btn--danger-ghost="{kind === 'danger-ghost'}"
class:bx--btn--sm="{size === 'small'}"
class:bx--btn--field="{size === 'field'}"
class:bx--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}"
on:keydown
on:keydown="{({ key }) => {
if (key === ' ' || key === 'Enter') {

2
tests/FileUploader.test.svelte
View file

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

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

@ -54,6 +54,12 @@ export interface FileUploaderProps extends RestProps {
*/
kind?: import("../Button/Button.svelte").ButtonProps["kind"];
/**
* Specify the size of the file uploader button
* @default "small"
*/
size?: import("../Button/Button.svelte").ButtonProps["size"];
/**
* Specify the button label
* @default ""

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

@ -40,6 +40,12 @@ export interface FileUploaderButtonProps extends RestProps {
*/
kind?: import("../Button/Button.svelte").ButtonProps["kind"];
/**
* Specify the size of the file uploader button
* @default "small"
*/
size?: import("../Button/Button.svelte").ButtonProps["size"];
/**
* Specify the label text
* @default "Add file"