[Wizard] Add the ability to invoke OnFinish

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -10565,6 +10565,13 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.OnFinishHandlerAsync(Microsoft.AspNetCore.Components.Web.MouseEventArgs)">
             <summary />
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.FinishAsync(System.Boolean)">
+            <summary>
+            Optionally validate and invoke the <see cref="P:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.OnFinish"/> handler.
+            </summary>
+            <param name="validateEditContexts">Validate the EditContext. Default is false.</param>
+            <returns></returns>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentWizard.GoToStepAsync(System.Int32,System.Boolean)">
             <summary>
             Navigate to the specified step, with or without validate the current EditContexts.

examples/Demo/Shared/Pages/Wizard/Examples/WizardCustomized.razor

@@ -15,6 +15,7 @@
               Id="customized-wizard"
               @bind-Value="@Value"
               StepTitleHiddenWhen="@GridItemHidden.XsAndDown"
+              OnFinish="OnFinish"
               Height="300px">
     <Steps>
         <FluentWizardStep OnChange="@OnStepChange">
@@ -86,6 +87,10 @@
                     <FluentButton OnClick="@(() => MyWizard.GoToStepAsync(Value + 1))" Appearance="Appearance.Accent">Next</FluentButton>
                     <FluentButton OnClick="@(() => MyWizard.GoToStepAsync(lastStepIndex))" Appearance="Appearance.Accent">Go to last page</FluentButton>
                 }
+                else
+                {
+                    <FluentButton OnClick="@(() => MyWizard.FinishAsync())" Appearance="Appearance.Accent">Finish</FluentButton>
+                }
             </div>
         }
     </ButtonTemplate>
@@ -100,4 +105,10 @@
     {
         DemoLogger.WriteLine($"Go to step {e.TargetLabel} (#{e.TargetIndex})");
     }
+
+    async Task OnFinish()
+    {
+        DemoLogger.WriteLine($"Customized wizard finish clicked.");
+        await DialogService.ShowInfoAsync("The wizard has finished.", "Finished Clicked");
+    }
 }

src/Core/Components/Wizard/FluentWizard.razor.cs

@@ -234,13 +234,26 @@ protected virtual async Task<FluentWizardStepChangeEventArgs> OnStepChangeHandle
     /// <summary />
     protected virtual async Task OnFinishHandlerAsync(MouseEventArgs e)
     {
-        // Validate any form edit contexts
-        var allEditContextsAreValid = _steps[Value].ValidateEditContexts();
-        if (!allEditContextsAreValid)
+        await this.FinishAsync(true);
+    }
+
+    /// <summary>
+    /// Optionally validate and invoke the <see cref="OnFinish"/> handler.
+    /// </summary>
+    /// <param name="validateEditContexts">Validate the EditContext. Default is false.</param>
+    /// <returns></returns>
+    public async Task FinishAsync(bool validateEditContexts = false)
+    {
+        if (validateEditContexts)
         {
-            // Invoke the 'OnInvalidSubmit' handlers for the edit forms.
-            await _steps[Value].InvokeOnInValidSubmitForEditFormsAsync();
-            return;
+            // Validate any form edit contexts
+            var allEditContextsAreValid = _steps[Value].ValidateEditContexts();
+            if (!allEditContextsAreValid)
+            {
+                // Invoke the 'OnInvalidSubmit' handlers for the edit forms.
+                await _steps[Value].InvokeOnInValidSubmitForEditFormsAsync();
+                return;
+            }
         }
 
         // Invoke the 'OnValidSubmit' handlers for the edit forms.

tests/Core/Wizard/FluentWizardTests.FluentWizard_CustomizedButtonTemplate_EditForm_EditContextIsInValid_OnFinish.verified.razor.html

@@ -0,0 +1,47 @@
+
+<div style="width: 100%; height: 400px;" class="fluent-wizard" position="left" b-l81u9o5gjc="">
+  <ol b-l81u9o5gjc="">
+    <li status="previous" blazor:onclick="1" style="height: 100%;" b-a5o5s1yurv="">
+      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
+        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="4" blazor:onclick="5">
+          <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5c.3.3.77.3 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z"></path>
+        </svg>
+      </div>
+      <div hidden-when="xs" b-a5o5s1yurv="">
+        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
+        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
+      </div>
+    </li>
+    <li status="current" blazor:onclick="2" style="height: 100%;" b-a5o5s1yurv="">
+      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
+        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="6" blazor:onclick="7">
+          <path d="M2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
+        </svg>
+      </div>
+      <div hidden-when="xs" b-a5o5s1yurv="">
+        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
+        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
+      </div>
+    </li>
+  </ol>
+  <div class="fluent-wizard-content" b-l81u9o5gjc="">
+    <div style="display: none;" b-l81u9o5gjc="">
+      <form blazor:onsubmit="8">
+        <fluent-number-field class="valid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="5" appearance="outline" blazor:onchange="10" blazor:oninput="11" blazor:elementreference=""></fluent-number-field>
+      </form>
+    </div>
+    <div style="" b-l81u9o5gjc="">
+      <form blazor:onsubmit="9">
+        <div>
+          <ul class="validation-errors">
+            <li class="validation-message">The field NumberBetween1and10 must be between 1 and 10.</li>
+          </ul>
+        </div>
+        <fluent-number-field class="invalid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="15" appearance="outline" blazor:onchange="12" blazor:oninput="13" aria-invalid="true" blazor:elementreference=""></fluent-number-field>
+      </form>
+    </div>
+  </div>
+  <div class="fluent-wizard-buttons" b-l81u9o5gjc="">
+    <fluent-button type="button" appearance="accent" blazor:onclick="14" b-x1200685t0="" blazor:elementreference="">Finish</fluent-button>
+  </div>
+</div>

tests/Core/Wizard/FluentWizardTests.FluentWizard_CustomizedButtonTemplate_EditForm_EditContextIsInValid_OnNext.verified.razor.html

@@ -0,0 +1,47 @@
+
+<div style="width: 100%; height: 400px;" class="fluent-wizard" position="left" b-l81u9o5gjc="">
+  <ol b-l81u9o5gjc="">
+    <li status="current" blazor:onclick="1" style="height: 100%;" b-a5o5s1yurv="">
+      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
+        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="4" blazor:onclick="5">
+          <path d="M2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
+        </svg>
+      </div>
+      <div hidden-when="xs" b-a5o5s1yurv="">
+        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
+        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
+      </div>
+    </li>
+    <li status="next" blazor:onclick="2" style="height: 100%;" b-a5o5s1yurv="">
+      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
+        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="6" blazor:onclick="7">
+          <path d="M12 3.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zM2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
+        </svg>
+      </div>
+      <div hidden-when="xs" b-a5o5s1yurv="">
+        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
+        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
+      </div>
+    </li>
+  </ol>
+  <div class="fluent-wizard-content" b-l81u9o5gjc="">
+    <div style="" b-l81u9o5gjc="">
+      <form blazor:onsubmit="8">
+        <div>
+          <ul class="validation-errors">
+            <li class="validation-message">The field NumberBetween1and10 must be between 1 and 10.</li>
+          </ul>
+        </div>
+        <fluent-number-field class="invalid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="15" appearance="outline" blazor:onchange="10" blazor:oninput="11" aria-invalid="true" blazor:elementreference=""></fluent-number-field>
+      </form>
+    </div>
+    <div style="display: none;" b-l81u9o5gjc="">
+      <form blazor:onsubmit="9">
+        <fluent-number-field class="valid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="15" appearance="outline" blazor:onchange="12" blazor:oninput="13" blazor:elementreference="xxx"></fluent-number-field>
+      </form>
+    </div>
+  </div>
+  <div class="fluent-wizard-buttons" b-l81u9o5gjc="">
+    <fluent-button type="button" appearance="accent" blazor:onclick="3" b-x1200685t0="" blazor:elementreference="">Next</fluent-button>
+  </div>
+</div>

tests/Core/Wizard/FluentWizardTests.FluentWizard_CustomizedButtonTemplate_EditForm_EditContextIsValid.verified.razor.html

@@ -0,0 +1,42 @@
+
+<div style="width: 100%; height: 400px;" class="fluent-wizard" position="left" b-l81u9o5gjc="">
+  <ol b-l81u9o5gjc="">
+    <li status="previous" blazor:onclick="1" style="height: 100%;" b-a5o5s1yurv="">
+      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
+        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="4" blazor:onclick="5">
+          <path d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5c.3.3.77.3 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z"></path>
+        </svg>
+      </div>
+      <div hidden-when="xs" b-a5o5s1yurv="">
+        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
+        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
+      </div>
+    </li>
+    <li status="current" blazor:onclick="2" style="height: 100%;" b-a5o5s1yurv="">
+      <div class="fluent-wizard-icon" b-a5o5s1yurv="">
+        <svg style="width: 24px; fill: var(--accent-fill-rest); width: var(--fluent-wizard-circle-size);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onkeydown="6" blazor:onclick="7">
+          <path d="M2 12a10 10 0 1120 0 10 10 0 01-20 0z"></path>
+        </svg>
+      </div>
+      <div hidden-when="xs" b-a5o5s1yurv="">
+        <p typo="body" class="fluent-typography fluent-wizard-title" b-1nnnfjehkp=""></p>
+        <p typo="body" class="fluent-typography fluent-wizard-summary" b-1nnnfjehkp=""></p>
+      </div>
+    </li>
+  </ol>
+  <div class="fluent-wizard-content" b-l81u9o5gjc="">
+    <div style="display: none;" b-l81u9o5gjc="">
+      <form blazor:onsubmit="8">
+        <fluent-number-field class="valid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="5" appearance="outline" blazor:onchange="10" blazor:oninput="11" blazor:elementreference=""></fluent-number-field>
+      </form>
+    </div>
+    <div style="" b-l81u9o5gjc="">
+      <form blazor:onsubmit="9">
+        <fluent-number-field class="valid" maxlength="14" minlength="1" size="20" step="1" id="xxx" value="7" appearance="outline" blazor:onchange="12" blazor:oninput="13" blazor:elementreference=""></fluent-number-field>
+      </form>
+    </div>
+  </div>
+  <div class="fluent-wizard-buttons" b-l81u9o5gjc="">
+    <fluent-button type="button" appearance="accent" blazor:onclick="14" b-x1200685t0="" blazor:elementreference="xxx">Finish</fluent-button>
+  </div>
+</div>