[dev-v5] Add global overlay support with IDialogService integration#4864
Merged
Conversation
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.6%
|
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a global overlay capability to IDialogService, enabling apps to show/hide a single overlay (with optional text and card appearance) without declaring a FluentOverlay in markup. The feature is on by default and can be disabled via LibraryConfiguration.UseGlobalOverlay.
Changes:
- New
OverlayOptions,IDialogService.ShowOverlayAsync/HideOverlayAsync, andDialogServicepartial implementation that registers a globalFluentOverlayinstance withFluentDialogProvider. FluentDialogProvider.razorrenders the global overlay whenUseGlobalOverlayis true; adds CSS classfluent-overlay-global.- Documentation, demo example, and unit tests; existing dialog test fixtures opt out of the global overlay.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Core/Components/Dialog/Overlay/DialogService.cs | New partial impl for show/hide overlay and registration. |
| src/Core/Components/Dialog/Overlay/IDialogService.cs | New interface members for overlay. |
| src/Core/Components/Dialog/Overlay/OverlayOptions.cs | New options class with Class/Style builders. |
| src/Core/Components/Dialog/Overlay/OverlayGlobalStyle.css | Global overlay styles. |
| src/Core/Components/Dialog/Services/DialogService.cs | Calls RegisterGlobalOverlayComponent from ctor. |
| src/Core/Components/Dialog/FluentDialogProvider.razor | Renders global overlay conditionally. |
| src/Core/Infrastructure/LibraryConfiguration.cs | Adds UseGlobalOverlay option. |
| tests/Core/Components/Dialog/Overlay/OverlayServiceTests.razor | New unit tests for service/options. |
| tests/Core/Components/Dialog/Fluent*Tests.razor & InputFile tests | Opt out of global overlay. |
| examples/.../FluentOverlay.md & OverlayService.razor | Documentation & demo. |
MarvinKlein1508
approved these changes
May 15, 2026
vnbaaij
approved these changes
May 15, 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] Add global overlay support with IDialogService integration
Introduce global overlay functionality integrated with IDialogService, allowing for customizable overlay options. This update includes the ability to disable the global overlay in Fluent UI services and adds unit tests for the OverlayService and OverlayOptions.
Service
In addition to the
FluentOverlaycomponent, you can use theIDialogServiceto display a global overlay from anywhere in your application,without having to declare a
FluentOverlayin your markup.Only one global overlay can be displayed at a time. The overlay shows a centered spinner, with an optional text message displayed below it.
You can also choose a
CardAppearancestyle to customize how the overlay content is rendered.Use
DialogService.ShowOverlayAsync(...)to display the overlay andDialogService.HideOverlayAsync()to close it.Example
Notes The global overlay is enabled by default. If you don't need this feature,
you can disable it when registering the Fluent UI services to avoid rendering
the underlying
FluentOverlayelement in theFluentDialogProvider:Unit Tests
Updated and added