Add validation css and FluentValidationSummary component (#572)

examples/Demo/Shared/Pages/BasicFormBuiltInComponents.razor

@@ -1,6 +1,4 @@
 @page "/basicform-built-in-components"
-@using Microsoft.Extensions.Logging
-@inject ILogger<BasicFormBuiltInComponents> Logger
 
 <h1>Starfleet Starship Database</h1>
 
@@ -8,7 +6,7 @@
 
 <EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
     <DataAnnotationsValidator />
-    <ValidationSummary />
+    <FluentValidationSummary />
 
     <p>
         <label>
@@ -66,7 +64,7 @@
 
     private void HandleValidSubmit()
     {
-        Logger.LogInformation("HandleValidSubmit called");
+        DemoLogger.WriteLine("HandleValidSubmit called");
 
         // Process the valid form
     }

examples/Demo/Shared/Pages/BasicFormFluentUIComponents.razor

@@ -1,6 +1,4 @@
 @page "/basicform-fluentui-components"
-@using Microsoft.Extensions.Logging
-@inject ILogger<BasicFormFluentUIComponents> Logger
 
 <h1>Starfleet Starship Database</h1>
 
@@ -8,7 +6,7 @@
 
 <EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
     <DataAnnotationsValidator />
-    <ValidationSummary />
+    <FluentValidationSummary />
 
     <div style="display:grid; gap: 5px;">
         <div><FluentTextField @bind-Value="starship.Identifier">Identifier:</FluentTextField></div>
@@ -24,27 +22,26 @@
         <div><FluentNumberField @bind-Value="starship.MaximumAccommodation"> Maximum Accommodation:</FluentNumberField></div>
         <div><FluentCheckbox @bind-Value="starship.IsValidatedDesign">Engineering Approval</FluentCheckbox></div>
         <div><label>Production Date:</label>
-            <FluentCalendar @bind-SelectedDates="prodDate" />
+            <FluentDatePicker @bind-Value="prodDate" />
         </div>
         <div><FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent">Submit</FluentButton></div>
-        <div><a href="http://www.startrek.com/">Star Trek</a>, ©1966-2019 CBS Studios, Inc. and <a href="https://www.paramount.com">Paramount Pictures</a></div>
+        <div><a href="http://www.startrek.com/">Star Trek</a>, ©1966-2023 CBS Studios, Inc. and <a href="https://www.paramount.com">Paramount Pictures</a></div>
     </div>
 </EditForm>
 
 @code {
-    List<DateOnly> prodDate = new();
+    DateTime? prodDate = DateTime.Now;
 
     protected override void OnInitialized()
     {
-        prodDate.Add(new DateOnly(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day));
-        starship.ProductionDate = prodDate[0];
+        starship.ProductionDate = new DateOnly(prodDate!.Value.Year, prodDate!.Value.Month, prodDate!.Value.Day);
     }
 
     private Starship starship = new();
 
     private void HandleValidSubmit()
     {
-        Logger.LogInformation("HandleValidSubmit called");
+        DemoLogger.WriteLine("HandleValidSubmit called");
 
         // Process the valid form
     }

src/Core/Components/Forms/FluentValidationSummary.razor

@@ -0,0 +1,21 @@
+@namespace Microsoft.Fast.Components.FluentUI
+@using Microsoft.AspNetCore.Components.Forms
+@inherits ValidationSummary
+
+@{ var validationMessages = Model is null ? FluentEditContext.GetValidationMessages() : FluentEditContext.GetValidationMessages(new FieldIdentifier(Model, string.Empty));
+
+    @if (validationMessages.Count() > 0)
+    {
+        <div @attributes="AdditionalAttributes">
+             <ul class="validation-errors">
+
+            @foreach (var error in validationMessages)
+            {
+                <li class="validation-mesage">@error</li>
+            }
+            </ul>
+        </div>
+    }
+}
+
+

src/Core/Components/Forms/FluentValidationSummary.razor.cs

@@ -0,0 +1,10 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace Microsoft.Fast.Components.FluentUI;
+
+public partial class FluentValidationSummary
+{
+    [CascadingParameter]
+    public EditContext FluentEditContext { get; set; } = default!;
+}

src/Core/wwwroot/css/reboot.css

@@ -315,6 +315,14 @@ textarea {
     border: 1px solid black;
 }
 
+.invalid::part(root) {
+    outline: 1px solid var(--error);
+}
+
+.invalid[role='checkbox']::part(control) {
+    outline: 1px solid var(--error);
+}
+
 button,
 select {
     text-transform: none;