feature request: add support to style error messages as an alert

[AlineNap]

Please make it possible to style the form field error messages as an alert. The following is needed for this:

• Add an icon
• Add the following tokens:
  • utrecht.form-field-error-message.column-gap
  • utrecht.form-field-error-message.icon.size
  • utrecht.form-field-error-message.border-radius
  • utrecht.form-field-error-message.border-color
  • utrecht.form-field-error-message.border-width
  • utrecht.form-field-error-message.icon.color

[AlineNap]

Toezegging en oplossing van Robbert, zie Slack:

Form field error message:

• PR bij Utrecht maken om 'm de features te geven van alert
• nieuwe versie van Utrecht component in gebruik nemen bij RHC
• Ik zou de Utrecht error message wrappen in Lux en de icon instellen op basis van danger/.../...

[AlineNap]

To discuss: utrecht.form-field-error-message.icon.color

In de alert wordt een token gebruikt om de kleur van het icoon te bepalen. Voor consistentie zou deze token ook toegevoegd moeten worden aan de form-field-error-message.

Ik twijfel aan deze token, bij de Rijkshuisstijl bestaan deze iconen uit twee kleuren, hoe werkt dat? En in andere gevallen krijgen de iconen de kleur van de tekst oftewel de token form-field-error-message.color, hoe leg je uit dat het danger icon de alert de kleur van alert.error.icon.color krijgt toegekend maar het sluit icoon alert.error.color?

Kunnen we de kleur niet direct op deze icoon zelf toepassen? De danger, info, success en andere feedback iconen krijgen dan van zichzelf al de juiste feedback kleur toegekend. Deze iconen zijn dan ook vreemd, ze wijken af van de rest. Of misschien is het een idee om apart component te maken voor de feedback iconen?

[AlineNap]

Deze heeft geen prioriteit om op te pakken als LUX.

Error message erboven is dus best practices en dat inspringen doen GOV.UK, utrecht en Amsterdam ook.

Wil graag nog even kijken waar dat vandaan komt en of we dat over willen nemen. Zou zonde zijn als we nu de huidige stijling erin zet als we toch ook die streep willen.

Jesse is hier akkoord mee.

[Robbert]

Nog even gereviewed, het klinkt nog steeds als een goed idee om de tokens toe te voegen, ook de icon.color

De component implementaties moeten aangepast worden om een icon slot te hebben, en (als er een icon is) dan moet er een div om de default slot (children) heen om te voorkomen dat er teveel columns ontstaan in de flexbox:

<div class="utrecht-form-field-error-message">
  <div class="utrecht-form-field-error-message__icon"> <!-- nieuw! -->
   <!-- icon.size en icon.color moeten alleen op dit divje toegepast worden, zodat icons in de content niet affected zijn -->
    <slot name="icon"/>
  </div>
 <!-- hier komt dus de column-gap .... -->
  <div class="utrecht-form-field-error-message__content"> <!-- nieuwe wrapper! -->
    <!-- ...en niet tussen de elementen van de content :D .... -->
    <slot />
  </div>
</div>

De implementatie lijkt wat dat betreft heel erg op de LinkListItem