diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index d23aef93..e6e62532 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1261,6 +1261,7 @@ None.
| labelTitle | No | let
| No | string
| ""
| Specify the label title.
Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) |
| labelDescription | No | let
| No | string
| ""
| Specify the label description.
Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) |
| kind | No | let
| No | import("../Button/Button.svelte").ButtonProps["kind"]
| "primary"
| Specify the kind of file uploader button |
+| size | No | let
| No | import("../Button/Button.svelte").ButtonProps["size"]
| "small"
| Specify the size of the file uploader button |
| buttonLabel | No | let
| No | string
| ""
| Specify the button label |
| iconDescription | No | let
| No | string
| "Provide icon description"
| Specify the ARIA label used for the status icons |
| name | No | let
| No | string
| ""
| Specify a name attribute for the file button uploader input |
@@ -1299,6 +1300,7 @@ None.
| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the input |
| disableLabelChanges | No | let
| No | boolean
| false
| Set to `true` to disable label changes |
| kind | No | let
| No | import("../Button/Button.svelte").ButtonProps["kind"]
| "primary"
| Specify the kind of file uploader button |
+| size | No | let
| No | import("../Button/Button.svelte").ButtonProps["size"]
| "small"
| Specify the size of the file uploader button |
| role | No | let
| No | string
| "button"
| Specify the label role |
| tabindex | No | let
| No | string
| "0"
| Specify `tabindex` attribute |
| id | No | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the input element |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 3c2338c6..012e8273 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -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",
diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx
index 2d75da65..961a481d 100644
--- a/docs/src/pages/components/FileUploader.svx
+++ b/docs/src/pages/components/FileUploader.svx
@@ -13,13 +13,22 @@ By default, the file uploader only accepts one file.
Set `multiple` to `true` for multiple files to be accepted.
-
+
-## Custom button kind
+## Multiple files
-By default, the `primary` button kind is used.
+
-
+## Custom button kind, size
+
+By default, the `primary` small button kind is used.
+
+Use the `kind` and `size` props to customize the button.
+
+
+
+
+
## File uploader
diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte
index 51871793..45434543 100644
--- a/src/FileUploader/FileUploader.svelte
+++ b/src/FileUploader/FileUploader.svelte
@@ -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;
diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index f2f0d912..d7b407d7 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -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') {
diff --git a/tests/FileUploader.test.svelte b/tests/FileUploader.test.svelte
index 379deb87..db73c4e3 100644
--- a/tests/FileUploader.test.svelte
+++ b/tests/FileUploader.test.svelte
@@ -21,6 +21,7 @@