Skip to content

refactor(site): add <Drawer /> and migrate build logs drawer - #28009

Open
jakehwll wants to merge 8 commits into
mainfrom
jakehwll/DEVEX-251/drawer-component
Open

refactor(site): add <Drawer /> and migrate build logs drawer#28009
jakehwll wants to merge 8 commits into
mainfrom
jakehwll/DEVEX-251/drawer-component

Conversation

@jakehwll

@jakehwll jakehwll commented Aug 11, 2026

Copy link
Copy Markdown
Contributor

🤖 This PR was written by Coder Agents on behalf of Jake Howell.

Follow-up to #27798. That PR introduced a shared Drawer primitive by adding vaul as a dependency. As raised in review, vaul is currently unmaintained, and this drawer is the only place in the UI using that concept.

This PR takes the suggested route: a dead-simple, self-owned drawer that covers this one case well, built directly on Radix UI's Dialog (already a dependency via radix-ui) instead of vaul. It keeps the same shadcn-style API (Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose) so usage stays familiar, and migrates CreateTemplatePage's BuildLogsDrawer off MUI onto it.

What changed

  • Add site/src/components/Drawer/Drawer.tsx: a reusable drawer/sheet built on radix-ui Dialog. Supports a direction prop (top/bottom/left/right, default right) with slide animations via tailwindcss-animate. No new dependencies.
  • Migrate BuildLogsDrawer from @mui/material/Drawer to the new component. Desktop panel stays at 800px via min(800px, 100%) so it stays within the viewport on mobile.
  • Storybook coverage with play() functions for both the generic Drawer (open/close, direction) and BuildLogsDrawer (close via the X button and via Escape assert onClose), addressing the earlier P1 review note about covering the controlled close path.

Why Radix instead of vaul

  • radix-ui Dialog is already a dependency and provides accessibility, focus management, and open/close state.
  • No dependency on an unmaintained package for a single-use concept.
  • vaul's drag-to-dismiss gesture is not needed for this build-logs use case.

@linear-code

linear-code Bot commented Aug 11, 2026

Copy link
Copy Markdown

DEVEX-251

@jakehwll
jakehwll marked this pull request as ready for review August 11, 2026 02:55
@jakehwll jakehwll changed the title refactor(site): add Radix-based Drawer and migrate build logs drawer refactor(site): add <Drawer /> and migrate build logs drawer Aug 11, 2026

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: df4a2fb409

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
Comment thread site/src/components/Drawer/Drawer.tsx Outdated
Comment thread site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx Outdated
@jakehwll
jakehwll requested a review from jeremyruppel August 11, 2026 13:41

@jeremyruppel jeremyruppel left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks great! 👍

@aslilac

aslilac commented Aug 11, 2026

Copy link
Copy Markdown
Member
image

this seems like it's lacking definition between foreground and background

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.

3 participants