From a581231d162add23e4793008463ac7f9250c67d9 Mon Sep 17 00:00:00 2001
From: Enrico Sacchetti <enrico@theetrain.ca>
Date: Fri, 19 Jan 2024 16:30:40 -0500
Subject: [PATCH] chore: adjust types

- Fix ButtonSkeleton sizes
- Apply v11 `size` props
---
 COMPONENT_INDEX.md                      | 10 +++++-----
 docs/src/COMPONENT_API.json             |  6 +++---
 docs/src/pages/components/Button.svx    | 10 +++++-----
 src/Button/Button.svelte                |  6 +-----
 src/Button/ButtonSkeleton.svelte        | 22 ++++++++++++----------
 types/Button/Button.svelte.d.ts         |  2 +-
 types/Button/ButtonSkeleton.svelte.d.ts |  4 ++--
 7 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index d0dca240..cc852148 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -376,7 +376,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
 | :--------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | ref              | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code>                                                                         | <code>null</code>      | Obtain a reference to the HTML element                                                                                                                                                        |
 | kind             | No       | <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             | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code>                                                                          | <code>"default"</code> | Specify the size of button                                                                                                                                                                    |
+| size             | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code>                                                                          | <code>"lg"</code>      | Specify the size of button                                                                                                                                                                    |
 | expressive       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                        | <code>false</code>     | Set to `true` to use Carbon's expressive typesetting                                                                                                                                          |
 | isSelected       | No       | <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             | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code>                                                                                   | <code>undefined</code> | Specify the icon to render                                                                                                                                                                    |
@@ -429,10 +429,10 @@ None.
 
 ### Props
 
-| Prop name | Required | Kind             | Reactive | Type                                                                         | Default value          | Description                          |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
-| href      | No       | <code>let</code> | No       | <code>string</code>                                                          | <code>undefined</code> | Set the `href` to use an anchor link |
-| size      | No       | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button skeleton  |
+| Prop name | Required | Kind             | Reactive | Type                                                               | Default value          | Description                          |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | ------------------------------------ |
+| href      | No       | <code>let</code> | No       | <code>string</code>                                                | <code>undefined</code> | Set the `href` to use an anchor link |
+| size      | No       | <code>let</code> | No       | <code>"sm" &#124; "md" &#124; "lg" &#124; "xl" &#124; "2xl"</code> | <code>"lg"</code>      | Specify the size of button skeleton  |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 6b977b30..9bfbd49e 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -466,7 +466,7 @@
           "kind": "let",
           "description": "Specify the size of button",
           "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
-          "value": "\"default\"",
+          "value": "\"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -704,8 +704,8 @@
           "name": "size",
           "kind": "let",
           "description": "Specify the size of button skeleton",
-          "type": "\"default\" | \"field\" | \"small\" | \"lg\" | \"xl\"",
-          "value": "\"default\"",
+          "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"",
+          "value": "\"lg\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index e6afd1a7..21039871 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -134,11 +134,11 @@ Use `buttonAttributes` to pass any additional attributes.
 
 ## Skeleton
 
-<!-- <Button size="xl" skeleton />
-<Button size="lg" skeleton />
-<Button skeleton />
-<Button skeleton size="field" />
-<Button skeleton size="small" /> -->
+<Button skeleton size="2xl" />
+<Button skeleton size="xl" />
+<Button skeleton size="lg" />
+<Button skeleton size="md" />
+<Button skeleton size="sm" />
 
 ## Programmatic focus
 
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 2a6cb065..bd9c13ae 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -15,7 +15,7 @@
    * Specify the size of button
    * @type {"sm" | "md" | "lg" | "xl" | "2xl"}
    */
-  export let size = "default";
+  export let size = "lg";
 
   /** Set to `true` to use Carbon's expressive typesetting */
   export let expressive = false;
@@ -97,10 +97,6 @@
     class: [
       "bx--btn",
       expressive && "bx--btn--expressive",
-      ((size === "small" && !expressive) ||
-        (size === "sm" && !expressive) ||
-        (size === "small" && !expressive)) &&
-        "bx--btn--sm",
       `bx--layout--size-${size}`,
       `bx--btn--${kind}`,
       disabled && "bx--btn--disabled",
diff --git a/src/Button/ButtonSkeleton.svelte b/src/Button/ButtonSkeleton.svelte
index ebdae2a8..11a0026e 100644
--- a/src/Button/ButtonSkeleton.svelte
+++ b/src/Button/ButtonSkeleton.svelte
@@ -7,9 +7,9 @@
 
   /**
    * Specify the size of button skeleton
-   * @type {"default" | "field" | "small" | "lg" | "xl"}
+   * @type {"sm" | "md" | "lg" | "xl" | "2xl"}
    */
-  export let size = "default";
+  export let size = "lg";
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -20,10 +20,11 @@
     role="button"
     class:bx--skeleton="{true}"
     class:bx--btn="{true}"
-    class:bx--btn--field="{size === 'field'}"
-    class:bx--btn--sm="{size === 'small'}"
-    class:bx--btn--lg="{size === 'lg'}"
-    class:bx--btn--xl="{size === 'xl'}"
+    class:bx--layout--size-sm="{size === 'sm'}"
+    class:bx--layout--size-md="{size === 'md'}"
+    class:bx--layout--size-lg="{size === 'lg'}"
+    class:bx--layout--size-xl="{size === 'xl'}"
+    class:bx--layout--size-2xl="{size === '2xl'}"
     {...$$restProps}
     on:click
     on:focus
@@ -39,10 +40,11 @@
   <div
     class:bx--skeleton="{true}"
     class:bx--btn="{true}"
-    class:bx--btn--field="{size === 'field'}"
-    class:bx--btn--sm="{size === 'small'}"
-    class:bx--btn--lg="{size === 'lg'}"
-    class:bx--btn--xl="{size === 'xl'}"
+    class:bx--layout--size-sm="{size === 'sm'}"
+    class:bx--layout--size-md="{size === 'md'}"
+    class:bx--layout--size-lg="{size === 'lg'}"
+    class:bx--layout--size-xl="{size === 'xl'}"
+    class:bx--layout--size-2xl="{size === '2xl'}"
     {...$$restProps}
     on:click
     on:focus
diff --git a/types/Button/Button.svelte.d.ts b/types/Button/Button.svelte.d.ts
index ad1050a7..675853da 100644
--- a/types/Button/Button.svelte.d.ts
+++ b/types/Button/Button.svelte.d.ts
@@ -23,7 +23,7 @@ export interface ButtonProps extends ButtonSkeletonProps, RestProps {
 
   /**
    * Specify the size of button
-   * @default "default"
+   * @default "lg"
    */
   size?: "sm" | "md" | "lg" | "xl" | "2xl";
 
diff --git a/types/Button/ButtonSkeleton.svelte.d.ts b/types/Button/ButtonSkeleton.svelte.d.ts
index 4e8b177c..885f7638 100644
--- a/types/Button/ButtonSkeleton.svelte.d.ts
+++ b/types/Button/ButtonSkeleton.svelte.d.ts
@@ -12,9 +12,9 @@ export interface ButtonSkeletonProps extends RestProps {
 
   /**
    * Specify the size of button skeleton
-   * @default "default"
+   * @default "lg"
    */
-  size?: "default" | "field" | "small" | "lg" | "xl";
+  size?: "sm" | "md" | "lg" | "xl" | "2xl";
 
   [key: `data-${string}`]: any;
 }