mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme): remove invalid themes prop from markup

Browse source
This commit is contained in:
Eric Liu 2025-03-19 12:04:39 -07:00
commit c8a120b04d
2 changed files with 25 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/Theme/Theme.svelte
View file

@ -100,16 +100,18 @@
{/if} {/if}
{#if render === "toggle"} {#if render === "toggle"}
{@const { themes: toggleThemes, ...toggleProps } = toggle}
<Toggle <Toggle
{...toggle} {...toggleProps}
toggled={theme === toggle.themes[1]} toggled={theme === toggleThemes[1]}
on:toggle={({ detail }) => { on:toggle={({ detail }) => {
theme = detail.toggled ? toggle.themes[1] : toggle.themes[0]; theme = detail.toggled ? toggleThemes[1] : toggleThemes[0];
}} }}
/> />
{:else if render === "select"} {:else if render === "select"}
<Select {...select} bind:selected={theme}> {@const { themes: selectThemes, ...selectProps } = select}
{#each select.themes as theme (theme)} <Select {...selectProps} bind:selected={theme}>
{#each selectThemes as theme (theme)}
<SelectItem value={theme} text={themes[theme]} /> <SelectItem value={theme} text={themes[theme]} />
{/each} {/each}
</Select> </Select>

18
tests/Theme/Theme.test.ts
View file

@ -130,14 +130,20 @@ describe("Theme", () => {
it("should render custom toggle when render prop is set to toggle and custom toggle options are provided", async () => { it("should render custom toggle when render prop is set to toggle and custom toggle options are provided", async () => {
render(ThemeToggleCustom); render(ThemeToggleCustom);
const checkbox = screen.getByRole("switch");
assert(checkbox);
expect(checkbox).not.toBeChecked();
const toggle = screen.getAllByText("Enable dark mode")[0]; const toggle = screen.getAllByText("Enable dark mode")[0];
expect(toggle).toBeInTheDocument(); expect(toggle).toBeInTheDocument();
await user.click(toggle); await user.click(toggle);
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g80" }); expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g80" });
expect(checkbox).toBeChecked();
await user.click(toggle); await user.click(toggle);
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g10" }); expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g10" });
expect(checkbox).not.toBeChecked();
}); });
it("should render select when render prop is set to select", async () => { it("should render select when render prop is set to select", async () => {
@ -145,11 +151,17 @@ describe("Theme", () => {
const select = screen.getByLabelText("Themes"); const select = screen.getByLabelText("Themes");
expect(select).toBeInTheDocument(); expect(select).toBeInTheDocument();
expect(select).toHaveTextContent("White");
expect(select).toHaveValue("white");
await user.selectOptions(select, "g100"); await user.selectOptions(select, "g100");
expect(select).toHaveTextContent("Gray 100");
expect(select).toHaveValue("g100");
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" }); expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" });
await user.selectOptions(select, "white"); await user.selectOptions(select, "white");
expect(select).toHaveTextContent("White");
expect(select).toHaveValue("white");
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" }); expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" });
}); });
@ -158,11 +170,17 @@ describe("Theme", () => {
const select = screen.getByLabelText("Select a theme"); const select = screen.getByLabelText("Select a theme");
expect(select).toBeInTheDocument(); expect(select).toBeInTheDocument();
expect(select).toHaveTextContent("White");
expect(select).toHaveValue("white");
await user.selectOptions(select, "g100"); await user.selectOptions(select, "g100");
expect(select).toHaveTextContent("Gray 100");
expect(select).toHaveValue("g100");
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" }); expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" });
await user.selectOptions(select, "white"); await user.selectOptions(select, "white");
expect(select).toHaveTextContent("White");
expect(select).toHaveValue("white");
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" }); expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" });
}); });
}); });