Select

[AlineNap]

Omschrijving

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

Select Option

Het SelectOption component is ook onderdeel van deze ticket.

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 op main
• 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 (door LUX)

Links

• Component: https://www.nldesignsystem.nl/select
• Figma NLDS: https://www.figma.com/design/jzxqJv4PtgHJdmOJwY6lYg/NLDS---Bibliotheek---LUX-tokens?node-id=1130-3652
• Community component:
  • CSS:
  • React: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-select--docs
  • Code:

[AlineNap]

Stijling check vragen:

• Issue met focus en hover tokens wordt opgelost in utrecht repo, ticket staat op onze backlog: https://github.com/orgs/nl-design-system/projects/60/views/3?filterQuery=&pane=issue&itemId=82712799&issue=nl-design-system%7Cutrecht%7C2516
• Wat gaan wij doen met de todo token todo.select.line-height? --> Kan niet in select hij pakt 1 of 1.2, dus 100%?

[remypar5]

Wat gaan wij doen met de todo token todo.select.line-height? --> Kan niet in select hij pakt 1 of 1.2, dus 100%?

De line-height wordt genegeerd door browsers en heeft altijd de waarde normal. Dat geld voor zowel de beschikbare opties als de gekozen waarde.

Let op
De beschrijving van normal op de bovengenoemde pagina van MDN geeft aan dat de waarde 1.2, ofwel 120% van de font-size. Op een <select> element is dat niet van toepassing!

[AlineNap]

Hey @remypar5, wat bedoel je met je laatste zin? Wat is niet van toepassing? line-height: normal? Of de waarde van normal 1.2 (voor fire-fox)?

Op een <select> element is dat niet van toepassing!

[remypar5]

wat bedoel je met je laatste zin?

Dat line-height geen effect heeft op een <select> element. Deze token is dus niet nodig want die zal geen effect hebben.

Mocht je die voor Figma wel nodig hebben dan graag prefixen met figma. zodat wij die er uit kunnen filteren

[AlineNap]

Design review 14 November

Is typing.....

Component

1. Focus border wordt niet dikker, is dat ook onderdeel van issue:

Documentatie

1. Select zou ik verwachten in het mapje FormField, linkermenu.
2. Is het mogelijk om in de state voorbeelden net als de playground een dropdown toe te voegen? Dat je ook daadwerkelijk iets kunt selecteren.
3. Is een voorbeeld van required nodig? Die indicatie verwacht ik op het form-field en dan bij het label. Een select, checkbox, of input zal qua stijling niet anders zijn. Voor in de code waarschijnlijk wel nodig om daar required op te zetten.

[MMeijerink]

@AlineNap Ik heb aangepast wat voor nu aangepast kon worden. Maar er is nog een afhankelijkheid van het ticket bij Utrecht om alle punten op te lossen.