fix(Drawer): incorrect usage of the backdrop (#3883)

lumada-design · Dec 11, 2023 · 23ccffe · 23ccffe
1 parent 2ea23aa
commit 23ccffe
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 87 deletions.
diff --git a/packages/core/src/components/Drawer/Drawer.stories.tsx b/packages/core/src/components/Drawer/Drawer.stories.tsx
@@ -1,5 +1,7 @@
+import { useState } from "react";
 import { css } from "@emotion/css";
 import { Meta, StoryObj } from "@storybook/react";
+import { waitFor, screen, fireEvent } from "@storybook/testing-library";
 import {
   HvButton,
   HvDialogActions,
@@ -8,6 +10,7 @@ import {
   HvDrawer,
   HvDrawerProps,
   HvTypography,
+  HvGlobalActions,
 } from "@hitachivantara/uikit-react-core";
 
 const meta: Meta<typeof HvDrawer> = {
@@ -17,63 +20,85 @@ const meta: Meta<typeof HvDrawer> = {
 };
 export default meta;
 
+const drawerWidth = "60%";
+
+const classes = {
+  drawerPaper: css({
+    width: `calc(100% - ${drawerWidth})`,
+    overflow: "unset", // we want scroll content, not scroll paper
+  }),
+  drawerContent: css({
+    // maximize space for content
+    flex: 1,
+    overflow: "auto",
+  }),
+  drawerTitle: css({
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: "auto",
+  }),
+};
+
 export const Main: StoryObj<HvDrawerProps> = {
   args: {
     anchor: "right",
-    open: true,
   },
   argTypes: {
     classes: { control: { disable: true } },
   },
-  render: (args) => {
-    const drawerWidth = "60%";
+  parameters: {
+    eyes: {
+      runBefore() {
+        fireEvent.click(screen.getByRole("button"));
 
-    const classes = {
-      drawerPaper: css({
-        width: `calc(100% - ${drawerWidth})`,
-        overflow: "unset", // we want scroll content, not scroll paper
-      }),
-      drawerContent: css({
-        // maximize space for content
-        flex: 1,
-        overflow: "auto",
-      }),
-      drawerTitle: css({
-        flexGrow: 0,
-        flexShrink: 0,
-        flexBasis: "auto",
-      }),
-    };
+        return waitFor(() => screen.findByTestId("drawer"));
+      },
+    },
+  },
+  render: (args) => {
+    const [open, setOpen] = useState(false);
 
     return (
-      <HvDrawer
-        disablePortal
-        variant="persistent"
-        classes={{
-          paper: classes.drawerPaper,
-        }}
-        {...args}
-      >
-        <HvDialogTitle component="div" classes={{ root: classes.drawerTitle }}>
-          Lorem Ipsum
-        </HvDialogTitle>
-        <HvDialogContent className={classes.drawerContent}>
-          <HvTypography tabIndex={0}>
-            {[...new Array(30)]
-              .map(
-                () => `Cras mattis consectetur purus sit amet fermentum. 
+      <>
+        <HvGlobalActions title="My Title" />
+        <HvButton onClick={() => setOpen(true)}>Open Drawer</HvButton>
+        <HvDrawer
+          disablePortal
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+          ModalProps={{ disableScrollLock: true }}
+          onClose={() => setOpen(false)}
+          open={open}
+          data-testid="drawer"
+          {...args}
+        >
+          <HvDialogTitle
+            component="div"
+            classes={{ root: classes.drawerTitle }}
+          >
+            Lorem Ipsum
+          </HvDialogTitle>
+          <HvDialogContent className={classes.drawerContent}>
+            <HvTypography tabIndex={0}>
+              {[...new Array(30)]
+                .map(
+                  () => `Cras mattis consectetur purus sit amet fermentum. 
                   Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
                   Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                   Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`
-              )
-              .join("\n")}
-          </HvTypography>
-        </HvDialogContent>
-        <HvDialogActions>
-          <HvButton variant="primaryGhost">Submit</HvButton>
-          <HvButton variant="secondaryGhost">Cancel</HvButton>
-        </HvDialogActions>
-      </HvDrawer>
+                )
+                .join("\n")}
+            </HvTypography>
+          </HvDialogContent>
+          <HvDialogActions>
+            <HvButton variant="primaryGhost">Submit</HvButton>
+            <HvButton variant="secondaryGhost" onClick={() => setOpen(false)}>
+              Cancel
+            </HvButton>
+          </HvDialogActions>
+        </HvDrawer>
+      </>
     );
   },
 };
diff --git a/packages/core/src/components/Drawer/Drawer.tsx b/packages/core/src/components/Drawer/Drawer.tsx
@@ -1,8 +1,4 @@
-import {
-  Drawer as MuiDrawer,
-  DrawerProps as MuiDrawerProps,
-  Backdrop as MuiBackdrop,
-} from "@mui/material";
+import MuiDrawer, { DrawerProps as MuiDrawerProps } from "@mui/material/Drawer";
 
 import { Close } from "@hitachivantara/uikit-react-icons";
 
@@ -61,7 +57,8 @@ export interface HvDrawerProps extends Omit<MuiDrawerProps, "classes"> {
    */
   buttonTitle?: string;
   /**
-   * Show backdrop when drawer ix open.
+   * Show backdrop when drawer is open.
+   * @deprecated Use `hideBackdrop` instead.
    */
   showBackdrop?: boolean;
   /**
@@ -97,47 +94,56 @@ export const HvDrawer = (props: HvDrawerProps) => {
   const { classes, cx, css } = useClasses(classesProp);
   const { colors } = useTheme();
 
+  const handleOnClose: MuiDrawerProps["onClose"] = (
+    event: React.SyntheticEvent,
+    reason
+  ) => {
+    if (reason === "backdropClick" && disableBackdropClick) return;
+
+    onClose?.(event, reason);
+  };
+
   return (
-    <>
-      <MuiDrawer
-        className={cx(classes.root, className)}
-        id={id}
-        anchor={anchor}
-        open={open}
-        PaperProps={{
+    <MuiDrawer
+      className={cx(classes.root, className)}
+      id={id}
+      anchor={anchor}
+      open={open}
+      PaperProps={{
+        classes: {
+          root: classes.paper,
+        },
+      }}
+      hideBackdrop={!showBackdrop}
+      slotProps={{
+        backdrop: {
           classes: {
-            root: classes.paper,
+            root: cx(
+              css({
+                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),
+              }),
+              classes.background
+            ),
           },
-        }}
-        onClose={onClose}
-        {...others}
-      >
-        <IconButton
-          id={setId(id, "close")}
-          className={classes.closeButton}
-          variant="secondaryGhost"
-          onClick={onClose}
-          title={buttonTitle}
-        >
-          <Close role="none" />
-        </IconButton>
-        {children}
-      </MuiDrawer>
-      {showBackdrop && (
-        <MuiBackdrop
-          open={!!open}
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          onClick: (event) => {
             if (disableBackdropClick) return;
             onClose?.(event, "backdropClick");
-          }}
-          className={cx(
-            css({
-              background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),
-            }),
-            classes.background
-          )}
-        />
-      )}
-    </>
+          },
+        },
+      }}
+      onClose={handleOnClose}
+      {...others}
+    >
+      <IconButton
+        id={setId(id, "close")}
+        className={classes.closeButton}
+        variant="secondaryGhost"
+        onClick={onClose}
+        title={buttonTitle}
+      >
+        <Close role="none" />
+      </IconButton>
+      {children}
+    </MuiDrawer>
   );
 };