fix(dialog): remove shadow from footer when scroll hits bottom (#809)

This PR removes box-shadow from the footer when scrolling to the end of
the content.

Closes #624

Co-authored-by: Alptekin Gursoy <alptekin.gursoy@trendyol.com>
Co-authored-by: Erbil <erbilnas071@gmail.com>

src/components/dialog/bl-dialog.test.ts

@@ -286,6 +286,88 @@ describe("bl-dialog", () => {
       expect(footer.className).to.oneOf(["shadow", ""]);
     });
 
+    it("should remove shadow from footer when hitting bottom", async () => {
+      window.innerWidth = 400;
+
+      const el = await fixture<HTMLElement>(html`<bl-dialog open caption="My title">
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <bl-button slot="primary-action" size="large">Primary</bl-button>
+        <bl-button slot="secondary-action" variant="secondary" size="large">Secondary</bl-button>
+      </bl-dialog>
+    </body>`);
+
+      const content = el.shadowRoot?.querySelector(".content") as HTMLElement;
+      const footer = el?.shadowRoot?.querySelector("footer") as HTMLElement;
+
+      content.scrollTop = content.scrollHeight;
+      await new Promise(resolve => requestAnimationFrame(resolve));
+
+      expect(footer).to.not.have.class("shadow");
+    });
+
     describe("Events", () => {
       it("should fire bl-dialog-open / close event on dialog open / close", async () => {
         const el = await fixture<typeOfBlDialog>(html`<bl-dialog open caption="My title">

src/components/dialog/bl-dialog.ts

@@ -107,13 +107,15 @@ export default class BlDialog extends LitElement {
       document.body.style.overflow = "hidden";
       this.toggleFooterShadow();
       window?.addEventListener("keydown", event => this.onKeydown(event));
-      window?.addEventListener("resize", () => this.toggleFooterShadow());
+      window?.addEventListener("resize", this.toggleFooterShadow);
+      this.content?.addEventListener("scroll", this.toggleFooterShadow);
     } else {
       this.dialog?.close?.();
       this.onClose({ isOpen: false });
       document.body.style.overflow = "auto";
       window?.removeEventListener("keydown", this.onKeydown);
       window?.removeEventListener("resize", this.toggleFooterShadow);
+      this.content?.removeEventListener("scroll", this.toggleFooterShadow);
     }
   }
 
@@ -142,13 +144,17 @@ export default class BlDialog extends LitElement {
     }
   };
 
-  private toggleFooterShadow() {
-    if (this.content?.scrollHeight > this.content?.offsetHeight) {
-      this.footer?.classList?.add("shadow");
-    } else {
+  private toggleFooterShadow = () => {
+    const scrollTop = this.content?.scrollTop;
+    const scrollHeight = this.content?.scrollHeight;
+    const clientHeight = this.content?.clientHeight;
+
+    if (scrollTop + clientHeight >= scrollHeight) {
       this.footer?.classList?.remove("shadow");
+    } else {
+      this.footer?.classList?.add("shadow");
     }
-  }
+  };
 
   private renderFooter() {
     return this._hasFooter