dotnet/aspnetcore

Pass css class in `<ValidationSummary />` to the generated `<ul>`

Closed

#43,860 opened on Sep 9, 2022

View on GitHubContributor guide
 (5 comments) (0 reactions) (0 assignees)C# (10,653 forks)batch import
area-blazorenhancementfeature-blazor-builtin-componentsgood first issuehelp wanted

Repository metrics

Stars
 (37,933 stars)
PR merge metrics
 (Avg merge 16d 9h) (258 merged PRs in 30d)

Description

Is there an existing issue for this?

  • I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

I am trying to pass additional css classes to the generated ul element. I am applying general formatting via the validation-errors css class, but I would like to be able to pass utility classes for spacing (i.e. pt-2 to add 8px of padding to the top of the validation summary).

Describe the solution you'd like

Update <ValidationSummary /> to pass unmatched attributes (via splatting) to the validation-errors element. In the case of class, it should append the passed in classes to the existing validation-errors class.

Additional context

For example:

<ValidationSummary class="pt-2" data-test="validation-errors" />

should result in:

<ul class="validation-errors pt-2"  data-test="validation-errors">
    <!-- Validation Errors -->
</ul>

Contributor guide

Research direction
The issue requests adding support for passing CSS classes and other attributes to the `<ul>` element in `<ValidationSummary>`. Examine the current implementation of `ValidationSummary` in the aspnetcore repository, likely in `src/Components/Web/src/Forms/ValidationSummary.cs`. The solution involves using `@attributes` splatting to pass unmatched attributes to the root element, and merging the `class` attribute with the existing `validation errors` class. Check the Blazor documentation for attribute splatting and refer to similar components like `ErrorBoundary` for pattern. Ensure backward compatibility and add tests.
Tech stack
csharp
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Mostly clear
Prerequisites
Basic knowledge of BlazorC# component creation
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60