FluentToast wip

Author: vnbaaij

examples/FluentUI.Demo.Shared/Pages/Toast/Examples/ToastProgressToasts.razor

@@ -2,7 +2,7 @@
 
 <FluentButton Appearance=Appearance.Neutral @onclick="@(() => ToastManager.ShowToast<ProgressToast>(_progressToastParameters1, settings => { settings.Timeout = 150; }))">Progress toast example 1</FluentButton>
 
-
+<FluentButton Appearance="Appearance.Accent" @onclick=UpdateProgress>Update</FluentButton>
 
 @code {
     private ProgressToastParameters _progressToastParameters1 = default!;
@@ -14,15 +14,25 @@
             {
                 Intent = ToastIntent.Upload,
                 Title = "Uploading file",
-                Details = "This may tkae a while.",
+                Details = "This may take a while.",
                 PrimaryAction = new ToastAction() { Text = "Cancel", Href = "#", OnClick = Clicked },
                 SecondaryAction = new ToastAction() { Text = "Pause", Href = "#", OnClick = Clicked },
-                Progress = 60
+                Progress = "0"
         };
     }
 
     private void Clicked()
     {
         DemoLogger.WriteLine("Clicked toast action");
     }
+
+    private void UpdateProgress()
+    {
+        for (int i = 0; i < 100; i++)
+        {
+            _progressToastParameters1.Progress = i.ToString();
+            StateHasChanged();
+            Thread.Sleep(100);
+        };
+    }
 }

examples/FluentUI.Demo.Shared/wwwroot/sources/ToastProgressToasts.razor.txt

@@ -2,7 +2,7 @@
 
 <FluentButton Appearance=Appearance.Neutral @onclick="@(() => ToastManager.ShowToast<ProgressToast>(_progressToastParameters1, settings => { settings.Timeout = 150; }))">Progress toast example 1</FluentButton>
 
-
+<FluentButton Appearance="Appearance.Accent" @onclick=UpdateProgress>Update</FluentButton>
 
 @code {
     private ProgressToastParameters _progressToastParameters1 = default!;
@@ -14,15 +14,25 @@
             {
                 Intent = ToastIntent.Upload,
                 Title = "Uploading file",
-                Details = "This may tkae a while.",
+                Details = "This may take a while.",
                 PrimaryAction = new ToastAction() { Text = "Cancel", Href = "#", OnClick = Clicked },
                 SecondaryAction = new ToastAction() { Text = "Pause", Href = "#", OnClick = Clicked },
-                Progress = 60
+                Progress = "0"
         };
     }
 
     private void Clicked()
     {
         DemoLogger.WriteLine("Clicked toast action");
     }
+
+    private void UpdateProgress()
+    {
+        for (int i = 0; i < 100; i++)
+        {
+            _progressToastParameters1.Progress = i.ToString();
+            StateHasChanged();
+            Thread.Sleep(100);
+        };
+    }
 }

src/Microsoft.Fast.Components.FluentUI/Components/Toast/ContentComponents/ProgressToast.razor

@@ -35,7 +35,8 @@
         <div class="fluent-toast-details">@Details</div>
     }
 
-    @Progress
+    <FluentProgress Class="fluent-toast-progressbar" Min="0" Max="100" @bind-Value="@Progress"></FluentProgress>
+    <div class="fluent-toast-progressbar-percentage">@Progress%</div>
 
 
     @if (PrimaryAction is not null || SecondaryAction is not null)

src/Microsoft.Fast.Components.FluentUI/Components/Toast/ContentComponents/ProgressToast.razor.cs

@@ -50,18 +50,24 @@ public partial class ProgressToast
     public ToastAction? SecondaryAction { get; set; }
 
     [Parameter]
-    public FluentProgress? Progress { get; set; } = default!;
+    public string? Progress { get; set; }
+
+    [Parameter]
+    public EventCallback<string?> ProgressChanged { get; set; }
 
     protected override void OnInitialized()
     {
         _toastId = Toast.Id;
         Settings = Toast.Settings;
+
     }
 
     protected override void OnParametersSet()
     {
         if (EndContentType == ToastEndContentType.Action)
             throw new InvalidOperationException("EndContentType.Action is not supported for a CommunicationToast  ");
+
+
     }
 
     /// <summary>

src/Microsoft.Fast.Components.FluentUI/Components/Toast/Parameters/ProgressToastParameters.cs

@@ -9,6 +9,7 @@ public class ProgressToastParameters : ToastParameters
     private string? _details;
     private ToastAction? _primaryAction;
     private ToastAction? _secondaryAction;
+    private string? _progress;
 
     public ToastIntent Intent
     {
@@ -82,5 +83,23 @@ public ToastAction? SecondaryAction
         }
     }
 
-    public int Progress { get; set; }
+    public string? Progress
+    {
+        get => _progress;
+        set
+        {
+            _progress = value;
+            if (!string.IsNullOrEmpty(_progress))
+            {
+                if (!Parameters.ContainsKey(nameof(Progress)))
+                {
+                    Parameters.Add(nameof(Progress), _progress);
+                }
+                else
+                {
+                    Parameters[nameof(Progress)] = _progress;
+                }
+            }
+        }
+    }
 }