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

COMPONENT_INDEX.md

@@ -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              |

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",

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.
 
-<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
 

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;

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') {

tests/FileUploader.test.svelte

@@ -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"

types/FileUploader/FileUploader.svelte.d.ts

@@ -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 ""

types/FileUploader/FileUploaderButton.svelte.d.ts

@@ -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"