Fix tooltip in AvatarStack (primer#3676)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: TylerJDev

.changeset/blue-phones-boil.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Utilize modern `Tooltip` component for `AvatarStack`

app/components/primer/beta/avatar_stack.html.erb

@@ -7,4 +7,7 @@
       <%= avatar %>
     <% end %>
   <% end %>
+  <% if @tooltipped %>
+    <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) %>
+  <% end %>
 <% end %>

app/components/primer/beta/avatar_stack.rb

@@ -31,6 +31,7 @@ def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_a
         @system_arguments = system_arguments
         @tooltipped = tooltipped
         @body_arguments = body_arguments
+        @direction = @body_arguments[:direction]
 
         body_tag = @body_arguments[:tag] || DEFAULT_BODY_TAG
         @body_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, body_tag, DEFAULT_BODY_TAG)
@@ -45,14 +46,27 @@ def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_a
           system_arguments[:classes],
           "AvatarStack--right" => @align == :right
         )
+
+        @body_arguments[:tabindex] = tooltipped ? 0 : nil
+        @body_arguments[:id] = tooltipped ? @body_arguments[:id] ||= self.class.generate_id : @body_arguments[:id]
+
+        @tooltip_arguments = {
+          for_id: @body_arguments[:id],
+        }
+
+        @tooltip_arguments[:direction] = @direction || Primer::Alpha::Tooltip::DIRECTION_DEFAULT
+        @tooltip_arguments[:text] = @body_arguments[:label]
+        @tooltip_arguments[:type] = :description
+
+        @body_arguments[:aria] ||= {}
+        if tooltipped && @body_arguments[:label].present?
+          @body_arguments[:aria][:label] = @body_arguments[:label]
+          @body_arguments[:label] = nil
+        end
       end
 
       def body_component
-        if @tooltipped
-          Primer::Tooltip.new(**@body_arguments) # rubocop:disable Primer/ComponentNameMigration
-        else
-          Primer::BaseComponent.new(**@body_arguments)
-        end
+        Primer::BaseComponent.new(**@body_arguments)
       end
 
       def before_render

previews/primer/beta/avatar_stack_preview.rb

@@ -92,9 +92,9 @@ def align_right
       # @label With tooltip
       def with_tooltip
         render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: "This is a tooltip!" })) do |component|
-          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style")
         end
       end
       #

test/components/beta/avatar_stack_test.rb

@@ -63,7 +63,7 @@ def test_renders_tooltipped_body
     end
 
     assert_selector(".AvatarStack") do
-      assert_selector("div[aria-label=\"Tooltip\"].AvatarStack-body.tooltipped") do
+      assert_selector("div[aria-label=\"Tooltip\"]") do
         assert_selector("img.avatar", count: 1)
       end
     end