Skip to content

[dev-v5] Initial work to add Toast #4584

Draft
vnbaaij wants to merge 8 commits intodev-v5from
users/vnbaaij/dev-v5/toast-part1
Draft

[dev-v5] Initial work to add Toast #4584
vnbaaij wants to merge 8 commits intodev-v5from
users/vnbaaij/dev-v5/toast-part1

Conversation

@vnbaaij
Copy link
Collaborator

@vnbaaij vnbaaij commented Feb 27, 2026

WIP

@github-actions
Copy link

github-actions bot commented Feb 27, 2026

Unit Tests

  • ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Toast.FluentToastTests.FluentToast_Render
  • ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Toast.FluentToastTests.FluentToast_OpenClose
  • ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Toast.FluentToastTests.FluentToast_Instance_CloseNoValue
  • ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Toast.FluentToastTests.FluentToast_Instance
  • ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Toast.FluentToastTests.FluentToast_StateChange_ViaClosed
  • ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Toast.FluentToastTests.FluentToast_Instance_Cancel
  • ❌[FAILED] Microsoft.FluentUI.AspNetCore.Components.Tests.Components.Toast.FluentToastTests.FluentToast_Instance_CloseWithResult

Details on your Workflow / Core Tests page.

@MarvinKlein1508 MarvinKlein1508 added this to the v5.0-RC2 milestone Mar 3, 2026
Copilot AI review requested due to automatic review settings March 18, 2026 15:09
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 FluentToastComponentBase shell.
  • Implemented FluentToast and FluentProgressToast plus 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.

Comment on lines +20 to +21
@ondialogtoggle="@Owner.OnToggleAsync"
@ondialogbeforetoggle="@Owner.OnToggleAsync">
Comment on lines +405 to +414
private dispatchDialogToggleEvent(type: string, oldState: string, newState: string) {
this.dispatchEvent(new CustomEvent(type, {
detail: {
oldState,
newState,
},
bubbles: true,
composed: true
}));
}
Comment on lines +76 to +78
if (!Equals(componentType, typeof(FluentToast)) && !Equals(componentType, typeof(FluentProgressToast)))
{
throw new ArgumentException($"{componentType.FullName} must be {nameof(FluentToast)} or {nameof(FluentProgressToast)}", nameof(componentType));
Comment on lines +17 to +18
aria-labelledby="@($"{Owner.Id}-title")"
aria-describedby="@($"{Owner.Id}-body")"
Comment on lines +40 to +47
<FluentLink Href="" @onclick="@(() => OnActionClickedAsync(primary: true))">
@Owner.QuickAction1
</FluentLink>
}

@if (!string.IsNullOrEmpty(Owner.QuickAction2))
{
<FluentLink Href="" OnClick="@(() => OnActionClickedAsync(primary: false))">

// Centers need translate(-50%, 0) applied permanently if they are open
if (position.includes('center')) {
this.dialog.style.transform = enterTo;
Comment on lines +80 to +91
#pragma warning restore CS1591, MA0051, MA0123, CA1822

internal static Color GetIntentColor(ToastIntent intent)
{
return intent switch
{
ToastIntent.Success => Color.Success,
ToastIntent.Warning => Color.Warning,
ToastIntent.Error => Color.Error,
_ => Color.Info,
};
}
Comment on lines +70 to +72
/// Gets or sets the timeout duration for the Toast in milliseconds.
/// </summary>
public int Timeout { get; set; } = 5000;
@@ -0,0 +1 @@

Comment on lines +155 to +157
<ItemGroup>
<Folder Include="Properties\" />
</ItemGroup>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants