From 6df5cbbea10ba54567d456f34c224cd87b4fd44e Mon Sep 17 00:00:00 2001
From: Vincent Baaij
Date: Mon, 11 Sep 2023 12:45:58 +0200
Subject: [PATCH] Add FluentDialogHeader, FluentDialogFooter and related
updates
---
.../Microsoft.Fast.Components.FluentUI.xml | 84 +++++++++++++++-
.../Demo/Shared/Pages/Dialog/DialogPage.razor | 54 +++++++++++
.../Pages/Dialog/Examples/DialogDefault.razor | 14 ++-
.../Examples/DialogServiceExample.razor | 4 +-
.../Demo/Shared/Pages/DialogServicePage.razor | 2 +-
src/Core/Components/Dialog/FluentDialog.razor | 58 ++++-------
.../Components/Dialog/FluentDialog.razor.cs | 45 ++++++++-
.../Components/Dialog/FluentDialog.razor.css | 25 +----
.../Dialog/FluentDialogFooter.razor | 27 ++++++
.../Dialog/FluentDialogFooter.razor.cs | 95 +++++++++++++++++++
.../Dialog/FluentDialogFooter.razor.css | 15 +++
.../Dialog/FluentDialogHeader.razor | 14 +++
.../Dialog/FluentDialogHeader.razor.cs | 29 ++++++
.../Dialog/FluentDialogHeader.razor.css | 6 ++
14 files changed, 395 insertions(+), 77 deletions(-)
create mode 100644 src/Core/Components/Dialog/FluentDialogFooter.razor
create mode 100644 src/Core/Components/Dialog/FluentDialogFooter.razor.cs
create mode 100644 src/Core/Components/Dialog/FluentDialogFooter.razor.css
create mode 100644 src/Core/Components/Dialog/FluentDialogHeader.razor
create mode 100644 src/Core/Components/Dialog/FluentDialogHeader.razor.cs
create mode 100644 src/Core/Components/Dialog/FluentDialogHeader.razor.css
diff --git a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
index b7b5f78cbd..02f2b1576a 100644
--- a/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
+++ b/examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
@@ -1157,6 +1157,11 @@
+
+
+ Gets or sets the reference to the item that holds this cell's values
+
+
Gets or sets the cell type. See
@@ -1179,6 +1184,11 @@
Gets or sets the owning component
+
+
+ Gets or sets the reference to the item that holds this row's values
+
+
Gets or sets the index of this row
@@ -1742,6 +1752,11 @@
Gets or sets if the dialog is hidden
+
+
+ The event callback invoked when change.
+
+
Indicates that the dialog should trap focus.
@@ -1769,7 +1784,17 @@
- Used when not calling the to show a dialog
+ Used when not calling the to show a dialog.
+
+
+
+
+ Content to render in header.
+
+
+
+
+ Content to render in footer.
@@ -1782,6 +1807,63 @@
Closes the dialog
+
+
+ Gets or sets the dialog position:
+ left (full height), right (full height)
+ or screen middle (using Width and Height properties).
+
+
+
+
+ Text to display for the primary action.
+
+
+
+
+ When true, primary action's button is enabled.
+
+
+
+
+ The event callback invoked when primary button is clicked
+
+
+
+
+ Text to display for the secondary action.
+
+
+
+
+ When true, secondary action's button is enabled.
+
+
+
+
+ The event callback invoked when secondary button is clicked
+
+
+
+
+ Gets whether the primary button is displayed or not. Depends on PrimaryAction having a value.
+
+
+
+
+ Gets whether the secondary button is displayed or not. Depends on SecondaryAction having a value.
+
+
+
+
+ Title of the dialog
+
+
+
+
+ When true, shows the dismiss button in the header.
+
+
Constructs an instance of .
diff --git a/examples/Demo/Shared/Pages/Dialog/DialogPage.razor b/examples/Demo/Shared/Pages/Dialog/DialogPage.razor
index bb6899528c..429641e92f 100644
--- a/examples/Demo/Shared/Pages/Dialog/DialogPage.razor
+++ b/examples/Demo/Shared/Pages/Dialog/DialogPage.razor
@@ -118,3 +118,57 @@
+
Dialog header and footer
+
The dialog header and footer can be changed by using the FluentDialog's HeaderTemplate and FooterTemplate parameters.
+
+ The default implementation uses the FluentDialogHeader and FluentDialogFooter components (see documentation below).
+ You can use the content of these components as the base for your own implementation:
+
- See the following pages for examples on how to use the DialogService with thedifferent types of dialogs.
+ See the following pages for examples on how to use the DialogService with the different types of dialogs.