[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
- [x] Add HTML/CSS component implementation
- [x] Create separate Documentation
- [x] Visual Regression Test
- [x] Accessibility Test
- [x] Add new token set for validation
- [ ] 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)

[Vandapanda]

Tokenised and implemented in some examples. Link for Input Link for Group