Merge pull request #1052 from Patternslib/close-panel-dialog

feat(pat close panel): Support for closing dialog panels.

Author: thet

src/pat/close-panel/close-panel.js

@@ -7,20 +7,23 @@ export default Base.extend({
 
     init() {
         this.el.addEventListener("click", (e) => {
-            // Find the first element which has a close-panel.
+            // Find the first element which has a close-panel or is a dialog.
             // This should the panel-root itself.
-            const panel = this.el.closest(".has-close-panel");
+            const panel = this.el.closest(".has-close-panel, dialog");
 
             if (!panel) {
-                // No ``.has-close-panel``. Exiting.
+                // Nothing to do. Exiting.
                 return;
-            }
-
-            // Get the close panel method.
-            const close_method = dom.get_data(panel, "close_panel");
+            } else if (panel.tagName === "DIALOG") {
+                // Close the dialog.
+                panel.close();
+            } else if (panel.classList.contains("has-close-panel")) {
+                // Get the close panel method.
+                const close_method = dom.get_data(panel, "close_panel");
 
-            // Now execute the method and close the panel.
-            close_method && close_method(e);
+                // Now execute the method and close the panel.
+                close_method && close_method(e);
+            }
         });
     },
 });

src/pat/close-panel/close-panel.test.js

@@ -40,4 +40,22 @@ describe("pat close-panel", function () {
         await utils.timeout(1); // wait a tick async to settle.
         expect(document.querySelectorAll(".pat-modal").length).toBe(0);
     });
+
+    it("Closes a dialog's panel.", function () {
+        document.body.innerHTML = `
+              <dialog open>
+                <button class="close-panel">close</button>
+              </div>
+            `;
+
+        registry.scan(document.body); // Also need to instantiate close-panel
+
+        const dialog = document.querySelector("dialog");
+
+        expect(dialog.open).toBe(true);
+
+        document.querySelector(".close-panel").click();
+
+        expect(dialog.open).toBe(false);
+    });
 });

src/setup-tests.js

@@ -14,3 +14,7 @@ import dom from "./core/dom";
 dom.is_visible = (el) => {
     return !el.hidden;
 };
+
+HTMLDialogElement.prototype.close = jest.fn().mockImplementation(function () {
+    this.open = false;
+});