Test out breakpoint

playbook/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -22,6 +22,7 @@ type DrawerProps = {
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   fullHeight?: boolean;
+  menuButtonID?: string;
   onClose?: () => void;
   opened: boolean;
   overlay: boolean;
@@ -43,7 +44,8 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     id,
     size = "md",
     children,
-    fullHeight = false,
+    fullHeight = true,
+    menuButtonID,
     opened,
     onClose,
     overlay = true,
@@ -102,6 +104,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
   const classes = classnames(buildCss("pb_drawer_wrapper"), className);
 
   const [triggerOpened, setTriggerOpened] = useState(false);
+  const [menuButtonOpened, setMenuButtonOpened] = useState(false);
 
   const breakpointWidths: Record<DrawerProps["breakpoint"], number> = {
     none: 0,
@@ -139,7 +142,8 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     };
   }, [breakpoint]);
 
-  const modalIsOpened = trigger ? triggerOpened : opened || isBreakpointOpen;
+  // Simplified modalIsOpened logic
+  const modalIsOpened = isBreakpointOpen || triggerOpened || menuButtonOpened || opened;
 
   const [animationState, setAnimationState] = useState("");
 
@@ -184,13 +188,34 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
   }, [modalIsOpened, behavior, placement, size]);
 
   const api = {
-    onClose: trigger
-      ? function () {
-          setTriggerOpened(false);
-        }
-      : onClose,
+    onClose: () => {
+      if (trigger) {
+        setTriggerOpened(false);
+      } else if (menuButtonID) {
+        setMenuButtonOpened(false);
+      }
+      if (onClose) {
+        onClose();
+      }
+    },
   };
 
+  useEffect(() => {
+    if (menuButtonID) {
+      const menuButton = document.getElementById(menuButtonID);
+      if (menuButton) {
+        const handleMenuButtonClick = () => {
+          console.log("menuButtonID", menuButtonID);
+          setMenuButtonOpened((prev) => !prev);
+        };
+        menuButton.addEventListener("click", handleMenuButtonClick);
+        return () => {
+          menuButton.removeEventListener("click", handleMenuButtonClick);
+        };
+      }
+    }
+  }, [menuButtonID]);
+
   return (
     <DialogContext.Provider value={api}>
       <div
@@ -199,27 +224,29 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
           {...htmlProps}
           className={classes}
       >
-          {isModalVisible && (
-            <div
-                className={classnames(overlayClassNames.base, {
+        {isModalVisible && (
+          <div
+              className={classnames(overlayClassNames.base, {
               [overlayClassNames.afterOpen]: animationState === "afterOpen",
               [overlayClassNames.beforeClose]: animationState === "beforeClose",
             })}
-                id={id}
-                onClick={overlay ? onClose : undefined}
-            >
+              id={id}
+              onClick={overlay ? api.onClose : undefined}
+          >
             <div
                 className={classnames(drawerClassNames.base, {
-              [drawerClassNames.afterOpen]: animationState === "afterOpen",
-              [drawerClassNames.beforeClose]: animationState === "beforeClose",
-            })}
+                [drawerClassNames.afterOpen]:
+                  animationState === "afterOpen",
+                [drawerClassNames.beforeClose]:
+                  animationState === "beforeClose",
+              })}
                 onClick={(e) => e.stopPropagation()}
             >
-            {children}
-            </div>
+              {children}
             </div>
-          )}
           </div>
+        )}
+      </div>
     </DialogContext.Provider>
   );
 };

playbook/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Button, Drawer } from "playbook-ui";
+
+const DrawerMenu = () => {
+
+  return (
+    <>
+      <Button id="menuButton">Toggle Drawer</Button>
+      <Drawer
+          behavior="push"
+          breakpoint="sm"
+          menuButtonID="menuButton"
+          overlay={false}
+          placement="right"
+      >
+        <p>Your drawer content here</p>
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerMenu;

playbook/app/pb_kits/playbook/pb_drawer/docs/example.yml

@@ -5,8 +5,4 @@ examples:
 
 
   react:
-  - drawer_default: Default
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_borders: Borders 
-  - drawer_breakpoints: Open on Breakpoints 
+  - drawer_menu: Menu Behavior 

playbook/app/pb_kits/playbook/pb_drawer/docs/index.js

@@ -3,3 +3,4 @@ export { default as DrawerSizes } from './_drawer_sizes.jsx'
 export { default as DrawerOverlay } from './_drawer_overlay.jsx'
 export { default as DrawerBorders } from './_drawer_borders.jsx'
 export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'
+export { default as DrawerMenu } from './_drawer_menu.jsx'