Rename breakpoint prop

powerhome · Nov 20, 2024 · 318556b · 318556b
1 parent 2436e9c
commit 318556b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_drawer/_drawer.tsx b/playbook/app/pb_kits/playbook/pb_drawer/_drawer.tsx
@@ -15,7 +15,7 @@ type DrawerProps = {
   aria?: { [key: string]: string };
   behavior?: "floating" | "push";
   border?: "full" | "none" | "right" | "left";
-  breakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+  openBreakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
   children: React.ReactNode | React.ReactNode[] | string;
   className?: string;
   data?: { [key: string]: string };
@@ -36,7 +36,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     aria = {},
     behavior = "floating",
     border = "none",
-    breakpoint = "none",
+    openBreakpoint = "none",
     className,
     data = {},
     htmlOptions = {},
@@ -103,7 +103,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
 
   const [menuButtonOpened, setMenuButtonOpened] = useState(false);
 
-  const breakpointWidths: Record<DrawerProps["breakpoint"], number> = {
+  const breakpointWidths: Record<DrawerProps["openBreakpoint"], number> = {
     none: 0,
     xs: 575,
     sm: 768,
@@ -116,11 +116,11 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
   const [isUserClosed, setIsUserClosed] = useState(false);
 
   useEffect(() => {
-    if (breakpoint === "none") return;
+    if (openBreakpoint === "none") return;
 
     const handleResize = () => {
       const width = window.innerWidth;
-      const breakpointWidth = breakpointWidths[breakpoint];
+      const breakpointWidth = breakpointWidths[openBreakpoint];
 
       if (width <= breakpointWidth) {
         setIsBreakpointOpen(true);
@@ -138,7 +138,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [breakpoint]);
+  }, [openBreakpoint]);
 
   // Reset isUserClosed when isBreakpointOpen changes
   useEffect(() => {

diff --git a/playbook/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx b/playbook/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx
@@ -8,8 +8,8 @@ const DrawerMenu = () => {
       <Button id="menuButton">Toggle Drawer</Button>
       <Drawer
           behavior="push"
-          breakpoint="sm"
           menuButtonID="menuButton"
+          openBreakpoint="sm"
           overlay={false}
           placement="right"
       >