[dev-v5] Refactor FluentBadge to use ChildContent and AnchorContent#4845
Merged
Conversation
…ing and structure
…enhanced content rendering
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.7%
|
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors the Badge family components to support richer markup inside the badge via ChildContent, while separating the anchored/wrapped element into a new AnchorContent render fragment; updates usages across tests, components, and demo documentation accordingly.
Changes:
- Added
AnchorContenttoFluentBadge,FluentCounterBadge, andFluentPresenceBadgeto explicitly model “attached” badges. - Changed rendering to allow
ChildContentinside the badge surface (and updated unit tests to cover this). - Updated demo docs/examples and an internal consumer (
FluentAppBarItem) to use<AnchorContent>...</AnchorContent>.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/Core/Components/Badge/FluentPresenceBadgeTests.razor | Updates attached-badge test to use <AnchorContent>. |
| tests/Core/Components/Badge/FluentCounterBadgeTests.razor | Updates attached-badge tests and adds a ChildContent rendering test. |
| tests/Core/Components/Badge/FluentBadgeTests.razor | Updates attached-badge tests and adds a ChildContent rendering test. |
| src/Core/Components/Badge/FluentPresenceBadge.razor.cs | Renames attachment content parameter to AnchorContent and updates attachment detection/docs. |
| src/Core/Components/Badge/FluentPresenceBadge.razor | Switches anchored rendering from ChildContent to AnchorContent. |
| src/Core/Components/Badge/FluentCounterBadge.razor.cs | Updates attachment detection to use AnchorContent. |
| src/Core/Components/Badge/FluentCounterBadge.razor | Uses AnchorContent for attachment; adds combined Content/ChildContent rendering. |
| src/Core/Components/Badge/FluentBadge.razor.cs | Introduces AnchorContent and redefines ChildContent as badge-inner content. |
| src/Core/Components/Badge/FluentBadge.razor | Renders AnchorContent outside the badge, and ChildContent inside the badge. |
| src/Core/Components/AppBar/FluentAppBarItem.razor | Updates FluentCounterBadge usage to wrap the nav item in AnchorContent. |
| examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentPresenceBadge.md | Updates migration sample markup for PresenceBadge-on-Avatar scenario. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Badges/CounterBadge/Examples/CounterBadgeAttached.razor | Updates attached counter badge example to use AnchorContent. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Badges/BadgesOverview.md | Updates accessibility guidance example to use AnchorContent. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Badges/Badge/Examples/BadgePositions.razor | Updates nested badge positioning example to the new AnchorContent structure. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Badges/Badge/Examples/BadgeDefault.razor | Adds a ChildContent example with rich markup. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Badges/Badge/Examples/BadgeAttached.razor | Updates attached badge example to use AnchorContent. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
vnbaaij
approved these changes
May 11, 2026
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.
[dev-v5] Refactor FluentBadge to use ChildContent and AnchorContent
Enhance the Badge components by introducing
ChildContentandAnchorContentparameters for better content rendering and structure.I asked Copilot to suggest the best name for “AnchorContent” 😊
No breaking changes are introduced.
Examples
Attached to a button
Unit Tests
Added