[Form Field] Text Input

[rwittenberns]

Omschrijving

Aanpak

We pakken utrecht textbox

Definition of done

Component

• Component is beschikbaar in de index
• Design tokens worden gebruikt

Storybook

• Playground story
• States en properties stories
• Korte beschrijving van het component
  • Wat doet het
  • Basis van het component (bijv Utrecht)
  • Aanpassingen en/of uitbreidingen
  • Relatie met andere componenten (bijv. Form field label en Form field)

Tests

• Het component rendert
• Aanpassingen en/of uitbreidingen werken (zie ook Testing components)
• Visual regression test (door LUX)

Links

LUX

• PR met form tokens
• NLDS Figma met lux stijling

Utrecht focus border
Het is nu nog niet mogelijk om doormiddel van tokens een dikkere focus-border toe te voegen. Voorstel: dit accepteren en wachten op release met deze fix in utrecht code die LUX devs gaan doen op utrecht code.

[rwittenberns]

Oplossen:
Focus border (width) token wordt niet overgenomen op utrecht component, devs van LUX doen hiervoor een PR op utrecht code.

Reactie van Robbert in Slack:
feat: add border-width/border-color tokens for textbox interaction states

Die border toevoegen heeft nogal wat voeten in de aarde, zie die PR. Ik ben nog niet helemaal tevreden over mijn aanpak in de PR, omdat dit niet werkt voor forced-colors mode. Zouden jullie misschien een tweede PR willen maken met een variant waar de extra border-width met calc() van de padding afgehaald wordt?
En als dit werkt moet dit voor alle form controls gebeuren, in elk geval ook textarea, select, listbox, maar liefst ook radio button en checkbox

[rwittenberns]

LUX tokens eerst mergen, daarna kan deze opgepakt worden.