From bb369db16548661ca6f5e2ab10c001db4d0e5c49 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Sun, 2 May 2021 15:43:29 -0700
Subject: [PATCH] feat(button): support xl size

---
 COMPONENT_INDEX.md                   | 2 +-
 docs/src/COMPONENT_API.json          | 2 +-
 docs/src/pages/components/Button.svx | 8 ++++++++
 src/Button/Button.svelte             | 3 ++-
 types/Button/Button.d.ts             | 2 +-
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 6a1bfd45..95962243 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -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                                                                                                                                                        |
 | 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                                                                                                                                                                    |
-| 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                                                                                                                     |
 | 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                                                                                                                                                    |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index cfbd284f..daded28f 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\"",
+          "type": "\"default\" | \"field\" | \"small\" | \"xl\"",
           "value": "\"default\"",
           "isFunction": false,
           "constant": false,
diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index d464c41c..cced1fae 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -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="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
 
 <Button disabled>Disabled button</Button>
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index b254e073..8b9f5907 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -13,7 +13,7 @@
 
   /**
    * Specify the size of button
-   * @type {"default" | "field" | "small"}
+   * @type {"default" | "field" | "small" | "xl"}
    */
   export let size = "default";
 
@@ -100,6 +100,7 @@
       "bx--btn",
       size === "field" && "bx--btn--field",
       size === "small" && "bx--btn--sm",
+      size === "xl" && "bx--btn--xl",
       kind && `bx--btn--${kind}`,
       disabled && "bx--btn--disabled",
       hasIconOnly && "bx--btn--icon-only",
diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts
index 97d62ed0..67b9f1f3 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";
+  size?: "default" | "field" | "small" | "xl";
 
   /**
    * Set to `true` to enable the selected state for an icon-only, ghost button