[component]: Validation

[schaertim]

It was decided that validation should be implemented separately and reused in all components requiring it. A dedicated token set has to be provided first.

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=577-14513&t=uKEtTo9BEaPpKSV5-1

Requirements

• Variants: Error or success message, with or without icon (exclamation- or checkmark, see radiobutton list design)
• Is linked to the input field via aria-describedby (by the user)
• Can be re-used by all components that need validation

Tasks

Beta Give feedback

1. Add HTML/CSS component implementation
2. Create separate Documentation
3. Visual Regression Test
4. Accessibility Test
5. Add new token set for validation
6. Design review

[gfellerph]

@gfellerph add more information

[alizedebray]

• How should we handle the two different error message variants ?
• How do we know which variant applies to which component ?

[gfellerph]

Tokens:
post-validation-valid-fg
post-validation-invalid-fg

Variant 1:
<p class="validation invalid icon">Error</p>

Variant 2:
[type="checkbox"] ~ .validation { // Show icon }

Resolution:

• Variant to be used is inferred by type of component used (variant 2)

[myrta2302]

Tokens

post.validation.error #B200000
post.validation.success #107800
post.validation.font-size 14px
post.validation.text.padding.block.text 6px
post.validation.text.padding.inline.text 2px
post.validation.list.gap.inline 8/6/4px
post.validation.list.padding.block.text 1px
post.validation.list.icon.size 24/22/20px
post.validation.list.icon.padding 0/1/2px

[Vandapanda]

Added this one to the pattern discussion as its connected to the other issue I got

[myrta2302]

• Will the rest of the input types be designed
• Success and Error colors on Dark theme?

[oliverschuerch]

Let's concentrate on the components needed for PPNL:

• Text input
• Select
• Textarea
• Checkbox
• Radio Button
• Card Control (if it does not take to much time)