Implement TitleTypo in DialogParameters. Fix #4126

Related Work Items: #412, #4126

Author: vnbaaij

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -3769,6 +3769,12 @@
             Gets or sets the title of the dialog.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.DialogParameters.TitleTypo">
+            <summary>
+            Gets or sets the <see cref="T:Microsoft.FluentUI.AspNetCore.Components.Typography"/> style for the title text.
+            Defaults to <see cref="F:Microsoft.FluentUI.AspNetCore.Components.Typography.PaneHeader"/>.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.DialogParameters.Modal">
             <summary>
             Determines if the dialog is modal. Defaults to true.

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<SimpleDialog>(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}");
         }
     }
-}
+}

src/Core/Components/Dialog/FluentDialogHeader.razor

@@ -11,7 +11,7 @@
         <div style="width: 100%;" tabindex="@TabIndex">
             @if (@ChildContent == null && Dialog.Instance?.Parameters?.ShowTitle == true)
             {
-                <FluentLabel Typo="Typography.PaneHeader">@Dialog.Instance?.Parameters?.Title</FluentLabel>
+                <FluentLabel Typo="@(Dialog.Instance?.Parameters?.TitleTypo ?? Typography.PaneHeader)">@Dialog.Instance?.Parameters?.Title</FluentLabel>
             }
             else
             {

src/Core/Components/Dialog/FluentDialogProvider.razor.cs

@@ -91,7 +91,7 @@ private async Task<IDialogReference> ShowDialogAsync(IDialogReference dialogRefe
             dialogReference.Instance = dialog;
 
             _internalDialogContext.References.Add(dialogReference);
-            InvokeAsync(StateHasChanged);
+            await InvokeAsync(StateHasChanged);
 
             return dialogReference;
         });

src/Core/Components/Dialog/Parameters/DialogParameters.cs

@@ -39,6 +39,12 @@ public virtual HorizontalAlignment Alignment
     /// </summary>
     public string? Title { get; set; }
 
+    /// <summary>
+    /// Gets or sets the <see cref="Typography"/> style for the title text.
+    /// Defaults to <see cref="Typography.PaneHeader"/>.
+    /// </summary>
+    public Typography TitleTypo { get; set; } = Typography.PaneHeader;
+
     /// <summary>
     /// Determines if the dialog is modal. Defaults to true.
     /// Obscures the area around the dialog.

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; }

tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_ChangeHeaderTypo.verified.razor.html

@@ -0,0 +1,22 @@
+
+<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: 200px;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" b-dsxskpj5rr="" blazor:elementreference="">
+  <div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
+    <div style="width: 100%;" tabindex="0">
+      <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title as H2</h4>
+    </div>
+    <fluent-button type="button" id="xxx" appearance="stealth" blazor:onclick="8" aria-label="Close" b-x1200685t0="" blazor:elementreference="xxx">
+      <svg style="width: 20px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="11" blazor:onclick="12">
+        <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
+      </svg>
+    </fluent-button>
+    <fluent-tooltip anchor="xxx" delay="300" aria-label="Tooltip" position="bottom" role="tooltip" blazor:ontooltipdismiss="9" blazor:elementreference="xxx">
+      <div style="max-width: 500px; text-wrap: wrap;">Close</div>
+    </fluent-tooltip>
+  </div>
+  <div class="stack-horizontal fluent-dialog-footer" style="justify-content: end; align-items: end; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
+    <fluent-button type="button" appearance="accent" blazor:onclick="10" b-x1200685t0="" blazor:elementreference="xxx">Close</fluent-button>
+  </div>
+  <div class="fluent-dialog-body">
+    My body
+  </div>
+</fluent-dialog>

tests/Core/Dialog/FluentDialogServiceTests.razor

@@ -36,6 +36,29 @@
         cut.Verify();
     }
 
+	[Fact]
+	public async Task FluentDialogService_ChangeHeaderTypo()
+	{
+		Services.AddFluentUIComponents();
+
+		// Arrange
+		var cut = Render(@<FluentDialogProvider />);
+		var dialogService = Services.GetRequiredService<IDialogService>();
+
+		// Act
+		var dialog = await dialogService.ShowDialogAsync<TestDialogHeaderFooter>(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()
     {