mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(theme): remove invalid themes prop from markup (#2127)

Browse source
This commit is contained in:
Eric Liu 2025-03-19 12:43:33 -07:00 • committed by GitHub
commit 5987b61a55
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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 render === "toggle"}
{@const { themes: toggleThemes, ...toggleProps } = toggle}
<Toggle
{...toggle}
toggled={theme === toggle.themes[1]}
{...toggleProps}
toggled={theme === toggleThemes[1]}
on:toggle={({ detail }) => {
theme = detail.toggled ? toggle.themes[1] : toggle.themes[0];
theme = detail.toggled ? toggleThemes[1] : toggleThemes[0];
}}
/>
{:else if render === "select"}
<Select {...select} bind:selected={theme}>
{#each select.themes as theme (theme)}
{@const { themes: selectThemes, ...selectProps } = select}
<Select {...selectProps} bind:selected={theme}>
{#each selectThemes as theme (theme)}
<SelectItem value={theme} text={themes[theme]} />
{/each}
</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 () => {
render(ThemeToggleCustom);
const checkbox = screen.getByRole("switch");
assert(checkbox);
expect(checkbox).not.toBeChecked();
const toggle = screen.getAllByText("Enable dark mode")[0];
expect(toggle).toBeInTheDocument();
await user.click(toggle);
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g80" });
expect(checkbox).toBeChecked();
await user.click(toggle);
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g10" });
expect(checkbox).not.toBeChecked();
});
it("should render select when render prop is set to select", async () => {
@ -145,11 +151,17 @@ describe("Theme", () => {
const select = screen.getByLabelText("Themes");
expect(select).toBeInTheDocument();
expect(select).toHaveTextContent("White");
expect(select).toHaveValue("white");
await user.selectOptions(select, "g100");
expect(select).toHaveTextContent("Gray 100");
expect(select).toHaveValue("g100");
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" });
await user.selectOptions(select, "white");
expect(select).toHaveTextContent("White");
expect(select).toHaveValue("white");
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" });
});
@ -158,11 +170,17 @@ describe("Theme", () => {
const select = screen.getByLabelText("Select a theme");
expect(select).toBeInTheDocument();
expect(select).toHaveTextContent("White");
expect(select).toHaveValue("white");
await user.selectOptions(select, "g100");
expect(select).toHaveTextContent("Gray 100");
expect(select).toHaveValue("g100");
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "g100" });
await user.selectOptions(select, "white");
expect(select).toHaveTextContent("White");
expect(select).toHaveValue("white");
expect(consoleLog).toHaveBeenCalledWith("update", { theme: "white" });
});
});