MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
887ebdebd7b8b3f1c208aec0dbf29c345142e551
malio-layer-ui/CHANGELOG.md
T
tristan 887ebdebd7 feat(ui) : required cohérent + astérisque label + sanitisation email (MUI-41) (#60) 
## 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)

Reviewed-on: #60
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>
2026-06-04 06:42:19 +00:00

5.1 KiB
Raw Blame History

Changelog

Liste des évolutions de la librairie Malio layer UI

[0.0.0]

Parameters

Added

  • [#333] Création d'un composant text
  • [#337] Création d'un composant select
  • [#362] Création d'un composant checkbox
  • [#363] Création d'un composant amount
  • [#364] Création d'un composant button radio
  • [#365] Création d'un composant number
  • [#366] Création d'un composant select checkbox
  • [#407] Création d'un composant time
  • Création d'un composant textarea
  • [#MUI-8] Création d'un composant mot de passe
  • [#MUI-9] Création d'un composant upload
  • [#MUI-14] Création d'un composant bouton icône
  • [#MUI-11] Création d'un composant navigation par onglets
  • [#MUI-20] Création d'un composant sidebar
  • [#MUI-23] Revoir la config couleur tailwind
  • [#MUI-10] Création d'un composant bouton
  • [#MUI-2] Faire un MCP pour la librairie de composant
  • [#MUI-15] Création d'un composant drawer
  • [#MUI-22] Création d'un composant datatable
  • [#MUI-27] Création d'un composant sélection de site
  • Création d'un composant rich text (TipTap) avec sortie markdown / HTML
  • [#MUI-30] Création d'un composant email
  • [#MUI-31] Création d'un composant téléphone
  • [#MUI-32] Création d'un composant saisie assistée (autocomplete)
  • [#MUI-34] Revoir le système de playground
  • [#MUI-33] Développer le composant Datepicker
  • [#MUI-33] Création du composant DateTime (date + heure, sélecteur d'heure natif intérimaire)
  • [#MUI-36] Création d'un composant modal (dialogue centré, focus-trap, scroll-lock, footer fixe)
  • [#MUI-37] Création d'un composant accordéon
  • [#MUI-39] Création d'un sélecteur d'heure à molettes (MalioTimePicker) ; DateTime rebranché dessus (remplace l'input time natif intérimaire)
  • InputAutocomplete : prop localFilter pour le filtrage côté client des listes statiques (case-insensitive label.includes(query)), sans avoir à brancher @search
  • InputTextArea : la scrollbar passe en primary (bleu) au focus, comme la liste du Select
  • Token Tailwind partagé w-m-btn-action (150px) exposé via tailwind.config.ts + CSS var --m-btn-action-width dans malio.css — utilisable côté consommateur pour les boutons d'action (<MalioButton button-class="w-m-btn-action" />), themable en redéfinissant la CSS var
  • [#MUI-41] Prop required cohérente + astérisque rouge dans le label sur la famille formulaire (Select, SelectCheckbox, InputUpload, InputRichText gagnent la prop)
  • [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option lowercase)

Changed

  • [#MUI-35] Refonte du composant drawer : slots #header/#footer, prop side (droite/gauche), dismissable, closeOnEscape, classes d'override, focus-trap, scroll-lock et fermeture au clavier. Breaking : la prop title est remplacée par le slot #header.

Fixed

  • DataTable : pagination réalignée verticalement après l'introduction du min-h-[1rem] du Select — la barre pagination passe en items-center, et le MalioSelect du sélecteur de perPage est encapsulé dans un wrapper h-12 qui borne sa taille flex à la hauteur du field (le slot vide déborde invisiblement en dessous). Span « Lignes : » et boutons Prev/Page/Next sont désormais centrés exactement sur le field (y=24)
  • Drawer : le slot #footer est désormais rendu hors de la zone scrollable (épinglé en bas, comme la modal) ; seul le body défile et la scrollbar ne s'étend plus derrière le footer
  • Hauteur des boutons de pagination du datatable alignée sur le select (40px)
  • Distribution de tailwind.config.ts aux projets consommateurs avec paths content absolus
  • Espace réservé (min-h-[1rem]) pour le paragraphe hint/error/success de 15 composants (Input*, Select*, Time*, CalendarField, Checkbox) — l'apparition d'une erreur ne décale plus les cellules voisines dans une grille
  • InputPhone : la croix + (add button) suit la même cascade d'état que les autres icônes du champ (muted / primary en focus / black quand rempli / danger / success) au lieu d'être figée en primary
  • Select / SelectCheckbox : le chevron suit l'état du champ (muted par défaut, primary à l'ouverture, black avec une option sélectionnée, danger / success en cas d'erreur ou succès) au lieu de text-current
  • InputTextArea : composant single-root (était multi-root) — le wrapper du message ne prend plus sa propre cellule de grille, row-span-2 fonctionne à nouveau
  • Label désactivé en text-m-muted (gris des bordures) au lieu de text-black/60 sur les inputs à floating-label (InputText, Email, Password, Amount, Phone, Upload, Autocomplete, TextArea, RichText)
  • InputAutocomplete : suppression de 4 sources de saut visuel au focus / ouverture (extra translate label, padding grow-height:focus, focus:pl-[11px], !border-b-0 remplacé par !border-b-transparent)
  • Select / SelectCheckbox : mêmes correctifs anti-saut (suppression du padding grow-height:focus et remplacement de !border-b-0 / !border-t-0 par leurs variantes transparent)
  • MalioButton : largeur par défaut alignée sur w-[200px] (au lieu de w-[240px]) pour correspondre au sizing des formulaires de l'app
Reference in New Issue View Git Blame Copy Permalink