[CAPY-2410][BpkDrawerV2] Add drawer v2 component by guillewu · Pull Request #4917 · Skyscanner/backpack

Guillermo Wu (guillewu) · 2026-07-21T14:32:17Z

JIRA Link: https://skyscanner.atlassian.net/browse/CAPY-2410

Summary

Adds a new BpkDrawerV2 component that wraps Ark UI's drawer primitives in Backpack naming, styling, and documentation conventions.

The component is exported from bpk-component-drawer as a named export alongside the existing default BpkDrawer. It exposes a namespace API with Root, RootProvider, Trigger, SwipeArea, Backdrop, Content, Header, Title, Description, Body, Grabber, GrabberIndicator, and CloseTrigger parts. It supports modal drawers, side drawers, snap points, persistent non-modal snap drawers, draggable grabbers, and the Backpack close button.

Styles are colocated per part, following the newer multi-part Ark wrapper pattern used by BpkModalV3.

What changed

Added BpkDrawerV2 under bpk-component-drawer with README guidance, stories, unit tests, and accessibility tests.
Added Backpack SCSS modules for drawer content, backdrop, header, title, body, grabber, and swipe area.
Added snap-point stories, including a persistent 10%/90% example where the background remains interactive.
Added keyboard-accessible grabber behavior in the persistent snap-point example.
Added Ark Drawer parts to the ESLint allowlist for Backpack-owned styling on Ark primitives.

Test plan

stylelint 'packages/backpack-web/src/bpk-component-drawer/src/BpkDrawerV2/**/*.scss'
eslint packages/backpack-web/src/bpk-component-drawer/src/BpkDrawerV2 packages/backpack-web/src/bpk-component-drawer/index.ts --ext .ts,.tsx
tsc --build packages/backpack-web/tsconfig.lib.json --pretty false
TZ=Etc/UTC npx jest packages/backpack-web/src/bpk-component-sheet-drawer --runInBand before the rename
CI=1 npx nx run backpack-storybook-host:build-storybook -- -o /private/tmp/bpk-sheet-drawer-storybook before the rename

Note: after merging latest main, local Jest cannot start until dependencies are refreshed because the stale local node_modules is missing @babel/preset-flow. CI runs from a clean install.

Remember to include the following changes:

skyscanner-backpack-bot · 2026-07-21T14:36:04Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-07-21T14:53:04Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-07-21T14:55:54Z

	Warnings
⚠️	Package source files (e.g. `packages/package-name/src/Component.js`) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against fee8203

skyscanner-backpack-bot · 2026-07-21T15:23:27Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

Copilot

Pull request overview

Note

Copilot couldn't run its full agentic review because it didn't start before the timeout. Make sure your repository has a runner available, or add a copilot-code-review.yml file specifying one with the runs-on attribute. See the docs for more details.

Adds a new BpkSheetDrawer component that wraps Ark UI’s Drawer primitives using Backpack’s compound-component API, styling conventions, and documentation/testing patterns.

Changes:

Introduced BpkSheetDrawer namespace API (Root, Trigger, Content, Backdrop, etc.) plus hooks (useBpkSheetDrawer, useBpkSheetDrawerContext).
Added SCSS modules for the drawer parts (content, backdrop, header, title, body, grabber, swipe area) including RTL and reduced-motion handling.
Added Storybook stories plus unit and accessibility tests; updated ESLint allowlist to permit styling Ark Drawer parts.

Reviewed changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/backpack-web/src/bpk-component-sheet-drawer/src/useBpkSheetDrawerContext.ts	Adds typed wrapper hook around Ark `useDrawerContext`.
packages/backpack-web/src/bpk-component-sheet-drawer/src/useBpkSheetDrawer.ts	Adds typed wrapper hook around Ark `useDrawer`.
packages/backpack-web/src/bpk-component-sheet-drawer/src/accessibility-test.tsx	Adds jest-axe accessibility coverage for open/description/side drawer variants.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerTrigger.tsx	Adds Backpack Trigger wrapper over `Drawer.Trigger` with data attribute.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerTitle/BpkSheetDrawerTitle.tsx	Adds Title part wrapper with Backpack styling hook-up.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerTitle/BpkSheetDrawerTitle.module.scss	Adds typography styling for the title.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerSwipeArea.tsx	Adds SwipeArea wrapper that applies Backpack class and data attribute.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerSwipeArea.module.scss	Adds SwipeArea positioning/z-index styling.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerRootProvider.tsx	Adds RootProvider wrapper for external state machine usage.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerRoot.tsx	Adds Root wrapper for Ark Drawer root with Backpack data attribute.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerHeader/BpkSheetDrawerHeader.tsx	Adds Header layout part with Backpack class.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerHeader/BpkSheetDrawerHeader.module.scss	Adds header spacing/layout tokens.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerGrabber/BpkSheetDrawerGrabberIndicator.tsx	Re-exports GrabberIndicator for namespace API.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerGrabber/BpkSheetDrawerGrabber.tsx	Adds Grabber + default indicator and styles/data attributes.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerGrabber/BpkSheetDrawerGrabber.module.scss	Adds grabber cursor/focus/indicator styling and dragging states.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerDescription.tsx	Adds Description wrapper part exposing Ark `Drawer.Description`.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerContent/BpkSheetDrawerContent.tsx	Adds Content wrapper (Positioner + Content) with draggable default.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerContent/BpkSheetDrawerContent.module.scss	Adds core panel positioning, animations, RTL handling, reduced-motion handling.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerCloseTrigger/BpkSheetDrawerCloseTrigger.tsx	Adds CloseTrigger implementation using `BpkCloseButton` inside Ark CloseTrigger.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerBody/BpkSheetDrawerBody.tsx	Adds Body part with “no drag” marker.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerBody/BpkSheetDrawerBody.module.scss	Adds body padding/scroll behavior.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerBackdrop/BpkSheetDrawerBackdrop.tsx	Adds Backdrop part wrapper with Backpack class.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawerBackdrop/BpkSheetDrawerBackdrop.module.scss	Adds scrim styling + in/out animations and reduced-motion behavior.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawer.tsx	Defines the public namespace object API.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawer.stories.tsx	Adds Storybook stories including persistent snap points with keyboard grabber behavior.
packages/backpack-web/src/bpk-component-sheet-drawer/src/BpkSheetDrawer-test.tsx	Adds unit tests for namespace exports, parts, interactions, and RootProvider/hooks.
packages/backpack-web/src/bpk-component-sheet-drawer/index.ts	Exports component, hooks, and public prop/type aliases.
packages/backpack-web/src/bpk-component-sheet-drawer/README.md	Adds component documentation, anatomy, and usage guidance.
.eslintrc	Allowlists Ark Drawer parts for Backpack-owned styling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…rawer # Conflicts: # .eslintrc

skyscanner-backpack-bot · 2026-07-31T10:56:58Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-07-31T11:12:24Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-08-03T09:35:21Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

Copilot

Pull request overview

Copilot reviewed 29 out of 29 changed files in this pull request and generated 1 comment.

Suppressed comments (3)

packages/backpack-web/src/bpk-component-drawer/src/BpkDrawerV2/BpkDrawerV2Backdrop/BpkDrawerV2Backdrop.module.scss:28

Backdrop and drawer positioner/content are both using the same z-index (tokens.$bpk-zindex-modal). With identical z-index values, stacking depends on DOM order, so consumers could accidentally render the backdrop above the content (or otherwise get inconsistent layering). Set distinct z-index levels (e.g., backdrop lower than content/positioner) so layering is deterministic regardless of render order.

.bpk-drawer-v2__backdrop {
  position: fixed;
  z-index: tokens.$bpk-zindex-modal;
  background-color: tokens.$bpk-scrim-day;
  inset: 0;

packages/backpack-web/src/bpk-component-drawer/src/BpkDrawerV2/BpkDrawerV2CloseTrigger/BpkDrawerV2CloseTrigger.tsx:37

Passing a hard-coded no-op onClick into the asChild close trigger is risky because it can interfere with (or override) the close trigger’s injected click handler depending on how props are merged, and it prevents consumers from supplying their own click behavior via BpkDrawerV2.CloseTrigger. Prefer making BpkCloseButton accept an optional onClick (or composing handlers) so the close behavior can be injected by Drawer.CloseTrigger without needing a placeholder function.

  <Drawer.CloseTrigger asChild>
    <BpkCloseButton
      label={label}
      onClick={() => {}}
      {...getDataComponentAttribute('DrawerV2CloseTrigger')}
    />

packages/backpack-web/src/bpk-component-drawer/src/BpkDrawerV2/accessibility-test.tsx:30

This test file sets a global window.ResizeObserver mock at module scope, and the same pattern appears in other tests in this PR. To avoid duplication and reduce the chance of cross-test interference, move the ResizeObserver polyfill/mock into a shared Jest setup file (or a local beforeAll helper imported by both test files).

window.ResizeObserver =
  window.ResizeObserver ||
  jest.fn().mockImplementation(() => ({
    disconnect: jest.fn(),
    observe: jest.fn(),
    unobserve: jest.fn(),
  }));

skyscanner-backpack-bot · 2026-08-03T10:30:23Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-08-03T12:06:57Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-08-03T13:11:53Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-08-03T14:02:57Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-08-03T14:17:35Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-08-03T14:29:22Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-08-03T14:42:55Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-08-03T15:04:29Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-08-03T15:20:40Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

skyscanner-backpack-bot · 2026-08-04T08:56:50Z

Visit https://backpack.github.io/storybook-prs/4917 to see this build running in a browser.

Yanko Mirov (tranculent) · 2026-08-04T13:21:23Z

 };

-export default BpkCloseButton;
+export default BpkCloseButton;


revert, not needed

Yanko Mirov (tranculent) · 2026-08-04T13:28:52Z

+  it('has no accessibility violations when open', async () => {
+    const { container } = render(
+      <BpkDrawerV2.Root open onOpenChange={jest.fn()}>
+        <BpkDrawerV2.Backdrop />


Claude remark:

No Portal around Backdrop and Content — drawer will get trapped by transformed ancestors

BpkDrawerV2Content.tsx renders <Drawer.Positioner><Drawer.Content>…</Drawer.Content></Drawer.Positioner> directly, and BpkDrawerV2Backdrop.tsx renders bare <Drawer.Backdrop>. Neither is wrapped in Ark's
.

Consequence: any ancestor with transform, filter, perspective, will-change, or contain: paint creates a containing block that traps position: fixed. This is common in card grids, animated wrappers, and virtualized lists. The drawer will then render clipped inside its ancestor instead of full-viewport, and it's a nightmare to debug from a consumer's side.

Fix: wrap in at the top of BpkDrawerV2Content (and BpkDrawerV2Backdrop, or in BpkDrawerV2Root) as BpkModalV3 and BpkContextMenu do. Owners will absolutely flag this.

Example here:

backpack/packages/backpack-web/src/bpk-component-context-menu/src/BpkContextMenuContent.tsx

Line 34 in c39a64a

<Portal>

Yanko Mirov (tranculent) · 2026-08-04T13:30:22Z

+    <Drawer.CloseTrigger asChild>
+      <BpkCloseButton
+        label={label}
+        onClick={() => drawer.setOpen(false)}


Claude:

BpkDrawerV2CloseTrigger fires close twice / overrides Ark's handler

BpkDrawerV2CloseTrigger/BpkDrawerV2CloseTrigger.tsx:817-828:
const drawer = useDrawerContext();
return (
<Drawer.CloseTrigger asChild>
<BpkCloseButton
label={label}
onClick={() => drawer.setOpen(false)}
{...getDataComponentAttribute('DrawerV2CloseTrigger')}
/>
</Drawer.CloseTrigger>
);

Drawer.CloseTrigger already closes on click — that is its entire purpose. The explicit onClick={() => drawer.setOpen(false)} on the child is either:

redundant (Ark merges → both fire, onOpenChange gets called twice)

or supersedes Ark's merged handler, depending on how asChild prop merging orders them

Either way it's wrong. Drop useDrawerContext() and the explicit onClick — just let <Drawer.CloseTrigger asChild> handle it. This will also remove the surface area for onOpenChange firing twice, which will
bite consumers doing analytics on drawer close.

Yanko Mirov (tranculent) · 2026-08-04T14:00:38Z

+const BpkDrawerV2Description = ({
+  children,
+}: BpkDrawerV2DescriptionProps) => (
+  <Drawer.Description


No className, no test for it beyond the accessibility test. Consumers will get raw browser
(or whatever Ark defaults to) which typically doesn't match Backpack typography.

Either apply typography.bpk-body-default here or document that consumers must style the description themselves.

Guillermo Wu (guillewu) added the minor Non breaking change label Jul 21, 2026

Guillermo Wu (guillewu) force-pushed the CAPY-2410/bpk-sheet-drawer branch from f196d04 to 0fa3b76 Compare July 21, 2026 14:49

[CAPY-2410][BpkSheetDrawer] Add sheet drawer component

d3e7ce9

Guillermo Wu (guillewu) force-pushed the CAPY-2410/bpk-sheet-drawer branch from 0fa3b76 to d3e7ce9 Compare July 21, 2026 15:19

Guillermo Wu (guillewu) requested a review from Copilot July 21, 2026 15:50

Copilot AI reviewed Jul 21, 2026

View reviewed changes

Merge remote-tracking branch 'origin/main' into CAPY-2410/bpk-sheet-d…

ec92b82

…rawer # Conflicts: # .eslintrc

[CAPY-2410][BpkDrawerV2] Rename sheet drawer component

de3ce92

Guillermo Wu (guillewu) changed the title ~~[CAPY-2410][BpkSheetDrawer] Add sheet drawer component~~ [CAPY-2410][BpkDrawerV2] Add drawer v2 component Jul 31, 2026

Guillermo Wu (guillewu) requested a review from Copilot August 3, 2026 09:22

[CAPY-2410][BpkDrawerV2] Separate drawer v2 docs

6023364

Copilot AI reviewed Aug 3, 2026

View reviewed changes

Comment thread packages/backpack-web/src/bpk-component-drawer/src/BpkDrawerV2/BpkDrawerV2SwipeArea.module.scss

[CAPY-2410][BpkDrawerV2] Address Copilot review comments

b243b51

Guillermo Wu (guillewu) added 2 commits August 3, 2026 13:59

[CAPY-2410][BpkDrawerV2] Align trigger asChild docs

e533aa8

[CAPY-2410][BpkDrawerV2] Use themed colour tokens

bc5a773

[CAPY-2410][BpkDrawerV2] Rename persistent snap story

8a2ed3c

[CAPY-2410][BpkDrawerV2] Refine close trigger and slide animation

654b7f2

[CAPY-2410][BpkDrawerV2] Add drawer exit slide animation

5400cbf

[CAPY-2410][BpkDrawerV2] Move exit slide to drawer wrapper

56b3069

[CAPY-2410][BpkDrawerV2] Preserve drag offset on exit

3b89293

[CAPY-2410][BpkDrawerV2] Clamp drawer exit target

b383c0a

[CAPY-2410][BpkDrawerV2] Use direct close in snap story

d526b04

[CAPY-2410][BpkDrawerV2] Revert clamped exit target

cd9e312

Guillermo Wu (guillewu) force-pushed the CAPY-2410/bpk-sheet-drawer branch from a7a17dd to cd9e312 Compare August 4, 2026 09:26

Merge branch 'main' into CAPY-2410/bpk-sheet-drawer

fee8203

Yanko Mirov (tranculent) reviewed Aug 4, 2026

View reviewed changes

[CAPY-2410][BpkDrawerV2] Address review comments

393b50c

Yanko Mirov (tranculent) reviewed Aug 4, 2026

View reviewed changes

Uh oh!

Conversation

Guillermo Wu (guillewu) commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What changed

Test plan

Uh oh!

skyscanner-backpack-bot Bot commented Jul 21, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 21, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

skyscanner-backpack-bot Bot commented Jul 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

skyscanner-backpack-bot Bot commented Jul 31, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jul 31, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Aug 3, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

skyscanner-backpack-bot Bot commented Aug 3, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Aug 3, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Aug 3, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Aug 3, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Aug 3, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Aug 3, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Aug 3, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Aug 3, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Aug 3, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Aug 4, 2026

Uh oh!

Yanko Mirov (tranculent) Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

Yanko Mirov (tranculent) Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

Yanko Mirov (tranculent) Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

Yanko Mirov (tranculent) Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Guillermo Wu (guillewu) commented Jul 21, 2026 •

edited

Loading

skyscanner-backpack-bot Bot commented Jul 21, 2026 •

edited

Loading