[component]: Radio Button (rework)

schaertim commented 3 weeks ago

Description

Background

This is a follow-up ticket for the v2 implementation of the radio-button which could not be completed due to several challenges encountered during the development process. This ticket aims to document these issues and provide a clear path forward for completing the implementation.

Current Issues

Design-Code Inconsistencies: The figma implementation uses a padding to move the label text to the right beside the radio-button. This approach can not be used in code. Currently it is handled differently which means the padding token can not be utilized. To be able to tokenize the spacing between the button and the label, the structure of the design has to be adapted.
Missing Tokens: Some values like the the border-radius of the focus outline (the radius of the form-check element) or the radio select do not have associated tokens. It's not clear if these should be added or use hardcoded values.
Validation Implementation: The form-validation design has changed. Should the validation styles be implemented individually for each component (and thus use tokens) or should the existing form-validation file be adapted to fit the new design? https://github.com/swisspost/design-system/labels/needs%3A%20discussion

Tasks

[ ] Have discussion on validation implementation, make decision and document it
[ ] Review v2 design and code structure
[ ] Document inconsistencies and discuss with designers
[ ] Adapt design structure
[ ] Retokenize design and add missing tokens
[ ] Finish implementation

Design

https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=426-2188

Tokens

[ ] Tokens for this component are ready

Due to the issues described above, not all tokens were able to be used. Here is a list of all tokens not yet used:

post-radio-button-disabled-stroke
post-radio-button-signal-error
post-radio-button-gap-block-group
post-radio-button-gap-inline-error
post-radio-button-icon-padding-block-inner
post-radio-button-icon-padding-inline-inner
post-radio-button-padding-block-text
post-radio-button-padding-block-group
post-radio-button-padding-block-error
post-radio-button-padding-inline-text-start

oliverschuerch commented 2 weeks ago

Depends on #3540

gfellerph commented 1 week ago

@schaertim discuss with @Vandapanda in a smaller round

schaertim commented 1 week ago

Decision: Implement a validation component containing all tokens concerning validation styling. Two variants should be distinguished through naming.

swisspost / design-system