fix: rendre le footer du Drawer hors zone scrollable (épinglé en bas)

Le slot #footer était rendu à l'intérieur du body overflow-y-auto, ce qui
faisait courir la scrollbar sur toute la hauteur, derrière le footer. Il est
désormais frère du body (comme MalioModal) : seul le body défile et le footer
reste fixé en bas. Tests, story, pages playground et doc alignés.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-27 14:50:55 +02:00
parent 951acd448e
commit 280b650e49
7 changed files with 32 additions and 41 deletions
+6 -7
View File
@@ -152,12 +152,13 @@ describe('MalioDrawer', () => {
expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
})
it('renders the #footer slot inside the body (scrollable zone)', () => {
it('renders the #footer slot in a footer pinned below the body', () => {
const wrapper = mountComponent(
{ modelValue: true },
{ footer: '<button data-test="save">Enregistrer</button>' },
)
expect(wrapper.find('[data-test="body"] [data-test="footer"] [data-test="save"]').exists()).toBe(true)
expect(wrapper.find('[data-test="body"] [data-test="footer"]').exists()).toBe(false)
expect(wrapper.find('[data-test="footer"] [data-test="save"]').exists()).toBe(true)
})
it('does not render the footer wrapper when no #footer slot', () => {
@@ -170,14 +171,12 @@ describe('MalioDrawer', () => {
expect(wrapper.find('[data-test="body"]').classes()).toContain('px-10')
})
it('applies footerClass to the footer wrapper', () => {
it('applies footerClass to the footer', () => {
const wrapper = mountComponent(
{ modelValue: true, footerClass: 'sticky bottom-0' },
{ modelValue: true, footerClass: 'justify-end' },
{ footer: '<span>pied</span>' },
)
const footer = wrapper.find('[data-test="footer"]')
expect(footer.classes()).toContain('sticky')
expect(footer.classes()).toContain('bottom-0')
expect(wrapper.find('[data-test="footer"]').classes()).toContain('justify-end')
})
it('aligns to the right by default', () => {
+7 -7
View File
@@ -64,13 +64,13 @@
data-test="body"
>
<slot />
<div
v-if="$slots.footer"
:class="footerClass"
data-test="footer"
>
<slot name="footer" />
</div>
</div>
<div
v-if="$slots.footer"
:class="twMerge('flex shrink-0 items-center gap-3 px-5 py-4', footerClass)"
data-test="footer"
>
<slot name="footer" />
</div>
</div>
</div>