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

feat(list-box-menu-item): set title attribute if label is truncated

Browse source
This commit is contained in:
Eric Liu 2022-05-28 10:03:10 -07:00
commit 53acd58117
1 changed files with 10 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/ListBox/ListBoxMenuItem.svelte
View file

@ -4,6 +4,11 @@
/** Set to `true` to enable the highlighted state */ /** Set to `true` to enable the highlighted state */
export let highlighted = false; export let highlighted = false;
let ref = null;
$: isTruncated = ref?.offsetWidth < ref?.scrollWidth;
$: title = isTruncated ? ref?.innerText : undefined;
</script> </script>
<div <div
@ -15,7 +20,11 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<div class:bx--list-box__menu-item__option="{true}"> <div
bind:this="{ref}"
title="{title}"
class:bx--list-box__menu-item__option="{true}"
>
<slot /> <slot />
</div> </div>
</div> </div>