From b2e2765910bb15fa4d3797a4ed7e7a88aba2918c Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Sat, 26 Jun 2021 06:32:32 -0700 Subject: [PATCH] feat(button): support large size button Set size to "lg" to use the large size. --- COMPONENT_INDEX.md | 2 +- docs/src/COMPONENT_API.json | 2 +- docs/src/pages/components/Button.svx | 14 +++++++++++--- src/Button/Button.svelte | 3 ++- types/Button/Button.d.ts | 2 +- 5 files changed, 16 insertions(+), 7 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index f51da4a5..51e0e4e6 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -350,7 +350,7 @@ None. | ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | | hasIconOnly | let | Yes | boolean | false | Set to `true` for the icon-only variant | | kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | -| size | let | No | "default" | "field" | "small" | "xl" | "default" | Specify the size of button | +| size | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button | | expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | | isSelected | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | | icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 08ffc8ed..0b7b84d5 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -362,7 +362,7 @@ "name": "size", "kind": "let", "description": "Specify the size of button", - "type": "\"default\" | \"field\" | \"small\" | \"xl\"", + "type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"", "value": "\"default\"", "isFunction": false, "constant": false, diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx index 18c4c746..3a5f0464 100644 --- a/docs/src/pages/components/Button.svx +++ b/docs/src/pages/components/Button.svx @@ -78,7 +78,7 @@ If an `href` value is specified, the component will render an [anchor element](h

Custom element

-### Field button +### Field size @@ -86,7 +86,7 @@ If an `href` value is specified, the component will render an [anchor element](h -### Small button +### Small size @@ -94,7 +94,15 @@ If an `href` value is specified, the component will render an [anchor element](h -### Extra-large button +### Large size + + + + + + + +### Extra-large size diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index a869358c..bd291be1 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -13,7 +13,7 @@ /** * Specify the size of button - * @type {"default" | "field" | "small" | "xl"} + * @type {"default" | "field" | "small" | "lg" | "xl"} */ export let size = "default"; @@ -110,6 +110,7 @@ (size === "md" && !expressive && "bx--btn--md"), size === "field" && "bx--btn--field", size === "small" && "bx--btn--sm", + size === "lg" && "bx--btn--lg", size === "xl" && "bx--btn--xl", kind && `bx--btn--${kind}`, disabled && "bx--btn--disabled", diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts index 9748c445..471f240a 100644 --- a/types/Button/Button.d.ts +++ b/types/Button/Button.d.ts @@ -24,7 +24,7 @@ export interface ButtonProps * Specify the size of button * @default "default" */ - size?: "default" | "field" | "small" | "xl"; + size?: "default" | "field" | "small" | "lg" | "xl"; /** * Set to `true` to use Carbon's expressive typesetting