Radio Group

[AlineNap]

Omschrijving

Biedt de mogelijkheid om één optie te selecteren uit een lijst.

Beoogde Oplossing

Maak een LuxRadioGroup component die m.b.v. alleen props een lijst met opties kan weergeven. Iets in de vorm van:

<LuxRadioGroup
  name="contact-method"
  label="Voorkeur contactmethode"
  options={[{
    value: 'email',
    label: 'E-mail',
  }, {
    value: 'phone',
    label: 'Telefoon',
  }, {
    value: 'smoke',
    label: 'Rooksignalen',
  }]}
/>

Component bestaat uit: Radio-button

• Issue: https://github.com/nl-design-system/lux/issues/317
• Figma
• Storybook

Form-field-radio-option

• Figma
• Storybook: RadioButton + FormLabel[type="radio"], hoe werkt dit in utrecht?

Definition of ready

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

Definition of done

Component

• [x] Component is beschikbaar in de index
• [x] Design tokens worden gebruikt

Storybook

• [x] Playground story
• [x] States en properties stories
• [x] 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

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

Links

• Component: https://nldesignsystem.nl/radio-group/
• Figma: https://www.figma.com/design/jzxqJv4PtgHJdmOJwY6lYg/NLDS---Bibliotheek---LUX-tokens?node-id=954-1910
• Community component:
  • CSS:
  • React:
  • Code:

[AlineNap]

Besproken tijdens LUX/NLDS op 9 oktober. Hiervoor is een PR nodig op Utrecht. Dit doet lux waarschijnlijk. LUX devs zullen ticket aanvullen.

[AlineNap]

Robbert wil deze code gebruiken voor zijn praatje volgende week op NLDS week. Dus voor die tijd niet handig om deze op te pakken.

[AlineNap]

Stijling check vragen:

• Hoe wordt de radio-button gepositioneerd ten opzicht van het label, gaat dit goed bij verschillende font-sizes? Bij RHC lijkt dat van niet. --> @remypar5 zoekt dit uit. Houd vraagstuk van https://github.com/nl-design-system/rijkshuisstijl-community/issues/776 in je achterhoofd.
• Form-field-radio-option component bestaat niet bij utrecht. Willen wij dat wel? Gaan jullie dit toevoegen aan utrecht code nav ons gesprek van 9 oktober? --> @remypar5 zoekt uit hoe dit zit, in welk component wordt het label toegevoegd aan de radio-button.
• Kunnen we token toevoegen voor spacing tussen de form-field-radio-options? Op Utrecht of bij onszelf? --> we maken een eigen radio-button-group component.
• Hoe wordt het label gestijld van de radiogroep? --> via tokens van de form-field component

[AlineNap]

• We maken eigen lux-radio-group. Want teveel breaking changes op Utrecht repo.
• @remypar5 vult ticket aan met code eisen.

[remypar5]

• Hoe wordt de radio-button gepositioneerd ten opzicht van het label, gaat dit goed bij verschillende font-sizes? Bij RHC lijkt dat van niet.

De eerste regel van het label is gecentreerd op de Radio button. Tijdens de bouw van dit component gaan we uitzoeken wat de beste manier is.

• Form-field-radio-option component bestaat niet bij utrecht. Willen wij dat wel? Gaan jullie dit toevoegen aan utrecht code nav ons gesprek van 9 oktober?

We kunnen gebruik maken van FormLabel[type="radio"] (zie beschrijving)

• Kunnen we token toevoegen voor spacing tussen de form-field-radio-options? Op Utrecht of bij onszelf?

Omdat we het component zelf gaan bouwen komt deze spacing token in de lux namespace, niet die van utrecht.

• Hoe wordt het label gestijld van de radiogroep?

Met behulp van de FormLabel van utrecht

[AlineNap]

Design review 6 November

Component

1. Het label graag dikgedrukt, neem de stijling over van de utrecht-form-field-label. Zie screenshot.
2. Graag de mogelijkheid tot een description toevoegen. Zie screenshot 1.
3. Er is geen error message bij invalid. Maar dat is wellicht omdat het component nog niet beschikbaar is? Zelfde voor punt 1 & 2?
4. In de playground klik je bij de eerste klik alle radio's uit. Dit zou niet mogelijk moeten zijn.
5. Bij invalid kleurt de checked dot niet mee, hoe komt dat? Wordt de token utrecht.radio-button.invalid.color niet toegepast?

Documentatie

1. Wat doe value in de playground? De tekst die ik in type lijkt niet te verschijnen.
2. Als ik invalid aanzet worden alle voorbeelden invalid. Als ik die weer uitzet blijft alles invalid gestijlt.

3. Alle voorbeelden zijn soort van aan elkaar gekoppeld? Als ik er 1 check in 1 van de voorbeelden verdwijnt de gecheckte uit een ander voorbeeld.

   

[VladAfanasev]

Design review 6 November

• [X] 1. Het label graag dikgedrukt, neem de stijling over van de utrecht-form-field-label. Zie screenshot.

• [X] 2. Graag de mogelijkheid tot een description toevoegen. Zie screenshot 1.

• [X] 3. Er is geen error message bij invalid, maar dat is wellicht omdat het component nog niet beschikbaar is? Zelfde voor punt 1 & 2 wellicht.[x]

• [x] 4. In de playground klik je bij de eerste klik alle radio's uit. Dit zou niet mogelijk moeten zijn.

• [ ] 5. Bij invalid kleurt de checked dot niet mee, hoe komt dat? Wordt de token utrecht.radio-button.invalid.color niet toegepast? ---> Het lijkt er op dat er nog design tokens zijn die toegepast worden op utrecht:

Er zijn namelijk wel tokens voor de checked state. Misschien een navraag doen hoe Utrecht dit verwerkt?

• [x] 6. Wat doe value in de playground? De tekst die ik in type lijkt niet te verschijnen. ---> Optie verwijderd uit playground
• [x] 7. Als ik invalid aanzet worden alle voorbeelden invalid. Als ik die weer uitzet blijft alles invalid gestijlt.
• [x] 8. Alle voorbeelden zijn soort van aan elkaar gekoppeld? Als ik er 1 check in 1 van de voorbeelden verdwijnt de gecheckte uit een ander voorbeeld.