WIP: feat(radio) — MalioRadioGroup (groupe de radios aligné, message unique) #85

2026-06-25T07:50:28Z

tristan commented

2026-06-25 07:50:28 +00:00

WIP — en attente de retours design

Nouveau composant MalioRadioGroup (parent) : possède la valeur, le name partagé et un seul message d'erreur/aide avec reserveMessageSpace (markup identique à MalioSelect), donc un groupe en ligne s'aligne au pixel avec un select voisin. MalioRadioButton devient un input qui hérite du contexte du groupe via provide/inject (précédent Accordion/AccordionItem) ; le mode standalone est inchangé.

Inclus

context.ts (clé d'injection) + RadioButton group-aware (suppression du hack CSS :has)
RadioGroup.vue : options :options ou slot, label/legend optionnel, inline, required, contentClass (ex. justify-between)
Story Histoire + page playground + entrée nav
Formulaire client migré sur MalioRadioGroup
Doc COMPONENTS.md + CHANGELOG.md

Vérifs

Suite : 1066+ tests verts ; lint 0 erreur
Alignement vérifié au navigateur (cercles ↔ box du select, message ↔ message : 0px)

À valider côté design

required sans label → astérisque par option (Oui*/Non*) — choix retenu, à confirmer
libellés/disposition du formulaire client (Fond mouvant / Benne, space-between)

## WIP — en attente de retours design Nouveau composant `MalioRadioGroup` (parent) : possède la valeur, le `name` partagé et **un seul** message d'erreur/aide avec `reserveMessageSpace` (markup identique à `MalioSelect`), donc un groupe en ligne s'aligne au pixel avec un select voisin. `MalioRadioButton` devient un input qui hérite du contexte du groupe via provide/inject (précédent Accordion/AccordionItem) ; le mode standalone est inchangé. ### Inclus - `context.ts` (clé d'injection) + `RadioButton` group-aware (suppression du hack CSS `:has`) - `RadioGroup.vue` : options `:options` ou slot, label/legend optionnel, `inline`, `required`, `contentClass` (ex. `justify-between`) - Story Histoire + page playground + entrée nav - Formulaire client migré sur `MalioRadioGroup` - Doc `COMPONENTS.md` + `CHANGELOG.md` ### Vérifs - Suite : 1066+ tests verts ; lint 0 erreur - Alignement vérifié au navigateur (cercles ↔ box du select, message ↔ message : 0px) ### À valider côté design - `required` sans label → astérisque par option (Oui*/Non*) — choix retenu, à confirmer - libellés/disposition du formulaire client (Fond mouvant / Benne, space-between)

tristan added 12 commits 2026-06-25 07:50:28 +00:00

docs(radio): conception MalioRadioGroup (parent group + message unique) ccc470d809

docs(radio): plan d'implémentation MalioRadioGroup 2da30a9138

feat(radio) : contexte de groupe injectable pour RadioButton 9207d7bb95

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat(radio) : composant MalioRadioGroup (message unique, reserveMessageSpace) 62b23c53b4

docs(radio) : story + page playground MalioRadioGroup a24748f7b1

feat(playground) : formulaire client utilise MalioRadioGroup 06f9b0218a

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(radio) : aligne la zone inline du RadioGroup sur le champ select (h-12) 8d7abc3406

docs(radio) : documente MalioRadioGroup (COMPONENTS + CHANGELOG) 29c2bf48d3

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

docs(radio) : précise que labelClass du RadioGroup cible la legend 1bc3c11444

feat(playground) : RadioGroup du formulaire client en required + erreur 1c36d40bfd

feat(radio) : prop contentClass pour piloter la disposition des radios 66ad644728

feat(playground) : options Fond mouvant/Benne en space-between d06458a2a9

This pull request has changes conflicting with the target branch.

CHANGELOG.md

View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.

git fetch -u origin feature/radio-group:feature/radio-group

git checkout feature/radio-group

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MALIO-DEV/malio-layer-ui#85