@sproutsocial/seeds-react-modal 1.1.0 → 2.0.0

package/src/v2/ModalV2.stories.tsx

@@ -4,10 +4,17 @@ import { Box } from "@sproutsocial/seeds-react-box";
 import { Button } from "@sproutsocial/seeds-react-button";
 import Text from "@sproutsocial/seeds-react-text";
 import { FormField } from "@sproutsocial/seeds-react-form-field";
-import { Modal, ModalHeader, ModalFooter, ModalContent, ModalClose } from "./";
+import {
+  Modal,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseWrapper,
+  ModalCustomFooter,
+} from ".";
 
 const meta: Meta<typeof Modal> = {
-  title: "Components/Modal (Radix UI)",
+  title: "Components/Modal V2",
   component: Modal,
   parameters: {
     docs: {
@@ -51,16 +58,6 @@ const meta: Meta<typeof Modal> = {
       control: { type: "text" },
       description: "Modal description (auto-wrapped in Dialog.Description)",
     },
-    size: {
-      control: { type: "select" },
-      options: ["small", "medium", "large", "full", "400px", "800px"],
-      description: "Modal size preset or custom width",
-    },
-    priority: {
-      control: { type: "select" },
-      options: ["low", "medium", "high"],
-      description: "Priority level for z-index",
-    },
     draggable: {
       control: { type: "boolean" },
       description: "Enable draggable functionality",
@@ -69,7 +66,6 @@ const meta: Meta<typeof Modal> = {
   args: {
     "aria-label": "Example Modal",
     showOverlay: true,
-    size: "medium",
     draggable: false,
   },
 };
@@ -82,34 +78,19 @@ export const Default: Story = {
     return (
       <Modal
         {...args}
+        closeButtonAriaLabel="Close Modal"
         modalTrigger={<Button appearance="primary">Open Modal</Button>}
       >
-        <ModalContent>
-          <ModalHeader title="Modal Title" subtitle="This is a subtitle" />
-          <Box
-            border="1px dashed"
-            borderColor="purple.500"
-            p={500}
-            bg="purple.200"
-            borderRadius="6px"
-          >
-            <Text>
-              This modal uses uncontrolled state - no need to manage open/close
-              state! The modalTrigger prop and floating close button handle
-              everything.
-            </Text>
-          </Box>
-          <ModalFooter>
-            <Box display="flex" justifyContent="flex-end" gap={300}>
-              <ModalClose asChild>
-                <Button>Cancel</Button>
-              </ModalClose>
-              <ModalClose asChild>
-                <Button appearance="primary">Confirm</Button>
-              </ModalClose>
-            </Box>
-          </ModalFooter>
-        </ModalContent>
+        <ModalHeader title="Modal Title" subtitle="This is a subtitle" />
+        <ModalBody>
+          This modal uses uncontrolled state - no need to manage open/close
+          state! The modalTrigger prop and floating close button handle
+          everything.
+        </ModalBody>
+        <ModalFooter
+          cancelButton={<Button>Cancel</Button>}
+          primaryButton={<Button appearance="primary">Confirm</Button>}
+        />
       </Modal>
     );
   },
@@ -119,7 +100,7 @@ export const WithActions: Story = {
   render: () => {
     return (
       <Modal
-        size="medium"
+        aria-label="Modal With Actions"
         modalTrigger={
           <Button appearance="primary">Open Modal With Actions</Button>
         }
@@ -136,35 +117,21 @@ export const WithActions: Story = {
           },
         ]}
       >
-        <ModalContent>
-          <ModalHeader
-            title="Modal With Actions"
-            subtitle="This modal has extra floating actions"
-          />
-          <Box
-            border="1px dashed"
-            borderColor="purple.500"
-            p={500}
-            bg="purple.200"
-            borderRadius="6px"
-          >
-            <Text>
-              This modal shows the floating close by default and includes extra
-              actions on the rail via the actions prop. The floating close
-              button is always present, and additional actions appear below it.
-            </Text>
-          </Box>
-          <ModalFooter>
-            <Box display="flex" justifyContent="flex-end" gap={300}>
-              <ModalClose asChild>
-                <Button>Cancel</Button>
-              </ModalClose>
-              <ModalClose asChild>
-                <Button appearance="primary">Confirm</Button>
-              </ModalClose>
-            </Box>
-          </ModalFooter>
-        </ModalContent>
+        <ModalHeader
+          title="Modal With Actions"
+          subtitle="This modal has extra floating actions"
+        />
+        <ModalBody>
+          <Text>
+            This modal shows the floating close by default and includes extra
+            actions on the rail via the actions prop. The floating close button
+            is always present, and additional actions appear below it.
+          </Text>
+        </ModalBody>
+        <ModalFooter
+          cancelButton={<Button>Cancel</Button>}
+          primaryButton={<Button appearance="primary">Confirm</Button>}
+        />
       </Modal>
     );
   },
@@ -175,23 +142,22 @@ export const DraggableModal: Story = {
     return (
       <Modal
         aria-label="Draggable Modal"
-        size="medium"
         draggable={true}
         showOverlay={false}
         modalTrigger={
           <Button appearance="primary">Open Draggable Modal</Button>
         }
       >
-        <ModalContent>
-          <ModalHeader
-            title="Draggable Modal"
-            subtitle="Click and drag anywhere on this modal to move it around"
-          />
+        <ModalHeader
+          title="Draggable Modal"
+          subtitle="Click and drag anywhere on this modal to move it around"
+        />
+        <ModalBody>
           <Box
             border="1px dashed"
-            borderColor="blue.500"
+            borderColor="container.border.info"
             p={500}
-            bg="blue.200"
+            bg="container.background.info"
             borderRadius="6px"
           >
             <Text>
@@ -201,14 +167,11 @@ export const DraggableModal: Story = {
               different corners of the screen.
             </Text>
           </Box>
-          <ModalFooter>
-            <Box display="flex" justifyContent="flex-end" gap={300}>
-              <ModalClose asChild>
-                <Button appearance="primary">Got it!</Button>
-              </ModalClose>
-            </Box>
-          </ModalFooter>
-        </ModalContent>
+        </ModalBody>
+        <ModalFooter
+          cancelButton={<Button>Cancel</Button>}
+          primaryButton={<Button appearance="primary">Got it!</Button>}
+        />
       </Modal>
     );
   },
@@ -235,41 +198,46 @@ export const ControlledState: Story = {
             if (open) setCount((c) => c + 1);
           }}
           aria-label="Controlled Modal"
-          size="medium"
           modalTrigger={
             <Button appearance="primary">Open Controlled Modal</Button>
           }
         >
-          <ModalContent>
-            <ModalHeader
-              title="Controlled Modal"
-              subtitle="This modal's state is managed externally"
-            />
+          <ModalHeader
+            title="Controlled Modal"
+            subtitle="This modal's state is managed externally"
+          />
+          <ModalBody>
             <Box
               border="1px dashed"
-              borderColor="purple.500"
+              borderColor="container.border.base"
               p={500}
-              bg="purple.200"
+              bg="container.background.decorative.neutral"
               borderRadius="6px"
             >
               <Text>
                 This modal's state is controlled by the parent component. You
-                can track when it opens/closes and perform side effects. The
-                floating close button still works, but the state is managed
-                externally.
+                can track when it opens/closes and perform side effects. This
+                example uses ModalCustomFooter for full control over the footer
+                layout and behavior.
               </Text>
             </Box>
-            <ModalFooter>
-              <Box display="flex" justifyContent="flex-end" gap={300}>
-                <ModalClose asChild>
-                  <Button>Cancel</Button>
-                </ModalClose>
-                <ModalClose asChild>
-                  <Button appearance="primary">Confirm</Button>
-                </ModalClose>
-              </Box>
-            </ModalFooter>
-          </ModalContent>
+          </ModalBody>
+          <ModalCustomFooter>
+            <Box display="flex" justifyContent="flex-end" gap={300}>
+              <ModalCloseWrapper>
+                <Button>Cancel</Button>
+              </ModalCloseWrapper>
+              <Button
+                appearance="primary"
+                onClick={() => {
+                  console.log("Confirmed!");
+                  setIsOpen(false);
+                }}
+              >
+                Confirm
+              </Button>
+            </Box>
+          </ModalCustomFooter>
         </Modal>
 
         <Box mt={300}>
@@ -319,10 +287,10 @@ export const DraggableWithFormInteraction: Story = {
 
         <Box
           p={500}
-          bg="neutral.100"
+          bg="container.background.decorative.neutral"
           borderRadius="8px"
           border="2px solid"
-          borderColor="neutral.400"
+          borderColor="container.border.base"
         >
           <Text fontSize={400} fontWeight="bold" mb={300}>
             Contact Form
@@ -442,18 +410,17 @@ export const DraggableWithFormInteraction: Story = {
 
                 <Modal
                   aria-label="Reference Modal"
-                  size="medium"
                   draggable={true}
-                  showOverlay={true}
+                  showOverlay={false}
                   modalTrigger={
                     <Button appearance="secondary">Open Reference Modal</Button>
                   }
                 >
-                  <ModalContent>
-                    <ModalHeader
-                      title="Reference Information"
-                      subtitle="Drag this modal by the header to move it around"
-                    />
+                  <ModalHeader
+                    title="Reference Information"
+                    subtitle="Drag this modal by the header to move it around"
+                  />
+                  <ModalBody>
                     <Box p={300}>
                       <Text fontSize={400} fontWeight="bold" mb={200}>
                         Instructions for filling out the form:
@@ -484,10 +451,10 @@ export const DraggableWithFormInteraction: Story = {
                       <Box
                         mt={400}
                         p={300}
-                        bg="blue.200"
+                        bg="container.background.info"
                         borderRadius="6px"
                         border="1px solid"
-                        borderColor="blue.400"
+                        borderColor="container.border.info"
                       >
                         <Text fontWeight="bold" mb={100}>
                           Try this:
@@ -505,14 +472,13 @@ export const DraggableWithFormInteraction: Story = {
                         </Text>
                       </Box>
                     </Box>
-                    <ModalFooter>
-                      <Box display="flex" justifyContent="flex-end">
-                        <ModalClose asChild>
-                          <Button appearance="primary">Got it!</Button>
-                        </ModalClose>
-                      </Box>
-                    </ModalFooter>
-                  </ModalContent>
+                  </ModalBody>
+                  <ModalFooter
+                    cancelButton={<Button>Cancel</Button>}
+                    primaryButton={
+                      <Button appearance="primary">Got it!</Button>
+                    }
+                  />
                 </Modal>
               </Box>
             </Box>
@@ -522,10 +488,10 @@ export const DraggableWithFormInteraction: Story = {
             <Box
               mt={400}
               p={400}
-              bg="green.200"
+              bg="container.background.success"
               borderRadius="6px"
               border="2px solid"
-              borderColor="green.500"
+              borderColor="container.border.success"
             >
               <Text fontSize={400} fontWeight="bold" mb={200}>
                 Form Submitted!
@@ -551,3 +517,322 @@ export const DraggableWithFormInteraction: Story = {
     );
   },
 };
+
+export const TallContentMobile: Story = {
+  render: () => {
+    return (
+      <Modal
+        aria-label="Tall Content Modal"
+        modalTrigger={
+          <Button appearance="primary">Open Tall Modal (Test Mobile)</Button>
+        }
+      >
+        <ModalHeader
+          title="Very Tall Modal"
+          subtitle="Resize your browser to ≤780px to see mobile bottom sheet behavior"
+        />
+        <ModalBody>
+          <Box p={300}>
+            <Text fontSize={400} fontWeight="bold" mb={300}>
+              Testing Mobile Responsiveness
+            </Text>
+            <Text mb={300}>
+              This modal has a lot of content to test how it behaves on mobile
+              screens. The modal should:
+            </Text>
+            <Box as="ul" pl={400} mb={400}>
+              <li>
+                <Text mb={200}>
+                  ✅ Anchor to the bottom of the screen on mobile (≤780px)
+                </Text>
+              </li>
+              <li>
+                <Text mb={200}>
+                  ✅ Have rounded top corners and flat bottom corners
+                </Text>
+              </li>
+              <li>
+                <Text mb={200}>✅ Show the action rail above the modal</Text>
+              </li>
+              <li>
+                <Text mb={200}>✅ Hug the content height</Text>
+              </li>
+              <li>
+                <Text mb={200}>
+                  ✅ Scroll the content area when content exceeds max-height
+                </Text>
+              </li>
+            </Box>
+
+            <Box
+              bg="container.background.decorative.purple"
+              border="1px solid"
+              borderColor="container.border.decorative.purple"
+              borderRadius="8px"
+              p={400}
+              mb={400}
+            >
+              <Text fontWeight="bold" mb={200}>
+                Section 1: Lorem Ipsum
+              </Text>
+              <Text mb={200}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat.
+              </Text>
+              <Text>
+                Duis aute irure dolor in reprehenderit in voluptate velit esse
+                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                cupidatat non proident, sunt in culpa qui officia deserunt
+                mollit anim id est laborum.
+              </Text>
+            </Box>
+
+            <Box
+              bg="container.background.decorative.blue"
+              border="1px solid"
+              borderColor="container.border.decorative.blue"
+              borderRadius="8px"
+              p={400}
+              mb={400}
+            >
+              <Text fontWeight="bold" mb={200}>
+                Section 2: More Content
+              </Text>
+              <Text mb={200}>
+                Pellentesque habitant morbi tristique senectus et netus et
+                malesuada fames ac turpis egestas. Vestibulum tortor quam,
+                feugiat vitae, ultricies eget, tempor sit amet, ante.
+              </Text>
+              <Text>
+                Donec eu libero sit amet quam egestas semper. Aenean ultricies
+                mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est
+                et sapien ullamcorper pharetra.
+              </Text>
+            </Box>
+
+            <Box
+              bg="container.background.decorative.green"
+              border="1px solid"
+              borderColor="container.border.decorative.green"
+              borderRadius="8px"
+              p={400}
+              mb={400}
+            >
+              <Text fontWeight="bold" mb={200}>
+                Section 3: Even More Content
+              </Text>
+              <Text mb={200}>
+                Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit
+                amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
+                eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
+              </Text>
+              <Text>
+                Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent
+                dapibus, neque id cursus faucibus, tortor neque egestas augue,
+                eu vulputate magna eros eu erat.
+              </Text>
+            </Box>
+
+            <Box
+              bg="container.background.decorative.orange"
+              border="1px solid"
+              borderColor="container.border.decorative.orange"
+              borderRadius="8px"
+              p={400}
+              mb={400}
+            >
+              <Text fontWeight="bold" mb={200}>
+                Section 4: Final Section
+              </Text>
+              <Text mb={200}>
+                Aliquam erat volutpat. Nunc eleifend leo vitae magna. In id erat
+                non orci commodo lobortis. Proin neque massa, cursus ut, gravida
+                ut, lobortis eget, lacus.
+              </Text>
+              <Text>
+                Sed diam. Praesent fermentum tempor tellus. Nullam tempus.
+                Mauris ac felis vel velit tristique imperdiet. Donec at pede.
+                Etiam vel neque nec dui dignissim bibendum.
+              </Text>
+            </Box>
+
+            <Box
+              bg="container.background.decorative.red"
+              border="1px solid"
+              borderColor="container.border.decorative.red"
+              borderRadius="8px"
+              p={400}
+            >
+              <Text fontWeight="bold" mb={200}>
+                🎯 How to Test
+              </Text>
+              <Text fontSize={200} mb={200}>
+                1. Open your browser's DevTools (F12 or Cmd+Option+I on Mac)
+              </Text>
+              <Text fontSize={200} mb={200}>
+                2. Toggle device toolbar (mobile view icon)
+              </Text>
+              <Text fontSize={200} mb={200}>
+                3. Set width to 780px or less (tablet/mobile size)
+              </Text>
+              <Text fontSize={200}>
+                4. Observe the bottom sheet behavior with flat bottom corners
+              </Text>
+            </Box>
+          </Box>
+        </ModalBody>
+        <ModalFooter
+          cancelButton={<Button>Cancel</Button>}
+          primaryButton={<Button appearance="primary">Confirm</Button>}
+        />
+      </Modal>
+    );
+  },
+};
+
+export const SimplifiedFooterAPI: Story = {
+  render: () => {
+    return (
+      <Modal
+        aria-label="Simplified Footer API Example"
+        modalTrigger={
+          <Button appearance="primary">Open Modal with Simple Footer</Button>
+        }
+      >
+        <ModalHeader
+          title="Simplified Footer API"
+          subtitle="No need to wrap buttons or manage layout"
+        />
+        <ModalBody>
+          <Text mb={300}>
+            The new ModalFooter API makes it easy to add standard footer buttons
+            without boilerplate code.
+          </Text>
+          <Text>
+            Simply pass your Button elements to cancelButton and primaryButton
+            props. Both buttons automatically close the modal. You can add
+            custom onClick handlers that run before closing (e.g., for
+            validation or saving data).
+          </Text>
+        </ModalBody>
+        <ModalFooter
+          cancelButton={<Button>Cancel</Button>}
+          primaryButton={
+            <Button
+              appearance="primary"
+              onClick={() => {
+                console.log("Saving data...");
+                // Your custom logic here runs before the modal closes
+              }}
+            >
+              Save
+            </Button>
+          }
+        />
+      </Modal>
+    );
+  },
+};
+
+export const FooterWithLeftAction: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <Modal
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        aria-label="Footer with Left Action"
+        modalTrigger={
+          <Button appearance="primary">Open Modal with Delete Action</Button>
+        }
+      >
+        <ModalHeader
+          title="Edit Document"
+          subtitle="Make changes or delete this document"
+        />
+        <ModalBody>
+          <Text mb={300}>
+            This modal showcases the leftAction prop, perfect for destructive
+            actions like Delete that should be separated from the primary
+            actions.
+          </Text>
+          <Text>
+            The Delete button appears on the far left, while Cancel and Save are
+            grouped together on the right. Note that leftAction is NOT
+            auto-wrapped, so you control when/how to close the modal.
+          </Text>
+        </ModalBody>
+        <ModalFooter
+          leftAction={
+            <Button
+              appearance="destructive"
+              onClick={() => {
+                if (confirm("Are you sure you want to delete?")) {
+                  console.log("Deleting...");
+                  setIsOpen(false);
+                }
+              }}
+            >
+              Delete
+            </Button>
+          }
+          cancelButton={<Button>Cancel</Button>}
+          primaryButton={
+            <Button
+              appearance="primary"
+              onClick={() => {
+                console.log("Saving...");
+                // Modal auto-closes after this runs
+              }}
+            >
+              Save Changes
+            </Button>
+          }
+        />
+      </Modal>
+    );
+  },
+};
+
+export const CustomFooterOverride: Story = {
+  render: () => {
+    return (
+      <Modal
+        aria-label="Custom Footer Override"
+        modalTrigger={<Button appearance="primary">Open Custom Footer</Button>}
+      >
+        <ModalHeader
+          title="Custom Footer Layout"
+          subtitle="Use ModalCustomFooter for complete control"
+        />
+        <ModalBody>
+          <Text>
+            For edge cases where you need complete control over the footer
+            layout, you can use ModalCustomFooter instead of ModalFooter. This
+            gives you the base styled footer component with full control over
+            the content.
+          </Text>
+        </ModalBody>
+        <ModalCustomFooter>
+          <Box display="flex" justifyContent="space-between" width="100%">
+            <Box display="flex" gap={200}>
+              <Button appearance="secondary">Help</Button>
+              <Button appearance="secondary">More Info</Button>
+            </Box>
+            <Box display="flex" gap={300}>
+              <ModalCloseWrapper>
+                <Button>Cancel</Button>
+              </ModalCloseWrapper>
+              <ModalCloseWrapper>
+                <Button appearance="primary">Confirm</Button>
+              </ModalCloseWrapper>
+            </Box>
+          </Box>
+        </ModalCustomFooter>
+      </Modal>
+    );
+  },
+};