[dev-v5] Add FluentLabelInfo component with info icon and popover support#4888
Merged
Conversation
…LabelInfo component
…imitations and add LabelInfo API section
…rPickerInput tests
|
✅ 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
This PR introduces a new FluentLabelInfo component and supporting ILabelInfo/LabelInfo model to implement the “InfoLabel” pattern (label + info icon + popover), and integrates it into FluentField / input components via a new LabelInfo parameter.
Changes:
- Added
FluentLabelInfocomponent (icons + popover + optional action link / template) and styling. - Added
ILabelInfo+ defaultLabelInfoimplementation (including a small fluent builder API). - Integrated
LabelInfointoIFluentField,FluentField, andFluentInputBase, plus added unit tests and demo docs/examples.
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/Core/Components/Label/LabelInfoTests.cs | Unit tests for LabelInfo defaults/constructors/builder methods. |
| tests/Core/Components/Label/FluentLabelInfoTests.razor | bUnit tests for FluentLabelInfo rendering, icons, toggling, and FluentField interaction. |
| tests/Core/Components/Label/FluentLabelInfoTests.FluentLabelInfo_InfoTemplate.verified.razor.html | Verified snapshot for templated popover content. |
| tests/Core/Components/Label/FluentLabelInfoTests.FluentLabelInfo_Default.verified.razor.html | Verified snapshot for default rendering (no info content). |
| tests/Core/Components/Field/FluentFieldParameterSelectorTests.razor | Updates mock IFluentField implementation to include LabelInfo. |
| tests/Core/Components/ColorPicker/FluentColorPickerInputTests.razor | Updates test IFluentField implementation to include LabelInfo. |
| src/Core/Components/Label/ILabelInfo.cs | New interface representing info-popover content for labels. |
| src/Core/Components/Label/LabelInfo.cs | Default implementation of ILabelInfo. |
| src/Core/Components/Label/LabelInfoBuilder.cs | Fluent builder helpers for LabelInfo (WithText, WithActionLink, etc.). |
| src/Core/Components/Label/FluentLabelInfo.razor | Razor markup for label + info button + popover content rendering. |
| src/Core/Components/Label/FluentLabelInfo.razor.cs | Component logic/state management and FluentField-related validation. |
| src/Core/Components/Label/FluentLabelInfo.razor.css | Styling for inline layout, icon states, and popover spacing. |
| src/Core/Components/Label/FluentLabel.razor.cs | Makes ClassValue/StyleValue virtual so FluentLabelInfo can override. |
| src/Core/Components/Field/IFluentField.cs | Adds LabelInfo to the field contract. |
| src/Core/Components/Field/FluentFieldParameterSelector.cs | Plumbs through LabelInfo and adds HasLabelInfo. |
| src/Core/Components/Field/FluentField.razor.cs | Ensures fields render a label area when label info exists. |
| src/Core/Components/Field/FluentField.razor | Renders FluentLabelInfo inside the label slot when LabelInfo is provided. |
| src/Core/Components/Base/FluentInputBase.cs | Adds LabelInfo parameter to all inputs via base class. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/LabelInfo/FluentLabelInfo.md | New documentation page for the LabelInfo pattern and API. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/LabelInfo/Examples/LabelInfoDefault.razor | Demo example: default info text + action link. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/LabelInfo/Examples/LabelInfoCustomized.razor | Demo example: custom InfoTemplate. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/LabelInfo/Examples/LabelInfoIcons.razor | Demo example: custom icons. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/LabelInfo/Examples/LabelInfoField.razor | Demo example: using LabelTemplate and LabelInfo parameter with inputs. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Label/Examples/LabelDefault.razor | Removes trailing blank line. |
vnbaaij
approved these changes
May 27, 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.
Add FluentLabelInfo component with info icon and popover support
Introduce the FluentLabelInfo component to enhance label functionality with an info icon and popover support. This update includes the implementation of the ILabelInfo interface and a default LabelInfo class, allowing for customizable action links and improved integration with FluentField and related components.
An InfoLabel is a Label with an InfoButton at the end, properly handling layout and accessibility properties.
It can be used as a drop-in replacement for Label when an InfoButton is also needed.
The InfoLabel pattern is a label followed by a button that exposes additional information about a field or a concept.
To trigger the Popover, the user may activate the button by clicking on it and focusing on it and pressing enter or space.
To close the Popover, the user may click the button again, click outside the popover, press the escape key, or tab out of the Popover.
InfoLabel can not be opened on focus. The pattern where you have an icon and a tooltip that appears on focus is not the InfoLabel pattern.
The tooltip pattern is meant to have short text and no interaction with the content. We believe that if the content is short or even a few words,
it should be included in the label or a secondary label. If the content is longer and/or has interaction, then it must be an InfoLabel.
Default example
The simplest usage sets
InfoTextto display plain text inside the popover, and optionallyInfoActionLinkto render a "Learn more" link below it.peek_2.mp4
Customization
Use the
InfoTemplateto provide fully customized content inside the popover, such as formatted text, links, or any other Razor markup.Other icons
The default info icon can be replaced with any icon (for example a question mark, lightbulb, or warning)
by setting
InfoIconandInfoIconActiveto suit the context of the field.Input elements and LabelInfo
A
FluentLabelInfocan be used as the label of a form input elements (such asFluentTextInput)by assigning it to the
LabelTemplate, keeping accessibility and layout properly handled.Or assigning it to the
LabelInfoparameter.NOTE: The
LabelInfoparameter does not allow you to define all properties,but only
InfoActionText,InfoActionLink,InfoActionTarget, and the contents ofFluentLabelInfo.Unit Tests