mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 02:41:05 +00:00
chore: v11 FileUploader
For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.
This commit is contained in:
parent
ee55f2ba36
commit
85bbaed3e2
5 changed files with 13 additions and 13 deletions
|
@ -1361,7 +1361,7 @@ None.
|
|||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
|
||||
| status | No | <code>let</code> | No | <code>"uploading" | "edit" | "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
|
||||
| size | No | <code>let</code> | No | <code>"default" | "field" | "small"</code> | <code>"default"</code> | Specify the size of button skeleton |
|
||||
| size | No | <code>let</code> | No | <code>"sm" | "md" | "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 |
|
||||
|
|
|
@ -4263,8 +4263,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,
|
||||
|
|
|
@ -95,11 +95,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
|
||||
|
||||
|
|
|
@ -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 = "";
|
||||
|
@ -45,8 +45,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
|
||||
|
|
|
@ -12,9 +12,9 @@ export interface FileUploaderItemProps extends RestProps {
|
|||
|
||||
/**
|
||||
* 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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue