diff --git a/.changeset/blue-phones-boil.md b/.changeset/blue-phones-boil.md new file mode 100644 index 0000000000..3955ca6c39 --- /dev/null +++ b/.changeset/blue-phones-boil.md @@ -0,0 +1,5 @@ +--- +'@primer/view-components': minor +--- + +Utilize modern `Tooltip` component for `AvatarStack` diff --git a/app/components/primer/beta/avatar_stack.html.erb b/app/components/primer/beta/avatar_stack.html.erb index a0a98ad9e0..678de6d387 100644 --- a/app/components/primer/beta/avatar_stack.html.erb +++ b/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 %> diff --git a/app/components/primer/beta/avatar_stack.rb b/app/components/primer/beta/avatar_stack.rb index 8e4ac798fc..a397d4919d 100644 --- a/app/components/primer/beta/avatar_stack.rb +++ b/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 diff --git a/previews/primer/beta/avatar_stack_preview.rb b/previews/primer/beta/avatar_stack_preview.rb index cef8d9dd47..4cff00d46e 100644 --- a/previews/primer/beta/avatar_stack_preview.rb +++ b/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 # diff --git a/test/components/beta/avatar_stack_test.rb b/test/components/beta/avatar_stack_test.rb index 2a6396b2bf..164dccb78d 100644 --- a/test/components/beta/avatar_stack_test.rb +++ b/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