Action group

[AlineNap]

Omschrijving

Groepeert één of meer gerelateerde acties en verzorgt de lay-out van de content.

Let op: Bij Utrecht heet het nog ButtonGroup, de NLDS-naam wordt ActionGroup, deze nemen wij alvast over.

Nieuwe feature: property justify met de waarden <undefined> (default); start, center, end, space-between.
Dit zet (lux) class-names (...--justify-start|center|end|space-between) die de justify-content CSS properties zetten.

Links

• Component:
• Figma: https://www.figma.com/design/jzxqJv4PtgHJdmOJwY6lYg/NLDS---Bibliotheek---LUX-tokens?node-id=4626-10492
• Community component:
  • CSS: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-button-group--docs
  • React: https://nl-design-system.github.io/utrecht/storybook/?path=/docs/react_react-button-group--docs
  • Code: https://github.com/nl-design-system/utrecht/blob/%40utrecht/component-library-react%407.1.0/packages/component-library-react/src/ButtonGroup.tsx

Checks

Definition of ready

• Code check op community component (door LUX)
• Styling check op community component (door LUX)
• Plan voor missende features of bugs community component beschreven in ticket
• Component tokens zijn beschikbaar op main
• Ticket doorgenomen met uitvoerder

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
  • Wat doen (speciale) features
  • 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)

[AlineNap]

Stijling check vragen

1. Kunnen we twee varianten hebben? 1 met een column-gap van 16px en 1 met een column-gap 'auto' a la full width zoals EVA heeft in haar formulieren ontwerp? Hoe los je dit op in de code? Een endum of boolean property erbij met full width ja of nee.
2. De naam voor NL is action-group utrecht gebruikt button-group dat is Legacy. Willen en kunnen we daar iets mee?