b55050b2ad
Release / release (push) Successful in 1m36s
## Description Deux changements regroupés : ### 1. Nouveau token Tailwind partagé `w-m-btn-action` (150px) Exposé via `tailwind.config.ts` du layer + CSS var `--m-btn-action-width` dans `malio.css`. Utilisable côté projet consommateur pour les boutons d'action (`<MalioButton button-class="w-m-btn-action" />`), et themable en redéfinissant la CSS var dans son propre `:root`. Convention alignée sur les couleurs `m-btn-primary` / `m-btn-secondary` / `m-btn-danger` (préfixe `m-btn-`). ### 2. Fix alignement pagination DataTable Régression visuelle après l'introduction du `min-h-[1rem]` sur la zone message du MalioSelect (qui ajoute ~20px sous le field). La barre pagination du DataTable embarquait un MalioSelect pour le `perPage` à côté d'éléments centrés (span « Lignes : » + nav boutons Prev/Page/Next), faisant dériver l'alignement vertical. **Fix** : - La barre pagination passe en `items-center` - Le MalioSelect du sélecteur 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 - Tous les centres alignés exactement sur le field (y=24) ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée (34/34 tests DataTable OK) - [x] TU/TI/TF OK - [x] CHANGELOG modifié 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Co-authored-by: matthieu <matthieu@yuno.malio.fr> Reviewed-on: #59 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
4.8 KiB
4.8 KiB
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
localFilterpour le filtrage côté client des listes statiques (case-insensitivelabel.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é viatailwind.config.ts+ CSS var--m-btn-action-widthdansmalio.css— utilisable côté consommateur pour les boutons d'action (<MalioButton button-class="w-m-btn-action" />), themable en redéfinissant la CSS var
Changed
- [#MUI-35] Refonte du composant drawer : slots
#header/#footer, propside(droite/gauche),dismissable,closeOnEscape, classes d'override, focus-trap, scroll-lock et fermeture au clavier. Breaking : la proptitleest 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 enitems-center, et le MalioSelect du sélecteur de perPage est encapsulé dans un wrapperh-12qui 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
#footerest 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.tsaux projets consommateurs avec pathscontentabsolus - 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-2fonctionne à nouveau - Label désactivé en
text-m-muted(gris des bordures) au lieu detext-black/60sur 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-0remplacé par!border-b-transparent) - Select / SelectCheckbox : mêmes correctifs anti-saut (suppression du padding
grow-height:focuset remplacement de!border-b-0/!border-t-0par leurs variantestransparent) - MalioButton : largeur par défaut alignée sur
w-[200px](au lieu dew-[240px]) pour correspondre au sizing des formulaires de l'app