`Avatar`: Add predefined color presets based on `alt` initials
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 65/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- tailwindcss, typescript
- Domain
- frontend
Research direction
Look at the Avatar component source in the repository, likely in packages/ui/src/components/Avatar. Examine how the color prop is currently handled and where the alt text is used. Research how to generate a deterministic color from initials (e.g., hash the string). Consider the variant prop proposal and how to integrate with the existing theming system, including user-customized colors. Check for existing tests for Avatar to understand the expected behavior.
Written by the indexing model from the issue text.
Description
Package
v4.x
Description
Currently, we can manually set the color of the Avatar component when using only the alt attribute. It would be useful if the background color were predefined based on the initials.
It would also be better to use a solid background with white or black text instead of a muted background with highlighted text. Maybe variant prop could be useful here - so either solid, soft, outline, etc.
However, I'm not sure how this would work if the user has customized the UI colors, as the avatars may or may not fit well with the adjusted color scheme.
https://mui.com/material-ui/react-avatar/#letter-avatars
Additional context
No response
- Dominant language
- TypeScript
- Stars
- 7k
- Forks
- 1.1k
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 170
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt/ui
-
NavigationMenu: expanding a nested item in vertical orientation collapses its parent when using v-modelPossibly taken @cristianchiriac claimed this 2 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
UAvatar wrong root for passthoughPossibly taken @lazerg claimed this 49 days ago. Opentriage
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
triage
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
Maintainers usually reply within 1 day
-
triage
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
v5
Difficulty 2/5 Half a day Newbie friendliness 66/100
Maintainers usually reply within 1 day
Similar issues
-
"Contains" page watch never matches when its text has a trailing spacePossibly taken @RaphaelFakhri claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 77/100
CopilotKit/openmuse#184 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 67/100
bootstrap-vue-next/bootstrap-vue-next#3357 ·
Maintainers usually reply within 1 day
-
[quality] tide.ts: six mutation survivors in the merge-queue gate, draft refusal, fork-403 workflow-file diagnosis and getPull's fork flag are unpinned by any testPossibly taken @hivecommons-hive claimed this today. Openagent/quality needs-kind stage/040-covered-by-pr testing
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
cncf/prow-github-actions#517 · 1 comment ·
Maintainers usually reply within 2 days
-
Unsampled pageload span is profiled when profileLifecycle is 'trace' (browser UI profiling)Possibly taken @Jxxunnn claimed this today. OpenBrowser Waiting for: Product Owner
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
getsentry/sentry-javascript#25497 · 1 comment ·
Maintainers usually reply within 1 day