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(overflow-menu): avoid dynamic style injection for performance (#2198)

Browse source 
Fixes #2197
This commit is contained in:
Eric Liu 2025-09-05 08:09:07 -07:00 • committed by GitHub
commit 14edf41e57
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 57 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

46
tests/OverflowMenu/OverflowMenu.test.ts
View file

@ -81,4 +81,50 @@ describe("OverflowMenu", () => {
await user.click(document.body);
expect(menuButton).toHaveAttribute("aria-expanded", "false");
});
it("uses CSS custom properties for performance optimization", async () => {
const { container } = render(OverflowMenu);
const styleTags = document.querySelectorAll("style");
const initialStyleCount = styleTags.length;
expect(styleTags.length).toBe(initialStyleCount);
await user.click(screen.getByRole("button"));
expect(container.querySelector(".bx--overflow-menu-options")).toHaveStyle(
"--overflow-menu-options-after-width: 2rem",
);
expect(styleTags.length).toBe(initialStyleCount);
});
it("stress test: multiple instances don't create individual style tags", async () => {
const { container: container1 } = render(OverflowMenu);
const { container: container2 } = render(OverflowMenu);
const { container: container3 } = render(OverflowMenu);
const styleTagsBefore = document.querySelectorAll("style").length;
const menuButtons1 = container1.querySelectorAll("button");
const menuButtons2 = container2.querySelectorAll("button");
const menuButtons3 = container3.querySelectorAll("button");
await user.click(menuButtons1[0]);
await user.click(menuButtons2[0]);
await user.click(menuButtons3[0]);
const styleTagsAfter = document.querySelectorAll("style").length;
// Verify no additional style tags created (old approach would create 3+)
expect(styleTagsAfter).toBe(styleTagsBefore);
// Verify all menus have CSS custom property set.
const allMenus = [
...container1.querySelectorAll(".bx--overflow-menu-options"),
...container2.querySelectorAll(".bx--overflow-menu-options"),
...container3.querySelectorAll(".bx--overflow-menu-options"),
];
expect(allMenus.length).toBeGreaterThan(0);
allMenus.forEach((menu) => {
expect(menu).toHaveStyle("--overflow-menu-options-after-width: 2rem");
});
});
});