Skip to content

feat(Drawer): zijpaneel dat vanuit links of rechts inschuift#124

Merged
jeffreylauwers merged 1 commit intomainfrom
feature/drawer
Mar 27, 2026
Merged

feat(Drawer): zijpaneel dat vanuit links of rechts inschuift#124
jeffreylauwers merged 1 commit intomainfrom
feature/drawer

Conversation

@jeffreylauwers
Copy link
Copy Markdown
Owner

Sluit #115.

Summary

  • Implementeert het Drawer component als native <dialog>-element
  • Modal variant (.showModal()) met ::backdrop en native focus-trap
  • Non-modal variant (.show()) met handmatige Escape-listener, achtergrond blijft interactief
  • Slide-animatie via @starting-style + translateX (rechts of links)
  • Scroll-affordance schaduw in DrawerBody (Lea Verou techniek, zelfde als ModalDialog)
  • 19 design tokens, geen border-radius, border alleen aan de kant van de pagina
  • Storybook controls voor side en modal op de Default story

Components

  • Drawer — root, context provider, isOpen / onClose / modal / side props
  • DrawerHeader — flex container met sluitknop via context
  • DrawerHeading — semantische heading, auto-gekoppeld via aria-labelledby
  • DrawerBody — scrollbare sectie met scroll-affordance
  • DrawerFooter — actieknoppen container

Test plan

  • pnpm test — 1169 tests, 57 suites, allemaal groen
  • pnpm --filter storybook exec tsc --noEmit — 0 fouten
  • Visueel geverifieerd in Storybook: Default (right), Side Left, backdrop, controls

🤖 Generated with Claude Code

Sluit issue #115. Implementeert het Drawer component als native <dialog>-element
met modal (showModal) en non-modal (.show) varianten, slide-animatie via
@starting-style, scroll-affordance body en Storybook controls voor side en modal.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@jeffreylauwers jeffreylauwers merged commit 1cb9bfe into main Mar 27, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant