Dialog enhancements (add dialog type, fix panel width setable), add M…

…axHeight to DemoSection (#740) * Add Dialog custom header/footer example Address #739 Change ShowDialog to allow horizontal alignment setting * Add DialogType enum and set this in dialog parameters Use width parameter in panel example * Fix review comments Add MaxHeight to DemoSection * REmove files no longer needed * Cleanup for new alternative * Make DialogType internal * Revert "Make DialogType internal" This reverts commit e80e451. * Remove more HeaderTemplate/FooterTemplate references
microsoft · Sep 20, 2023 · 2370b84 · 2370b84
1 parent 72336c0
commit 2370b84
Show file tree

Hide file tree

Showing 16 changed files with 208 additions and 130 deletions.
diff --git a/examples/Demo/Shared/Components/CodeSnippet.razor b/examples/Demo/Shared/Components/CodeSnippet.razor
@@ -1 +1 @@
-<pre class="snippet"><code class="@Language" @ref="codeElement" style="@Style">@ChildContent</code></pre>
+<pre class="snippet" style="@Style --hljs-theme-background: rgb(243, 243, 243);"><code class="@Language" @ref="codeElement">@ChildContent</code></pre>
diff --git a/examples/Demo/Shared/Components/CodeSnippet.razor.css b/examples/Demo/Shared/Components/CodeSnippet.razor.css
@@ -2,6 +2,7 @@
     margin-bottom: 0.5rem;
     border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
     border-radius: calc(var(--control-corner-radius) * 1px);
+    overflow-y: auto;
 }
 
 ::deep .hljs {

diff --git a/examples/Demo/Shared/Components/DemoSection.razor b/examples/Demo/Shared/Components/DemoSection.razor
@@ -47,12 +47,12 @@
                 }
                 else
                 {
-                    label = Path.GetFileNameWithoutExtension(pair.Key);
+                    label = Path.GetFileName(pair.Key);
                     id = "tab-" + Regex.Replace(label, "[#|/|\\|$|*|^]", "").ToLower() + "-" + @_ariaId;
                 }
                 <FluentTab Id="@id" Label="@label" fixed>
                     <Content>
-                        <CodeSnippet Language="@TabLanguageClass(tab)">@pair.Value</CodeSnippet>
+                        <CodeSnippet Style="@(!string.IsNullOrEmpty(MaxHeight) ? $"max-height: {MaxHeight};" : null)" Language="@TabLanguageClass(tab)">@pair.Value</CodeSnippet>
                     </Content>
                 </FluentTab>
             }

diff --git a/examples/Demo/Shared/Components/DemoSection.razor.cs b/examples/Demo/Shared/Components/DemoSection.razor.cs
@@ -56,7 +56,7 @@ public partial class DemoSection : ComponentBase
     public string[]? AdditionalFiles { get; set; }
 
     [Parameter]
-    public bool New { get; set; }
+    public string MaxHeight { get; set; } = string.Empty;
 
     /// <summary>
     /// Show download links for the example sources

diff --git a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
@@ -1823,16 +1823,6 @@
             Used when not calling the <see cref="T:Microsoft.Fast.Components.FluentUI.DialogService" /> to show a dialog.
             </summary>
         </member>
-        <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialog.HeaderTemplate">
-            <summary>
-            Content to render in header.
-            </summary>
-        </member>
-        <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialog.FooterTemplate">
-            <summary>
-            Content to render in footer.
-            </summary>
-        </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.FluentDialog.OnDialogResult">
             <summary>
             The event callback invoked to return the dialog result.
@@ -1925,17 +1915,20 @@
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.TrapFocus">
             <summary>
-            Indicates that the dialog should trap focus.
+            Indicates if dialog should trap focus.
+            Defaults to true.
             </summary>
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.ShowTitle">
             <summary>
-            When true, shows the title in the header.
+            Show the title in the header.
+            Defaults to true.
             </summary>
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.ShowDismiss">
             <summary>
-            When true, shows the dismiss button in the header.
+            Show the dismiss button in the header.
+            Defaults to true.
             </summary>
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.PrimaryAction">
@@ -1989,6 +1982,11 @@
             The value that labels an interactive element.
             </summary>
         </member>
+        <member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.DialogType">
+            <summary>
+            The type of dialog.
+            </summary>
+        </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.DialogParameters.ShowPrimaryAction">
             <summary>
             Gets whether the primary button is displayed or not. Depends on PrimaryAction having a value.
@@ -2248,12 +2246,6 @@
             <param name="component">The type of the component to show</param>
             <param name="parameters"><see cref="T:Microsoft.Fast.Components.FluentUI.SplashScreenContent"/> that holds the content to display</param>
         </member>
-        <member name="M:Microsoft.Fast.Components.FluentUI.DialogService.ShowDialogAsync``2(Microsoft.Fast.Components.FluentUI.DialogParameters{``1})">
-            <summary>
-            Shows a dialog with the component type as the body
-            </summary>
-            <param name="parameters">Parameters to pass to component being displayed.</param>
-        </member>
         <member name="M:Microsoft.Fast.Components.FluentUI.DialogService.ShowSuccessAsync(System.String,System.String)">
             <summary>
             Shows a success message box. Does not have a callback function.
@@ -2324,6 +2316,12 @@
             <param name="dialogComponent">Type of component to display.</param>
             <param name="parameters">Parameters to pass to component being displayed.</param>
         </member>
+        <member name="M:Microsoft.Fast.Components.FluentUI.DialogService.ShowDialogAsync``2(Microsoft.Fast.Components.FluentUI.DialogParameters{``1})">
+            <summary>
+            Shows a dialog with the component type as the body
+            </summary>
+            <param name="parameters">Parameters to pass to component being displayed.</param>
+        </member>
         <member name="M:Microsoft.Fast.Components.FluentUI.DialogService.ShowDialogAsync``1(System.Type,``0,Microsoft.Fast.Components.FluentUI.DialogParameters)">
             <summary>
             Shows a dialog with the component type as the body,
@@ -3506,7 +3504,8 @@
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.ListComponentBase`1.OptionValue">
             <summary>
-            Function used to determine which text to return for the selected item.
+            Function used to determine which value to return for the selected item.
+            Only for <see cref="T:Microsoft.Fast.Components.FluentUI.FluentListbox`1"/> and <see cref="T:Microsoft.Fast.Components.FluentUI.FluentSelect`1"/> components.
             </summary>
         </member>
         <member name="P:Microsoft.Fast.Components.FluentUI.ListComponentBase`1.OptionDisabled">
@@ -9203,6 +9202,31 @@
             A sticky header row.
             </summary>
         </member>
+        <member name="T:Microsoft.Fast.Components.FluentUI.DialogType">
+            <summary>
+            The type of <see cref="T:Microsoft.Fast.Components.FluentUI.FluentDialog"/>.
+            </summary>
+        </member>
+        <member name="F:Microsoft.Fast.Components.FluentUI.DialogType.Dialog">
+            <summary>
+            A normal dialog.
+            </summary>
+        </member>
+        <member name="F:Microsoft.Fast.Components.FluentUI.DialogType.MessageBox">
+            <summary>
+            A dialog shown as a message box.
+            </summary>
+        </member>
+        <member name="F:Microsoft.Fast.Components.FluentUI.DialogType.Panel">
+            <summary>
+            A dialog shown as a panel.
+            </summary>
+        </member>
+        <member name="F:Microsoft.Fast.Components.FluentUI.DialogType.SplashScreen">
+            <summary>
+            A dialog shown as a splash screen.
+            </summary>  
+        </member>
         <member name="T:Microsoft.Fast.Components.FluentUI.DividerRole">
             <summary>
             Defines the role of the divider.

diff --git a/examples/Demo/Shared/Pages/Dialog/DialogPage.razor b/examples/Demo/Shared/Pages/Dialog/DialogPage.razor
@@ -56,15 +56,15 @@
 </p>
 <CodeSnippet>
     &lt;main&gt;
-    &lt;nav&gt;
-    :
-    &lt;/nav&gt;
-    &lt;div class=&quot;content&quot;&gt;
-    &lt;article id=&quot;article&quot;&gt;
-    @@Body
-    &lt;/article&gt;
-    &lt;/div&gt;
-    &lt;FluentDialogProvider /&gt;
+        &lt;nav&gt;
+        :
+        &lt;/nav&gt;
+        &lt;div class=&quot;content&quot;&gt;
+            &lt;article id=&quot;article&quot;&gt;
+                @@Body
+            &lt;/article&gt;
+        &lt;/div&gt;
+        &lt;FluentDialogProvider /&gt;
     &lt;/main&gt;
 </CodeSnippet>
 
@@ -76,27 +76,27 @@
 <p>
     Interaction with parent dialog can be made by injecting FluentDialog as Cascading Parameter. See <code>SimpleDialog.razor</code> for more details.
 </p>
-<DemoSection Title="DialogService with IDialogReference" Component="@typeof(DialogServiceExample)" AdditionalFiles="@(new[] {"SimpleDialog.razor"})">
+<DemoSection Title="DialogService with IDialogReference" MaxHeight="500px" Component="@typeof(DialogServiceExample)" AdditionalFiles="@(new[] {"SimpleDialog.razor"})">
     <Description>
         This example shows how to use async methods to show a dialog and get the result back from it. 
     </Description>
 </DemoSection>
 
-<DemoSection Title="DialogService with EventCallback" Component="@typeof(DialogServiceCallbackExample)" AdditionalFiles="@(new[] {"SimpleDialog.razor"})">
+<DemoSection Title="DialogService with EventCallback" MaxHeight="500px" Component="@typeof(DialogServiceCallbackExample)" AdditionalFiles="@(new[] {"SimpleDialog.razor"})">
     <Description>
         This example shows how to use an <code>EventCallback</code> parameter to get data back from the dialog.
     </Description>
 </DemoSection>
 
 
-<DemoSection Title="Dialog without using DialogService" Component="@typeof(DialogDefault)" CollocatedFiles="@(new[] {"css"})">
+<DemoSection Title="Dialog without using DialogService" MaxHeight="500px" Component="@typeof(DialogDefault)" CollocatedFiles="@(new[] {"css"})">
     <Description>
         This example shows a simple dialog created by specifying it's content manually (see the Razor tab). Because of this, the dialog is not automatically styled.
         A CSS file has been added to set the width, heigth and padding of the dialog.
     </Description>
 </DemoSection>
 
-<DemoSection Title="SimpleDialog as component" Component="@typeof(DialogSimpleDialog)">
+<DemoSection Title="SimpleDialog as component" MaxHeight="500px" Component="@typeof(DialogSimpleDialog)">
     <Description>
         For a components to be useable in a dialog, it just needs to inherit from <code>IDialogContentComponent&lt;T&gt;</code>.
         They can still be used as a normal component as well. This example shows the <code>SimpleDialog</code> component from the

diff --git a/examples/Demo/Shared/Pages/Dialog/Examples/DialogServiceExample.razor b/examples/Demo/Shared/Pages/Dialog/Examples/DialogServiceExample.razor
@@ -41,9 +41,9 @@
         DialogParameters<SimplePerson> parameters = new()
         {
             Title = $"Hello {simplePerson.Firstname}",
-            PrimaryAction = "",
+            PrimaryAction = "Yes",
             PrimaryActionEnabled = false,
-            SecondaryAction = "",
+            SecondaryAction = "No",
             Width = "500px",
             Height = "500px",
             Content = simplePerson,

diff --git a/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelAsync.razor.cs b/examples/Demo/Shared/Pages/Panel/Examples/DialogPanelAsync.razor.cs
@@ -45,7 +45,7 @@ private async Task OpenPanelLeftAsync()
                 ShowDismiss = false,
                 PrimaryAction = "Maybe",
                 SecondaryAction = "Cancel",
-                Width = "300px",
+                Width = "500px",
             };
             _dialog = await DialogService.ShowPanelAsync<SimplePanel, SimplePerson>(parameters);
             DialogResult result = await _dialog.Result;

diff --git a/src/Core/Components/Dialog/FluentDialog.razor b/src/Core/Components/Dialog/FluentDialog.razor
@@ -1,4 +1,5 @@
 @namespace Microsoft.Fast.Components.FluentUI
+@using Microsoft.AspNetCore.Components.Rendering
 @inherits FluentComponentBase
 
 <CascadingValue Value="this" IsFixed="true">
@@ -14,15 +15,7 @@
                    aria-label=@(_parameters.AriaLabel ?? AriaLabel)
                    @attributes=@AdditionalAttributes>
         <FluentStack Orientation="Orientation.Vertical" Class="fluent-dialog-content" Style="height:100%;">
-            @if (HeaderTemplate is not null)
-            {
-                @HeaderTemplate
-            }
-            else if (_parameters.ShowTitle && (_parameters.Title != null || _parameters.ShowDismiss))
-            {
-                <FluentDialogHeader Title="@_parameters.Title" ShowDismiss="@_parameters.ShowDismiss" />
-            }
-
+            @_renderDialogHeader
             <div class="fluent-dialog-body" nofooter="@(!HasButtons)" style="@(_parameters.DialogBodyStyle ?? null)">
                 @if (Instance is null)
                 {
@@ -33,19 +26,31 @@
                     <DynamicComponent Type="@Instance.ContentType" Parameters="Instance.GetParameterDictionary()" />
                 }
             </div>
-            @if (FooterTemplate is not null)
-            {
-                @FooterTemplate
-            }
-            else if (HasButtons)
-            {
-                 <FluentDialogFooter Alignment="@_parameters.Alignment"
-                                    PrimaryAction="@_parameters.PrimaryAction"
-                                    PrimaryActionEnabled="@_parameters.PrimaryActionEnabled"
-                                    SecondaryAction="@_parameters.SecondaryAction"
-                                    SecondaryActionEnabled="@_parameters.SecondaryActionEnabled"/>
-
-            }
+            @_renderDialogFooter
         </FluentStack>
     </fluent-dialog>
-</CascadingValue>
+</CascadingValue>
+
+@code {
+
+    private void RenderHeaderContent(RenderTreeBuilder __builder)
+    {
+        @if (_parameters.ShowTitle && (_parameters.Title != null || _parameters.ShowDismiss))
+        {
+            <FluentDialogHeader Title="@_parameters.Title" ShowDismiss="@_parameters.ShowDismiss" />
+        }
+    }
+
+    private void RenderFooterContent(RenderTreeBuilder __builder)
+    {
+        @if (HasButtons)
+        {
+            <FluentDialogFooter Alignment="@_parameters.Alignment"
+                                PrimaryAction="@_parameters.PrimaryAction"
+                                PrimaryActionEnabled="@_parameters.PrimaryActionEnabled"
+                                SecondaryAction="@_parameters.SecondaryAction"
+                                SecondaryActionEnabled="@_parameters.SecondaryActionEnabled" />
+
+        }
+    }
+}
diff --git a/src/Core/Components/Dialog/FluentDialog.razor.cs b/src/Core/Components/Dialog/FluentDialog.razor.cs
@@ -6,11 +6,15 @@ namespace Microsoft.Fast.Components.FluentUI;
 
 public partial class FluentDialog : FluentComponentBase //, IDisposable
 {
-    private const string DEFAULT_WIDTH = "500px";
+    private const string DEFAULT_DIALOG_WIDTH = "500px";
+    private const string DEFAULT_PANEL_WIDTH = "340px";
     private const string DEFAULT_HEIGHT = "unset";
     private DialogParameters _parameters = default!;
     private bool _hidden;
 
+    private readonly RenderFragment _renderDialogHeader;
+    private readonly RenderFragment _renderDialogFooter;
+
     [CascadingParameter]
     private InternalDialogContext? DialogContext { get; set; } = default!;
 
@@ -80,18 +84,6 @@ public bool Hidden
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
-    /// <summary>
-    /// Content to render in header.
-    /// </summary>
-    [Parameter]
-    public RenderFragment? HeaderTemplate { get; set; }
-
-    /// <summary>
-    /// Content to render in footer.
-    /// </summary>
-    [Parameter]
-    public RenderFragment? FooterTemplate { get; set; }
-
     /// <summary>
     /// The event callback invoked to return the dialog result.
     /// </summary>
@@ -100,22 +92,24 @@ public bool Hidden
 
     protected string? ClassValue => new CssBuilder(Class)
         .AddClass("fluent-dialog-main")
-        .AddClass("right", () => _parameters.Alignment == HorizontalAlignment.Right)
-        .AddClass("left", () => _parameters.Alignment == HorizontalAlignment.Left)
+        .AddClass("right", () => _parameters.DialogType == DialogType.Panel && _parameters.Alignment == HorizontalAlignment.Right)
+        .AddClass("left", () => _parameters.DialogType == DialogType.Panel && _parameters.Alignment == HorizontalAlignment.Left)
         .Build();
 
     protected string? StyleValue => new StyleBuilder(Style)
         .AddStyle("position", "absolute")
         .AddStyle("top", "50%", () => _parameters.Alignment == HorizontalAlignment.Center)
         .AddStyle("left", "50%", () => _parameters.Alignment == HorizontalAlignment.Center)
-        .AddStyle("--dialog-width", _parameters.Width ?? DEFAULT_WIDTH, () => _parameters.Alignment == HorizontalAlignment.Center)
+        .AddStyle("--dialog-width", _parameters.Width ?? DEFAULT_DIALOG_WIDTH, () => _parameters.Alignment == HorizontalAlignment.Center)
+        .AddStyle("--dialog-width", _parameters.Width ?? DEFAULT_PANEL_WIDTH, () => _parameters.DialogType == DialogType.Panel)
         .AddStyle("--dialog-height", _parameters.Height ?? DEFAULT_HEIGHT, () => _parameters.Alignment == HorizontalAlignment.Center)
         .Build();
 
     [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(DialogEventArgs))]
     public FluentDialog()
     {
-
+        _renderDialogHeader = RenderHeaderContent;
+        _renderDialogFooter = RenderFooterContent;
     }
 
     protected override void OnInitialized()

diff --git a/src/Core/Components/Dialog/FluentDialogFooter.razor b/src/Core/Components/Dialog/FluentDialogFooter.razor
@@ -1,9 +1,9 @@
 @namespace Microsoft.Fast.Components.FluentUI
 @inherits FluentComponentBase
 
-<div class="@(Alignment == HorizontalAlignment.Center ? "fluent-dialog-footer-normal" : "fluent-dialog-footer-bottom")">
+<div class="fluent-dialog-footer">
     <FluentStack Orientation="Orientation.Horizontal"
-                 HorizontalAlignment="@(Alignment == HorizontalAlignment.Center ? HorizontalAlignment.Right : HorizontalAlignment.Left)">
+                 HorizontalAlignment="@(Dialog!.Instance.Parameters.Alignment == HorizontalAlignment.Center ? HorizontalAlignment.Right : HorizontalAlignment.Left)">
         @if (ShowPrimaryAction)
         {
             <FluentButton title="@PrimaryAction"

diff --git a/src/Core/Components/Dialog/FluentDialogFooter.razor.css b/src/Core/Components/Dialog/FluentDialogFooter.razor.css
@@ -1,13 +1,4 @@
-.fluent-dialog-footer-bottom {
-    font-size: 14px;
-    font-weight: normal;
-    margin: 20px;
-    width: calc(100% - 40px);
-    position: fixed;
-    bottom: 0px;
-}
-
-.fluent-dialog-footer-normal {
+.fluent-dialog-footer {
     font-size: 14px;
     font-weight: normal;
     margin: 20px;