fix(notification): card jumps down after swipe

Trendyol · Nov 22, 2023 · b02cce1 · b02cce1
1 parent cd33f1a
commit b02cce1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/src/components/notification/bl-notification.test.ts b/src/components/notification/bl-notification.test.ts
@@ -492,6 +492,14 @@ describe("bl-notification", () => {
         await el.updateComplete;
 
         expect(removeSpy).to.not.have.been.called;
+        expect(notificationEl.style.transition).to.equal("transform 0.3s ease 0s");
+        expect(notificationEl.style.transform).to.equal("translateY(0px)");
+
+        notificationEl.dispatchEvent(new TransitionEvent("transitionend"));
+
+        await el.updateComplete;
+
+        expect(notificationEl.style.transition).to.equal("");
         expect(notificationEl.style.transform).to.equal("");
       });
 
@@ -566,6 +574,31 @@ describe("bl-notification", () => {
 
         expect(removeSpy).to.not.have.been.called;
       });
+
+      it("should set travel-distance property with current touch position", async () => {
+        // FIXME: Cant emulate touch events in web test runner
+        if (!window.navigator.userAgent.includes("Chrome")) {
+          return;
+        }
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          permanent: true,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        sendTouchEvent(100, -150, notificationEl, "touchend");
+
+        assert.equal(notificationEl.style.getPropertyValue("--travel-distance"), "-160px");
+      });
     });
 
     describe("Animation", () => {

diff --git a/src/components/notification/bl-notification.ts b/src/components/notification/bl-notification.ts
@@ -163,9 +163,16 @@ export default class BlNotification extends LitElement {
     const movedY = currentY - this.touchStartY;
 
     if (movedY < SWIPE_UP_THRESHOLD) {
+      currentTarget.style.setProperty("--travel-distance", `${movedY - 10}px`);
       this.removeNotification(currentTarget.id);
     } else {
-      currentTarget.style.transform = "";
+      currentTarget.style.transition = "transform 0.3s ease";
+      currentTarget.style.transform = "translateY(0px)";
+
+      currentTarget.addEventListener("transitionend", () => {
+        currentTarget.style.transition = "";
+        currentTarget.style.transform = "";
+      });
     }
 
     this.touchStartY = 0;