feat(date-textbox): added floating-ui support (#2529)

eBay · Jan 17, 2025 · 5a5a45f · 5a5a45f
1 parent 4265bed
commit 5a5a45f
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 3 deletions.
diff --git a/.changeset/smart-bugs-turn.md b/.changeset/smart-bugs-turn.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": major
+---
+
+feat(floating-ui): added support in date-textbox
diff --git a/dist/date-textbox/date-textbox.css b/dist/date-textbox/date-textbox.css
@@ -4,6 +4,7 @@
 }
 .date-textbox {
     --calendar-month-width: 311px;
+    display: inline-block;
 }
 
 .date-textbox > .textbox + .textbox {

diff --git a/src/routes/_index/component/date-textbox/+page.marko b/src/routes/_index/component/date-textbox/+page.marko
@@ -44,7 +44,6 @@
                         class="icon-btn icon-btn--transparent"
                         type="button"
                         aria-label="Calendar"
-                        onclick="this.parentElement.nextElementSibling.toggleAttribute('hidden')"
                     >
                         <svg
                             aria-hidden="true"
@@ -420,7 +419,6 @@
                         class="icon-btn icon-btn--transparent"
                         type="button"
                         aria-label="Calendar"
-                        onclick="this.parentElement.nextElementSibling.toggleAttribute('hidden')"
                         disabled
                     >
                         <svg
@@ -485,7 +483,6 @@
                         class="icon-btn icon-btn--transparent"
                         type="button"
                         aria-label="Calendar"
-                        onclick="this.parentElement.nextElementSibling.toggleAttribute('hidden')"
                     >
                         <svg
                             aria-hidden="true"

diff --git a/src/routes/main.js b/src/routes/main.js
@@ -187,6 +187,23 @@ document.querySelectorAll(".expand-btn").forEach(function (el) {
     });
 });
 
+document.querySelectorAll(".date-textbox").forEach(function (el) {
+    const popperDropdown = new PopperDropdown(
+        el,
+        null,
+        ".date-textbox__popover",
+    );
+
+    el.querySelector("button").addEventListener("click", function () {
+        this.parentElement.nextElementSibling.toggleAttribute("hidden");
+        if (this.parentElement.nextElementSibling.hasAttribute("hidden")) {
+            popperDropdown.hide();
+        } else {
+            popperDropdown.show();
+        }
+    });
+});
+
 document.querySelectorAll(".filter-menu-button--form").forEach(function (el) {
     const popperDropdown = new PopperDropdown(
         el,

diff --git a/src/sass/date-textbox/date-textbox.scss b/src/sass/date-textbox/date-textbox.scss
@@ -5,6 +5,8 @@
 .date-textbox {
     /* 343px - (2 * var(--spacing-200)) [not autmatically compiled by LESS] */
     --calendar-month-width: 311px;
+
+    display: inline-block;
 }
 
 .date-textbox > .textbox + .textbox {