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

[ChristopherHaws]

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>

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[SteveSandersonMS]

Thanks for the suggestion. I think we'd achieve this by adding a new parameter, CssClass, to the ValidationSummary component and then render that into the class attribute. This is the same pattern used in some of the other components.

We'd take a PR for this, assuming it also contains E2E tests.

[ChristopherHaws]

@SteveSandersonMS I would be happy to pick up this issue. I do have a question however. From what I can see in the existing components, CssClass is usually a "get only" property that combines the class attribute from AdditionalAttributes using AttributeUtilities.CombineClassNames. The only exception I found to this is NavLink, which updates the CssClass property OnParametersSet to include the class attribute from AdditionalAttributes.

In other words, from what I can see in the existing components, class is always set by passing the class attribute via AdditionalAttributes. I can certainly add a CssClass property and append it to the existing class in the component and that will work, but I wanted to double check since it doesn't seem like that's how any of the other components work.

Thanks!