refactor(admin-ui): replace always-open Drawer pattern with controlled open state (also fixes mount animation)#1605
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
paanSinghCoder
changed the title
paanSinghCoder
changed the title
paanSinghCoder
changed the title
paanSinghCoder
changed the title
Coverage Report for CI Build 25914270743Warning Build has drifted: This PR's base is out of sync with its target branch, so coverage data may include unrelated changes. Coverage remained the same at 42.291%Details
Uncovered ChangesNo uncovered changes found. Coverage RegressionsNo coverage regressions found. Coverage Stats
💛 - Coveralls |
|
|
||
| return ( | ||
| <Drawer open> | ||
| <Drawer open={open}> |
There was a problem hiding this comment.
onClose should also be passed to Drawer root right?
There was a problem hiding this comment.
In the previous version the page never relied on overlay-click-to-close, the cross button always closed it.
Added the onClose to add the the overlay click to close as it is a standard behaviour.
| }: ProductDetailsProps) { | ||
| return ( | ||
| <Drawer open> | ||
| <Drawer open={open}> |
|
|
||
| return ( | ||
| <Drawer open={true}> | ||
| <Drawer open={open}> |
|
|
||
| return ( | ||
| <Drawer open={true}> | ||
| <Drawer open={open}> |
|
|
||
| return ( | ||
| <Drawer open> | ||
| <Drawer open={open}> |
…etter close behavior
3 participants
Why
v1's
Draweruses CSS transitions ondata-starting-style— they only fire on afalse → trueopen state change. Drawers mounted withopen={true}literal (v0 pattern carried over) skip the entry animation because base-ui'suseTransitionStatusinitializesmounted=trueand never appliesdata-starting-style.What
Lift the
openstate to each drawer's parent: child acceptsopen?: boolean, parent always renders the child and passesopen={someState}. Open/close now naturally fires base-ui's enter/exit transitions.Sites updated
views/organizations/list/create.tsx(New Organization)views/organizations/details/edit/{kyc,organization,billing}.tsx(Edit panels)views/products/details.tsx(Product details)views/webhooks/webhooks/{create,update}/index.tsx(Create/Update webhook)Caveat
Form/UI state in these components now persists across close/reopen (component stays mounted). Acceptable for read-only views; if reset-on-open is wanted for the create forms, follow up with a
useEffect(reset, [open])orkeyreset.Base
This PR targets
chore/sdk-admin-apsara-v1because the fix only applies in the v1 context. Will rebase / auto-retarget tomainonce the migration PR merges.