Skip to content

feat(avatar): add RuiAvatar and RuiAvatarGroup components#518

Merged
kelsos merged 1 commit intorotki:mainfrom
kelsos:feat/avatar-component
Apr 27, 2026
Merged

feat(avatar): add RuiAvatar and RuiAvatarGroup components#518
kelsos merged 1 commit intorotki:mainfrom
kelsos:feat/avatar-component

Conversation

@kelsos
Copy link
Copy Markdown
Member

@kelsos kelsos commented Apr 27, 2026

Summary

  • Add RuiAvatar with image-first rendering, initials/icon/slot fallback, six size tokens (xs–2xl) plus arbitrary numeric sizes, three variants (circular/rounded/square), and context-color theming.
  • Add RuiAvatarGroup that overlaps children with a configurable spacing token, slices to max with a +N surplus (overridable via total or the surplus slot), and provides size/variant to children via injection.
  • Wire up the example app page (/avatars), Storybook stories, and Playwright e2e coverage.

Closes #144

Test plan

  • pnpm run typecheck
  • pnpm --filter @rotki/ui-library run test:run (28 avatar unit tests pass)
  • pnpm run build:prod
  • PLAYWRIGHT_CHROMIUM_PATH=/usr/bin/chromium pnpm test:e2e avatar.spec.ts (10/10 pass)
  • Visual review in Storybook (pnpm run storybook) — Default, WithImage, Initials, WithIcon, BrokenImage, Sizes, Variants, Colors, NumericSize, WithStatusBadge
  • Visual review of /avatars example page across sizes, variants, colors, and group cases

Image-first avatar with initials/icon/slot fallback, six size tokens
(xs–2xl) plus arbitrary numeric sizes, three variants (circular,
rounded, square), and context-color theming. RuiAvatarGroup overlaps
children with a configurable spacing token, slices to `max`, and
renders a `+N` surplus that respects an optional `total` override.
Group provides size/variant via injection so children inherit unless
explicitly overridden.
@kelsos kelsos requested a review from a team as a code owner April 27, 2026 08:53
@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Apr 27, 2026

Codecov Report

❌ Patch coverage is 93.70629% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 84.87%. Comparing base (36e8be7) to head (962dd5a).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
...-library/src/components/avatars/RuiAvatarGroup.vue 86.27% 7 Missing ⚠️
.../ui-library/src/components/avatars/avatar-props.ts 90.90% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #518      +/-   ##
==========================================
+ Coverage   84.60%   84.87%   +0.26%     
==========================================
  Files         139      143       +4     
  Lines        5066     5209     +143     
  Branches     1507     1553      +46     
==========================================
+ Hits         4286     4421     +135     
- Misses        780      788       +8     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@kelsos kelsos merged commit 962dd5a into rotki:main Apr 27, 2026
5 checks passed
@kelsos kelsos deleted the feat/avatar-component branch April 27, 2026 09:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Component: Implement an avatar component

2 participants