Add CssClass property to ValidationSummary

src/Components/Web/src/Forms/ValidationSummary.cs

@@ -14,6 +14,8 @@ namespace Microsoft.AspNetCore.Components.Forms;
 /// </summary>
 public class ValidationSummary : ComponentBase, IDisposable
 {
+    private const string DefaultValidationErrorsClass = "validation-errors";
+
     private EditContext? _previousEditContext;
     private readonly EventHandler<ValidationStateChangedEventArgs> _validationStateChangedHandler;
 
@@ -30,6 +32,11 @@ public class ValidationSummary : ComponentBase, IDisposable
 
     [CascadingParameter] EditContext CurrentEditContext { get; set; } = default!;
 
+    /// <summary>
+    /// Gets or sets the computed CSS class to be appended to the <c>ul</c> element.
+    /// </summary>
+    protected string? CssClass { get; set; }
+
     /// <summary>`
     /// Constructs an instance of <see cref="ValidationSummary"/>.
     /// </summary>
@@ -54,6 +61,8 @@ protected override void OnParametersSet()
             CurrentEditContext.OnValidationStateChanged += _validationStateChangedHandler;
             _previousEditContext = CurrentEditContext;
         }
+
+        CssClass = AttributeUtilities.CombineClassNames(AdditionalAttributes, DefaultValidationErrorsClass);
     }
 
     /// <inheritdoc />
@@ -73,8 +82,8 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
                 first = false;
 
                 builder.OpenElement(0, "ul");
-                builder.AddAttribute(1, "class", "validation-errors");
-                builder.AddMultipleAttributes(2, AdditionalAttributes);
+                builder.AddMultipleAttributes(1, AdditionalAttributes);
+                builder.AddAttribute(2, "class", CssClass);
             }
 
             builder.OpenElement(3, "li");

src/Components/Web/src/PublicAPI.Unshipped.txt

@@ -1 +1,17 @@
 #nullable enable
+Microsoft.AspNetCore.Components.Forms.InputRadio<TValue>.Element.get -> Microsoft.AspNetCore.Components.ElementReference?
+Microsoft.AspNetCore.Components.Forms.InputRadio<TValue>.Element.set -> void
+Microsoft.AspNetCore.Components.Forms.ValidationSummary.CssClass.get -> string?
+Microsoft.AspNetCore.Components.Forms.ValidationSummary.CssClass.set -> void
+Microsoft.AspNetCore.Components.Routing.NavigationLock
+Microsoft.AspNetCore.Components.Routing.NavigationLock.ConfirmExternalNavigation.get -> bool
+Microsoft.AspNetCore.Components.Routing.NavigationLock.ConfirmExternalNavigation.set -> void
+Microsoft.AspNetCore.Components.Routing.NavigationLock.NavigationLock() -> void
+Microsoft.AspNetCore.Components.Routing.NavigationLock.OnBeforeInternalNavigation.get -> Microsoft.AspNetCore.Components.EventCallback<Microsoft.AspNetCore.Components.Routing.LocationChangingContext!>
+Microsoft.AspNetCore.Components.Routing.NavigationLock.OnBeforeInternalNavigation.set -> void
+Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<TItem>.SpacerElement.get -> string!
+Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize<TItem>.SpacerElement.set -> void
+Microsoft.AspNetCore.Components.Web.MouseEventArgs.MovementX.get -> double
+Microsoft.AspNetCore.Components.Web.MouseEventArgs.MovementX.set -> void
+Microsoft.AspNetCore.Components.Web.MouseEventArgs.MovementY.get -> double
+Microsoft.AspNetCore.Components.Web.MouseEventArgs.MovementY.set -> void

src/Components/test/E2ETest/Tests/FormsTest.cs

@@ -809,6 +809,18 @@ public void CanHaveModelLevelValidationErrors()
         Browser.Collection(logEntries, x => Assert.Equal("OnValidSubmit", x));
     }
 
+    [Fact]
+    public void ValidationSummaryContainsCustomCssClass()
+    {
+        var appElement = MountTypicalValidationComponent();
+
+        var submitButton = appElement.FindElement(By.CssSelector("button[type=submit]"));
+        submitButton.Click();
+
+        var validationSummaryElement = appElement.FindElement(By.ClassName("validation-errors"));
+        EnsureAttributeValue(validationSummaryElement, "class", "validation-summary validation-errors");
+    }
+
     private Func<string[]> CreateValidationMessagesAccessor(IWebElement appElement, string messageSelector = ".validation-message")
     {
         return () => appElement.FindElements(By.CssSelector(messageSelector))

src/Components/test/testassets/BasicTestApp/FormsTest/TypicalValidationComponent.razor

@@ -142,7 +142,7 @@
     <button type="submit">Submit</button>
 
     <p class="all-errors">
-        <ValidationSummary />
+        <ValidationSummary class="validation-summary" />
     </p>
 </EditForm>