fix(sidebar) : rend cliquable toute la zone survolée des liens (MUI-47)
Le padding vertical (pt-1/pb-1) était porté par le <li> qui affiche le fond de hover, alors que l'élément cliquable est l'<a> à l'intérieur : les ~4px en haut et en bas de chaque lien étaient survolés mais non cliquables. Le padding vertical passe sur l'<a> (py-1) — la zone de hover épouse exactement la cible de clic, sans changement visuel. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -72,6 +72,7 @@ Liste des évolutions de la librairie Malio layer UI
|
||||
* [#MUI-42] Button / ButtonIcon : l'anneau de focus passe du halo `ring-2 ring-m-primary/50` à l'anneau standard `.m-focus-ring` (outline plein, offset 2px), pour l'homogénéité avec les autres composants.
|
||||
|
||||
### Fixed
|
||||
* [#MUI-47] Sidebar : la **bande de ~4px en haut/bas d'un lien** (padding du `<li>` qui porte le fond de hover) était survolée mais **non cliquable**. Le padding vertical passe du `<li>` à l'`<a>` (`py-1`), si bien que toute la zone survolée devient cliquable — sans changement visuel. Les côtés n'étaient pas affectés (`<a>` en `block`, pas de padding horizontal sur le `<li>`).
|
||||
* Sidebar : le **lien actif** reste actif sur les **sous-routes** (match par préfixe via `useRoute().path` au lieu de l'`active-class` de NuxtLink qui dépendait de l'imbrication des routes) — ex. `/supplier` reste surligné sur `/supplier/1/edit`. Nouvelle option `exact: true` par item pour forcer le match strict.
|
||||
* Famille Date (CalendarField) : le **clic sur le picto calendrier** ouvre désormais le popover (le `<Icon>` en overlay absolu interceptait le clic sans le traiter, et ne le laissait pas retomber sur l'input). Couvre Date, DateTime, DateRange, DateWeek. La croix d'effacement conserve son comportement (efface sans ouvrir).
|
||||
* Famille Date editable (MalioDate, MalioDateTime) : la saisie clavier est désormais **bornée par champ** sur le premier **et** le second chiffre (jour `01-31`, mois `01-12`, heure `00-23`, minute `00-59`) — une valeur hors plage (`99/99/9999`, un jour `33`, un mois `19`…) ne peut plus être tapée (auparavant saisissable puis rejetée a posteriori par la validation). Les impossibilités calendaires fines (`31/02`, 29/02 non bissextile, hors `min`/`max`) restent captées par la validation. Implémenté via `buildBoundedMask(template)` (CalendarField) : un `preProcess` maska valide chaque champ progressivement (un chiffre n'est accepté que s'il reste une complétion valide dans la plage) ; il distingue le mois des minutes (même lettre `M`) selon la présence d'heures dans le gabarit.
|
||||
|
||||
@@ -107,19 +107,24 @@ describe('MalioSidebar', () => {
|
||||
expect(links[2].attributes('href')).toBe('/fournisseurs')
|
||||
})
|
||||
|
||||
it('hover : fond + couleur + semi-bold tous portés par le <li> (texte non figé sur le <a>)', () => {
|
||||
it('hover : fond + couleur + semi-bold portés par le <li>', () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
const li = wrapper.find('li')
|
||||
expect(li.classes()).toContain('hover:bg-m-primary/10')
|
||||
expect(li.classes()).toContain('hover:text-m-primary')
|
||||
expect(li.classes()).toContain('hover:font-semibold')
|
||||
expect(li.classes()).toContain('text-black')
|
||||
expect(li.classes()).toContain('pt-1')
|
||||
expect(li.classes()).toContain('pb-1')
|
||||
// Le <a> ne fige PAS sa couleur (sinon le texte resterait noir sur les bandes
|
||||
// pt-1/pb-1 hors du <a> alors que le fond du <li> est bleu).
|
||||
expect(wrapper.find('a').classes()).not.toContain('text-black')
|
||||
expect(wrapper.find('a').classes()).not.toContain('hover:text-m-primary')
|
||||
})
|
||||
|
||||
it('zone cliquable : le padding vertical est sur le <a>, pas sur le <li> (pas de bande morte au survol)', () => {
|
||||
const wrapper = mountComponent({sections})
|
||||
// Le padding vertical doit appartenir à la cible de clic (<a>) pour que toute
|
||||
// la bande survolée soit cliquable — sinon pt-1/pb-1 sur le <li> crée une
|
||||
// bande colorée mais non cliquable en haut et en bas du lien.
|
||||
const li = wrapper.find('li')
|
||||
expect(li.classes()).not.toContain('pt-1')
|
||||
expect(li.classes()).not.toContain('pb-1')
|
||||
expect(wrapper.find('a').classes()).toContain('py-1')
|
||||
})
|
||||
|
||||
it('actif : route exacte → lien en primary + semi-bold, sans fond', () => {
|
||||
|
||||
@@ -49,14 +49,14 @@
|
||||
<li
|
||||
v-for="item in section.items"
|
||||
:key="item.to"
|
||||
:class="collapsed ? '' : 'text-black hover:bg-m-primary/10 hover:font-semibold hover:text-m-primary pt-1 pb-1'"
|
||||
:class="collapsed ? '' : 'text-black hover:bg-m-primary/10 hover:font-semibold hover:text-m-primary'"
|
||||
>
|
||||
<NuxtLink
|
||||
:to="item.to"
|
||||
active-class="!text-m-primary font-semibold"
|
||||
:class="twMerge(
|
||||
'block truncate text-[15px] leading-[150%]',
|
||||
collapsed ? 'px-3 text-center' : 'pl-[32px]',
|
||||
collapsed ? 'px-3 text-center' : 'pl-[32px] py-1',
|
||||
isActive(item) ? '!text-m-primary font-semibold' : '',
|
||||
)"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user