From cc944aa9b66c36466414cb0f50631d24c5a3987e Mon Sep 17 00:00:00 2001
From: Brian Siao Tick Chong <bsiaotickchong@gmail.com>
Date: Wed, 16 Oct 2024 11:22:36 -0700
Subject: [PATCH] [ui] add floating Drawer kind and adjust closeButton size
 (#12911)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

![Screenshot 2024-10-14 at 5.31.00 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/04d532b6-2ff9-4df0-814e-e0e7da097247.png)

![Screenshot 2024-10-15 at 11.28.12 AM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/ed5dedc0-f298-487b-9615-b2cc8f324dab.png)

- having issues getting the X icon to be the exact size and correct position due to the display: flex-inline; in IconContainer
- added padding prop because some designs in uma auth require less padding
- added min-width

GitOrigin-RevId: adb3d575f46f47bb8084a7e0e18536c679e0f3f4
---
 packages/ui/src/components/Drawer.tsx | 83 ++++++++++++++++++---------
 1 file changed, 55 insertions(+), 28 deletions(-)

diff --git a/packages/ui/src/components/Drawer.tsx b/packages/ui/src/components/Drawer.tsx
index 98258b28..c3bbe991 100644
--- a/packages/ui/src/components/Drawer.tsx
+++ b/packages/ui/src/components/Drawer.tsx
@@ -10,6 +10,8 @@ import { Button } from "./Button.js";
 import { Icon } from "./Icon/Icon.js";
 import { UnstyledButton } from "./UnstyledButton.js";
 
+type DrawerKind = "default" | "floating";
+
 interface Props {
   children?: React.ReactNode;
   onClose?: () => void;
@@ -17,6 +19,8 @@ interface Props {
   closeButton?: boolean;
   nonDismissable?: boolean;
   handleBack?: (() => void) | undefined;
+  padding?: string;
+  kind?: DrawerKind | undefined;
 }
 
 export const Drawer = (props: Props) => {
@@ -103,29 +107,31 @@ export const Drawer = (props: Props) => {
         grabbing={grabbing}
         ref={drawerContainerRef}
       >
-        {props.grabber && !props.nonDismissable && (
-          <Grabber onClick={handleClose}>
-            <GrabberBar />
-          </Grabber>
-        )}
-        {props.handleBack && (
-          <BackButtonContainer>
-            <Button
-              onClick={props.handleBack}
-              icon="ChevronLeft"
-              kind="ghost"
-              size="Small"
-            />
-          </BackButtonContainer>
-        )}
-        {props.closeButton && !props.nonDismissable && (
-          <CloseButtonContainer>
-            <CloseButton onClick={handleClose} type="button">
-              <Icon name="Close" width={12} />
-            </CloseButton>
-          </CloseButtonContainer>
-        )}
-        {props.children}
+        <DrawerInnerContainer kind={props.kind} padding={props.padding}>
+          {props.grabber && !props.nonDismissable && (
+            <Grabber onClick={handleClose}>
+              <GrabberBar />
+            </Grabber>
+          )}
+          {props.handleBack && (
+            <BackButtonContainer>
+              <Button
+                onClick={props.handleBack}
+                icon="ChevronLeft"
+                kind="ghost"
+                size="Small"
+              />
+            </BackButtonContainer>
+          )}
+          {props.closeButton && !props.nonDismissable && (
+            <CloseButtonContainer>
+              <CloseButton onClick={handleClose} type="button">
+                <Icon name="Close" width={10} />
+              </CloseButton>
+            </CloseButtonContainer>
+          )}
+          {props.children}
+        </DrawerInnerContainer>
       </DrawerContainer>
     </>
   );
@@ -164,17 +170,13 @@ const DrawerContainer = styled.div<{
   position: fixed;
   max-height: 100dvh;
   width: 100%;
-  background-color: ${({ theme }) => theme.bg};
   right: 0;
   bottom: 0;
   transform: translateY(${(props) => `${props.totalDeltaY}px`});
   z-index: ${z.modalContainer};
-  border-radius: ${Spacing.px.lg} ${Spacing.px.lg} 0 0;
   display: flex;
   flex-direction: column;
-  padding: ${Spacing.px["6xl"]} ${Spacing.px.xl} ${Spacing.px["2xl"]}
-    ${Spacing.px.xl};
-  overflow-y: auto;
+  align-items: center;
 
   // Only smooth transition when not grabbing, otherwise dragging will feel very laggy
   ${(props) =>
@@ -205,6 +207,31 @@ const DrawerContainer = styled.div<{
   }
 `;
 
+const DrawerInnerContainer = styled.div<{
+  kind?: DrawerKind | undefined;
+  padding?: string | undefined;
+}>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: ${(props) =>
+    props.kind === "floating" ? `calc(100% - ${Spacing.md * 2}px)` : "100%"};
+  min-width: 320px;
+  height: 100%;
+  ${(props) => (props.kind === "floating" ? `bottom: ${Spacing.px.md};` : "")}
+  border-radius: ${(props) =>
+    props.kind === "floating"
+      ? Spacing.px.lg
+      : `${Spacing.px.lg} ${Spacing.px.lg} 0 0`};
+  background-color: ${({ theme }) => theme.bg};
+  padding: ${(props) =>
+    props.padding
+      ? `${props.padding}`
+      : `${Spacing.px["6xl"]} ${Spacing.px.xl} ${Spacing.px["2xl"]}
+    ${Spacing.px.xl}`};
+  overflow-y: auto;
+`;
+
 const Grabber = styled.div`
   position: absolute;
   top: 0;