fix(Drawer): fix incorrect usage of the backdrop

[plagoa]

I added a story to have a Drawer open on top of some content, namely the GlobalActions that might have some styles clash with the one's on the Drawer. I opted to leave that be checked by Storybook because it might be important to have that tested in case anything changes.

[zettca]

Nice 👌

There's something wrong with the docs though

[plagoa]

@zettca updated the PR with the recommended changes. Deprecated the showBackdrop property in favor of MUI's own hideBackdrop. Also fixed the no scrolling on the stories.

[MEsteves22]

Looks good 🙏

I noticed the following:

• When clicking on the button in the last sample, the page scrolls to the top automatically and the drawer doesn't open. But this happens when we click anywhere on the screen. I don't really understand what's happening but putting everything in one sample helps. So we could add the global action and the button to open the drawer on the "Main" sample. For applitools, we can open the drawer programatically like we do with the dialog component.

• disableBackdropClick doesn't seem to be working. Suggestion:

const handleOnClose: MuiDrawerProps["onClose"] = (event, reason) => {
    if (reason === "backdropClick" && disableBackdropClick) return;

    onClose?.(event, reason);
  };

  return (
    <MuiDrawer
      (...)
      slotProps={{
        backdrop: {
          (...),
          onClick: (event) => handleOnClose(event, "backdropClick"),
        },
      }}
      onClose={handleOnClose}
      {...others}
    >
      <IconButton
        id={setId(id, "close")}
        className={classes.closeButton}
        variant="secondaryGhost"
        onClick={onClose}
        title={buttonTitle}
      >
        <Close role="none" />
      </IconButton>
      {children}
    </MuiDrawer>
  );

[plagoa]

@MEsteves22 updated the PR. I removed the second story and fixed the disableBackdropClick issue.

[MEsteves22]

👌🏻

disableBackdropClick