feat(minimizable-dialog): add elevation changes

twilio-labs · Jan 29, 2025 · 8f156b5 · 8f156b5
1 parent 9014fdc
commit 8f156b5
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 19 deletions.
diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx
@@ -60,16 +60,12 @@ const MinimizableDialogHeader = React.forwardRef<HTMLDivElement, MinimizableDial
         display="grid"
         gridTemplateColumns="1fr auto auto"
         columnGap="space30"
-        backgroundColor="colorBackground"
+        backgroundColor={minimized ? "colorBackgroundBodyElevation" : "colorBackgroundWeaker"}
         paddingX="space70"
         paddingY="space40"
         color="colorTextWeak"
         overflow="hidden"
-        borderBottomWidth="borderWidth10"
-        borderBottomStyle="solid"
-        borderBottomColor="colorBorderWeaker"
-        borderTopRightRadius="borderRadius20"
-        borderTopLeftRadius="borderRadius20"
+        boxShadow={minimized ? "shadowElevation10" : "none"}
         element={element}
       >
         <Box

diff --git a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
@@ -2,21 +2,27 @@ import { Box } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
 import * as React from "react";
 
+import { MinimizableDialogContext } from "./MinimizableDialogContext";
+
 export const StyledMinimizableDialog: React.FC<React.PropsWithChildren<Pick<BoxProps, "element">>> = ({
   element,
   children,
-}) => (
-  <Box
-    element={element}
-    borderRadius="borderRadius20"
-    display="flex"
-    flexDirection="column"
-    backgroundColor="colorBackgroundBody"
-    width="size40"
-    boxShadow="shadow"
-  >
-    {children}
-  </Box>
-);
+}) => {
+  const { minimized } = React.useContext(MinimizableDialogContext);
+
+  return (
+    <Box
+      element={element}
+      borderRadius="borderRadius20"
+      display="flex"
+      flexDirection="column"
+      backgroundColor="colorBackgroundWeaker"
+      width="size40"
+      boxShadow="shadowElevation20"
+    >
+      {children}
+    </Box>
+  );
+};
 
 StyledMinimizableDialog.displayName = "StyledMinimizableDialog";