[dev-v5] ColorPicker#4712
Merged
Merged
Conversation
…port, and enhance styling
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.7%
|
…ficity for color views
…d update indicator rendering
…nhance Color Wheel alignment
…ce HSV color handling
…and async support
…d orientation selection
…mproved readability
…readability and maintainability
…com/microsoft/fluentui-blazor into users/dvoituron/dev-v5/color-picker
vnbaaij
approved these changes
May 17, 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] FluentColorPicker
The
FluentColorPickercomponent lets users pick a color from a predefined palette oran interactive color surface. It supports three different views, exposed through the
ColorPickerViewenumeration:The
FluentColorPickerInputcomponent combines a text input with a popoverFluentColorPicker, providing a compact, form-friendly color selector thatfits naturally next to other input controls.
Both components are unstyled wrappers around the same picking logic, so the selected
color is always returned as a hex string (for example
#FF0000) that you can bind toyour own model with
@bind-Valueor@bind-SelectedColor.FluentColorPickerInput
FluentColorPickerInputexposes a labeled text field with a color swatch button thatopens a popover containing the picker. You can choose which
Viewis displayed in thepopover and optionally hide the text input with
HideTextInputto keep only the swatchbutton. The example below lets you switch between the available views at runtime and
toggle the visibility of the text input.
FluentColorPicker
FluentColorPickerrenders the picker surface directly, without any input field orpopover. This is useful when you need to embed the color selection UI inside a custom
layout, such as a settings panel or a toolbar. The example below displays the three
available views side-by-side and binds them to a shared
SelectedColorvalue so thatselecting a color in any picker updates the others.
Unit Tests