Allow to scroll insie modal content

saleor · Oct 19, 2023 · 1efe978 · 1efe978
1 parent 5354d6d
commit 1efe978
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 5 deletions.
diff --git a/src/components/Modal/Content.tsx b/src/components/Modal/Content.tsx
@@ -11,11 +11,12 @@ export const Content = ({ children }: ModalContentProps) => {
   return (
     <Dialog.Portal>
       <Dialog.Overlay asChild className={showContent}>
-        <Box backgroundColor="highlightDim" position="fixed" inset={0} />
+        <Box backgroundColor="highlightDim" position="fixed" inset={0}>
+          <Dialog.Content asChild className={showContent}>
+            {children}
+          </Dialog.Content>
+        </Box>
       </Dialog.Overlay>
-      <Dialog.Content asChild className={showContent}>
-        {children}
-      </Dialog.Content>
     </Dialog.Portal>
   );
 };

diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import { useState } from "react";
-import { Box, Button, CloseIcon, Text } from "..";
+import { Box, Button, CloseIcon, Combobox, Text } from "..";
 
 import { Modal } from ".";
 
@@ -83,3 +83,53 @@ export const Controlled = () => {
     </>
   );
 };
+
+export const WithComboboxInside = () => {
+  const [open, setOpen] = useState(false);
+  const [value, setValue] = useState<string | null>("color-black");
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Show modal</Button>
+      <Modal open={open} onChange={setOpen}>
+        <Modal.Content>
+          <Box
+            backgroundColor="surfaceNeutralPlain"
+            boxShadow="modal"
+            __left="50%"
+            __top="50%"
+            position="fixed"
+            __maxWidth="400px"
+            __transform="translate(-50%, -50%)"
+          >
+            <Box
+              display="flex"
+              gap={3}
+              padding={10}
+              justifyContent="center"
+              alignItems="center"
+            >
+              <Combobox
+                label="Pick a color"
+                size="large"
+                value={value}
+                onChange={(value) => setValue(value)}
+                options={[
+                  { value: "color-black", label: "Black" },
+                  { value: "color-red", label: "Red" },
+                  { value: "color-green", label: "Green" },
+                  { value: "color-blue", label: "Blue" },
+                  { value: "color-orange", label: "Orange" },
+                  { value: "color-purple", label: "Purple" },
+                ]}
+              />
+              <Modal.Close>
+                <Button variant="tertiary" icon={<CloseIcon />} size="small" />
+              </Modal.Close>
+            </Box>
+          </Box>
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+};