From bada661325e2d9e1fb2c93db7ca7cc3468034c8f Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Mon, 1 Jul 2024 16:16:05 -0400
Subject: [PATCH] fixes to alert

---
 packages/gamut/src/Button/IconButton.tsx      |  1 +
 .../Molecules/Modals/Modal.examples.tsx       | 59 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 packages/styleguide/stories/Molecules/Modals/Modal.examples.tsx

diff --git a/packages/gamut/src/Button/IconButton.tsx b/packages/gamut/src/Button/IconButton.tsx
index 7609a360f3..4dbf4e07b0 100644
--- a/packages/gamut/src/Button/IconButton.tsx
+++ b/packages/gamut/src/Button/IconButton.tsx
@@ -65,6 +65,7 @@ export const IconButton = forwardRef<ButtonBaseElements, IconButtonProps>(
           aria-label={trueAriaLabel}
           ref={ref}
           variant={variant}
+          size={size}
         >
           <Icon size={iconSize} />
         </IconButtonBase>
diff --git a/packages/styleguide/stories/Molecules/Modals/Modal.examples.tsx b/packages/styleguide/stories/Molecules/Modals/Modal.examples.tsx
new file mode 100644
index 0000000000..e9f831edad
--- /dev/null
+++ b/packages/styleguide/stories/Molecules/Modals/Modal.examples.tsx
@@ -0,0 +1,59 @@
+import { Box, FillButton, FlexBox, Modal, ModalProps } from "@codecademy/gamut";
+import { useState } from "react";
+
+export const PopoverExample = ({ p = 16, ...rest }: PopoverExampleProps) => {
+  const [open, setOpen] = useState(false);
+  const activeElRef = useRef<HTMLDivElement>(null);
+  const toggleOpen = () => setOpen(!open);
+  return (
+    <>
+      <Box ref={activeElRef}>
+        <FillButton onClick={toggleOpen}>Open Popover</FillButton>
+      </Box>
+      <FlexBox>
+        <Popover
+          {...rest}
+          isOpen={open}
+          targetRef={activeElRef}
+          onRequestClose={() => setOpen(false)}
+        >
+          <FlexBox flexDirection="column" p={p} alignItems="flex-start">
+            <Box mb={8}>Hooray!</Box>
+            <FillButton size="small" onClick={() => setOpen(false)}>
+              Close Popover
+            </FillButton>
+          </FlexBox>
+        </Popover>
+      </FlexBox>
+    </>
+  );
+};
+
+
+export const ModalFocusExample = ({ ...rest }: ModalProps) => {
+  const [open, setOpen] = useState(false);
+  const toggleOpen = () => setOpen(!open);
+
+  return (
+    <>
+      <Box >
+        <FillButton onClick={toggleOpen}>Open Popover</FillButton>
+      </Box>
+      <FlexBox>
+        <Modal
+          {...rest}
+          isOpen={open}
+          onRequestClose={() => setOpen(false)}
+          shroud
+          escapeCloses
+        >
+          <FlexBox flexDirection="column" alignItems="flex-start">
+            <FillButton size="small" onClick={() => setOpen(false)}>
+              Close Modal
+            </FillButton>
+          </FlexBox>
+        </Modal>
+      </FlexBox>
+    </>
+  );
+};