[dev-v5] Add Toast

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/DebugPages/DebugToast.razor

@@ -1,32 +1,101 @@
-@page "/Toast/Debug/Service"
+@page "/Toast/Debug/Service"
 @inject IToastService ToastService
 
-<FluentButton OnClick="@OpenToastAsync"
-              Appearance="ButtonAppearance.Primary">
-  Open Toast
-</FluentButton>
+<FluentStack Orientation="Orientation.Vertical" VerticalGap="12">
+    <FluentStack>
+        <FluentButton OnClick="@OpenToastAsync" Appearance="ButtonAppearance.Primary">
+            Open confirmation toast
+        </FluentButton>
+        <FluentButton OnClick="@OpenDismissableToastAsync" Appearance="ButtonAppearance.Outline">
+            Open communication toast
+        </FluentButton>
+        <FluentButton OnClick="@OpenProgressToastAsync" Appearance="ButtonAppearance.Subtle">
+            Open progress toast
+        </FluentButton>
+        <FluentButton OnClick="@OpenProgressToast2Async" Appearance="ButtonAppearance.Subtle">
+            Open determinate progress toast
+        </FluentButton>
+    </FluentStack>
+
+    <div style="font-size: var(--fontSizeBase200); color: var(--colorNeutralForeground2);">
+        Last result: @_lastResult
+    </div>
+</FluentStack>
 
 @code
 {
-  private async Task OpenToastAsync()
-  {
-    var result = await ToastService.ShowToastAsync<DebugToastContent>(options =>
+    private string _lastResult = "(none)";
+
+    private async Task OpenDismissableToastAsync()
+    {
+        var result = await ToastService.ShowToastAsync<FluentToast>(options =>
+        {
+            options.Timeout = 70000;
+            options.Parameters[nameof(FluentToast.Intent)] = ToastIntent.Warning;
+            options.Parameters[nameof(FluentToast.Title)] = "Delete item?";
+            options.Parameters[nameof(FluentToast.Body)] = "This action can't be undone.";
+            options.Parameters[nameof(FluentToast.QuickAction1)] = "Delete";
+            options.Parameters[nameof(FluentToast.QuickAction2)] = "Cancel";
+            options.Parameters[nameof(FluentToast.ShowDismissButton)] = true;
+            options.OnStateChange = (e) =>
+            {
+                  Console.WriteLine($"State changed: {e.State}");
+              };
+        });
+
+        _lastResult = result.Cancelled ? "Confirmation: Cancelled" : "Confirmation: Ok";
+    }
+
+    private async Task OpenToastAsync()
     {
-      options.Parameters.Add(nameof(DebugToastContent.Name), "John");
+        var result = await ToastService.ShowToastAsync<FluentToast>(options =>
+        {
+            options.Timeout = 70000;
+            options.Parameters[nameof(FluentToast.Intent)] = ToastIntent.Info;
+            options.Parameters[nameof(FluentToast.Title)] = "Email sent";
+            options.Parameters[nameof(FluentToast.Body)] = "Your message was delivered.";
+            options.Parameters[nameof(FluentToast.Subtitle)] = "Just now";
+            options.Parameters[nameof(FluentToast.QuickAction1)] = "Undo";
+            options.Parameters[nameof(FluentToast.QuickAction2)] = "Dismiss";
+            options.Parameters[nameof(FluentToast.ShowDismissButton)] = false;
+        });
 
-      options.OnStateChange = (e) =>
-          {
-            Console.WriteLine($"State changed: {e.State}");
-          };
-    });
+        _lastResult = result.Cancelled ? "Communication: Cancelled" : "Communication: Ok";
+    }
 
-    if (result.Cancelled)
+    private async Task OpenProgressToastAsync()
     {
-      Console.WriteLine($"Toast Canceled: {result.Value}");
+        var result = await ToastService.ShowToastAsync<FluentProgressToast>(options =>
+        {
+            options.Timeout = 0;
+            options.Parameters[nameof(FluentProgressToast.Intent)] = ToastIntent.Info;
+            options.Parameters[nameof(FluentProgressToast.Title)] = "Uploading";
+            options.Parameters[nameof(FluentProgressToast.Body)] = "Please wait while your files are uploaded.";
+            options.Parameters[nameof(FluentProgressToast.Status)] = "Uploading 3 files...";
+            options.Parameters[nameof(FluentProgressToast.Indeterminate)] = true;
+            options.Parameters[nameof(FluentProgressToast.QuickAction1)] = "Hide";
+            options.Parameters[nameof(FluentProgressToast.QuickAction2)] = "Cancel";
+            options.Parameters[nameof(FluentProgressToast.ShowDismissButton)] = false;
+        });
+
+        _lastResult = result.Cancelled ? "Progress: Cancelled" : "Progress: Ok";
     }
-    else
+
+    private async Task OpenProgressToast2Async()
     {
-      Console.WriteLine($"Toast Confirmed: {result.Value}");
+        var result = await ToastService.ShowToastAsync<FluentProgressToast>(options =>
+        {
+            options.Timeout = 0;
+            options.Parameters[nameof(FluentProgressToast.Intent)] = ToastIntent.Info;
+            options.Parameters[nameof(FluentProgressToast.Title)] = "Uploading";
+            options.Parameters[nameof(FluentProgressToast.Body)] = "Please wait while your files are uploaded.";
+            options.Parameters[nameof(FluentProgressToast.Status)] = "Uploading 3 files...";
+            options.Parameters[nameof(FluentProgressToast.Indeterminate)] = false;
+            options.Parameters[nameof(FluentProgressToast.QuickAction1)] = "Hide";
+            options.Parameters[nameof(FluentProgressToast.QuickAction2)] = "Cancel";
+            options.Parameters[nameof(FluentProgressToast.ShowDismissButton)] = false;
+        });
+
+        _lastResult = result.Cancelled ? "Progress: Cancelled" : "Progress: Ok";
     }
-  }
 }

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/DebugPages/DebugToastContent.razor

@@ -1,11 +1,17 @@
-<div>
-  Toast Content
-</div>
-<div>
-  <FluentButton Appearance="ButtonAppearance.Primary"
-                OnClick="btnOK_Click">OK</FluentButton>
-  <FluentButton Appearance="ButtonAppearance.Default"
-                OnClick="btnCancel_Click">Cancel</FluentButton>
+<div class="fluent-toast">
+    <div class="fluent-toast-title-icon">
+        <!-- icon -->
+    </div>
+    <div id="toast-title-123" class="fluent-toast-title">Email sent</div>
+    <div class="fluent-toast-title-action">
+        <!-- close or undo button as link -->
+    </div>
+    <div id="toast-body-123" class="fluent-toast-body">This is a toast body</div>
+    <div class="fluent-toast-body-subtitle">Subtitle</div>
+    <div class="fluent-toast-footer">
+        <!-- action button 1 as link -->
+        <!-- action button 2 as link -->
+    </div>
 </div>
 
 @code {
@@ -26,7 +32,7 @@
   {
     await Toast.CloseAsync(ToastResult.Ok("Yes"));
   }
-  
+
   private async Task btnCancel_Click()
   {
     await Toast.CloseAsync(ToastResult.Cancel("No"));

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/Examples/FluentToastDefault.razor

@@ -0,0 +1 @@
+

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Toast/FluentToast.md

@@ -0,0 +1,25 @@
+---
+title: Toast
+route: /Toast
+category: 20|Components
+icon: FoodToast
+---
+
+# Toast
+
+The `FluentToast` component is a temporary notification that appears on the edge of the screen.
+
+To display the `FluentToast` component, you need to set the `Opened` parameter to `true`. 
+This parameter is bindable, so you can control the visibility of the `FluentToast` from your code.
+
+## Examples
+
+
+### Default
+
+{{ FluentToastDefault }}
+
+## API Documentation 
+
+{{ API Type=FluentToast }}
+