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

feat(button): support xl size

Browse source
This commit is contained in:
Eric Y Liu 2021-05-02 15:43:29 -07:00
commit bb369db165
5 changed files with 13 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -350,7 +350,7 @@ None.
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| hasIconOnly | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant | | hasIconOnly | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the icon-only variant |
| kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button | | kind | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button | | size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button | | isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon | | iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |

2
docs/src/COMPONENT_API.json
View file

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

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

@ -94,6 +94,14 @@ If an `href` value is specified, the component will render an [anchor element](h
<Button size="small" kind="ghost">Ghost</Button> <Button size="small" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button> <Button size="small" kind="danger">Danger</Button>
### Extra-large button
<Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button>
<Button size="xl" kind="tertiary">Tertiary</Button>
<Button size="xl" kind="ghost">Ghost</Button>
<Button size="xl" kind="danger">Danger</Button>
### Disabled button ### Disabled button
<Button disabled>Disabled button</Button> <Button disabled>Disabled button</Button>

3
src/Button/Button.svelte
View file

@ -13,7 +13,7 @@
/** /**
* Specify the size of button * Specify the size of button
* @type {"default" | "field" | "small"} * @type {"default" | "field" | "small" | "xl"}
*/ */
export let size = "default"; export let size = "default";
@ -100,6 +100,7 @@
"bx--btn", "bx--btn",
size === "field" && "bx--btn--field", size === "field" && "bx--btn--field",
size === "small" && "bx--btn--sm", size === "small" && "bx--btn--sm",
size === "xl" && "bx--btn--xl",
kind && `bx--btn--${kind}`, kind && `bx--btn--${kind}`,
disabled && "bx--btn--disabled", disabled && "bx--btn--disabled",
hasIconOnly && "bx--btn--icon-only", hasIconOnly && "bx--btn--icon-only",

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

@ -24,7 +24,7 @@ export interface ButtonProps
* Specify the size of button * Specify the size of button
* @default "default" * @default "default"
*/ */
size?: "default" | "field" | "small"; size?: "default" | "field" | "small" | "xl";
/** /**
* Set to `true` to enable the selected state for an icon-only, ghost button * Set to `true` to enable the selected state for an icon-only, ghost button