Cambio: Modal & elevation updates (#337)

Cambly · Mar 18, 2024 · 234374f · 234374f
1 parent 3e857f6
commit 234374f
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 33 deletions.
diff --git a/.changeset/tall-spies-pay.md b/.changeset/tall-spies-pay.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+Cambio: Modal & elevation updates
diff --git a/packages/syntax-core/src/Modal/Modal.module.css b/packages/syntax-core/src/Modal/Modal.module.css
@@ -38,13 +38,6 @@
   right: 12px;
 }
 
-.closeButtonCambio {
-  height: 24px;
-  width: 24px;
-  top: 4px;
-  right: 4px;
-}
-
 .closeButton:focus-visible {
   box-shadow: 0 0 0 4px #000;
   outline: solid 2px #fff;
@@ -53,3 +46,7 @@
 .closeButtonWithImage {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+.closeButtonWithImageCambio {
+  background-color: var(--color-cambio-gray-200);
+}
diff --git a/packages/syntax-core/src/Modal/Modal.tsx b/packages/syntax-core/src/Modal/Modal.tsx
@@ -9,6 +9,7 @@ import StopScroll from "./StopScroll";
 import Layer from "./Layer";
 import styles from "./Modal.module.css";
 import { useTheme } from "../ThemeProvider/ThemeProvider";
+import IconButton from "../IconButton/IconButton";
 
 function XIcon({ color = "#000" }: { color?: string }) {
   return (
@@ -21,6 +22,20 @@ function XIcon({ color = "#000" }: { color?: string }) {
   );
 }
 
+function XIconCambio({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      fill="currentColor"
+      focusable="false"
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+    >
+      <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+    </svg>
+  );
+}
+
 // Note: Only sm + lg size currently. design thinks there should only be two sizes.
 // If there IS a md size at some point, we should use the "size" const.
 const sizeWidth = {
@@ -159,7 +174,7 @@ export default function Modal({
             <Box
               data-testid={dataTestId}
               backgroundColor="white"
-              rounding="xl"
+              rounding={themeName === "classic" ? "xl" : "md"}
               display="flex"
               direction="column"
               minWidth={240}
@@ -168,32 +183,44 @@ export default function Modal({
               dangerouslySetInlineStyle={{ __style: { overflow: "hidden" } }}
             >
               <Box position="relative">
-                <button
-                  aria-label={accessibilityCloseLabel}
-                  type="button"
-                  className={classnames(
-                    styles.closeButton,
-                    themeName === "classic"
-                      ? styles.closeButtonClassic
-                      : styles.closeButtonCambio,
-                    {
-                      [styles.closeButtonWithImage]:
-                        !!image && themeName === "classic",
-                    },
-                  )}
-                  onClick={onDismiss}
-                >
-                  <XIcon
-                    color={image && themeName === "classic" ? "#fff" : "#000"}
-                  />
-                </button>
+                {themeName === "classic" ? (
+                  <button
+                    aria-label={accessibilityCloseLabel}
+                    type="button"
+                    className={classnames(
+                      styles.closeButton,
+                      styles.closeButtonClassic,
+                      {
+                        [styles.closeButtonWithImage]: !!image,
+                      },
+                    )}
+                    onClick={onDismiss}
+                  >
+                    <XIcon color={image ? "#fff" : "#000"} />
+                  </button>
+                ) : (
+                  <Box
+                    position="absolute"
+                    dangerouslySetInlineStyle={{
+                      __style: { top: 4, right: 4 },
+                    }}
+                  >
+                    <IconButton
+                      accessibilityLabel={accessibilityCloseLabel}
+                      color={image ? "primary" : "tertiary"}
+                      on={image ? "darkBackground" : "lightBackground"}
+                      size="sm"
+                      icon={XIconCambio}
+                    />
+                  </Box>
+                )}
               </Box>
               {image && <Box maxHeight={200}>{image}</Box>}
               <Box
                 display="flex"
                 gap={3}
                 direction="column"
-                padding={themeName === "classic" ? 9 : 3}
+                padding={themeName === "classic" ? 9 : 6}
               >
                 <Heading
                   as="h1"

diff --git a/packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx b/packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx
@@ -71,7 +71,7 @@ describe("themeProvider", () => {
     expect(screen.getByTestId("themeprovider-style")).toContainHTML(
       "--color-base-primary-100: #faf4eb;",
     );
-    expect(screen.getByTestId("themeprovider-style")).not.toContainHTML(
+    expect(screen.getByTestId("themeprovider-style")).toContainHTML(
       "elevation",
     );
     expect(screen.getByTestId("themeprovider-style")).toContainHTML("cambio");

diff --git a/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx b/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx
@@ -90,10 +90,6 @@ function stylesForTheme(themeName: ThemeName) {
               ],
             ];
           }
-          // `elevation` is a classic only concept
-          if (themeName === "cambio" && key.includes("elevation")) {
-            return [null, null];
-          }
           return [key, value];
         })
         .map(([key, value]) => (key && value ? `--${key}: ${value};` : null))