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

20
src/OverflowMenu/OverflowMenu.svelte
View file

@ -167,17 +167,12 @@
$: if ($items[$currentIndex]) {
focusedId.set($items[$currentIndex].id);
}
$: styles = `<style>
#${id} .bx--overflow-menu-options.bx--overflow-menu-options:after {
width: ${buttonWidth ? buttonWidth + "px" : "2rem"};
}
<\/style>`;
// Use CSS custom properties instead of dynamic style injection for better
// performance. The previous approach created individual `style` tags per
// instance, causing overhead when many OverflowMenu components are rendered.
$: overflowMenuOptionsAfterWidth = buttonWidth ? buttonWidth + "px" : "2rem";
</script>
<svelte:head>
{@html styles}
</svelte:head>
<svelte:window
on:click={({ target }) => {
if (buttonRef && buttonRef.contains(target)) return;
@ -252,8 +247,15 @@
class:bx--overflow-menu-options--xl={size === "xl"}
class:bx--breadcrumb-menu-options={!!ctxBreadcrumbItem}
class={menuOptionsClass}
style="--overflow-menu-options-after-width: {overflowMenuOptionsAfterWidth}"
>
<slot />
</ul>
{/if}
</button>
<style>
.bx--overflow-menu-options:after {
width: var(--overflow-menu-options-after-width, 2rem);
}
</style>