fix: datatable + button style (#66)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: admin malio <malio@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #66
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

CHANGELOG.md

@@ -43,6 +43,9 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-41] InputEmail : sanitisation à la saisie (suppression des espaces, option `lowercase`)
 
 ### Changed
+* MalioButton : dimensions par défaut `w-[180px]` / `h-[38px]` (étaient `w-[200px]` / `h-[40px]`).
+* DataTable : tailles par défaut revues — texte header `16px` (était `20px`), texte body `14px` (était `18px`), sélecteur de lignes et boutons de pagination (Prev / numéros / Next) alignés à `30px` de haut, padding de `12px` entre le bas du tableau et la barre de pagination. Couleurs inchangées (texte `m-primary`, bordures noires).
+* Select : nouvelle prop `fieldClass` pour surcharger les classes du field (notamment la hauteur `h-[40px]` jusqu'ici codée en dur) ; utilisée par le DataTable pour passer le sélecteur de perPage à `30px`.
 * [#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

COMPONENTS.md

@@ -388,6 +388,7 @@ Liste déroulante.
 | `textField` | `string` | `'text-lg'` | Classe taille texte bouton |
 | `textValue` | `string` | `'text-lg'` | Classe taille texte valeur |
 | `textLabel` | `string` | `'text-sm'` | Classe taille texte label |
+| `fieldClass` | `string` | `''` | Classes supplémentaires sur le field (override hauteur, ex. `h-[30px]`) |
 | `noOptionsText` | `string` | `'Aucune option disponible'` | Message affiché dans la dropdown quand `options` est vide |
 
 **Events :** `update:modelValue(value: string | number | null)`

app/components/malio/button/Button.test.ts

@@ -162,8 +162,8 @@ describe('MalioButton', () => {
   it('applies correct dimensions', () => {
     const wrapper = mountComponent()
 
-    expect(wrapper.get('button').classes()).toContain('w-[200px]')
-    expect(wrapper.get('button').classes()).toContain('h-[40px]')
+    expect(wrapper.get('button').classes()).toContain('w-[180px]')
+    expect(wrapper.get('button').classes()).toContain('h-[38px]')
   })
 
   it('applies font styles', () => {

app/components/malio/button/Button.vue

@@ -84,7 +84,7 @@ const variantClasses = computed(() => {
 
 const mergedButtonClass = computed(() =>
   twMerge(
-    'inline-flex w-[200px] h-[40px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    'inline-flex w-[180px] h-[38px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
     variantClasses.value,
     props.buttonClass,
   ),

app/components/malio/datatable/DataTable.vue

@@ -7,7 +7,7 @@
             v-for="col in columns"
             :key="col.key"
             scope="col"
-            class="border-b border-black px-3 py-3 text-left align-middle text-[20px]"
+            class="border-b border-black px-3 py-3 text-left align-middle text-[16px]"
           >
             <slot
               v-if="$slots[`header-${col.key}`]"
@@ -32,7 +32,7 @@
           <td
             v-for="col in columns"
             :key="col.key"
-            class="px-3 py-4 text-[18px] text-m-primary"
+            class="px-3 py-4 text-[14px] text-m-primary"
             :class="index < items.length - 1 ? 'border-b border-black' : ''"
           >
             <slot
@@ -57,16 +57,17 @@
 
     <div
       v-if="totalItems > 0"
-      class="flex items-center justify-between pt-2"
+      class="flex items-center justify-between pt-3"
       data-test="pagination"
     >
       <div class="flex items-center gap-4">
         <span class="whitespace-nowrap text-[16px] text-black">Lignes :</span>
-        <div class="h-12">
+        <div class="h-[30px]">
           <MalioSelect
             :model-value="perPage"
             :options="perPageSelectOptions"
-            group-class="w-20"
+            group-class="w-20 h-[30px]"
+            field-class="h-[30px]"
             rounded="rounded"
             text-field="text-sm"
             text-value="text-sm"
@@ -82,7 +83,7 @@
           variant="tertiary"
           label="Prev"
           :disabled="page <= 1"
-          button-class="h-10 w-auto min-w-0 px-3 text-sm"
+          button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
           aria-label="Page précédente"
           data-test="prev-button"
           @click="goToPage(page - 1)"
@@ -97,7 +98,7 @@
           <button
             v-else
             type="button"
-            class="h-10 min-w-[2.5rem] rounded px-2 text-sm transition-colors"
+            class="inline-flex h-[30px] min-w-[2.5rem] items-center justify-center rounded px-2 text-sm transition-colors"
             :class="p === page
               ? 'bg-m-btn-primary text-white font-semibold'
               : 'text-m-text hover:bg-m-bg'"
@@ -113,7 +114,7 @@
           variant="tertiary"
           label="Next"
           :disabled="page >= totalPages"
-          button-class="h-10 w-auto min-w-0 px-3 text-sm"
+          button-class="h-[30px] w-auto min-w-0 px-3 text-sm"
           aria-label="Page suivante"
           data-test="next-button"
           @click="goToPage(page + 1)"

app/components/malio/select/Select.vue

@@ -34,7 +34,7 @@
                     ? 'border-black'
                     : 'border-m-muted',
           disabled ? 'cursor-not-allowed border-m-muted text-black/60' : isReadonly ? 'cursor-default' : 'cursor-pointer',
-          label ? 'min-h-[40px]' : 'h-[40px] py-0',
+          twMerge(label ? 'min-h-[40px]' : 'h-[40px] py-0', fieldClass),
           rounded,
           textField,
   ]"
@@ -206,6 +206,7 @@ const props = withDefaults(defineProps<{
   textField?: string
   textValue?: string
   textLabel?: string
+  fieldClass?: string
   rounded?: string
   disabled?: boolean
   readonly?: boolean
@@ -223,6 +224,7 @@ const props = withDefaults(defineProps<{
   textField: 'text-lg',
   textValue: 'text-lg',
   textLabel: 'text-sm',
+  fieldClass: '',
   rounded: 'rounded-md',
   disabled: false,
   readonly: false,