From 919355c4b0e97243d7d70596cc1c66e666526bd3 Mon Sep 17 00:00:00 2001
From: Christian Vuerings <christian@cambly.com>
Date: Tue, 26 Mar 2024 14:36:01 -0700
Subject: [PATCH] IconButton: make onClick required & fix modal close issue

---
 .changeset/ninety-rice-repair.md                   | 5 +++++
 packages/syntax-core/src/IconButton/IconButton.tsx | 2 +-
 packages/syntax-core/src/Modal/Modal.tsx           | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/ninety-rice-repair.md

diff --git a/.changeset/ninety-rice-repair.md b/.changeset/ninety-rice-repair.md
new file mode 100644
index 00000000..725addc6
--- /dev/null
+++ b/.changeset/ninety-rice-repair.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+IconButton: make onClick required & fix modal close issue
diff --git a/packages/syntax-core/src/IconButton/IconButton.tsx b/packages/syntax-core/src/IconButton/IconButton.tsx
index 5e814809..ef19e831 100644
--- a/packages/syntax-core/src/IconButton/IconButton.tsx
+++ b/packages/syntax-core/src/IconButton/IconButton.tsx
@@ -98,7 +98,7 @@ type IconButtonProps = {
   /**
    * The callback to be called when the button is clicked
    */
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
   /**
    * The tooltip to be displayed when the user hovers over the button
    */
diff --git a/packages/syntax-core/src/Modal/Modal.tsx b/packages/syntax-core/src/Modal/Modal.tsx
index ce30db69..b63f937c 100644
--- a/packages/syntax-core/src/Modal/Modal.tsx
+++ b/packages/syntax-core/src/Modal/Modal.tsx
@@ -215,13 +215,14 @@ export default function Modal({
                       accessibilityLabel={accessibilityCloseLabel}
                       color={image ? "primary" : "tertiary"}
                       on={image ? "darkBackground" : "lightBackground"}
+                      onClick={onDismiss}
                       size="sm"
                       icon={XIconCambio}
                     />
                   </Box>
                 )}
               </Box>
-              {image && <Box maxHeight={200}>{image}</Box>}
+              {image && <Box>{image}</Box>}
               <Box
                 display="flex"
                 gap={themeName === "classic" ? 3 : 4}