[Bug] Fix issue where tooltip is only not shown for first item in navlist when not truncated (#2729)

Co-authored-by: thesnowrose <[email protected]>

Author: thesnowrose

.changeset/healthy-colts-jog.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": minor
+---
+
+Fixes a bug where a tooltip was being shown in the navlist even when the text wasn't truncated for certain items.

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/long_label_with_tooltip/default.png

@@ -21,18 +21,21 @@ export class ActionListTruncationObserver {
   }
 
   update(el: HTMLElement) {
-    const label = el.querySelector('.ActionListItem-label')
-    if (!label) return
+    const items = el.querySelectorAll('li')
 
-    const tooltip = el.querySelector('.ActionListItem-truncationTooltip') as HTMLElement | null
-    if (!tooltip) return
+    for (const item of items) {
+      const label = item.querySelector('.ActionListItem-label') as HTMLElement
+      if (!label) continue
+      const tooltip = item.querySelector('.ActionListItem-truncationTooltip') as HTMLElement
+      if (!tooltip) continue
 
-    const isTruncated = label.scrollWidth > label.clientWidth
+      const isTruncated = label.scrollWidth > label.clientWidth
 
-    if (isTruncated) {
-      tooltip.style.display = ''
-    } else {
-      tooltip.style.display = 'none'
+      if (isTruncated) {
+        tooltip.style.display = ''
+      } else {
+        tooltip.style.display = 'none'
+      }
     }
   }
 }

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/action_list/long_label_with_tooltip/focused.png

@@ -303,7 +303,7 @@ def before_render
           )
 
           if @truncate_label == :show_tooltip && !tooltip?
-            with_tooltip(text: @label)
+            with_tooltip(text: @label, direction: :ne)
           end
 
           return unless leading_visual

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/nav_list/long_label_with_tooltip/default.png

@@ -470,6 +470,18 @@ def long_label_with_tooltip(truncate_label: :show_tooltip)
             label: "Really really long label that may wrap, truncate, or appear as a tooltip",
             truncate_label: truncate_label
           )
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
         end
       end
 
@@ -499,8 +511,14 @@ def long_label_show_tooltip_with_truncate_label(truncate_label: :none)
           ) do |item|
             item.with_tooltip(text: "this is a tooltip")
           end
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          ) do |item|
+            item.with_tooltip(text: "this is a tooltip")
+          end
         end
       end
     end
   end
-end
+end

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/nav_list/long_label_with_tooltip/focused.png

@@ -139,9 +139,15 @@ def long_label_with_tooltip(truncate_label: :show_tooltip)
           component.with_item(
             label: "Really really long label that may wrap, truncate, or appear as a tooltip",
             truncate_label: truncate_label
-          ) do |item|
-            item.with_trailing_visual_icon(icon: :plus)
-          end
+          ) 
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
+          component.with_item(
+            label: "Really really long label that may wrap, truncate, or appear as a tooltip",
+            truncate_label: truncate_label
+          )
         end
       end
 

app/components/primer/alpha/action_list.ts

@@ -13,7 +13,7 @@ def test_js_truncate_label_shows_tooltip
       assert_selector "li.ActionListItem span.ActionListItem-label--truncate"
       assert_selector "tool-tip", text: "Really really long label that may wrap, truncate, or appear as a tooltip", visible: :hidden
 
-      find("button").send_keys("tab") # sends focus to button
+      first("button").send_keys("tab") # sends focus to button
       assert_selector "tool-tip", text: "Really really long label that may wrap, truncate, or appear as a tooltip", visible: :visible
     end