Test/textbox

[Marwaxhello]

Pull Request
In deze PR heb ik de volgende text velden getest in Storybook:

• voorletters
• tussenvoegsel
• achternaam
• postcode
• huisnummer
• huisletter
• huisnummertoevoeging
• straatnaam
• woonplaats
• telefoonnummer
• email

Elk veld heeft verschillende states (ingelogd of niet ingelogd). Bijvoorbeeld, het text veld voorletters heeft de volgende states: PMD, PZD, ZEH en MEH. Hieronder kun je zien waar ze voor staan:

PMD = Persoon met DigiD
PZD = Persoon zonder DigiD
ZEH = Zonder eHerkenning
MEH = Met eHerkenning
PA = (Betekenis onbekend, graag laten weten als je het weet)
PB = (Betekenis onbekend, graag laten weten als je het weet)

Opdracht
Alle textbox/textfield velden hebben momenteel dezelfde grootte, wat verwarrend en onduidelijkheid is voor de gebruiker. issue #614.

Het doel is om de grootte van elk veld af te stemmen op de bijbehorende vraag. Zo moet het postcode veld kleiner zijn, terwijl het veld voor de naam groter moet zijn. Mijn opdracht is om alle text velden te testen en de grootte van elk veld aan te passen, zodat deze logisch aansluit bij de functie van het texfield. Dit heb ik gedaan door te onderzoeken welke grootte het meest geschikt is voor elke specifieke situatie.

Om dit te zien, heb ik bij elke aanpassing in de CSS een comment toegevoegd met de grootte van het veld en, waar nodig, de reden voor de keuze van de size.

@mixin utrecht-textbox--geboortedatum-size {
  /* 2 (for the day) + 1 (for the separator, usually a dash or slash) + 2 (for the month) + 1 (for the separator)
   + 4 (for the year) = 9 characters (if you include separators). Or "DDMMYY" */
  --utrecht-textbox-value-max-length: 9;
},
@mixin utrecht-textbox--kvk-size {
  /* In the Netherlands a KVK number consists of 8 digits */
  --utrecht-textbox-value-max-length: 8;
},
@mixin utrecht-textbox--telefoon-nummer-size {
  /* Dutch phone number consits of 9 digits, longest phone numer is 15 digits. */
  --utrecht-textbox-value-max-length: 15;
}

PS. Ik heb veel verschillende velden getest, maar ik heb hier de belangrijkste weergegeven.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.20%. Comparing base (c4606a2) to head (ab50d50).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2633   +/-   ##
=======================================
  Coverage   90.20%   90.20%           
=======================================
  Files         188      188           
  Lines        1643     1643           
  Branches      356      349    -7     
=======================================
  Hits         1482     1482           
  Misses        155      155           
  Partials        6        6           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Robbert]

Oh no, ik denk dat ik een belangrijk ding nooit gedocumenteerd heb: het resultaat van de textbox afmetingen past niet precies, omdat er aan het eind 44px is gereserveerd (var(--utrecht-textbox-autocomplete-ui-size, 44px)) voor UI widgets zoals de 1Password button.

[Robbert]

Ik denk dat je het best even kan testen met --utrecht-textbox-autocomplete-ui-size: 0 om te kijken of het mooi past, en dan voor de gebruiksvriendelijkheid die 44px ruimte toch maar weer toevoegen

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
utrecht	❌ Failed (Inspect)			Nov 26, 2024 4:46pm