From 40e18fbc88d7fd6851c2f78a819e660557b6161c Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Sun, 29 May 2022 08:16:17 -0700
Subject: [PATCH] feat: set title attribute in `CheckBox`, `MultiSelect`,
 `Dropdown`, `ComboBox`  if label is truncated (#1317)

* feat(checkbox): set title attribute if label is truncated

* feat(list-box-menu-item): set title attribute if label is truncated
---
 src/Checkbox/Checkbox.svelte       |  6 ++++++
 src/ListBox/ListBoxMenuItem.svelte | 11 ++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index 5f6c74c7..41334148 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@@ -62,6 +62,11 @@
   $: useGroup = Array.isArray(group);
   $: checked = useGroup ? group.includes(value) : checked;
   $: dispatch("check", checked);
+
+  let refLabel = null;
+
+  $: isTruncated = refLabel?.offsetWidth < refLabel?.scrollWidth;
+  $: title = isTruncated ? refLabel?.innerText : title;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -109,6 +114,7 @@
     />
     <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
       <span
+        bind:this="{refLabel}"
         class:bx--checkbox-label-text="{true}"
         class:bx--visually-hidden="{hideLabel}"
       >
diff --git a/src/ListBox/ListBoxMenuItem.svelte b/src/ListBox/ListBoxMenuItem.svelte
index 26b2b266..b71d1b91 100644
--- a/src/ListBox/ListBoxMenuItem.svelte
+++ b/src/ListBox/ListBoxMenuItem.svelte
@@ -4,6 +4,11 @@
 
   /** Set to `true` to enable the highlighted state */
   export let highlighted = false;
+
+  let ref = null;
+
+  $: isTruncated = ref?.offsetWidth < ref?.scrollWidth;
+  $: title = isTruncated ? ref?.innerText : undefined;
 </script>
 
 <div
@@ -15,7 +20,11 @@
   on:mouseenter
   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 />
   </div>
 </div>