feat: allows showing a dialog by only providing a RenderFragment. (#1496

) * feat: allows showing a dialog by only providing a RenderFragment. * Fix PR comments. * Added a unit test for the dialog service to show a dialog based on a RenderFragment. * Updated the RenderFragment dialog example to demonstrate data binding. --------- Co-authored-by: Vincent Baaij <[email protected]>
microsoft · Feb 13, 2024 · 144c17e · 144c17e
1 parent b2578b2
commit 144c17e
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 2 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -2780,6 +2780,9 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowPanelAsync``1(Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
             <inheritdoc cref="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.ShowPanelAsync``1(Microsoft.FluentUI.AspNetCore.Components.DialogParameters)"/>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowDialogAsync(Microsoft.AspNetCore.Components.RenderFragment,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
+            <inheritdoc cref="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.ShowDialogAsync(Microsoft.AspNetCore.Components.RenderFragment,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)"/>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowDialog``2(Microsoft.FluentUI.AspNetCore.Components.DialogParameters{``1})">
             <inheritdoc cref="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.ShowDialog``2(Microsoft.FluentUI.AspNetCore.Components.DialogParameters{``1})"/>
         </member>
@@ -3052,6 +3055,14 @@
             <typeparam name="TDialog">Type of component to display.</typeparam>
             <param name="parameters">Parameters to configure the dialog component.</param>
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.ShowDialogAsync(Microsoft.AspNetCore.Components.RenderFragment,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
+            <summary>
+            Shows a dialog with the the RenderFragment as the body
+            </summary>
+            <param name="renderFragment">Body of the dialog</param>
+            <param name="dialogParameters">Parameters to configure the dialog component.</param>
+            <returns></returns>
+        </member>
         <member name="E:Microsoft.FluentUI.AspNetCore.Components.IDialogService.OnShow">
             <summary>
             An event that will be invoked when showing a dialog with a custom component

diff --git a/examples/Demo/Shared/Pages/Dialog/DialogPage.razor b/examples/Demo/Shared/Pages/Dialog/DialogPage.razor
@@ -150,6 +150,12 @@
     </Description>
 </DemoSection>
 
+<DemoSection Title="RenderFragment as dialog" MaxHeight="500px" Component="@typeof(RenderFragmentAsDialog)">
+    <Description>
+        This example shows how to display a dialog using only a <code>RenderFragment</code>.
+    </Description>
+</DemoSection>
+
 <h2 id="documentation">Documentation</h2>
 
 <ApiDocumentation Component="typeof(FluentDialogProvider)" />

diff --git a/examples/Demo/Shared/Pages/Dialog/Examples/RenderFragmentAsDialog.razor b/examples/Demo/Shared/Pages/Dialog/Examples/RenderFragmentAsDialog.razor
@@ -0,0 +1,23 @@
+@inject IDialogService _dialogService
+
+<FluentButton OnClick="OpenDialog" Appearance="Appearance.Accent">Open dialog</FluentButton>
+
+@code {
+    private async Task OpenDialog()
+    {
+        var text = string.Empty;
+        var dialogInstance = await _dialogService.ShowDialogAsync(@<div>
+        <FluentTextField @bind-Value=text Label="Enter a value:" />
+    </div>
+    , new DialogParameters
+    {
+        Title = "Render Fragment Content",
+    });
+
+        var result = await dialogInstance.Result;
+        if (!result.Cancelled)
+        {
+            await _dialogService.ShowSuccessAsync($"You entered: {text}", "Success");
+        }
+    }
+}
diff --git a/src/Core/Components/Dialog/ContentComponents/RenderFragmentDialog.razor b/src/Core/Components/Dialog/ContentComponents/RenderFragmentDialog.razor
@@ -0,0 +1,8 @@
+@implements IDialogContentComponent<RenderFragment>
+
+@Content
+
+@code {
+    [Parameter, EditorRequired]
+    public required RenderFragment Content { get; set; }
+}
diff --git a/src/Core/Components/Dialog/Services/DialogService-Dialog.cs b/src/Core/Components/Dialog/Services/DialogService-Dialog.cs
@@ -1,3 +1,6 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.FluentUI.AspNetCore.Components.Components.Dialog.ContentComponents;
+
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 public partial class DialogService
@@ -63,6 +66,12 @@ public async Task<IDialogReference> ShowPanelAsync<TDialog>(DialogParameters par
         return await ShowDialogAsync<object>(typeof(TDialog), default!, FixPanelParameters(parameters));
     }
 
+    /// <inheritdoc cref="IDialogService.ShowDialogAsync(RenderFragment, DialogParameters)"/>
+    public async Task<IDialogReference> ShowDialogAsync(RenderFragment renderFragment, DialogParameters dialogParameters)
+    {
+        return await ShowDialogAsync(typeof(RenderFragmentDialog), renderFragment, dialogParameters);
+    }
+
     private DialogParameters FixPanelParameters(DialogParameters value)
     {
         value.DialogType = DialogType.Panel;

diff --git a/src/Core/Components/Dialog/Services/IDialogService-Dialog.cs b/src/Core/Components/Dialog/Services/IDialogService-Dialog.cs
@@ -1,3 +1,5 @@
+using Microsoft.AspNetCore.Components;
+
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 public partial interface IDialogService
@@ -67,6 +69,14 @@ Task<IDialogReference> ShowPanelAsync<TDialog>(object data, DialogParameters par
     Task<IDialogReference> ShowPanelAsync<TDialog>(DialogParameters parameters)
         where TDialog : IDialogContentComponent;
 
+    /// <summary>
+    /// Shows a dialog with the the RenderFragment as the body
+    /// </summary>
+    /// <param name="renderFragment">Body of the dialog</param>
+    /// <param name="dialogParameters">Parameters to configure the dialog component.</param>
+    /// <returns></returns>
+    Task<IDialogReference> ShowDialogAsync(RenderFragment renderFragment, DialogParameters dialogParameters);
+
     #region Obsolete
 
     [Obsolete("Use ShowDialogAsync(object, DialogParameters) instead.")]

diff --git a/tests/Core/Dialog/FluentDialogServiceTests.FluentDialog_RenderFragment.verified.razor.html b/tests/Core/Dialog/FluentDialogServiceTests.FluentDialog_RenderFragment.verified.razor.html
@@ -0,0 +1,20 @@
+
+<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: unset;" 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%;">
+      <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Render Fragment Example</h4>
+    </div>
+    <fluent-button type="button" aria-label="Close" title="Close" appearance="stealth" blazor:onclick="2" b-x1200685t0="" blazor:elementreference="xxx">
+      <svg style="width: 16px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="5">
+        <path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
+      </svg>
+    </fluent-button>
+  </div>
+  <div>
+    This is from a render fragment
+  </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" aria-label="OK" title="OK" appearance="accent" blazor:onclick="3" b-x1200685t0="" blazor:elementreference="xxx">OK</fluent-button>
+    <fluent-button type="button" aria-label="Cancel" title="Cancel" appearance="neutral" blazor:onclick="4" b-x1200685t0="" blazor:elementreference="xxx">Cancel</fluent-button>
+  </div>
+</fluent-dialog>
diff --git a/tests/Core/Dialog/FluentDialogServiceTests.razor b/tests/Core/Dialog/FluentDialogServiceTests.razor
@@ -1,4 +1,4 @@
-@using Xunit;
+@using Xunit;
 @inherits TestContext
 @code
 {
@@ -44,4 +44,28 @@
         // Assert
         cut.Verify();
     }
-}
+
+    [Fact]
+    public async Task FluentDialog_RenderFragment()
+    {
+        Services.AddFluentUIComponents();
+
+        // Arrange
+        var cut = Render(@<FluentDialogProvider />);
+        var dialogService = Services.GetRequiredService<IDialogService>();
+
+        // Act
+        var dialog = await dialogService.ShowDialogAsync(@<div>
+This is from a render fragment
+            </div>,
+            new DialogParameters()
+            {
+                Title = "Render Fragment Example",
+                PreventDismissOnOverlayClick = true,
+                PreventScroll = true,
+            });
+
+        // Assert
+        cut.Verify();
+    }
+}