Fix issue preventing expansion and collapse of nav list items with tooltips (#2765)

Author: camertron

.changeset/silver-adults-listen.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix issue preventing expansion and collapse of nav list items with tooltips

app/components/primer/alpha/action_list/item.html.erb

@@ -1,5 +1,6 @@
 <%= render(Primer::BaseComponent.new(tag: :li, **@system_arguments)) do %>
   <%= render(@form_wrapper) do %>
+    <%= tooltip %>
     <%= render(Primer::BaseComponent.new(**@content_arguments)) do %>
       <% if private_leading_action_icon %>
         <span class="ActionListItem-visual ActionListItem-action--leading">
@@ -45,7 +46,6 @@
       <% end %>
     <% end %>
   <% end %>
-  <%= tooltip %>
   <% if trailing_action %>
     <%= trailing_action %>
   <% end %>

previews/primer/alpha/action_list_preview.rb

@@ -521,4 +521,4 @@ def long_label_show_tooltip_with_truncate_label(truncate_label: :none)
       end
     end
   end
-end
+end

previews/primer/beta/nav_list_preview.rb

@@ -139,7 +139,7 @@ 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
-          ) 
+          )
           component.with_item(
             label: "Really really long label that may wrap, truncate, or appear as a tooltip",
             truncate_label: truncate_label
@@ -178,6 +178,20 @@ def long_label_show_tooltip_no_truncate_label
           end
         end
       end
+
+      def group_long_label_with_tooltip
+        render(Primer::Beta::NavList.new) do |list|
+          list.with_heading(title: "Repository settings")
+
+          list.with_item(label: "Really really long label that may wrap, truncate, or appear as a tooltip", truncate_label: :show_tooltip) do |item|
+            item.with_leading_visual_icon(icon: :"comment-discussion")
+
+            item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
+            item.with_item(label: "Code review limits", href: "/review-limits", selected_by_ids: :code_review_limits)
+            item.with_item(label: "Reported content", href: "/reported-content", selected_by_ids: :reported_content)
+          end
+        end
+      end
     end
   end
 end

test/system/beta/nav_list_test.rb

@@ -4,6 +4,8 @@
 
 module Beta
   class NavListTest < System::TestCase
+    include Primer::WindowTestHelpers
+
     def test_collapses_group
       visit_preview(:default)
 
@@ -87,6 +89,16 @@ def test_js_api_allows_selecting_item_by_current_location
       assert_selector "button[aria-expanded=false]", text: "Moderation"
     end
 
+    def test_truncate_tooltip_does_not_affect_expanding_group
+      visit_preview(:group_long_label_with_tooltip)
+
+      window.resize(width: 200, height: 200)
+      refute_selector ".ActionList--subGroup"
+
+      find(".ActionListItem--hasSubItem").click
+      assert_selector ".ActionList--subGroup"
+    end
+
     private
 
     def select_item_by_id(id)