feat: update modal component

- show modal overlay with pointer cursor when clickable
- increase spacing
- add internal & external open states, allowing to be uncontrolled
- add open & close handlers

Author: abelflopes

packages/components/modal/src/Modal.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import styles from "./styles/index.module.scss";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { ModalContext, type ModalContextProps, type ModalContextValue } from "./context";
 import { Card } from "@react-ck/card";
 import { Overlay } from "@react-ck/overlay";
@@ -40,33 +40,51 @@ export const Modal = ({
     [setContextValue],
   );
 
+  // Invoke open / close handlers
+  useEffect(() => {
+    if (internalOpen) onOpen?.();
+    else onClose?.();
+  }, [internalOpen, onClose, onOpen]);
+
+  // Synchronize internal state with external state
+  useEffect(() => {
+    setInternalOpen(open);
+  }, [open]);
+
   return (
-    <Layer elevation="overlay">
-      <div {...otherProps} className={classNames(styles.root, className)}>
-        <Overlay />
-        <Card className={styles.card}>
-          <ModalContext.Provider value={contextProps}>
-            {props.header && (
-              <header
-                {...props.header}
-                className={classNames(styles.header, props.header.className)}>
-                <Text type="h3" as="p" margin={false}>
-                  {props.header.heading}
-                </Text>
+    internalOpen && (
+      <Layer elevation="overlay">
+        <div {...otherProps} className={classNames(styles.root, className)}>
+          <Overlay
+            className={classNames(dismissable && styles.clickable_overlay)}
+            onClick={handleClose}
+          />
+          <Card className={styles.card}>
+            <ModalContext.Provider value={contextProps}>
+              {props.header && (
+                <header
+                  {...props.header}
+                  className={classNames(styles.header, props.header.className)}>
+                  <Text type="h3" as="p" margin={false}>
+                    {props.header.heading}
+                  </Text>
 
-                <Button skin="ghost" icon={<Icon name="close" />} />
-              </header>
-            )}
-            <main className={styles.content}>{children}</main>
-            {props.footer && (
-              <footer
-                {...props.footer}
-                className={classNames(styles.footer, props.footer.className)}
-              />
-            )}
-          </ModalContext.Provider>
-        </Card>
-      </div>
-    </Layer>
+                  {dismissable && (
+                    <Button skin="ghost" icon={<Icon name="close" />} onClick={handleClose} />
+                  )}
+                </header>
+              )}
+              <main className={styles.content}>{children}</main>
+              {props.footer && (
+                <footer
+                  {...props.footer}
+                  className={classNames(styles.footer, props.footer.className)}
+                />
+              )}
+            </ModalContext.Provider>
+          </Card>
+        </div>
+      </Layer>
+    )
   );
 };

packages/components/modal/src/styles/index.module.scss

@@ -1,7 +1,7 @@
 @import "@react-ck/theme";
 
 .root {
-  @include define-css-var(modal, spacing, get-spacing(4));
+  @include define-css-var(modal, spacing, get-spacing(5));
 
   display: flex;
   align-items: center;
@@ -13,6 +13,10 @@
   width: 100%;
 }
 
+.clickable_overlay {
+  cursor: pointer;
+}
+
 .card {
   position: relative;
 }
@@ -22,12 +26,13 @@
   align-items: center;
   justify-content: space-between;
   gap: get-css-var(modal, spacing);
-  padding-bottom: get-css-var(modal, spacing);
+  margin-bottom: get-css-var(modal, spacing);
 }
 
 .footer {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   gap: get-css-var(modal, spacing);
-  padding-top: get-css-var(modal, spacing);
+  margin-top: get-css-var(modal, spacing);
 }