Validation feedback with hint & single radio/check - Githubissues

swisspost / design-system

The Swiss Post Design System - for a consistent and accessible user experience across the web platform.

https://design-system.post.ch

Apache License 2.0

126 stars 14 forks source link

Validation feedback with hint & single radio/check #4064

Open myrta2302 opened 1 week ago

myrta2302 commented 1 week ago

Components that incorpoprate 'hint':

The spacing between feedback message and hint is not clearly defined.
Hint and feedback message font sizes (post-device-10 /post-device-9) do not adapt the same at different breakpoints. Is this on purpose?

Components that incoroporate one radio/check:

What should be the spacing between component and feedback message for the case of e.g. a single checkbox. https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=4876-28268&node-type=instance&m=dev

Relevant PR preview -> https://preview-3824--swisspost-design-system-next.netlify.app/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs

gfellerph commented 6 days ago

Resolution:

Hint text and error message can be displayed at the same time
Validation and hint texts should be the same size on all device sizes
Hint comes first, then validation messages

Design: Set up behavior and provide an example.

sandra-post commented 13 hours ago

After short research (see Figma) and re-discussion with Rouven, following decision change:

~~Hint comes first, then validation messages~~
Validation messages comes first, then hint

Now adjusting all input components which have validation so design and behaviour is provided correctly.