Skip to content

fix: motion, sizing, scroll, and overlay story docs#620

Merged
robsongajunior merged 6 commits into
mainfrom
fix/drawer-overlay-improvements
Jun 1, 2026
Merged

fix: motion, sizing, scroll, and overlay story docs#620
robsongajunior merged 6 commits into
mainfrom
fix/drawer-overlay-improvements

Conversation

@gab-az
Copy link
Copy Markdown
Collaborator

@gab-az gab-az commented May 29, 2026

Summary

  • Fix drawer enter/exit animation by sharing motion state in the portal and deferring close paint so the slide-out transition runs reliably.
  • Fix medium/large drawer width via shell inline max-width, reactive size, fluid Panel, and md:w-full shell positioning.
  • Scroll long drawer body content through ScrollArea in PanelContent while header and footer stay in the panel flex layout.
  • Document canonical Panel shell usage in Drawer and Dialog Storybook stories, including Sizes and ScrollContent examples.

Commits

  1. fix(drawer): share motion state and defer close for exit animation
  2. fix(drawer): apply size presets on shell and fluid panel width
  3. feat(drawer): scroll PanelContent with ScrollArea in drawer context
  4. fix(panel): align header and footer horizontal padding to spacing-lg
  5. docs(storybook): document drawer and dialog panel shell usage
  6. docs(storybook): simplify ChangePlanDrawer to a single Default story

Test plan

  • Open Drawer → Default, Sizes, and ScrollContent in Storybook (desktop viewport)
  • Confirm small/medium/large widths differ (384 / 672 / 1024 px)
  • Confirm drawer slide-in and slide-out animations on open/close/reopen
  • Confirm ScrollContent keeps header/footer in layout while body scrolls
  • Open Dialog → Default and verify Panel shell anatomy in docs Usage block
  • Open Templates → ChangePlanDrawer Default and verify trigger + drawer flow

Made with Cursor

gab-az and others added 6 commits May 29, 2026 18:33
@gab-az @cursoragent
fix(drawer): share motion state and defer close for exit animation
e01f750 
Centralize useDrawerMotionState in drawer-portal and inject it into overlay
and content so enter/exit transitions stay in sync. Defer painting closed
state on exit so the slide-out animation can run.

Co-authored-by: Cursor <cursoragent@cursor.com>
@gab-az @cursoragent
fix(drawer): apply size presets on shell and fluid panel width
837b071 
Drive drawer max-width via inline shell styles and reactive size prop.
Use data-fluid on Panel to avoid medium cap conflicts, and md:w-full on the
shell so medium and large presets render at distinct widths.

Co-authored-by: Cursor <cursoragent@cursor.com>
@gab-az @cursoragent
feat(drawer): scroll PanelContent with ScrollArea in drawer context
56069c0 
Render ScrollArea inside PanelContent when drawer-content provides scroll
host context so only the body scrolls while header and footer stay in the
panel flex layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
@gab-az @cursoragent
fix(panel): align header and footer horizontal padding to spacing-lg
114b5a8 
Match panel header and footer inset tokens for consistent shell spacing.

Co-authored-by: Cursor <cursoragent@cursor.com>
@gab-az @cursoragent
docs(storybook): document drawer and dialog panel shell usage
bd464a0 
Add Usage blocks, Sizes and ScrollContent drawer stories, and align Dialog
Default with the shared PanelHeader, PanelContent, and PanelFooter anatomy.

Co-authored-by: Cursor <cursoragent@cursor.com>
@gab-az @cursoragent
docs(storybook): simplify ChangePlanDrawer to a single Default story
5f94777 
Use button-triggered drawer with the standard panel regions and drop extra
playground and accessibility variants from the template story.

Co-authored-by: Cursor <cursoragent@cursor.com>
@gab-az gab-az requested a review from a team as a code owner May 29, 2026 21:34
@robsongajunior robsongajunior changed the title fix(drawer): motion, sizing, scroll, and overlay story docs fix: motion, sizing, scroll, and overlay story docs Jun 1, 2026
@robsongajunior robsongajunior merged commit 7e589ba into main Jun 1, 2026
12 checks passed
robsongajunior pushed a commit that referenced this pull request Jun 1, 2026
@semantic-release-bot
chore(release): @aziontech/webkit 3.2.2 [skip ci]
2de332b 
## [3.2.2](https://github.com/aziontech/webkit/compare/@aziontech/webkit@3.2.1...@aziontech/webkit@3.2.2) (2026-06-01)

### Bug Fixes

* motion, sizing, scroll, and overlay story docs ([#620](#620)) ([7e589ba](7e589ba))
* storybook preview build ([#618](#618)) ([108c168](108c168))
@robsongajunior
Copy link
Copy Markdown
Contributor

robsongajunior commented Jun 1, 2026

🎉 This PR is included in version 3.2.2 🎉

The release is available on:

Your semantic-release bot 📦🚀

@robsongajunior robsongajunior deleted the fix/drawer-overlay-improvements branch June 2, 2026 13:45
robsongajunior pushed a commit that referenced this pull request Jun 3, 2026
@semantic-release-bot
chore(release): @aziontech/theme 2.2.0 [skip ci]
5ef12fe 
## [2.2.0](https://github.com/aziontech/webkit/compare/@aziontech/theme@2.1.1...@aziontech/theme@2.2.0) (2026-06-03)

### Features

* add button highlight ([#622](#622)) ([4c2654c](4c2654c))

### Bug Fixes

* adjust card-pricing gap spacing for non-middle cards ([26c051a](26c051a))
* empty results block button migration ([#630](#630)) ([bb255f4](bb255f4))
* migration table action buttons ([#621](#621)) ([059f99d](059f99d))
* motion, sizing, scroll, and overlay story docs ([#620](#620)) ([7e589ba](7e589ba))
* table actions IconButton sizes ([#625](#625)) ([907b1a6](907b1a6))
* tag component import ([#626](#626)) ([7ae78a5](7ae78a5))
@robsongajunior
Copy link
Copy Markdown
Contributor

robsongajunior commented Jun 3, 2026

🎉 This PR is included in version 2.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@robsongajunior robsongajunior robsongajunior approved these changes

Assignees

@gab-az gab-az

Labels

released

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@gab-az @robsongajunior