MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui) : required cohérent + astérisque label + sanitisation email (MUI-41) #60

Merged
tristan merged 51 commits from feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co into develop 2026-06-04 06:42:20 +00:00
Conversation 0 Commits 51 Files Changed 58
+3192 -167
tristan commented 2026-06-03 12:38:00 +00:00
Owner
Copy Link
Copy Source

Résumé (MUI-41)

Harmonise l'état « obligatoire » des composants de formulaire et normalise le champ email.

required + astérisque

  • Nouveau composant partagé MalioRequiredMark : astérisque rouge (text-m-danger, 16px), aria-hidden.
  • Prop required désormais cohérente sur toute la famille formulaire ; quand vraie, l'astérisque s'affiche dans le label.
  • Prop ajoutée à Select, SelectCheckbox, InputUpload, InputRichText (les autres l'avaient déjà).
  • Accessibilité : required natif là où l'élément le supporte, sinon aria-required (Select/SelectCheckbox sur le <button>, RichText sur le wrapper éditeur, Upload sur le champ visible).
  • MalioSiteSelector exclu volontairement (segmented control, pas de label de champ).

Sanitisation email (MalioInputEmail)

  • Suppression de tous les espaces à la saisie (pas de masque).
  • Nouvelle prop opt-in lowercase (défaut false) : normalise en minuscules à la frappe (cohérent RG-1.21 Starseed).
  • Garde défensive curseur : l'API de sélection est interdite sur type="email" → repositionnement best-effort sans jamais lever.
  • La validation de format reste à la couche error.

Docs & playground

  • COMPONENTS.md (doc required cohérente + note famille + lowercase) et CHANGELOG.md mis à jour.
  • Exemples playground required et email lowercase ajoutés.

Test plan

  • Suite complète : 42 fichiers / 771 tests verts
  • Lint : 0 erreur
  • Tests aria-required sur Select/SelectCheckbox/RichText
  • Vérif visuelle playground : astérisque 16px dans le label, email qui retire les espaces / minuscule

Spec & plan : docs/superpowers/specs/ et docs/superpowers/plans/.

🤖 Generated with Claude Code

## Résumé (MUI-41) Harmonise l'état « obligatoire » des composants de formulaire et normalise le champ email. ### `required` + astérisque - Nouveau composant partagé `MalioRequiredMark` : astérisque rouge (`text-m-danger`, **16px**), `aria-hidden`. - Prop `required` désormais cohérente sur toute la famille formulaire ; quand vraie, l'astérisque s'affiche **dans le label**. - Prop ajoutée à `Select`, `SelectCheckbox`, `InputUpload`, `InputRichText` (les autres l'avaient déjà). - Accessibilité : `required` natif là où l'élément le supporte, sinon `aria-required` (Select/SelectCheckbox sur le `<button>`, RichText sur le wrapper éditeur, Upload sur le champ visible). - `MalioSiteSelector` **exclu** volontairement (segmented control, pas de label de champ). ### Sanitisation email (`MalioInputEmail`) - Suppression de **tous les espaces** à la saisie (pas de masque). - Nouvelle prop opt-in `lowercase` (défaut `false`) : normalise en minuscules à la frappe (cohérent RG-1.21 Starseed). - Garde défensive curseur : l'API de sélection est interdite sur `type="email"` → repositionnement best-effort sans jamais lever. - La validation de format reste à la couche `error`. ### Docs & playground - `COMPONENTS.md` (doc `required` cohérente + note famille + `lowercase`) et `CHANGELOG.md` mis à jour. - Exemples playground `required` et email `lowercase` ajoutés. ## Test plan - [x] Suite complète : 42 fichiers / 771 tests verts - [x] Lint : 0 erreur - [x] Tests `aria-required` sur Select/SelectCheckbox/RichText - [ ] Vérif visuelle playground : astérisque 16px dans le label, email qui retire les espaces / minuscule Spec & plan : `docs/superpowers/specs/` et `docs/superpowers/plans/`. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
tristan added 13 commits 2026-06-03 12:38:00 +00:00
docs: spec required asterisk + email sanitization (MUI-41) 05949b727e 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs: plan d'implémentation MUI-41 + précisions spec (caret email, exclusion SiteSelector) df289aa829 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui) : composant partagé MalioRequiredMark (astérisque champ obligatoire) 03fe458248 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui) : prop required + aria-required + astérisque sur Select/SelectCheckbox/Upload/RichText 167cc43870 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui): aria-required sur champ visible InputUpload + ordre import RichText 61cb90a9c6 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui): astérisque required dans le label de la famille formulaire 120020b210 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(inputs) : sanitisation email (suppression des espaces + option lowercase) 6081f0c90c 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
test(inputs) : tests mode contrôlé email + commentaire caret jsdom 4e2303c471 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs : required/astérisque + lowercase email (COMPONENTS + CHANGELOG) 3e09f4278e 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs(playground) : exemples required + email lowercase 2d8639a913 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs : documentation required cohérente sur toute la famille formulaire 4f5eaaacb9 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
test(ui) : vérifie aria-required sur Select/SelectCheckbox/RichText 6b1e11bd6f 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui) : astérisque required à 16px cc03559dcf 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
tristan added 12 commits 2026-06-03 13:59:24 +00:00
docs : plan état readonly cohérent c934019260 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui) : état readonly visuel sur InputUpload (+ prop readonly) fd3e3a7922 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : readonly InputUpload — drop peer-focus float + idiome grow-height/cursor 289ff036d2 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui) : état readonly visuel sur les inputs floating-label e622380916 
Applique le traitement readonly canonique (isReadonly, shouldFloatLabel,
mergedInputClass sans grow-height, bordure noire fixe, sans focus:border-m-primary,
mergedLabelClass sans peer-focus, iconStateClass sans isFocused) sur les 6 composants
InputText, InputEmail, InputAmount, InputAutocomplete, InputPassword et InputTextArea.
L'œil de InputPassword reste cliquable en readonly. Tests TDD ajoutés (3 cas par fichier).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : cursor-default readonly TextArea + test chevron readonly Autocomplete 26c0a8b533 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui) : InputPhone readonly suit les règles readonly (plus de look disabled) f8c0bf13d5 
Découple readonly de disabled : le champ affiche border-black + curseur default,
l'icône suit text-black/text-m-muted selon isFilled, et le bouton "add" conserve
son guard onAdd sans porter l'apparence désactivée (opacity-40/cursor-not-allowed).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui) : état readonly visuel sur pickers date/heure 12a165c1c1 
Bordure noire forcée (même vide), suppression du bleu focus/primary, label
et icône en text-black si rempli sinon text-m-muted, float piloté par isFilled
uniquement en readonly. Bouton clear et astérisque inchangés.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : garde readonly défensive isOpen + test readonly TimePicker 993364062d 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs(playground) : exemples readonly 5b9b771174 
Ajout de deux blocs readonly (vide + rempli) sur chaque page playground
concernée : InputText, InputEmail, InputAmount, InputAutocomplete,
InputPassword, InputTextArea, InputPhone, InputUpload, Date, TimePicker.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
test(ui) : couvre icône/label readonly vide sur la famille champs bdca9490ee 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs(playground) : page DIVERS regroupant tous les champs readonly 734c7aba2f 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(playground) : retire prop icon-name fantôme sur InputTextArea (pas d'icône) f5163f10f1 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
tristan added 6 commits 2026-06-03 14:29:03 +00:00
feat(ui) : état readonly visuel sur Select et SelectCheckbox 621077f555 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : aria-readonly suit isReadonly sur Select/SelectCheckbox (disabled prime) 358ba246d7 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs(playground) : exemples readonly Select/SelectCheckbox (+ page DIVERS) cec528eac6 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : SelectCheckbox tolère modelValue absent (défaut []) — corrige crash SSR readonly 801925c443 
Le composant accédait à props.modelValue.length sans garde alors que modelValue
était requis ; un usage non bindé (ex. page playground readonly) plantait le rendu SSR.
modelValue devient optionnel avec défaut [].

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs(playground) : badges (display-tag) sur SelectCheckbox readonly 59004c9635 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs(playground) : retire empty-option-label du SelectCheckbox readonly vide de504d8ba0 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
tristan added 4 commits 2026-06-03 15:03:59 +00:00
fix(ui) : pt-1 sur InputTextArea pour aligner son haut avec les inputs 5f1dc834cd 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui) : prop reserveMessageSpace (défaut true) sur la famille input cda0f994ca 
Ajoute une prop booléenne reserveMessageSpace (défaut true) aux 10 composants
de la famille input. Par défaut, comportement inchangé (ligne message toujours
rendue avec min-h-[1rem]). À false, la ligne ne prend aucun espace en l'absence
de message, et s'affiche sans min-h quand un message est présent.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui) : prop reserveMessageSpace (défaut true) sur Select/SelectCheckbox/Checkbox/date/time 1b5a4c9920 
Ajoute reserveMessageSpace (défaut true) pour permettre de ne pas réserver
la ligne de message d'aide quand aucun message n'est présent. Comportement
inchangé par défaut. La famille date hérite via $attrs → CalendarField.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs(playground) : exemple reserveMessageSpace sur SelectCheckbox bf4d62a23f 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
tristan added 1 commit 2026-06-03 15:07:45 +00:00
fix(ui) : checkbox internes de SelectCheckbox sans espace message réservé 41a3df7481 
Les options du dropdown (et le « tout sélectionner ») passaient reserveMessageSpace
par défaut → chaque ligne réservait un min-h-[1rem] inutile, d'où le gros espacement.
On force :reserve-message-space=false sur ces Checkbox internes.
Retire aussi la carte de démo playground hors-sujet.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
tristan added 15 commits 2026-06-04 06:40:45 +00:00
feat(ui) : TabList — fenêtrage maxVisibleTabs + flèches navigation df2b8badc8 
Ajout d'une prop maxVisibleTabs activant un fenêtrage carousel (sans
animation) avec flèches gauche/droite. Les flèches sont désactivées aux
bornes, les panneaux hors fenêtre restent montés, et startIndex est
clampé si tabs/maxVisibleTabs changent.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : TabList — roving tabindex + aria panels + layout non-fenêtré (review) 884cad9c98 
- focusedKey assure exactement un tab focalisable quand l'actif est hors fenêtre
- aria-labelledby conditionnel + fallback aria-label pour panneaux dont le bouton n'est pas rendu
- DOM non-fenêtré identique à l'origine (plus de wrapper flex parasite)
- reset de la fenêtre (startIndex) au remplacement des tabs

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs(playground) : exemple TabList fenêtré (7 onglets, maxVisibleTabs=5) 4687006fa3 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : TabList — flèches intégrées dans la barre (bordure englobante, 36px des onglets) 80132375b7 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : TabList — gap 36px flèches/onglets + centrage vertical f97cb44870 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : TabList — flèches fixes aux extrémités (justify-between) 28d5ae1dec 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : TabList — flèches fixes à 36px des bords (px-36) b6297fbe56 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : TabList — flèches fixes à 54px des bords (px-54) 9ba9497305 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : TabList — container onglets max-w 1020, flèches à 36px de ce bloc 8695d8daa0 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : TabList — container onglets max-w 1200 f23ae7261b 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : TabList — bordure continue pleine largeur (hors bloc 1200) cb60b2c79d 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs(playground) : TabList — exemple 3 onglets + maxVisibleTabs (fenêtrage inactif) 912a370444 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
feat(ui) : TabList — prop maxWidth (défaut 1100) pour le bloc d'onglets fenêtré 1a52582eda 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
fix(ui) : TabList — flèches reprennent les couleurs du bouton primary (hover/disabled) 003fe54ee0 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs : COMPONENTS.md — reserveMessageSpace, readonly Select/SelectCheckbox/Upload, props TabList e6d99d02c3 
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
tristan merged commit 887ebdebd7 into develop 2026-06-04 06:42:20 +00:00
tristan deleted branch feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co 2026-06-04 06:42:21 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
malio (admin malio) matthieu (THOLOT DECHENE Matthieu) tristan (Autin )
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: MALIO-DEV/malio-layer-ui#60
Delete Branch "feature/MUI-41-props-required-asterisque-dans-le-label-sur-les-co"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?