feat(badge): update badge example and styles for avatar integration#17241
feat(badge): update badge example and styles for avatar integration#17241
Conversation
There was a problem hiding this comment.
Pull request overview
Updates the Badge + Avatar integration examples to reflect the recommended overlay approach (wrapper container + positioning styles), aligning skill/reference docs and component JSDoc examples.
Changes:
- Update the Avatar + Badge example markup to wrap both components in an
.avatar-badge-container. - Add SCSS snippet demonstrating how to position the badge as an overlay on the avatar.
- Update
IgxBadgeComponentJSDoc example to match the new composition pattern.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| skills/igniteui-angular-components/references/data-display.md | Updates the Avatar+Badge example and adds required overlay SCSS. |
| projects/igniteui-angular/badge/src/badge/badge.component.ts | Updates component-level JSDoc example to use a wrapper container for Avatar+Badge. |
| * <igx-avatar icon="person" shape="circle" size="small"></igx-avatar> | ||
| * <igx-badge icon="check" type="success" shape="square"></igx-badge> | ||
| * </div> | ||
| * ``` |
There was a problem hiding this comment.
This example switches from projecting the badge into the avatar to placing both in a wrapper div, but it doesn't mention the CSS required to actually overlay the badge (e.g., relative positioning on the container and absolute positioning on the badge). Without that, the example will render the badge next to the avatar rather than as an overlay—please include a brief note and/or reference to the required styles.
| * ``` | |
| * ``` | |
| * | |
| * The wrapper needs positioning styles so the badge is overlaid on the avatar instead of rendering | |
| * next to it: | |
| * | |
| * ```css | |
| * .avatar-badge-container { | |
| * position: relative; | |
| * display: inline-block; | |
| * } | |
| * | |
| * .avatar-badge-container igx-badge { | |
| * position: absolute; | |
| * right: 0; | |
| * bottom: 0; | |
| * } | |
| * ``` |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Closes #
Description
Motivation / Context
Type of Change (check all that apply):
Component(s) / Area(s) Affected:
How Has This Been Tested?
Test Configuration:
Screenshots / Recordings
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)