Skip to content

AvatarStack: Add support for Tooltip on individual avatars#3776

Merged
jonrohan merged 3 commits intomainfrom
tylerjdev/add-individual-tooltip-avatarstack
Dec 2, 2025
Merged

AvatarStack: Add support for Tooltip on individual avatars#3776
jonrohan merged 3 commits intomainfrom
tylerjdev/add-individual-tooltip-avatarstack

Conversation

@TylerJDev
Copy link
Copy Markdown
Member

@TylerJDev TylerJDev commented Nov 24, 2025 •
edited
Loading

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

Adds support to Avatar for tooltip. Can be used within AvatarStack to render individual tooltips.

Screenshots

Integration

N/A

List the issues that this change affects.

https://github.com/github/accessibility-audits/issues/12705

Risk Assessment

  • Low risk the change is small, highly observable, and easily rolled back.
  • Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
  • High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Allows consumers to add individual tooltips to AvatarStack.

Accessibility

  • Fixes axe scan violation - This change fixes an existing axe scan violation.
  • No new axe scan violation - This change does not introduce any new axe scan violations.
  • New axe violation - This change introduces a new axe scan violation. Please describe why the violation cannot be resolved below.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Lookbook)
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Nov 24, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: 68d1d88

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/view-components Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@TylerJDev TylerJDev marked this pull request as ready for review November 24, 2025 15:14
@TylerJDev TylerJDev requested review from a team as code owners November 24, 2025 15:14
Copilot AI reviewed Nov 24, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds support for individual tooltips on avatars within the AvatarStack component. The feature enables developers to provide non-essential contextual information for each avatar when used as a link, improving the user experience while maintaining accessibility standards.

Key Changes:

  • Added tooltip parameter to the Avatar component that integrates with the Link component's tooltip functionality
  • Updated CSS to handle the DOM structure changes introduced by tooltip wrappers and added :focus-within support for keyboard accessibility
  • Added comprehensive test coverage and preview examples for the new tooltip functionality

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
app/components/primer/beta/avatar.rb Added tooltip parameter and logic to render tooltips on linked avatars
app/components/primer/beta/avatar_stack.pcss Added CSS rules to handle avatar visibility when wrapped in tooltip spans and improved keyboard navigation support
test/components/beta/avatar_stack_test.rb Added test case verifying that individual tooltips render correctly on avatars
previews/primer/beta/avatar_stack_preview.rb Added preview demonstrating avatars with individual tooltips
.changeset/gentle-donkeys-own.md Added changeset documenting the new feature (contains a typo)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread .changeset/gentle-donkeys-own.md Outdated
@francinelucca
Update .changeset/gentle-donkeys-own.md
68d1d88 
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
francinelucca
francinelucca approved these changes Nov 25, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@francinelucca francinelucca left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@TylerJDev
Copy link
Copy Markdown
Member Author

TylerJDev commented Dec 1, 2025

@jonrohan, could I get your review on this, as it requires a CSS reviewer? 🤔

@TylerJDev TylerJDev requested review from jonrohan and removed request for langermank December 1, 2025 17:40
jonrohan
jonrohan approved these changes Dec 2, 2025
View reviewed changes
Copy link
Copy Markdown
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome 👍🏻

@jonrohan jonrohan added this pull request to the merge queue Dec 2, 2025
Merged via the queue into main with commit edc480f Dec 2, 2025
27 of 31 checks passed
@jonrohan jonrohan deleted the tylerjdev/add-individual-tooltip-avatarstack branch December 2, 2025 19:49
@primer primer Bot mentioned this pull request Dec 2, 2025
Merged
@myabc myabc mentioned this pull request Dec 11, 2025
Closed
10 tasks
@openproject-primer-view-components openproject-primer-view-components Bot mentioned this pull request Jan 7, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@jonrohan jonrohan jonrohan approved these changes

@francinelucca francinelucca francinelucca approved these changes

Assignees

No one assigned

Labels

minor release

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@TylerJDev @jonrohan @francinelucca