Open
Conversation
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
…and FluentToastComponentBase as as shell
Contributor
There was a problem hiding this comment.
Pull request overview
Initial WIP implementation of a new Toast component, introducing shared toast infrastructure, new toast variants, and client-side behavior to render/dismiss toasts.
Changes:
- Added Toast core types (enums, options, instance/events) and refactored rendering to use a shared
FluentToastComponentBaseshell. - Implemented
FluentToastandFluentProgressToastplus content components and styling. - Added a new web component (
fluent-toast-b) implementation in Core.Scripts and registered it at startup; added initial demo/docs scaffolding.
Reviewed changes
Copilot reviewed 30 out of 30 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/Core/Components/Toast/FluentToastTests.razor | Minor edit in Toast test scaffold (using directive line). |
| src/Core/Microsoft.FluentUI.AspNetCore.Components.csproj | Adds a Properties\ folder entry to the project. |
| src/Core/Events/DialogToggleEventArgs.cs | Makes DialogToggleEventArgs public (now part of public API surface). |
| src/Core/Enums/ToastPosition.cs | Adds toast position enum with Description mappings. |
| src/Core/Enums/ToastPoliteness.cs | Adds politeness enum for live region behavior. |
| src/Core/Enums/ToastIntent.cs | Adds intent enum used for visual/accessibility semantics. |
| src/Core/Components/Toast/Services/ToastService.cs | Adjusts generic dispatch and restricts toast component types. |
| src/Core/Components/Toast/Services/ToastOptions.cs | Adds timeout option for toasts. |
| src/Core/Components/Toast/Services/ToastInstance.cs | Adds trimming annotations and generalizes stored toast component type. |
| src/Core/Components/Toast/Services/ToastEventArgs.cs | Updates event args to work with new toast base component. |
| src/Core/Components/Toast/Services/IToastInstance.cs | Adds trimming annotation to component type. |
| src/Core/Components/Toast/FluentToastProvider.razor.cs | Uses DynamicComponent with parameters builder and toast-type validation; adds IL2111 suppression. |
| src/Core/Components/Toast/FluentToastProvider.razor | Switches provider to DynamicComponent rendering; adds IL2111 suppression. |
| src/Core/Components/Toast/FluentToastContent.razor.cs | Adds owned content component backing class for FluentToast. |
| src/Core/Components/Toast/FluentToastContent.razor | Adds default visual template for FluentToast. |
| src/Core/Components/Toast/FluentToastComponentBase.razor.css | Adds CSS for toast content layout. |
| src/Core/Components/Toast/FluentToastComponentBase.razor.cs | Introduces shared toast base: shell rendering, toggle handling, service integration. |
| src/Core/Components/Toast/FluentToastComponentBase.razor | Adds the fluent-toast-b host element and binds parameters/events. |
| src/Core/Components/Toast/FluentToast.razor.cs | Removes old Razor-based FluentToast component implementation. |
| src/Core/Components/Toast/FluentToast.razor | Removes old Razor markup for toast wrapper. |
| src/Core/Components/Toast/FluentToast.cs | Adds new code-based FluentToast built on the new base/shell. |
| src/Core/Components/Toast/FluentProgressToastContent.razor.cs | Adds owned content component backing class for FluentProgressToast. |
| src/Core/Components/Toast/FluentProgressToastContent.razor | Adds default visual template for progress toast. |
| src/Core/Components/Toast/FluentProgressToast.cs | Adds new progress toast component built on the new base/shell. |
| src/Core.Scripts/src/Startup.ts | Registers the new Toast web component in startup. |
| src/Core.Scripts/src/Components/Toast/FluentToast.ts | Implements fluent-toast-b custom element (popover + stacking + timeout + a11y). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/FluentToast.md | Adds initial Toast documentation page. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastDefault.razor | Adds placeholder example file (currently empty). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/DebugPages/DebugToastContent.razor | Updates debug content markup to match new toast layout. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/DebugPages/DebugToast.razor | Expands debug page with multiple toast scenarios using the toast service. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
...s/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastDefault.razor
Outdated
Show resolved
Hide resolved
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.9%
|
…/microsoft/fluentui-blazor into users/vnbaaij/dev-v5/toast-part1
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a new “feature complete” Toast system across the Blazor component model, service APIs, provider behavior, underlying web component, docs, and tests—enabling richer notification scenarios including live-updating progress toasts.
Changes:
- Replaces the old toast result/content-component model with a
ToastServiceAPI that returnsToastCloseReasonand can return a liveIToastInstancefor updates/dismissal. - Introduces a new
FluentToastProviderqueueing/visibility model and a new<fluent-toast-b>web component with stacking, animations, pause/resume timeout, and accessibility behavior. - Adds/updates extensive unit tests and demo documentation/examples for the new toast experience.
Reviewed changes
Copilot reviewed 37 out of 38 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/Core/Verify/FluentAssertOptions.cs | Updates verify scrubber to ignore new ARIA attributes in rendered markup. |
| tests/Core/Components/Toast/ToastInstanceTests.razor | Adds unit tests for new ToastInstance/ToastService behaviors. |
| tests/Core/Components/Toast/Templates/ToastWithInstance.razor | Removes old template-based toast instance test component. |
| tests/Core/Components/Toast/Templates/ToastRenderOptions.cs | Removes old render-options class used by the previous toast templating model. |
| tests/Core/Components/Toast/Templates/ToastRender.razor | Removes old template-based toast rendering test component. |
| tests/Core/Components/Toast/FluentToastTests.razor | Reworks tests to validate the new toast API, lifecycle, rendering, actions, and updates. |
| tests/Core/Components/Toast/FluentToastTests.FluentToast_Render.verified.razor.html | Removes snapshot tied to the previous toast rendering approach. |
| tests/Core/Components/Toast/FluentToastProviderTests.razor | Adds new tests for provider defaults, queueing, and ordering. |
| src/Core/Properties/AssemblyInfo.cs | Adds InternalsVisibleTo to allow test access to internal members. |
| src/Core/Events/ToastEventArgs.cs | Switches from dialog state mapping to toast lifecycle status mapping. |
| src/Core/Events/DialogToggleEventArgs.cs | Makes toggle args public so they can be used in public APIs. |
| src/Core/Enums/ToastType.cs | Introduces toast types (communication/confirmation/progress). |
| src/Core/Enums/ToastPosition.cs | Adds toast placement options with attribute descriptions. |
| src/Core/Enums/ToastPoliteness.cs | Adds ARIA politeness options for live region announcements. |
| src/Core/Enums/ToastLifecycleStatus.cs | Adds explicit lifecycle statuses for queued/visible/dismissed/unmounted. |
| src/Core/Enums/ToastIntent.cs | Adds semantic intent values (info/success/warning/error). |
| src/Core/Enums/ToastCloseReason.cs | Adds close reasons returned to callers and used by lifecycle completion. |
| src/Core/Components/Toast/Services/ToastService.cs | Refactors service API (show/dismiss/update/live instance) and lifecycle handling. |
| src/Core/Components/Toast/Services/ToastResult.cs | Removes the old ToastResult typed result model. |
| src/Core/Components/Toast/Services/ToastOptions.cs | Expands options with new UX/accessibility/action fields and updateable body content. |
| src/Core/Components/Toast/Services/ToastInstance.cs | Refactors instance to support lifecycle tracking, close reasons, and updates. |
| src/Core/Components/Toast/Services/IToastService.cs | Updates public API surface to new show/dismiss/update/live instance methods. |
| src/Core/Components/Toast/Services/IToastInstance.cs | Updates instance contract to lifecycle + close-reason result + update API. |
| src/Core/Components/Toast/FluentToastProvider.razor.cs | Adds provider queueing, default behaviors, and rendered-toast selection logic. |
| src/Core/Components/Toast/FluentToastProvider.razor | Renders the new FluentToast with option-derived parameters and attributes. |
| src/Core/Components/Toast/FluentToastInstance.cs | Removes the old FluentToastInstance base class used by template toasts. |
| src/Core/Components/Toast/FluentToast.razor.cs | Adds lifecycle/status handling, action handlers, intent/icon mapping, and close completion logic. |
| src/Core/Components/Toast/FluentToast.razor | Replaces old dynamic content rendering with the new <fluent-toast-b> host and slots. |
| src/Core/Components/MessageBar/FluentMessageBar.razor.cs | Minor formatting cleanup (unrelated to toast behavior). |
| src/Core.Scripts/src/Startup.ts | Registers the new Toast web component at startup. |
| src/Core.Scripts/src/Components/Toast/FluentToast.ts | Adds the toast web component implementation (stacking, animations, timeout pause/resume, ARIA live behavior). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/FluentToast.md | Adds toast docs describing types, behavior, accessibility, and examples. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastIndeterminateProgress.razor | Adds an indeterminate progress toast example (service-driven). |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastDeterminateProgress.razor | Adds a determinate progress toast example using live instance updates. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastDefault.razor | Adds a default toast example with actions and status callback. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastCustomDismiss.razor | Adds a custom-dismiss example using a dismiss action link and callback. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/DebugPages/DebugToastContent.razor | Removes old debug page tied to previous toast result/content approach. |
| examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/DebugPages/DebugToast.razor | Removes old debug page tied to generic component-to-toast rendering. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/FluentToast.md
Outdated
Show resolved
Hide resolved
.../FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastCustomDismiss.razor
Outdated
Show resolved
Hide resolved
Collaborator
Author
|
@copilot apply changes based on the comments in this thread |
Copilot stopped work on behalf of
vnbaaij due to an error
March 27, 2026 17:47
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.
Summary
This PR adds a feature complete Toast experience to the library, expanding both the component model and service API to support modern notification scenarios, including live-updating progress toasts.
Capabilities
Toast types
The library supports toast scenarios through
ToastType:• Communication
• Confirmation
• IndeterminateProgress
• DeterminateProgress
This makes it easy to model toast behavior and presentation according to Fluent guidance. See the added documentation in the demo site to get an overview of what the different types are and how they should be used.
Custom icon support
Toasts can display a custom icon through the Icon parameter and matching Icon setting.
This allows library consumers to provide icons that better match their scenario instead of relying just on intent-based defaults.
Live toast instance access
The
ShowToastAsync(...)API is available for the common fire-and-forget / await-result scenario.An additional API has been implemented to make advanced toast scenarios easier:
•
ShowToastInstanceAsync(ToastOptions? options = null)•
ShowToastInstanceAsync(Action<ToastOptions> options)These methods return the live
IToastInstance, making it possible to:• update a toast while it is visible
• dismiss or close it programmatically
• await its final result when needed
Rich body content for progress scenarios
Toasts can use
BodyContentas the mechanism for rich, dynamic body content.This enables scenarios such as embedding a
FluentProgressBarinside the toast body and updating that content over time through:•
IToastInstance.UpdateAsync(...)•
IToastService.UpdateToastAsync(...)Lifecycle clarity
Toast lifecycle tracking is clearly expressed through
ToastLifecycleStatus, making status transitions explicit and easy to consume from callbacks and tests.Behavior and UX support
Queueing and provider behavior
The toast provider manages:
• maximum visible toast count
• queue promotion
• position and offsets
• hover pause and window-blur pause
• lifecycle-driven rendering
Web component improvements
The underlying toast web component takes care of:
• animated open/close behavior
• consistent stacking and repositioning
• pause/resume timeout behavior
• accessibility updates based on intent and politeness
• event dispatch back to Blazor for lifecycle transitions
Developer experience
The toast API works well for both simple and advanced use cases:
• simple use case: call
ShowToastAsync(...)• advanced use case: call
ShowToastInstanceAsync(...)and interact with the live toast instanceThis especially improves scenarios such as upload/download notifications, long-running operations, and dynamic progress feedback.
Unit Tests