[CAPY-2410][BpkDrawerV2] Address review comments

Author: guillewu

packages/backpack-web/src/bpk-component-close-button/src/BpkCloseButton.tsx

@@ -68,4 +68,4 @@ const BpkCloseButton = ({
   );
 };
 
-export default BpkCloseButton;
+export default BpkCloseButton;

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

@@ -84,28 +84,40 @@ describe('BpkDrawerV2', () => {
     });
 
     it('passes swipeDirection to Ark', () => {
-      const { container } = renderDrawerV2({ swipeDirection: 'end' });
+      renderDrawerV2({ swipeDirection: 'end' });
       expect(
-        container.querySelector('[data-scope="drawer"][data-part="content"]'),
+        document.body.querySelector(
+          '[data-scope="drawer"][data-part="content"]',
+        ),
       ).toHaveAttribute('data-swipe-direction', 'right');
     });
   });
 
   describe('Parts', () => {
-    it('renders the backdrop with the Backpack class', () => {
+    it('portals the backdrop with the Backpack class', () => {
       const { container } = renderDrawerV2();
       const backdrop = container.querySelector(
         '[data-backpack-ds-component="DrawerV2Backdrop"]',
       );
-      expect(backdrop?.className).toContain('bpk-drawer-v2__backdrop');
+      expect(backdrop).not.toBeInTheDocument();
+      expect(
+        document.body.querySelector(
+          '[data-backpack-ds-component="DrawerV2Backdrop"]',
+        )?.className,
+      ).toContain('bpk-drawer-v2__backdrop');
     });
 
-    it('renders the content with the Backpack class', () => {
+    it('portals the content with the Backpack class', () => {
       const { container } = renderDrawerV2();
       const content = container.querySelector(
         '[data-backpack-ds-component="DrawerV2Content"]',
       );
-      expect(content?.className).toContain('bpk-drawer-v2__content');
+      expect(content).not.toBeInTheDocument();
+      expect(
+        document.body.querySelector(
+          '[data-backpack-ds-component="DrawerV2Content"]',
+        )?.className,
+      ).toContain('bpk-drawer-v2__content');
     });
 
     it('renders the header, title, and body', () => {
@@ -145,9 +157,11 @@ describe('BpkDrawerV2', () => {
     });
 
     it('marks body content as a no-drag area', () => {
-      const { container } = renderDrawerV2();
+      renderDrawerV2();
       expect(
-        container.querySelector('[data-backpack-ds-component="DrawerV2Body"]'),
+        document.body.querySelector(
+          '[data-backpack-ds-component="DrawerV2Body"]',
+        ),
       ).toHaveAttribute('data-no-drag');
     });
   });
@@ -160,6 +174,7 @@ describe('BpkDrawerV2', () => {
 
       await user.click(screen.getByRole('button', { name: 'Close filters' }));
 
+      expect(onOpenChange).toHaveBeenCalledTimes(1);
       expect(onOpenChange).toHaveBeenCalledWith(
         expect.objectContaining({ open: false }),
       );

packages/backpack-web/src/bpk-component-drawer/src/BpkDrawerV2/BpkDrawerV2Backdrop/BpkDrawerV2Backdrop.tsx

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Drawer } from '@ark-ui/react';
+import { Drawer, Portal } from '@ark-ui/react';
 
 import { cssModules, getDataComponentAttribute } from '../../../../bpk-react-utils';
 
@@ -25,10 +25,12 @@ import STYLES from './BpkDrawerV2Backdrop.module.scss';
 const getClassName = cssModules(STYLES);
 
 const BpkDrawerV2Backdrop = () => (
-  <Drawer.Backdrop
-    className={getClassName('bpk-drawer-v2__backdrop')}
-    {...getDataComponentAttribute('DrawerV2Backdrop')}
-  />
+  <Portal>
+    <Drawer.Backdrop
+      className={getClassName('bpk-drawer-v2__backdrop')}
+      {...getDataComponentAttribute('DrawerV2Backdrop')}
+    />
+  </Portal>
 );
 
 export default BpkDrawerV2Backdrop;

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { Drawer, useDrawerContext } from '@ark-ui/react';
+import { Drawer } from '@ark-ui/react';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from '../../../../bpk-component-close-button';
@@ -28,18 +28,14 @@ export type BpkDrawerV2CloseTriggerProps = {
 
 const BpkDrawerV2CloseTrigger = ({
   label,
-}: BpkDrawerV2CloseTriggerProps) => {
-  const drawer = useDrawerContext();
-
-  return (
-    <Drawer.CloseTrigger asChild>
-      <BpkCloseButton
-        label={label}
-        onClick={() => drawer.setOpen(false)}
-        {...getDataComponentAttribute('DrawerV2CloseTrigger')}
-      />
-    </Drawer.CloseTrigger>
-  );
-};
+}: BpkDrawerV2CloseTriggerProps) => (
+  <Drawer.CloseTrigger asChild>
+    <BpkCloseButton
+      label={label}
+      onClick={() => {}}
+      {...getDataComponentAttribute('DrawerV2CloseTrigger')}
+    />
+  </Drawer.CloseTrigger>
+);
 
 export default BpkDrawerV2CloseTrigger;

packages/backpack-web/src/bpk-component-drawer/src/BpkDrawerV2/BpkDrawerV2Content/BpkDrawerV2Content.tsx

@@ -18,7 +18,7 @@
 
 import type { ComponentProps, ReactNode } from 'react';
 
-import { Drawer } from '@ark-ui/react';
+import { Drawer, Portal } from '@ark-ui/react';
 
 import { cssModules, getDataComponentAttribute } from '../../../../bpk-react-utils';
 
@@ -38,19 +38,21 @@ const BpkDrawerV2Content = ({
   draggable = true,
   ...rest
 }: BpkDrawerV2ContentProps) => (
-  <Drawer.Positioner
-    className={getClassName('bpk-drawer-v2__positioner')}
-    {...getDataComponentAttribute('DrawerV2Positioner')}
-  >
-    <Drawer.Content
-      {...rest}
-      className={getClassName('bpk-drawer-v2__content')}
-      draggable={draggable}
-      {...getDataComponentAttribute('DrawerV2Content')}
+  <Portal>
+    <Drawer.Positioner
+      className={getClassName('bpk-drawer-v2__positioner')}
+      {...getDataComponentAttribute('DrawerV2Positioner')}
     >
-      {children}
-    </Drawer.Content>
-  </Drawer.Positioner>
+      <Drawer.Content
+        {...rest}
+        className={getClassName('bpk-drawer-v2__content')}
+        draggable={draggable}
+        {...getDataComponentAttribute('DrawerV2Content')}
+      >
+        {children}
+      </Drawer.Content>
+    </Drawer.Positioner>
+  </Portal>
 );
 
 export default BpkDrawerV2Content;

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

@@ -26,7 +26,7 @@ beforeAll(mockResizeObserver);
 
 describe('BpkDrawerV2 accessibility tests', () => {
   it('has no accessibility violations when open', async () => {
-    const { container } = render(
+    const { baseElement } = render(
       <BpkDrawerV2.Root open onOpenChange={jest.fn()}>
         <BpkDrawerV2.Backdrop />
         <BpkDrawerV2.Content>
@@ -40,11 +40,11 @@ describe('BpkDrawerV2 accessibility tests', () => {
       </BpkDrawerV2.Root>,
     );
 
-    expect(await axe(container)).toHaveNoViolations();
+    expect(await axe(baseElement)).toHaveNoViolations();
   });
 
   it('has no accessibility violations with description', async () => {
-    const { container } = render(
+    const { baseElement } = render(
       <BpkDrawerV2.Root open onOpenChange={jest.fn()}>
         <BpkDrawerV2.Content>
           <BpkDrawerV2.Header>
@@ -59,11 +59,11 @@ describe('BpkDrawerV2 accessibility tests', () => {
       </BpkDrawerV2.Root>,
     );
 
-    expect(await axe(container)).toHaveNoViolations();
+    expect(await axe(baseElement)).toHaveNoViolations();
   });
 
   it('has no accessibility violations as a side drawer', async () => {
-    const { container } = render(
+    const { baseElement } = render(
       <BpkDrawerV2.Root
         open
         onOpenChange={jest.fn()}
@@ -80,6 +80,6 @@ describe('BpkDrawerV2 accessibility tests', () => {
       </BpkDrawerV2.Root>,
     );
 
-    expect(await axe(container)).toHaveNoViolations();
+    expect(await axe(baseElement)).toHaveNoViolations();
   });
 });