From 0ab4ea78b5aec3f2b628e54e37dd7bc813a939fb Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 9 Sep 2025 16:32:28 +0000 Subject: [PATCH 1/9] Fix tooltip in n `AvatarStack` --- .../primer/beta/avatar_stack.html.erb | 3 +++ app/components/primer/beta/avatar_stack.rb | 17 ++++++++++++----- previews/primer/beta/avatar_stack_preview.rb | 8 ++++---- 3 files changed, 19 insertions(+), 9 deletions(-) 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..78a979845f 100644 --- a/app/components/primer/beta/avatar_stack.rb +++ b/app/components/primer/beta/avatar_stack.rb @@ -45,14 +45,21 @@ 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 : nil + + @tooltip_arguments = { + for_id: @body_arguments[:id], + } + + @tooltip_arguments[:direction] = @body_arguments[:direction] ||= Primer::Alpha::Tooltip::DIRECTION_DEFAULT + @tooltip_arguments[:text] = @body_arguments[:label] + @tooltip_arguments[:type] = :description 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..c5eca5530e 100644 --- a/previews/primer/beta/avatar_stack_preview.rb +++ b/previews/primer/beta/avatar_stack_preview.rb @@ -14,7 +14,7 @@ class AvatarStackPreview < ViewComponent::Preview def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!") render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |component| Array.new(number_of_avatars&.to_i || 1) do - component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") + component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style") end end end @@ -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 # From 73614dbefda68913c409a92a3f7e871a65002bfb Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Tue, 9 Sep 2025 16:42:17 +0000 Subject: [PATCH 2/9] Fix direction --- app/components/primer/beta/avatar_stack.rb | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/components/primer/beta/avatar_stack.rb b/app/components/primer/beta/avatar_stack.rb index 78a979845f..0d0326e5f1 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) @@ -53,7 +54,7 @@ def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_a for_id: @body_arguments[:id], } - @tooltip_arguments[:direction] = @body_arguments[:direction] ||= Primer::Alpha::Tooltip::DIRECTION_DEFAULT + @tooltip_arguments[:direction] = @direction ||= Primer::Alpha::Tooltip::DIRECTION_DEFAULT @tooltip_arguments[:text] = @body_arguments[:label] @tooltip_arguments[:type] = :description end From 72afe35df9f850c74ed141c0a4c32951219c29e8 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Thu, 11 Sep 2025 20:34:32 +0000 Subject: [PATCH 3/9] Add to ternary --- app/components/primer/beta/avatar_stack.rb | 2 +- test/components/beta/avatar_stack_test.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/primer/beta/avatar_stack.rb b/app/components/primer/beta/avatar_stack.rb index 0d0326e5f1..b471c59897 100644 --- a/app/components/primer/beta/avatar_stack.rb +++ b/app/components/primer/beta/avatar_stack.rb @@ -48,7 +48,7 @@ def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_a ) @body_arguments[:tabindex] = tooltipped ? 0 : nil - @body_arguments[:id] = tooltipped ? @body_arguments[:id] ||= self.class.generate_id : nil + @body_arguments[:id] = tooltipped ? @body_arguments[:id] ||= self.class.generate_id : @body_arguments[:id] @tooltip_arguments = { for_id: @body_arguments[:id], 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 From f00eea286c0469f92b4fca2339c285b725e6a069 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 22 Sep 2025 15:26:45 +0000 Subject: [PATCH 4/9] Utilize `aria-label` --- app/components/primer/beta/avatar_stack.rb | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/components/primer/beta/avatar_stack.rb b/app/components/primer/beta/avatar_stack.rb index b471c59897..070d436768 100644 --- a/app/components/primer/beta/avatar_stack.rb +++ b/app/components/primer/beta/avatar_stack.rb @@ -50,6 +50,10 @@ def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_a @body_arguments[:tabindex] = tooltipped ? 0 : nil @body_arguments[:id] = tooltipped ? @body_arguments[:id] ||= self.class.generate_id : @body_arguments[:id] + @body_arguments[:aria] ||= {} + @body_arguments[:aria][:label] = tooltipped && @body_arguments[:label].present? ? @body_arguments[:label] : nil + + @tooltip_arguments = { for_id: @body_arguments[:id], } From bcbc5c36107af70658d20475fb054cb13bce5896 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 22 Sep 2025 15:39:27 +0000 Subject: [PATCH 5/9] Add changeset --- .changeset/blue-phones-boil.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/blue-phones-boil.md 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` From d1c60640ebbc786b279ac698570e2eaa21a153e3 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 22 Sep 2025 11:42:55 -0400 Subject: [PATCH 6/9] Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- app/components/primer/beta/avatar_stack.rb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/primer/beta/avatar_stack.rb b/app/components/primer/beta/avatar_stack.rb index 070d436768..6442fbfc78 100644 --- a/app/components/primer/beta/avatar_stack.rb +++ b/app/components/primer/beta/avatar_stack.rb @@ -51,9 +51,9 @@ def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_a @body_arguments[:id] = tooltipped ? @body_arguments[:id] ||= self.class.generate_id : @body_arguments[:id] @body_arguments[:aria] ||= {} - @body_arguments[:aria][:label] = tooltipped && @body_arguments[:label].present? ? @body_arguments[:label] : nil - - + if tooltipped && @body_arguments[:label].present? + @body_arguments[:aria][:label] = @body_arguments[:label] + end @tooltip_arguments = { for_id: @body_arguments[:id], } From d0c4da1e15f2aca5e10b4f7dfb2bbc820b55296d Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 22 Sep 2025 11:43:06 -0400 Subject: [PATCH 7/9] Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- app/components/primer/beta/avatar_stack.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/primer/beta/avatar_stack.rb b/app/components/primer/beta/avatar_stack.rb index 6442fbfc78..2ca425ab97 100644 --- a/app/components/primer/beta/avatar_stack.rb +++ b/app/components/primer/beta/avatar_stack.rb @@ -58,7 +58,7 @@ def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_a for_id: @body_arguments[:id], } - @tooltip_arguments[:direction] = @direction ||= Primer::Alpha::Tooltip::DIRECTION_DEFAULT + @tooltip_arguments[:direction] = @direction || Primer::Alpha::Tooltip::DIRECTION_DEFAULT @tooltip_arguments[:text] = @body_arguments[:label] @tooltip_arguments[:type] = :description end From 3313d6f92018d55603109a9270b44cacfe6fef92 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 22 Sep 2025 18:41:43 +0000 Subject: [PATCH 8/9] Remove `href` from playground example --- previews/primer/beta/avatar_stack_preview.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/previews/primer/beta/avatar_stack_preview.rb b/previews/primer/beta/avatar_stack_preview.rb index c5eca5530e..4cff00d46e 100644 --- a/previews/primer/beta/avatar_stack_preview.rb +++ b/previews/primer/beta/avatar_stack_preview.rb @@ -14,7 +14,7 @@ class AvatarStackPreview < ViewComponent::Preview def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!") render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |component| Array.new(number_of_avatars&.to_i || 1) do - component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style") + component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") end end end From d6e09a3838999386dbd10be39aa83c7aef10cdc4 Mon Sep 17 00:00:00 2001 From: Tyler Jones Date: Mon, 22 Sep 2025 18:44:54 +0000 Subject: [PATCH 9/9] Remove `label` attr if `tooltipped` is true --- app/components/primer/beta/avatar_stack.rb | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/app/components/primer/beta/avatar_stack.rb b/app/components/primer/beta/avatar_stack.rb index 2ca425ab97..a397d4919d 100644 --- a/app/components/primer/beta/avatar_stack.rb +++ b/app/components/primer/beta/avatar_stack.rb @@ -50,10 +50,6 @@ def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_a @body_arguments[:tabindex] = tooltipped ? 0 : nil @body_arguments[:id] = tooltipped ? @body_arguments[:id] ||= self.class.generate_id : @body_arguments[:id] - @body_arguments[:aria] ||= {} - if tooltipped && @body_arguments[:label].present? - @body_arguments[:aria][:label] = @body_arguments[:label] - end @tooltip_arguments = { for_id: @body_arguments[:id], } @@ -61,6 +57,12 @@ def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_a @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