diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 4da62955fa..9ab262e217 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -3769,6 +3769,12 @@ Gets or sets the title of the dialog. + + + Gets or sets the style for the title text. + Defaults to . + + Determines if the dialog is modal. Defaults to true. diff --git a/examples/Demo/Shared/Pages/Dialog/Examples/DialogServiceExample.razor b/examples/Demo/Shared/Pages/Dialog/Examples/DialogServiceExample.razor index 76ef95ed43..b2e8f1eab2 100644 --- a/examples/Demo/Shared/Pages/Dialog/Examples/DialogServiceExample.razor +++ b/examples/Demo/Shared/Pages/Dialog/Examples/DialogServiceExample.razor @@ -41,19 +41,19 @@ DialogParameters parameters = new() { Title = $"Hello {simplePerson.Firstname}", + TitleTypo = Typography.H2, PrimaryAction = "Yes", PrimaryActionEnabled = false, SecondaryAction = "No", Width = "500px", TrapFocus = _trapFocus, Modal = _modal, - PreventScroll = true + PreventScroll = true }; IDialogReference dialog = await DialogService.ShowDialogAsync(simplePerson, parameters); DialogResult? result = await dialog.Result; - if (result.Data is not null) { SimplePerson? simplePerson = result.Data as SimplePerson; @@ -64,4 +64,4 @@ DemoLogger.WriteLine($"Dialog closed - Canceled: {result.Cancelled}"); } } -} \ No newline at end of file +} diff --git a/src/Core/Components/Dialog/FluentDialogHeader.razor b/src/Core/Components/Dialog/FluentDialogHeader.razor index 4f6def82ff..c6fe952b84 100644 --- a/src/Core/Components/Dialog/FluentDialogHeader.razor +++ b/src/Core/Components/Dialog/FluentDialogHeader.razor @@ -11,7 +11,7 @@
@if (@ChildContent == null && Dialog.Instance?.Parameters?.ShowTitle == true) { - @Dialog.Instance?.Parameters?.Title + @Dialog.Instance?.Parameters?.Title } else { diff --git a/src/Core/Components/Dialog/FluentDialogProvider.razor.cs b/src/Core/Components/Dialog/FluentDialogProvider.razor.cs index a9b2170ed0..6718d4813f 100644 --- a/src/Core/Components/Dialog/FluentDialogProvider.razor.cs +++ b/src/Core/Components/Dialog/FluentDialogProvider.razor.cs @@ -91,7 +91,7 @@ private async Task ShowDialogAsync(IDialogReference dialogRefe dialogReference.Instance = dialog; _internalDialogContext.References.Add(dialogReference); - InvokeAsync(StateHasChanged); + await InvokeAsync(StateHasChanged); return dialogReference; }); diff --git a/src/Core/Components/Dialog/Parameters/DialogParameters.cs b/src/Core/Components/Dialog/Parameters/DialogParameters.cs index 048f2d523d..d2573c4518 100644 --- a/src/Core/Components/Dialog/Parameters/DialogParameters.cs +++ b/src/Core/Components/Dialog/Parameters/DialogParameters.cs @@ -39,6 +39,12 @@ public virtual HorizontalAlignment Alignment ///
public string? Title { get; set; } + /// + /// Gets or sets the style for the title text. + /// Defaults to . + /// + public Typography TitleTypo { get; set; } = Typography.PaneHeader; + /// /// Determines if the dialog is modal. Defaults to true. /// Obscures the area around the dialog. diff --git a/src/Core/Components/Dialog/Parameters/IDialogParameters.cs b/src/Core/Components/Dialog/Parameters/IDialogParameters.cs index 675d339988..591c6c312b 100644 --- a/src/Core/Components/Dialog/Parameters/IDialogParameters.cs +++ b/src/Core/Components/Dialog/Parameters/IDialogParameters.cs @@ -11,6 +11,7 @@ public interface IDialogParameters string Id { get; set; } HorizontalAlignment Alignment { get; set; } string? Title { get; set; } + Typography TitleTypo { get; set; } bool? Modal { get; set; } bool? TrapFocus { get; set; } bool ShowTitle { get; set; } diff --git a/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_ChangeHeaderTypo.verified.razor.html b/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_ChangeHeaderTypo.verified.razor.html new file mode 100644 index 0000000000..aa48728f13 --- /dev/null +++ b/tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_ChangeHeaderTypo.verified.razor.html @@ -0,0 +1,22 @@ + + +
+
+

Sample title as H2

+
+ + + + +
Close
+ +
+
+ Close +
+
+ My body +
+ \ No newline at end of file diff --git a/tests/Core/Dialog/FluentDialogServiceTests.razor b/tests/Core/Dialog/FluentDialogServiceTests.razor index aaed62907f..17f6c3eb6e 100644 --- a/tests/Core/Dialog/FluentDialogServiceTests.razor +++ b/tests/Core/Dialog/FluentDialogServiceTests.razor @@ -36,6 +36,29 @@ cut.Verify(); } + [Fact] + public async Task FluentDialogService_ChangeHeaderTypo() + { + Services.AddFluentUIComponents(); + + // Arrange + var cut = Render(@); + var dialogService = Services.GetRequiredService(); + + // Act + var dialog = await dialogService.ShowDialogAsync(new DialogParameters() + { + Height = "200px", + Title = "Sample title as H2", + TitleTypo = Typography.H2, + PreventDismissOnOverlayClick = true, + PreventScroll = true, + }); + + // Assert + cut.Verify(); + } + [Fact] public async Task FluentDialogService_HeightUnset() {