diff --git a/.changeset/rich-poets-hug.md b/.changeset/rich-poets-hug.md new file mode 100644 index 0000000000..916352a217 --- /dev/null +++ b/.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 diff --git a/packages/stacks-svelte/src/components/Button/Button.stories.svelte b/packages/stacks-svelte/src/components/Button/Button.stories.svelte index 50181ac6cb..044e3c0235 100644 --- a/packages/stacks-svelte/src/components/Button/Button.stories.svelte +++ b/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} {titleCase(variant || "base")} @@ -246,7 +247,7 @@ disabled={state === "disabled"} {variant} - {badge} + badge="198" {size} > Badge diff --git a/packages/stacks-svelte/src/components/Button/Button.svelte b/packages/stacks-svelte/src/components/Button/Button.svelte index dd264e98ae..41156a39ba 100644 --- a/packages/stacks-svelte/src/components/Button/Button.svelte +++ b/packages/stacks-svelte/src/components/Button/Button.svelte @@ -93,7 +93,7 @@ /** * Optional badge to display on the button */ - badge?: Snippet; + badge?: `${number}`; } @@ -197,7 +197,7 @@ {@render children()} - {@render badge()} + {badge} {/if} diff --git a/packages/stacks-svelte/src/components/Button/Button.test.ts b/packages/stacks-svelte/src/components/Button/Button.test.ts index f426eac00e..dc8b16252e 100644 --- a/packages/stacks-svelte/src/components/Button/Button.test.ts +++ b/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: () => "123", - })), + badge: "123", }); render(Button, { children, - badge: createRawSnippet(() => ({ - render: () => "456", - })), + badge: "456", }); // Default button @@ -46,9 +42,7 @@ describe("Button", () => { children: createRawSnippet(() => ({ render: () => "test", })), - badge: createRawSnippet(() => ({ - render: () => "198", - })), + badge: "198", }); expect(screen.getByRole("button")).to.have.text("test 198");