feat: modal overlay close and hide

RBND-studio · Feb 28, 2024 · 689d8b8 · 689d8b8
1 parent 4d7343d
commit 689d8b8
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 8 deletions.
diff --git a/workspaces/e2e/tests/modal-overlay/modal-overlay.html b/workspaces/e2e/tests/modal-overlay/modal-overlay.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/tests/reset.css" />
+    <link rel="stylesheet" href="/node_modules/@flows/js/css.min/flows.css" />
+  </head>
+  <body>
+    <button style="cursor: pointer">Click me</button>
+
+    <script type="module" src="./modal-overlay.ts"></script>
+  </body>
+</html>
diff --git a/workspaces/e2e/tests/modal-overlay/modal-overlay.spec.ts b/workspaces/e2e/tests/modal-overlay/modal-overlay.spec.ts
@@ -0,0 +1,21 @@
+import { expect, test } from "@playwright/test";
+
+test("should show overlay without close on click by default", async ({ page }) => {
+  await page.goto("/modal-overlay/modal-overlay.html");
+  await expect(page.locator(".flows-modal")).toBeVisible();
+  await page.locator(".flows-modal-overlay").click({ position: { x: 100, y: 100 } });
+  await expect(page.locator(".flows-modal")).toBeVisible();
+});
+
+test("should close overlay on click", async ({ page }) => {
+  await page.goto("/modal-overlay/modal-overlay.html?closeOnOverlayClick=true");
+  await expect(page.locator(".flows-modal")).toBeVisible();
+  await page.locator(".flows-modal-overlay").click({ position: { x: 100, y: 100 } });
+  await expect(page.locator(".flows-modal")).toBeHidden();
+});
+
+test("should hide overlay", async ({ page }) => {
+  await page.goto("/modal-overlay/modal-overlay.html?hideOverlay=true");
+  await expect(page.locator(".flows-modal")).toBeVisible();
+  await expect(page.locator(".flows-modal-overlay")).toBeHidden();
+});
diff --git a/workspaces/e2e/tests/modal-overlay/modal-overlay.ts b/workspaces/e2e/tests/modal-overlay/modal-overlay.ts
@@ -0,0 +1,24 @@
+import { init } from "@flows/js/core";
+
+const closeOnOverlayClick =
+  new URLSearchParams(window.location.search).get("closeOnOverlayClick") === "true";
+const hideOverlay = new URLSearchParams(window.location.search).get("hideOverlay") === "true";
+
+init({
+  flows: [
+    {
+      id: "flow",
+      location: "/",
+      steps: [
+        {
+          title: "Hello",
+          body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+          hideOverlay,
+          closeOnOverlayClick,
+        },
+      ],
+    },
+  ],
+});
+
+document.querySelector("button")?.addEventListener("click", () => console.log("Hello!"));
diff --git a/workspaces/e2e/tests/tooltip-overlay/tooltip-overlay.html b/workspaces/e2e/tests/tooltip-overlay/tooltip-overlay.html
@@ -11,7 +11,7 @@ <h1 style="color: red">Tooltip overlay</h1>
     <div>
       <button class="another-btn">Another button</button>
     </div>
-    <div style="margin: 40px; display: inline-block; padding: 20px" class="target">
+    <div style="margin: 40px; display: inline-block" class="target">
       <button>Ahoj</button>
     </div>
 

diff --git a/workspaces/e2e/tests/tooltip-overlay/tooltip-overlay.spec.ts b/workspaces/e2e/tests/tooltip-overlay/tooltip-overlay.spec.ts
@@ -15,3 +15,8 @@ test("should close overlay on click", async ({ page }) => {
   await page.locator(".flows-tooltip-overlay-click-layer").click();
   await expect(page.locator(".flows-tooltip")).not.toBeVisible();
 });
+
+test("should match screenshot", async ({ page }) => {
+  await page.goto("/tooltip-overlay/tooltip-overlay.html");
+  await expect(page).toHaveScreenshot({ scale: "css" });
+});
diff --git a/workspaces/js/css/template.css b/workspaces/js/css/template.css
@@ -186,19 +186,21 @@
 /* Modal styles */
 
 .flows-modal-overlay {
+  position: fixed;
+  inset: 0;
   background-color: var(--flows-modal-overlayBackground);
+}
+.flows-modal-wrapper {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   display: grid;
   place-items: center;
   padding: var(--flows-modal-padding);
   overflow: auto;
+  pointer-events: none;
 }
-
 .flows-modal {
+  pointer-events: auto;
   background-color: var(--flows-bg-default);
   border: var(--flows-border);
   color: var(--flows-fg-default);

diff --git a/workspaces/js/src/core/render.tsx b/workspaces/js/src/core/render.tsx
@@ -206,7 +206,7 @@ const renderTooltip = ({
 
     const overlayClickLayer = (
       <div
-        className={`flows-tooltip-overlay-click-layer ${step.closeOnOverlayClick ? "flows-overlay-cancel" : ""}`}
+        className={`flows-tooltip-overlay-click-layer${step.closeOnOverlayClick ? " flows-overlay-cancel" : ""}`}
       />
     );
     root.appendChild(overlayClickLayer);
@@ -252,7 +252,7 @@ const renderModal = ({
   state: FlowState;
 }): void => {
   const modal = (
-    <div className="flows-modal-overlay">
+    <div className="flows-modal-wrapper">
       <div className="flows-modal">
         {getStepHeader({ step })}
         {step.body && (
@@ -262,6 +262,13 @@ const renderModal = ({
       </div>
     </div>
   );
+  if (!step.hideOverlay) {
+    root.appendChild(
+      <div
+        className={`flows-modal-overlay${step.closeOnOverlayClick ? " flows-overlay-cancel" : ""}`}
+      />,
+    );
+  }
   root.appendChild(modal);
 };
 

diff --git a/workspaces/js/src/core/validation.ts b/workspaces/js/src/core/validation.ts
@@ -108,6 +108,8 @@ const TooltipStepStruct: Describe<FlowTooltipStep> = object({
 const ModalStepStruct: Describe<FlowModalStep> = object({
   title: string(),
   body: optional(string()),
+  hideOverlay: optional(boolean()),
+  closeOnOverlayClick: optional(boolean()),
   stepId: optional(string()),
   hideClose: optional(boolean()),
   hidePrev: optional(boolean()),

diff --git a/workspaces/js/src/types/flow.ts b/workspaces/js/src/types/flow.ts
@@ -132,6 +132,16 @@ export interface FlowModalStep extends CommonStepProps {
    * Body of the modal. Supports HTML.
    */
   body?: string;
+  /**
+   * Hides modal overlay backdrop and makes rest .
+   * @defaultValue `false`
+   */
+  hideOverlay?: boolean;
+  /**
+   * Cancel the flow when the overlay is clicked.
+   * @defaultValue `false`
+   */
+  closeOnOverlayClick?: boolean;
   /**
    * Hide the close button. Without the close button the user will not be able to close the tooltip.
    */