add conditional render + add fixed prop to Scrim

jpmorganchase · Feb 9, 2024 · 858970b · 858970b
1 parent 23d490f
commit 858970b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 32 deletions.
diff --git a/packages/lab/src/drawer/Drawer.tsx b/packages/lab/src/drawer/Drawer.tsx
@@ -106,32 +106,34 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
     }
   }, [open, showComponent, setShowComponent]);
 
-  if (!showComponent) return null;
-
   return (
-    <Scrim>
-      <FloatingComponent
-        open={open}
-        ref={handleRef}
-        aria-modal="true"
-        aria-labelledby={`${id}-header`}
-        focusManagerProps={{
-          context: context,
-        }}
-        className={clsx(
-          withBaseName(),
-          withBaseName(position),
-          {
-            [withBaseName("enterAnimation")]: open,
-            [withBaseName("exitAnimation")]: !open,
-            [withBaseName(variant)]: variant,
-          },
-          className
-        )}
-        {...getDrawerProps(rest)}
-      >
-        {children}
-      </FloatingComponent>
-    </Scrim>
+    <>
+      {showComponent && (
+        <Scrim fixed>
+          <FloatingComponent
+            open={open}
+            ref={handleRef}
+            aria-modal="true"
+            aria-labelledby={`${id}-header`}
+            focusManagerProps={{
+              context: context,
+            }}
+            className={clsx(
+              withBaseName(),
+              withBaseName(position),
+              {
+                [withBaseName("enterAnimation")]: open,
+                [withBaseName("exitAnimation")]: !open,
+                [withBaseName(variant)]: variant,
+              },
+              className
+            )}
+            {...getDrawerProps(rest)}
+          >
+            {children}
+          </FloatingComponent>
+        </Scrim>
+      )}
+    </>
   );
 });
diff --git a/site/src/examples/drawer/Default.tsx b/site/src/examples/drawer/Default.tsx
@@ -13,7 +13,7 @@ export const Default = (): ReactElement => {
       <Drawer
         open={openPrimary}
         onOpenChange={(newOpen) => setOpenPrimary(newOpen)}
-        id="primary"
+        id="primary-drawer"
         style={{ width: 200 }}
       >
         <DrawerCloseButton onClick={() => setOpenPrimary(false)} />
@@ -25,7 +25,7 @@ export const Default = (): ReactElement => {
         open={openSecondary}
         onOpenChange={(newOpen) => setOpenSecondary(newOpen)}
         variant="secondary"
-        id="secondary"
+        id="secondary-drawer"
         style={{ width: 200 }}
       >
         <DrawerCloseButton onClick={() => setOpenSecondary(false)} />

diff --git a/site/src/examples/drawer/Position.tsx b/site/src/examples/drawer/Position.tsx
@@ -15,7 +15,7 @@ export const Position = (): ReactElement => {
       <Drawer
         open={openLeft}
         onOpenChange={(newOpen) => setOpenLeft(newOpen)}
-        id="left"
+        id="left-drawer"
         style={{ width: 200 }}
       >
         <DrawerCloseButton onClick={() => setOpenLeft(false)} />
@@ -25,7 +25,7 @@ export const Position = (): ReactElement => {
         open={openRight}
         onOpenChange={(newOpen) => setOpenRight(newOpen)}
         position="right"
-        id="right"
+        id="right-drawer"
         style={{ width: 200 }}
       >
         <DrawerCloseButton onClick={() => setOpenRight(false)} />
@@ -35,7 +35,7 @@ export const Position = (): ReactElement => {
         open={openTop}
         onOpenChange={(newOpen) => setOpenTop(newOpen)}
         position="top"
-        id="top"
+        id="top-drawer"
         style={{ height: 200 }}
       >
         <DrawerCloseButton onClick={() => setOpenTop(false)} />
@@ -45,7 +45,7 @@ export const Position = (): ReactElement => {
         open={openBottom}
         onOpenChange={(newOpen) => setOpenBottom(newOpen)}
         position="bottom"
-        id="bottom"
+        id="bottom-drawer"
         style={{ height: 200 }}
       >
         <DrawerCloseButton onClick={() => setOpenBottom(false)} />