Skip to content

feat(Avatar/AvatarGroup): add color prop#6405

Open
maximepvrt wants to merge 6 commits intonuxt:v4from
maximepvrt:avatar-color
Open

feat(Avatar/AvatarGroup): add color prop#6405
maximepvrt wants to merge 6 commits intonuxt:v4from
maximepvrt:avatar-color

Conversation

@maximepvrt
Copy link
Copy Markdown
Contributor

🔗 Linked issue

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@github-actions github-actions Bot added the v4 #4488 label Apr 27, 2026
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 27, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Introduces a color variant across the Avatar system: Avatar and AvatarGroup components accept a new optional color prop (default 'neutral'), useAvatarGroup provides and consumes color alongside size, and UI generation (tv(...)) incorporates color. Theme modules for avatar and avatar-group were converted into factory functions that generate color entries from options.theme.colors and set color: 'neutral' as a default. Playground UI, documentation pages, and unit tests were updated to expose and exercise the new color option.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description check ✅ Passed The PR description uses the repository template but contains only unchecked boxes with no substantive text. However, the PR objectives indicate the purpose is to add color props to Avatar and AvatarGroup components, which aligns with the changeset.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title 'feat(Avatar/AvatarGroup): add color props' clearly and concisely summarizes the main change: adding color props to both Avatar and AvatarGroup components.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/content/docs/2.components/avatar.md`:
- Line 103: Update the "### Color" heading in
docs/content/docs/2.components/avatar.md to include the pending-release badge by
appending :badge{label="Soon" class="align-text-top"} to the heading (i.e.,
modify the "### Color" heading line so it reads with the badge token) so the
docs indicate this feature ships in the next npm release.

In `@src/runtime/components/AvatarGroup.vue`:
- Around line 19-26: The JSDoc for "The maximum number of avatars to display."
was left above the color prop and thus attached to color; move or duplicate the
comment so that max has its own JSDoc block and color retains its `@defaultValue`
'neutral'. Concretely, create a separate JSDoc immediately above the max prop
(max?: number | string) containing "The maximum number of avatars to display."
and ensure the existing JSDoc with "@defaultValue 'neutral'" remains directly
above the color prop declaration (color?: AvatarGroup['variants']['color']) so
each prop has correct documentation.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 590717a8-bc11-4df6-a831-5182350924fb

📥 Commits

Reviewing files that changed from the base of the PR and between dde09d0 and c2aed4c.

⛔ Files ignored due to path filters (12)
  • test/components/__snapshots__/Avatar-vue.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/Avatar.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/AvatarGroup-vue.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/AvatarGroup.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/ChatMessages-vue.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/ChatMessages.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/Empty-vue.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/Empty.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/FileUpload-vue.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/FileUpload.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/User-vue.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/User.spec.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (8)
  • docs/content/docs/2.components/avatar.md
  • playgrounds/nuxt/app/pages/components/avatar.vue
  • src/runtime/components/Avatar.vue
  • src/runtime/components/AvatarGroup.vue
  • src/runtime/composables/useAvatarGroup.ts
  • src/theme/avatar-group.ts
  • src/theme/avatar.ts
  • test/components/Avatar.spec.ts

Comment thread docs/content/docs/2.components/avatar.md Outdated
Comment thread src/runtime/components/AvatarGroup.vue Outdated
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 27, 2026

npm i https://pkg.pr.new/@nuxt/ui@6405

commit: e71a440

@maximepvrt maximepvrt changed the title feat(Avatar): add color props feat(Avatar/AvatarGroup): add color props Apr 27, 2026
@benjamincanac benjamincanac changed the title feat(Avatar/AvatarGroup): add color props feat(Avatar/AvatarGroup): add color props Apr 28, 2026
@benjamincanac benjamincanac changed the title feat(Avatar/AvatarGroup): add color props feat(Avatar/AvatarGroup): add color prop Apr 28, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants