mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(button-skeleton): support xl, lg sizes

Browse source
This commit is contained in:
Eric Y Liu 2021-06-26 06:36:02 -07:00
commit 23e8b88ac7
5 changed files with 14 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
COMPONENT_INDEX.md
View file

@ -401,11 +401,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------ |
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button skeleton |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button skeleton |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
### Slots

2
docs/src/COMPONENT_API.json
View file

@ -575,7 +575,7 @@
"name": "size",
"kind": "let",
"description": "Specify the size of button skeleton",
"type": "\"default\" | \"field\" | \"small\"",
"type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,

2
docs/src/pages/components/Button.svx
View file

@ -134,6 +134,8 @@ Note: the expressive styles only apply to the default and `"xl"` size buttons.
### Skeleton
<Button size="xl" skeleton />
<Button size="lg" skeleton />
<Button skeleton />
<Button skeleton size="field" />
<Button skeleton size="small" />

6
src/Button/ButtonSkeleton.svelte
View file

@ -7,7 +7,7 @@
/**
* Specify the size of button skeleton
* @type {"default" | "field" | "small"}
* @type {"default" | "field" | "small" | "lg" | "xl"}
*/
export let size = "default";
@ -27,6 +27,8 @@
class:bx--btn="{true}"
class:bx--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small' || small}"
class:bx--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}"
{...$$restProps}
on:click
on:mouseover
@ -41,6 +43,8 @@
class:bx--btn="{true}"
class:bx--btn--field="{size === 'field'}"
class:bx--btn--sm="{size === 'small' || small}"
class:bx--btn--lg="{size === 'lg'}"
class:bx--btn--xl="{size === 'xl'}"
{...$$restProps}
on:click
on:mouseover

2
types/Button/ButtonSkeleton.d.ts vendored
View file

@ -12,7 +12,7 @@ export interface ButtonSkeletonProps
* Specify the size of button skeleton
* @default "default"
*/
size?: "default" | "field" | "small";
size?: "default" | "field" | "small" | "lg" | "xl";
/**
* @default false