Validation: New design for error messages connected to user inputs

[mrosvik]

Description

As a user I want to see that my input in a table contains an error when I leave the field, so that I can correct it.

The new design is made to work better with inputfields inside tables. Since we want to keep the validation-messages consistent and standarized, we should change the look for the whole solutions, not only for tables.

Tables: Issue 7750

Design:

https://www.figma.com/file/Pvti3aRcOwH0k5Z7DrLznk/Arbeidsomr%C3%A5de%3A-Altinn-Studio-APPS?node-id=2545%3A50628

Development tasks

• Remove box around message, make text red.
• Add ! exclamation mark into the cell that has error.

Test

Definition of done

• Documentation (docs.altinn.studio) is updated (if relevant)
  • Technical documentation
  • User documentation
• QA
• Manual test is complete (if relevant)
• Automated test is implemented (if relevant)
• All tasks in this userstory are closed (i.e. remaining tasks are moved to other user stories or marked obsolete)

[olemartinorg]

Since this is almost done and will soon be tested, I'll add that I discussed this issue with @xmrsa today. They have noted an issue with long validation error messages belonging to short input fields. A prime example is the app in #8369 and #8254, where a fairly short input field can get a very long error message:

If this change does not better that situation, we should open a new issue for what to do with long error messages when there's room for them. In the mentioned app, the field has a grid (because it doesn't look good having a full-width field when your just supposed to type in a few digits) - but there is lots of room for the error message.

[rvessb]

Så langt vi kan se blir ikke radioknapper og sjekkbokser merket med rødt, på samme måte som rene input-felter. Da forsvinner feilmeldingsteksten når denne ikke lenger har den røde bakgrunnen som ble brukt tidligere.

[olemartinorg]

Hmm, ja, det er et godt poeng. Jeg ble nysgjerrig på hvordan det ser ut nå, og fikk dette:

Jeg tar det opp og finner ut hvordan vi skal gjøre det med veien videre, men jeg regner med det må på plass et nytt issue om vi ikke har noen allerede - det drunker i alle fall fort her i kommentarfeltet på en lukket sak. Oppdaterer her når jeg finner ut. Jeg og @mrosvik tar opp denne tråden igjen uke 37.

[olemartinorg]

@rvessb @xmrsa @benteSSB Det ble uke 39 istedenfor - men nå har jeg og @mrosvik diskutert denne saken. Vi holder for tiden på med å lage nye sjekkbokser (og radioknapper kommer vel også som en naturlig del etterpå) i designsystemet. Det åpenbare er helt klart å gjøre sjekkboksen/radioknappen rød når man ikke har krysset av noe, og i eksempelet over hadde det løst det meste.

Vi har også et annet scenario - når du f.eks. har 4 sjekkbokser og det bare er naturlig å krysse av i 1-2 av dem er det unaturlig at alle blir markert med rødt (det ville jo kanskje indikert at det er feil at du ikke har krysset av i alle), så vi prøver å se om vi finner et alternativ for steder hvor man har flere sjekkbokser. Mulig vi bare går for at alle sjekkboksene blir røde her også, da andre alternativer (f.eks. en rød vertikal strek på siden av sjekkboksene) innfører et nytt konsept brukerne ikke er kjent med fra andre steder i Altinn.

Uansett, vi anser denne saken som løst - så tar vi gjenstående utfordringer med oss videre under oppgaven for sjekkbokser i designsystemet og deretter implementasjonen av disse i frontend.