@edux-design/modals 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @edux-design/modals
 
+## 0.1.2
+
+### Patch Changes
+
+- Updated design tokens
+
 ## 0.1.1
 
 ### Patch Changes

package/README.md

@@ -34,9 +34,9 @@ import { Button } from "@edux-design/buttons";
 
 export function PublishModal() {
   return (
-    <Modal>
+    <Modal onClose={() => {}}>
       <ModalTrigger asChild>
-        <Button variant="primary">Open Modal</Button>
+        <Button>Open Modal</Button>
       </ModalTrigger>
       <ModalContent size="medium">
         <ModalHeader>
@@ -50,9 +50,9 @@ export function PublishModal() {
         </ModalBody>
         <ModalFooter>
           <ModalClose asChild>
-            <Button variant="secondary">Cancel</Button>
+            <Button isSecondary>Cancel</Button>
           </ModalClose>
-          <Button variant="primary">Publish</Button>
+          <Button>Publish</Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
@@ -60,4 +60,6 @@ export function PublishModal() {
 }
 ```
 
-`ModalContent` accepts `size`, `backdropProps`, `backDropProps`, `className`, and `contentProps`. Storybook examples live in `src/demos/Modal.stories.jsx`.
+Passing `onClose` to `Modal` also enables the default close icon inside `ModalHeader`.
+
+`ModalContent` accepts `size`, `backdropProps`, the legacy alias `backDropProps`, `className`, and `contentProps`. Storybook examples live in `src/demos/Modal.stories.jsx`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/modals",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "sideEffects": [
     "**/*.css"
@@ -15,11 +15,15 @@
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",
-    "build": "tsup src/index.js --format esm,cjs --external react,react-dom,@edux-design/utils,@radix-ui/react-dialog",
-    "dev": "tsup src/index.js --watch --format esm,cjs --external react,react-dom,@edux-design/utils,@radix-ui/react-dialog",
+    "build": "tsup src/index.js --format esm,cjs --external react,react-dom,@edux-design/utils,@edux-design/buttons,@edux-design/icons,@radix-ui/react-dialog",
+    "dev": "tsup src/index.js --watch --format esm,cjs --external react,react-dom,@edux-design/utils,@edux-design/buttons,@edux-design/icons,@radix-ui/react-dialog",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc --noEmit"
   },
+  "dependencies": {
+    "@edux-design/buttons": "*",
+    "@edux-design/icons": "*"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",

package/src/demos/Modal.stories.jsx

@@ -12,6 +12,21 @@ import {
 } from "../index";
 import { Button } from "@edux-design/buttons";
 
+const loremIpsumParagraphs = [
+  "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.",
+  "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.",
+];
+
+const BodyCopy = () => (
+  <div className="space-y-12">
+    {loremIpsumParagraphs.map((paragraph) => (
+      <p key={paragraph} className="text-sm text-fg-subtle">
+        {paragraph}
+      </p>
+    ))}
+  </div>
+);
+
 const meta = {
   title: "Components/Modal",
   component: Modal,
@@ -43,7 +58,7 @@ export const Basic = {
   render: (args) => (
     <Modal>
       <ModalTrigger asChild>
-        <Button variant="primary">Open Modal</Button>
+        <Button>Open Modal</Button>
       </ModalTrigger>
       <ModalContent {...args}>
         <ModalHeader>
@@ -53,15 +68,13 @@ export const Basic = {
           </ModalDescription>
         </ModalHeader>
         <ModalBody>
-          <p className="text-sm text-fg-subtle">
-            This modal supports title, description, body, and footer regions.
-          </p>
+          <BodyCopy />
         </ModalBody>
         <ModalFooter>
           <ModalClose asChild>
-            <Button variant="secondary">Cancel</Button>
+            <Button isSecondary>Cancel</Button>
           </ModalClose>
-          <Button variant="primary">Publish</Button>
+          <Button>Publish</Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
@@ -78,7 +91,7 @@ export const Controlled = {
     return (
       <Modal open={open} onOpenChange={setOpen}>
         <ModalTrigger asChild>
-          <Button variant="primary">
+          <Button>
             {open ? "Close Modal" : "Open Modal"}
           </Button>
         </ModalTrigger>
@@ -90,12 +103,10 @@ export const Controlled = {
             </ModalDescription>
           </ModalHeader>
           <ModalBody>
-            <p className="text-sm text-fg-subtle">
-              Use this variant when the parent controls the workflow.
-            </p>
+            <BodyCopy />
           </ModalBody>
           <ModalFooter>
-            <Button variant="bare" onClick={() => setOpen(false)}>
+            <Button isBare onClick={() => setOpen(false)}>
               Dismiss
             </Button>
           </ModalFooter>
@@ -114,7 +125,7 @@ export const Sizes = {
       {["small", "medium", "large", "full"].map((size) => (
         <Modal key={size}>
           <ModalTrigger asChild>
-            <Button variant="secondary">Size: {size}</Button>
+            <Button isSecondary>Size: {size}</Button>
           </ModalTrigger>
           <ModalContent size={size}>
             <ModalHeader>
@@ -124,10 +135,7 @@ export const Sizes = {
               </ModalDescription>
             </ModalHeader>
             <ModalBody>
-              <p className="text-sm text-fg-subtle">
-                These presets use existing spacing, border, shadow, and
-                foreground/background tokens.
-              </p>
+              <BodyCopy />
             </ModalBody>
           </ModalContent>
         </Modal>
@@ -140,7 +148,7 @@ export const CustomBackdrop = {
   render: (args) => (
     <Modal>
       <ModalTrigger asChild>
-        <Button variant="primary">Open With Backdrop</Button>
+        <Button>Open With Backdrop</Button>
       </ModalTrigger>
       <ModalContent
         {...args}
@@ -155,9 +163,7 @@ export const CustomBackdrop = {
           </ModalDescription>
         </ModalHeader>
         <ModalBody>
-          <p className="text-sm text-fg-subtle">
-            Override color and opacity without changing the modal surface.
-          </p>
+          <BodyCopy />
         </ModalBody>
       </ModalContent>
     </Modal>
@@ -166,3 +172,133 @@ export const CustomBackdrop = {
     size: "medium",
   },
 };
+
+export const FooterActions = {
+  render: (args) => (
+    <Modal>
+      <ModalTrigger asChild>
+        <Button isSecondary>Open Action Footer</Button>
+      </ModalTrigger>
+      <ModalContent {...args}>
+        <ModalHeader>
+          <ModalTitle>Save draft</ModalTitle>
+          <ModalDescription>
+            Footer actions can group secondary and primary outcomes.
+          </ModalDescription>
+        </ModalHeader>
+        <ModalBody>
+          <BodyCopy />
+        </ModalBody>
+        <ModalFooter>
+          <ModalClose asChild>
+            <Button isBare>Back</Button>
+          </ModalClose>
+          <Button isSecondary>Save Draft</Button>
+          <Button>Continue</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  ),
+  args: {
+    size: "medium",
+  },
+};
+
+export const DestructiveFooter = {
+  render: (args) => (
+    <Modal>
+      <ModalTrigger asChild>
+        <Button>Open Destructive Footer</Button>
+      </ModalTrigger>
+      <ModalContent {...args}>
+        <ModalHeader>
+          <ModalTitle>Delete manuscript version</ModalTitle>
+          <ModalDescription>
+            Use a footer to separate destructive actions from cancellation.
+          </ModalDescription>
+        </ModalHeader>
+        <ModalBody>
+          <BodyCopy />
+        </ModalBody>
+        <ModalFooter>
+          <ModalClose asChild>
+            <Button isSecondary>Cancel</Button>
+          </ModalClose>
+          <Button isDanger>Delete Version</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  ),
+  args: {
+    size: "small",
+  },
+};
+
+export const HeaderCloseButton = {
+  render: (args) => (
+    <Modal onClose={() => {}}>
+      <ModalTrigger asChild>
+        <Button isSecondary>Open Header Close</Button>
+      </ModalTrigger>
+      <ModalContent {...args}>
+        <ModalHeader>
+          <ModalTitle>Review publish settings</ModalTitle>
+          <ModalDescription>
+            Passing onClose to Modal automatically adds the header close action.
+          </ModalDescription>
+        </ModalHeader>
+        <ModalBody>
+          <BodyCopy />
+        </ModalBody>
+        <ModalFooter>
+          <ModalClose asChild>
+            <Button isSecondary>Cancel</Button>
+          </ModalClose>
+          <Button>Save</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  ),
+  args: {
+    size: "medium",
+  },
+};
+
+export const ControlledHeaderCloseButton = {
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <Modal
+        open={open}
+        onOpenChange={setOpen}
+        onClose={() => setOpen(false)}
+      >
+        <ModalTrigger asChild>
+          <Button>
+            {open ? "Modal Open" : "Open Controlled Header Close"}
+          </Button>
+        </ModalTrigger>
+        <ModalContent {...args}>
+          <ModalHeader>
+            <ModalTitle>Controlled header close</ModalTitle>
+            <ModalDescription>
+              The built-in close icon also works when modal state is controlled.
+            </ModalDescription>
+          </ModalHeader>
+          <ModalBody>
+            <BodyCopy />
+          </ModalBody>
+          <ModalFooter>
+            <Button isBare onClick={() => setOpen(false)}>
+              Dismiss
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  },
+  args: {
+    size: "medium",
+  },
+};

package/src/elements/Modal.jsx

@@ -1,22 +1,56 @@
-import React, { forwardRef, useCallback } from "react";
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+} from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cx } from "@edux-design/utils";
+import { IconButton } from "@edux-design/buttons";
+import { Close } from "@edux-design/icons";
 
 const MODAL_OVERLAY_Z_INDEX = 2147483645;
 const MODAL_CONTENT_Z_INDEX = 2147483646;
+const ModalContext = createContext({ hasOnClose: false });
+const MODAL_SECTION_PADDING_X = "px-16";
+const MODAL_SECTION_PADDING_Y = "py-16";
+const MODAL_SURFACE_CLASSES = [
+  "fixed left-1/2 top-1/2 max-h-[92vh] -translate-x-1/2 -translate-y-1/2",
+  "bg-bg-base text-fg-base shadow-xl outline-none rounded-md border-2 border-border-subtle",
+  "flex flex-col overflow-hidden",
+  "data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
+].join(" ");
+const MODAL_HEADER_CLASSES = [
+  "flex justify-between gap-12",
+  MODAL_SECTION_PADDING_X,
+  MODAL_SECTION_PADDING_Y,
+  "border-b border-border-subtle",
+].join(" ");
+const MODAL_HEADER_CONTENT_CLASSES = "flex min-w-0 flex-1 flex-col gap-4";
+const MODAL_BODY_CLASSES = [
+  "flex-1 overflow-auto",
+  MODAL_SECTION_PADDING_X,
+  MODAL_SECTION_PADDING_Y,
+].join(" ");
+const MODAL_FOOTER_CLASSES = [
+  "flex items-center justify-end gap-8",
+  MODAL_SECTION_PADDING_X,
+  MODAL_SECTION_PADDING_Y,
+  "border-t border-border-subtle",
+].join(" ");
+const MODAL_TITLE_CLASSES = "text-lg font-semibold text-fg-base";
+const MODAL_DESCRIPTION_CLASSES = "text-sm text-fg-subtle";
+const MODAL_CLOSE_LABEL = "Close modal";
+const MODAL_SIZE_CLASSES = {
+  small: "w-[min(92vw,420px)]",
+  medium: "w-[min(92vw,640px)]",
+  large: "w-[min(92vw,840px)]",
+  full: "w-[min(96vw,1200px)] h-[min(92vh,900px)]",
+};
 
 const getSizeClasses = (size) => {
-  switch (size) {
-    case "small":
-      return "w-[min(92vw,420px)]";
-    case "large":
-      return "w-[min(92vw,840px)]";
-    case "full":
-      return "w-[min(96vw,1200px)] h-[min(92vh,900px)]";
-    case "medium":
-    default:
-      return "w-[min(92vw,640px)]";
-  }
+  return MODAL_SIZE_CLASSES[size] ?? MODAL_SIZE_CLASSES.medium;
 };
 
 export const Modal = ({
@@ -28,6 +62,11 @@ export const Modal = ({
   children,
   ...props
 }) => {
+  const contextValue = useMemo(
+    () => ({ hasOnClose: typeof onClose === "function" }),
+    [onClose]
+  );
+
   const handleOpenChange = useCallback(
     (nextOpen) => {
       onOpenChange?.(nextOpen);
@@ -41,14 +80,16 @@ export const Modal = ({
   );
 
   return (
-    <DialogPrimitive.Root
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={handleOpenChange}
-      {...props}
-    >
-      {children}
-    </DialogPrimitive.Root>
+    <ModalContext.Provider value={contextValue}>
+      <DialogPrimitive.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={handleOpenChange}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Root>
+    </ModalContext.Provider>
   );
 };
 
@@ -56,6 +97,17 @@ export const ModalTrigger = DialogPrimitive.Trigger;
 export const ModalClose = DialogPrimitive.Close;
 export const ModalPortal = DialogPrimitive.Portal;
 
+const ModalHeaderCloseButton = () => (
+  <ModalClose asChild>
+    <IconButton
+      size="small"
+      isBare
+      icon={<Close aria-hidden="true" />}
+      aria-label={MODAL_CLOSE_LABEL}
+    />
+  </ModalClose>
+);
+
 export const ModalOverlay = forwardRef(
   ({ className, style, ...props }, ref) => (
     <DialogPrimitive.Overlay
@@ -88,21 +140,20 @@ export const ModalContent = forwardRef(
     ref
   ) => {
     const resolvedBackdropProps = backdropProps ?? backDropProps ?? {};
+    const { className: backdropClassName, style: backdropStyle, ...overlayProps } =
+      resolvedBackdropProps;
 
     return (
       <ModalPortal>
         <ModalOverlay
-          {...resolvedBackdropProps}
-          className={cx(resolvedBackdropProps.className)}
-          style={{ ...resolvedBackdropProps.style }}
+          {...overlayProps}
+          className={cx(backdropClassName)}
+          style={{ ...backdropStyle }}
         />
         <DialogPrimitive.Content
           ref={ref}
           className={cx(
-            "fixed left-1/2 top-1/2 max-h-[92vh] -translate-x-1/2 -translate-y-1/2",
-            "bg-bg-base text-fg-base shadow-xl outline-none rounded-2xl border border-border-subtle",
-            "flex flex-col overflow-hidden",
-            "data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out",
+            MODAL_SURFACE_CLASSES,
             getSizeClasses(size),
             className
           )}
@@ -119,23 +170,27 @@ export const ModalContent = forwardRef(
 
 ModalContent.displayName = "ModalContent";
 
-export const ModalHeader = forwardRef(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(
-      "flex flex-col gap-4 px-20 py-16 border-b border-border-subtle",
-      className
-    )}
-    {...props}
-  />
-));
+export const ModalHeader = forwardRef(({ className, children, ...props }, ref) => {
+  const { hasOnClose } = useContext(ModalContext);
+
+  return (
+    <div
+      ref={ref}
+      className={cx(MODAL_HEADER_CLASSES, className)}
+      {...props}
+    >
+      <div className={MODAL_HEADER_CONTENT_CLASSES}>{children}</div>
+      {hasOnClose ? <ModalHeaderCloseButton /> : null}
+    </div>
+  );
+});
 
 ModalHeader.displayName = "ModalHeader";
 
 export const ModalBody = forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cx("flex-1 overflow-auto px-20 py-16", className)}
+    className={cx(MODAL_BODY_CLASSES, className)}
     {...props}
   />
 ));
@@ -145,10 +200,7 @@ ModalBody.displayName = "ModalBody";
 export const ModalFooter = forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cx(
-      "flex items-center justify-end gap-8 px-20 py-16 border-t border-border-subtle",
-      className
-    )}
+    className={cx(MODAL_FOOTER_CLASSES, className)}
     {...props}
   />
 ));
@@ -158,7 +210,7 @@ ModalFooter.displayName = "ModalFooter";
 export const ModalTitle = forwardRef(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cx("text-lg font-semibold text-fg-base", className)}
+    className={cx(MODAL_TITLE_CLASSES, className)}
     {...props}
   />
 ));
@@ -168,7 +220,7 @@ ModalTitle.displayName = "ModalTitle";
 export const ModalDescription = forwardRef(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cx("text-sm text-fg-subtle", className)}
+    className={cx(MODAL_DESCRIPTION_CLASSES, className)}
     {...props}
   />
 ));

package/src/elements/Modal.test.jsx

@@ -13,9 +13,9 @@ import {
 let lastRootProps;
 
 vi.mock("@radix-ui/react-dialog", () => {
-  const Passthrough = ({ children, ...props }) => (
-    <div {...props}>{children}</div>
-  );
+  const Passthrough = ({ children, ...props }) => <div {...props}>{children}</div>;
+  const AsChildPassthrough = ({ children, asChild, ...props }) =>
+    asChild ? children : <button type="button" {...props}>{children}</button>;
   const Buttonish = ({ children, ...props }) => (
     <button type="button" {...props}>
       {children}
@@ -29,18 +29,18 @@ vi.mock("@radix-ui/react-dialog", () => {
     <div ref={ref} data-testid="radix-overlay" {...props} />
   ));
   Overlay.displayName = "RadixOverlay";
-  const Root = ({ children, ...props }) => {
-    lastRootProps = props;
-    return <div {...props}>{children}</div>;
+  const Root = ({ children, open, defaultOpen, onOpenChange }) => {
+    lastRootProps = { open, defaultOpen, onOpenChange };
+    return <div>{children}</div>;
   };
 
   return {
     Root,
     Trigger: Buttonish,
-    Portal: Passthrough,
+    Portal: ({ children }) => <div>{children}</div>,
     Overlay,
     Content,
-    Close: Buttonish,
+    Close: AsChildPassthrough,
     Title: Passthrough,
     Description: Passthrough,
   };
@@ -89,6 +89,34 @@ describe("ModalContent", () => {
     expect(screen.getByText("Body")).toHaveClass("overflow-auto");
     expect(screen.getByText("Footer")).toHaveClass("border-t");
   });
+
+  it("adds a close icon button to the header when Modal receives onClose", () => {
+    render(
+      <Modal onClose={vi.fn()}>
+        <ModalContent>
+          <ModalHeader>
+            <ModalTitle>Header</ModalTitle>
+          </ModalHeader>
+        </ModalContent>
+      </Modal>
+    );
+
+    expect(screen.getByLabelText("Close modal")).toBeInTheDocument();
+  });
+
+  it("does not add a close icon button to the header without onClose", () => {
+    render(
+      <Modal>
+        <ModalContent>
+          <ModalHeader>
+            <ModalTitle>Header</ModalTitle>
+          </ModalHeader>
+        </ModalContent>
+      </Modal>
+    );
+
+    expect(screen.queryByLabelText("Close modal")).not.toBeInTheDocument();
+  });
 });
 
 describe("Modal", () => {