chore: v11 FileUploader

For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.

Author: gregorw

COMPONENT_INDEX.md

@@ -1355,7 +1355,7 @@ None.
 | Prop name       | Required | Kind             | Reactive | Type                                                     | Default value                                    | Description                                      |
 | :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
 | status          | No       | <code>let</code> | No       | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code>                         | Specify the file uploader status                 |
-| size            | No       | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small"</code>     | <code>"default"</code>                           | Specify the size of button skeleton              |
+| size            | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg"</code>                | <code>"lg"</code>                                | Specify the size of button skeleton              |
 | iconDescription | No       | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the ARIA label used for the status icons |
 | invalid         | No       | <code>let</code> | No       | <code>boolean</code>                                     | <code>false</code>                               | Set to `true` to indicate an invalid state       |
 | errorSubject    | No       | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the error subject text                   |

docs/src/COMPONENT_API.json

@@ -4220,8 +4220,8 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the size of button skeleton",
-          "type": "\"default\" | \"field\" | \"small\"",
-          "value": "\"default\"",
+          "type": "\"sm\" | \"md\" | \"lg\"",
+          "value": "\"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,

docs/src/pages/components/FileUploader.svx

@@ -80,11 +80,11 @@ Use the `errorSubject` and `errorBody` props to customize the error message.
 
 ## Item sizes
 
-The default `FileUploaderItem` size is "default".
+The default `FileUploaderItem` size is "lg".
 
-<FileUploaderItem size="default" name="README.md" status="uploading" />
-<FileUploaderItem size="field" name="README.md" status="uploading" />
-<FileUploaderItem size="small" name="README.md" status="uploading" />
+<FileUploaderItem size="lg" name="README.md" status="uploading" />
+<FileUploaderItem size="md" name="README.md" status="uploading" />
+<FileUploaderItem size="sm" name="README.md" status="uploading" />
 
 ## Drop container
 

src/FileUploader/FileUploaderItem.svelte

@@ -11,9 +11,9 @@
 
   /**
    * Specify the size of button skeleton
-   * @type {"default" | "field" | "small"}
+   * @type {"sm" | "md" | "lg"}
    */
-  export let size = "default";
+  export let size = "lg";
 
   /** Specify the ARIA label used for the status icons */
   export let iconDescription = "";
@@ -44,8 +44,8 @@
   id="{id}"
   class:bx--file__selected-file="{true}"
   class:bx--file__selected-file--invalid="{invalid}"
-  class:bx--file__selected-file--md="{size === 'field'}"
-  class:bx--file__selected-file--sm="{size === 'small'}"
+  class:bx--file__selected-file--md="{size === 'md' || size === 'field'}"
+  class:bx--file__selected-file--sm="{size === 'sm' || size === 'small'}"
   {...$$restProps}
   on:mouseover
   on:mouseenter

types/FileUploader/FileUploaderItem.svelte.d.ts

@@ -11,9 +11,9 @@ export interface FileUploaderItemProps
 
   /**
    * Specify the size of button skeleton
-   * @default "default"
+   * @default "lg"
    */
-  size?: "default" | "field" | "small";
+  size?: "sm" | "md" | "lg";
 
   /**
    * Specify the ARIA label used for the status icons