Align drawer to architecture goals: expose side as required prop#197
Merged
Conversation
|
📚 Storybook preview: https://pr-197-propel-storybook.vamsi-906.workers.dev |
The DrawerPopup (and DrawerPanel) now accept a required `side` prop
("start" | "end") that drives both the viewport edge the panel pins to
and the direction of the slide animation. Previously the popup hardcoded
right-edge positioning and translate-x-full for the enter/exit transform.
As per issue #127, anchor side is explicitly an adjustable axis; making it
a required cva variant (no defaultVariants) forces callers to be
intentional about which edge they want.
The leading-edge shadow border also follows side: `border-s-sm` for end
drawers (left border), `border-e-sm` for start drawers (right border).
All other chrome (backdrop, z-index, height, animation timing) stays baked
in as always-the-same values from the spec.
Stories updated to pass side="end" and a new StartSide story added to the
components tier to show a left-anchored drawer.
The drawer ui tier was missing the header/body/footer layout regions the Figma spec lists as always-the-same structure, so both the ui and components stories were hand-rolling them with raw <div className=...> wrappers (a flex-col header group, an items-start/justify-between title row, and a secondary-text body). That pushed layout styling into the composition tiers, where no className should live. Extract those regions into four new single-element ui parts, each with its own cva in variants.ts: - DrawerHeader: the top region, title/description block at the inline-start with a corner close at the inline-end on one baseline. - DrawerHeaderContent: the stacked title + description inside the header. - DrawerBody: the main content region that grows and scrolls. - DrawerFooter: the footer actions region, actions at the inline-end. Export them from the ui barrel, re-export from the components barrel, and update both stories to compose the parts (registering them in subcomponents) instead of inline className wrappers. The components tier now carries no layout styling at all.
lifeiscontent
force-pushed
the
align/drawer
branch
from
c19bf5b to
b07006f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #127
What the spec says
From the designer's review:
Always the same — backdrop overlay, focus trap, Escape key close, shadow/elevation on the leading edge, full viewport height, slide animation direction matching the anchor side, z-index stacking.
Depends (adjustable) — anchor side (left or right), width, title text, body content, footer actions, whether the close X button is shown, whether the backdrop dismisses.
What changed
The key adjustable axis that was missing was anchor side. The popup previously hardcoded right-edge positioning (
inset-e-0,translate-x-full) with no way to get a left-edge drawer without reaching around the component.Architecture changes
variants.ts—drawerPopupVariantsgains asidecva variant ("start"|"end"). Side-specific classes (edge pinning, leading-edge border, slide animation direction) move into the variant; side-agnostic chrome (z-index, height, background, shadow, animation timing) stays in the base. NodefaultVariants— callers are explicit.end:inset-e-0,border-s-sm(left border = leading edge for a right drawer),data-starting-style:translate-x-fullstart:inset-s-0,border-e-sm(right border = leading edge for a left drawer),data-starting-style:-translate-x-fullDrawerPopup—side: DrawerPopupSideadded as a required prop; passed todrawerPopupVariants({ side }).DrawerPanel— inheritssideviaDrawerPopupPropsand forwards it toDrawerPopup. No additional boilerplate needed.index.tsx— exportsDrawerPopupSidetype for consumers who want to type their own wrappers.Stories — existing stories updated to pass
side="end"(equivalent to the previous hardcoded behaviour); a newStartSidestory added to the components tier to show a left-anchored drawer.Needs design approval before merge
Per repo convention, please tag @bhaveshraja for design sign-off before merging.