Fieldset

[AlineNap]

Omschrijving

Groep van gerelateerde formuliervelden.

Het component bestaat niet in de Utrecht React Componenten, dus dit wordt een eigen Lux component, wel met de css styling en class-names van Utrecht.
Voor de div-variant kan direct ook de role e.d. er goed opgezet worden. Zie de beschrijving bij Utrecht CSS Storybook. Een voorbeeld met de goede labelling is ook onderdeel van de DoD.

Definition of ready

• Code check op community component gedaan door lux devs
• Stijling check op community component gedaan door Aline
• Plan voor missende features of bugs van het community component beschreven in het ticket
• Component tokens zijn beschikbaar
• Ticket doorgenomen met Vlad & Mark

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

Links

• Component: https://nldesignsystem.nl/fieldset
• Figma: https://www.figma.com/design/jzxqJv4PtgHJdmOJwY6lYg/NLDS---Bibliotheek---LUX-tokens?node-id=15754-1032
• Community component:
  • CSS: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-form-fieldset--docs
  • React: n.v.t.
  • Code: n.v.t. Maar bij de CSS staat een component dat misschien als een voorbeeld gebruikt kan worden.
    https://github.com/nl-design-system/utrecht/blob/main/components/form-fieldset/src/story-template.jsx

[AlineNap]

Vragen uit stijlingcheck:

Deze zijn besproken en beantwoord bij refinement van 15 oktober met Remy:

• Hoe stijlen we de description voor Eenvoudig aansluiten? Ik heb nu de paragraph tokens toegepast, werkt dat?
  • Yes dat is de weg om in te slaan dus prefix.form-field.description.* tokens zijn niet nodig.
• Hoe stijlen we de description idealiter, prefix.form-fieldset.description.* tokens nodig? PR op Utrecht?
  • Same als vraag 1, is vergelijkbaar met de paragraph in de alert.
• Token nodig voor spacing tussen form elementen?
  • yes, eerst met prefix lux en parallel aanvragen bij utrecht?
• Token nodig voor spacing tussen legend en description?
  • yes, eerst met prefix lux en parallel aanvragen bij utrecht? Gaan nog discussie aan/ uitzoeken hoe teksten te groeperen, zie slack thread.

---

Op 21 oktober tokens toegevoegd voor invalid, deze verwezen naar utrecht form-field invalid tokens. Als oplossing voor onderstaande vraag:

• Wat doe ik met de invalid tokens? Ga er vanuit dat die alleen gebruikt worden voor radio en checkbox en dat dit soort geneste tokens zijn, dus dat ik ze niet hoef in te vullen. Klopt dat? PS. Robbert en jullie hadden ideeën voor verbeteren radio en checkbox groep, is denk relevant hiervoor. Zijn deze tokens dan wel nodig?

---

Deze nog uitzoeken:

• Wat was tussenoplossing van Robbert voor missen van description? Hij had iets over een area-label toevoegen, jullie zeide dit te begrijpen woensdag. Voeg dit toe aan dit ticket zodat de devs weten wat ze moeten doen.
• Waarvoor wordt de section tokens gebruikt? --> Aan Utrecht vragen.
• Disabled willen wij niet toelaten bij LUX, moet ik dan die token wel invullen? En kunnen jullie die variant hiden/ niet beschikbaar zetten.

[AlineNap]

Refinement 22 oktober:

• Heading en paragraph, ipv fieldset legend en paragraph. Kan dat? Willen dat?
• Wanneer gebruik je wel of geen fieldset? Wat is het voordeel?
• Mag een fieldset in een fieldset? Ja mag: https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element
• Spacing tussen heading, description vs form-field elementen. Hoe gaan we daarmee om?