docs(avatar, badge): position a badge next to an avatar, not inside it - #2419
Merged
Merged
Conversation
The avatar clips its default slot, replaces it with the initials and covers it with the image, so a projected badge does not show. Show a positioned wrapper instead, and replace the reference to the unexported visually hidden component with a CSS utility.
rkaraivanov
added
documentation
Contributor
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
The avatar example conveys its success status solely through color despite requiring visible status text.
Review effort: Balanced
Findings: 1
Open (1)
What changed in this PR
Updates avatar and badge specifications to document external badge positioning and accessible badge content.
Changes:
- Positions badges beside avatars using relative wrappers.
- Replaces the non-exported visually hidden component reference with an application CSS utility.
- Updates accessibility guidance and limitations.
| File | Description |
|---|---|
src/components/avatar/spec.md |
Documents wrapper-based status badge positioning. |
src/components/badge/spec.md |
Adds positioning and accessible count guidance. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The avatar clips its default slot, replaces it with the initials and covers it with the image, so a projected badge does not show. Show a positioned wrapper instead, and replace the reference to the non-exported visually hidden component with a CSS utility.
Type of Change
Checklist