chore(button) - update button component to use strings for badges

.changeset/rich-poets-hug.md

@@ -0,0 +1,9 @@
+---
+"@stackoverflow/stacks-svelte": patch
+---
+
+Updated Button component to use string for badges
+
+BREAKING CHANGES:
+
+- `badge` prop in Button component now uses string (numbers only) instead of a Snippet

packages/stacks-svelte/src/components/Button/Button.stories.svelte

@@ -36,6 +36,10 @@
                 control: "select",
                 options: ButtonWeights,
             },
+            badge: {
+                control: "text",
+                description: "Numeric badge (numbers only)",
+            },
             children: {
                 control: "text",
             },
@@ -227,9 +231,6 @@
                         {#each ButtonVariants as variant (variant)}
                             {#each ButtonWeights as weight (weight)}
                                 {#if !(weight === "clear" && (variant === "featured" || variant === "tonal"))}
-                                    {#snippet badge()}
-                                        198
-                                    {/snippet}
                                     <tr>
                                         <th scope="row" class="va-middle">
                                             {titleCase(variant || "base")}
@@ -246,7 +247,7 @@
                                                     disabled={state ===
                                                         "disabled"}
                                                     {variant}
-                                                    {badge}
+                                                    badge="198"
                                                     {size}
                                                 >
                                                     Badge

packages/stacks-svelte/src/components/Button/Button.svelte

@@ -93,7 +93,7 @@
         /**
          * Optional badge to display on the button
          */
-        badge?: Snippet;
+        badge?: `${number}`;
     }
 </script>
 
@@ -197,7 +197,7 @@
         {@render children()}
         <span class="s-btn--badge">
             <span class="s-btn--number">
-                {@render badge()}
+                {badge}
             </span>
         </span>
     {/if}

packages/stacks-svelte/src/components/Button/Button.test.ts

@@ -24,15 +24,11 @@ describe("Button", () => {
     it("should render the badge within the button", () => {
         render(Button, {
             children,
-            badge: createRawSnippet(() => ({
-                render: () => "<span>123</span>",
-            })),
+            badge: "123",
         });
         render(Button, {
             children,
-            badge: createRawSnippet(() => ({
-                render: () => "<span>456</span>",
-            })),
+            badge: "456",
         });
 
         // Default button
@@ -46,9 +42,7 @@ describe("Button", () => {
             children: createRawSnippet(() => ({
                 render: () => "<span>test</span>",
             })),
-            badge: createRawSnippet(() => ({
-                render: () => "<span>198</span>",
-            })),
+            badge: "198",
         });
 
         expect(screen.getByRole("button")).to.have.text("test 198");