feat(date-textbox): added floating label support (#2157)

eBay · Apr 16, 2024 · 4f8e826 · 4f8e826
1 parent 7c26a76
commit 4f8e826
Show file tree

Hide file tree

Showing 19 changed files with 3,767 additions and 4 deletions.
diff --git a/.changeset/long-candles-lie.md b/.changeset/long-candles-lie.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+ebay-date-textbox: added floating label support
diff --git a/src/components/ebay-calendar/date-utils.ts b/src/components/ebay-calendar/date-utils.ts
@@ -51,5 +51,6 @@ export function offsetISO(iso: DayISO, days: number) {
 }
 
 export function localeOverride(locale?: string) {
-    return locale || navigator.language;
+    const defaultLanguage = (typeof navigator !== "undefined") ? navigator.language : 'en-US';
+    return locale || defaultLanguage;
 }
diff --git a/src/components/ebay-date-textbox/component.ts b/src/components/ebay-date-textbox/component.ts
@@ -23,6 +23,7 @@ interface DateTextboxInput {
     "a11y-in-range-text"?: AttrString;
     "a11y-range-end-text"?: AttrString;
     "a11y-separator"?: string;
+    "floating-label"?: string | [string, string];
     "on-change"?: (
         event:
             | { selected: DayISO | null }

diff --git a/src/components/ebay-date-textbox/date-textbox.stories.ts b/src/components/ebay-date-textbox/date-textbox.stories.ts
@@ -46,6 +46,13 @@ export default {
                 },
             },
         },
+        floatingLabel: {
+            type: "text|array",
+            control: { type: "object" },
+            description:
+                'If set then shows this text as the floating label. If separate floating labels are required for a range display, use an array of two strings (i. e. `["Start", "End"]`)..',
+        },
+
         rangeEnd: {
             type: "date",
             control: { type: "date" },

diff --git a/src/components/ebay-date-textbox/examples/localized.marko b/src/components/ebay-date-textbox/examples/localized.marko
@@ -2,9 +2,11 @@
     disableBefore=new Date()
     range
     locale="af"
-    getA11yShowMonthText=(monthName) => `Gaan na ${monthName}`
+    getA11yShowMonthText=((monthName) => `Gaan na ${monthName}`)
     a11ySelectedText="Geselekteerde"
     a11yRangeStartText="Reeks begin"
     a11yInRangeText="Binne bereik"
     a11yRangeEndText="Reeks einde"
-    on-change("emit", "change")/>
+    on-change("emit", "change")
+    ...input
+/>
diff --git a/src/components/ebay-date-textbox/examples/with-clear.marko b/src/components/ebay-date-textbox/examples/with-clear.marko
@@ -14,7 +14,7 @@ class {
     }
 }
 
-<ebay-date-textbox value=state.value onChange("handleChange")/>
+<ebay-date-textbox value=state.value onChange("handleChange") ...input/>
 
 <ebay-button onClick("clear")>
     Clear

diff --git a/src/components/ebay-date-textbox/index.marko b/src/components/ebay-date-textbox/index.marko
@@ -2,6 +2,7 @@ $ const {
     a11yOpenPopoverText = "open calendar",
     range,
     inputPlaceholderText = "YYYY-MM-DD",
+    floatingLabel,
     ...calendarInput
 } = input;
 $ const [rangeStartPlaceholder, mainPlaceholder] = (
@@ -10,6 +11,12 @@ $ const [rangeStartPlaceholder, mainPlaceholder] = (
         : [inputPlaceholderText, inputPlaceholderText]
 );
 
+$ const [rangeStartFloatingLabel, mainFloatingLabel] = (
+    Array.isArray(floatingLabel)
+        ? floatingLabel
+        : [floatingLabel, floatingLabel]
+);
+
 <span
     on-expander-expand("openPopover")
     on-expander-collapse("closePopover")
@@ -18,12 +25,14 @@ $ const [rangeStartPlaceholder, mainPlaceholder] = (
     <if(range)>
         <ebay-textbox
             placeholder=rangeStartPlaceholder
+            floating-label=rangeStartFloatingLabel
             value=state.firstSelected
             on-blur("handleInputChange", 0)
         />
     </if>
     <ebay-textbox
         class="ebay-date-textbox--main"
+        floating-label=mainFloatingLabel
         placeholder=mainPlaceholder
         buttonAriaLabel=a11yOpenPopoverText
         value=(range ? state.secondSelected : state.firstSelected)

diff --git a/src/components/ebay-date-textbox/marko-tag.json b/src/components/ebay-date-textbox/marko-tag.json
@@ -14,6 +14,7 @@
         "disableAfter": "expression",
         "disableWeekdays": "array",
         "disableList": "array",
+        "floatingLabel": "expression",
         "inputPlaceholderText": "expression",
         "collapseOnSelect": "boolean",
         "getA11yShowMonthText": "function",