🎨👀 Design Review: Checkbox Component

[AlineNap]

Omschrijving

Tijdens de design review van 18 december zijn er een aantal vragen en bevindingen over de checkbox-implementatie. Dit ticket is bedoeld om deze punten te onderzoeken en waar nodig aanpassingen te doen.

Openstaande vragen

1. Variant "with target"

• Waar komt de variant "with target" vandaan?
  • Deze staat onderin Storybook, maar is niet terug te vinden in de Utrecht-documentatie.
  • Hoe werkt deze variant precies?
  • Kan de achtergrond gestyled worden? Zijn er design tokens?
  • Wanneer is de target zichtbaar? Altijd of is dit een keuze?

2. Grootte van de checkbox

De checkbox is nu 24px bij 24px, terwijl de token 'utrecht.checkbox.size' is ingesteld op 18px. Waarom wijkt de implementatie af?

3. Omringende div

De checkbox zit in een div met class utrecht-document die 28px hoog is. Waarom is deze 2px hoger dan de checkbox zelf? Levert dit geen problemen op als het component wordt gebruikt in een formulier of andere context?

4. Variant "indeterminate" ontbreekt (4 februari toegevoegd)

• De optie boolean indeterminate ontbreekt in de playground en in de componentvoorbeelden.
  • Is dit een bewuste keuze?
  • De Utrecht React-component bevat deze optie wél en ook de design tokens zijn hiervoor ingesteld.
  • Moet deze variant alsnog worden toegevoegd?

5. Visual regressie test ontbreekt nog voor de checkbox. (4 februari toegevoegd)

Acties

• Onderzoeken waar de "with target" variant vandaan komt en documenteren hoe deze werkt.
• Controleren waarom de checkboxgrootte afwijkt van de verwachte 18px en plan om dit op te lossen.
• Analyseren of de 28px hoge div problemen oplevert in gebruik en zo ja, een oplossing voorstellen.
• Nagaan of de "indeterminate" variant bewust is weggelaten en of deze alsnog toegevoegd moet worden.
• Eventueel documentatie bijwerken op basis van de bevindingen.
• Visual regressie test toevoegen voor de checkbox