[dev-v5] [Dialog Service] Add the FluentDialog and services

[dvoituron]

[dev-v5] [Dialog Service] Add the FluentDialog and services

Dialog

FluentDialog is a window overlaid on either the primary window or another dialog window. Windows under a modal dialog are inert. That is, users cannot interact with content outside an active dialog window. Inert content outside an active dialog is typically visually obscured or dimmed so it is difficult to discern, and in some implementations, attempts to interact with the inert content cause the dialog to close

Usage

The simplest way is to use the DialogService to display a dialog box. By injecting this service, you have ShowDialogAsync methods at your disposal. You can pass the type of Dialog to be displayed and the options to be passed to that window.

Once the user closes the dialog window, the ShowDialogAsync method returns a DialogResult object containing the return data.

Any Blazor component can be used as a dialog type.

@inject IDialogService DialogService

var result = await DialogService.ShowDialogAsync<SimpleDialog>(options =>
{
    // Options
});

if (result.Cancelled == false)
{
    ...
}

The SimpleDialog window can inherit from the FluentDialogInstance class to have access to the DialogInstance property, which contains all parameters defined when calling ShowDialogAsync, as well as the CloseAsync and CancelAsync methods. Using CloseAsync you can pass a return object to the parent component. It is then retrieved in the DialogResult like in the example below.

@inherits FluentDialogInstance

<FluentDialogBody>
    Content dialog
</FluentDialogBody>

Data exchange between components

You can easily send data from your main component to the dialog box by using the options.Parameters.Add() method in the ShowDialogAsync method options.

Parameters is a dictionary that allows you to send any type of data to the dialog box. the key is the name of the property in the dialog box, and the value is the data to be sent.

PersonDetails John = new() { Age = "20" };

var result = await DialogService.ShowDialogAsync<CustomizedDialog>(options =>
{
    options.Parameters.Add(nameof(SimpleDialog.Name), "John");  // Simple type
    options.Parameters.Add(nameof(SimpleDialog.Person), John);  // Updatable object
});

MessageBox

A MessageBox is a dialog that is used to display information with a specific intent to the user. It uses the DialogService to display the dialog.

The DialogService is an injected service that can be used into any component. It exposes methods to show a dialog. For working with a MessageBox, the following methods are available:

• ShowSuccessAsync: Shows a dialog with a success (green) icon, a message and an OK button.

• ShowWarningAsync: Shows a dialog with a warning (orange) icon, a message and an OK button.

• ShowInfoAsync: Shows a dialog with an information (gray) icon, a message and an OK button.

• ShowErrorAsync: Shows a dialog with an error (red) icon, a message and an OK button.

• ShowConfirmationAsync: Shows a dialog with a confirmation icon, a message and a Yes/No buttons. This method returns a DialogResult object where Cancelled = false if Yes is pressed and Cancelled = true if No is pressed.

• ShowMessageBoxAsync: Shows a dialog with the specified options.

Live Demo

See the Dialog page,
and the MessageBox page.

Unit Tests

[github-actions]

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

[github-actions]

Summary - Unit Tests Code Coverage

Summary

Generated on:	01/08/2025 - 09:45:00
Coverage date:	01/08/2025 - 09:44:55
Parser:	Cobertura
Assemblies:	1
Classes:	57
Files:	67
Line coverage:	98.9% (1073 of 1084)
Covered lines:	1073
Uncovered lines:	11
Coverable lines:	1084
Total lines:	5065
Branch coverage:	91.7% (658 of 717)
Covered branches:	658
Total branches:	717
Method coverage:	Feature is only available for sponsors
Tag:	2298_12667988920

Coverage

Microsoft.FluentUI.AspNetCore.Components - 98.9%

Name	Line	Branch
Microsoft.FluentUI.AspNetCore.Components	98.9%	91.7%
Microsoft.FluentUI.AspNetCore.Components.Dialog.MessageBox.FluentMessageBox	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogEventArgs	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.DialogInstance	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptions	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooter	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsFooterAction	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogOptionsHeader	100%
Microsoft.FluentUI.AspNetCore.Components.DialogResult	100%	100%
Microsoft.FluentUI.AspNetCore.Components.DialogResult`1	100%
Microsoft.FluentUI.AspNetCore.Components.DialogService	98.8%	80%
Microsoft.FluentUI.AspNetCore.Components.DialogToggleEventArgs	100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentButton	100%	89.5%
Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentDialog	97.1%	91.3%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogBody	100%	96.4%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogInstance	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogProvider	100%	79.1%
Microsoft.FluentUI.AspNetCore.Components.FluentGrid	100%	90%
Microsoft.FluentUI.AspNetCore.Components.FluentGridItem	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1	100%	95.8%
Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1	100%	83.3%
Microsoft.FluentUI.AspNetCore.Components.FluentInputImmediateBase`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentJSModule	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLabel	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLayout	100%	71.4%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutHamburger	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLayoutItem	100%	89.2%
Microsoft.FluentUI.AspNetCore.Components.FluentListBase`1	93.3%	94.7%
Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerExtensions	100%
Microsoft.FluentUI.AspNetCore.Components.FluentLocalizerInternal	100%
Microsoft.FluentUI.AspNetCore.Components.FluentOption	91.6%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentServiceBase`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentServiceProviderException`1	100%
Microsoft.FluentUI.AspNetCore.Components.FluentText	100%	100%
Microsoft.FluentUI.AspNetCore.Components.FluentTextInput	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Icon	100%	91.1%
Microsoft.FluentUI.AspNetCore.Components.IconFromImage	100%
Microsoft.FluentUI.AspNetCore.Components.IconInfo	100%
Microsoft.FluentUI.AspNetCore.Components.IFluentLocalizer	100%	100%
Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1	60%
Microsoft.FluentUI.AspNetCore.Components.Localization.LanguageResource	100%	100%
Microsoft.FluentUI.AspNetCore.Components.MessageBoxOptions	100%
Microsoft.FluentUI.AspNetCore.Components.Migration.AppearanceExtensions	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Migration.FluentInputAppearanceExt ensions	83.3%	75%
Microsoft.FluentUI.AspNetCore.Components.ServiceProviderExtensions	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.AddTag	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Debounce	100%	83.3%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Identifier	100%	100%
Microsoft.FluentUI.AspNetCore.Components.Utilities.IdentifierContext	100%	75%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder	100%	92.8%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InternalDebounce.Dispatc herTimerExtensions	95.7%	75%
Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder	100%	100%
Microsoft.FluentUI.AspNetCore.Components.ZIndex	100%

[vnbaaij]

Approved once comments are resolved (if I approve now, it will get merged immediately)