nodejs.org icon indicating copy to clipboard operation
nodejs.org copied to clipboard

feat: Introducing avatar tooltip

Open canerakdas opened this issue 4 months ago • 3 comments

Description

I saw it in Slack (OpenJS Foundation) threads and thought it was a good way to support contributors

With this PR, the Tooltip component was created and minor refactors were made to Avatar and AvatarGroup components. In addition, the WithAvatarGroup component was created to make avatars easier to manage to simplify the process

I took care to use the elements/components in the existing design system as a design, I was inspired by (Search typing) in the Figma for the Tooltip component;

https://www.figma.com/design/pu1vZPqNIM7BePd6W8APA5/Node.js?node-id=464-6397&node-type=frame&t=dj6OGYBZLLo5cp4z-0

Validation

  • Avatars should continue to work as it is.
  • A tooltip should appear for users in authors.json whose website field is exist

Example screenshot; image

image

Related Issues

Related to #7141

Check List

  • [x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • [x] I have run npm run format to ensure the code follows the style guide.
  • [x] I have run npm run test to check if all tests are passing.
  • [x] I have run npx turbo build to check if the website builds without errors.
  • [x] I've covered new added functionality with unit tests if necessary.

canerakdas avatar Oct 25 '24 22:10 canerakdas