From e146d7424e05acfe3ca0dd184522c440edf0cbcc Mon Sep 17 00:00:00 2001 From: metonym Date: Sun, 23 Jul 2023 14:51:23 -0700 Subject: [PATCH] feat(file-uploader): add `size` prop to `FileUploaderButton` --- COMPONENT_INDEX.md | 2 ++ docs/src/COMPONENT_API.json | 24 +++++++++++++++++++ docs/src/pages/components/FileUploader.svx | 17 +++++++++---- src/FileUploader/FileUploader.svelte | 7 ++++++ src/FileUploader/FileUploaderButton.svelte | 11 ++++++++- tests/FileUploader.test.svelte | 2 ++ types/FileUploader/FileUploader.svelte.d.ts | 6 +++++ .../FileUploaderButton.svelte.d.ts | 6 +++++ 8 files changed, 70 insertions(+), 5 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index d23aef9339..e6e6253210 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 3c2338c6cb..012e827392 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 2d75da6573..961a481d16 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 518717939c..4543454348 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 f2f0d912e3..d7b407d770 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 379deb8768..db73c4e31b 100644 --- a/tests/FileUploader.test.svelte +++ b/tests/FileUploader.test.svelte @@ -21,6 +21,7 @@