FIX: Disable floating label for date types

eBay · Oct 13, 2023 · f46c110 · f46c110
1 parent 027836a
commit f46c110
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 1 deletion.
diff --git a/src/common/floating-label-utils/hooks.tsx b/src/common/floating-label-utils/hooks.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames'
 
 type InputRef = RefObject<HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement> | any
 type FloatingLabelHookProps = {
+    type?: string;
     inputId?: string;
     ref?: InputRef;
     disabled?: boolean;
@@ -78,6 +79,7 @@ export function useFloatingLabel({
     placeholder,
     invalid,
     opaqueLabel,
+    type,
     onMount = () => {}
 } : FloatingLabelHookProps): FloatingLabelHookReturn {
     const _internalInputRef = useRef(null)
@@ -120,7 +122,7 @@ export function useFloatingLabel({
     const labelClassName = classNames(className, classPrefix, {
         [`${classPrefix}--disabled`]: disabled,
         [`${classPrefix}--animate`]: shouldAnimate,
-        [`${classPrefix}--inline`]: !isFloating,
+        [`${classPrefix}--inline`]: !isFloating && type !== 'date',
         [`${classPrefix}--invalid`]: invalid
     })
 

diff --git a/src/ebay-textbox/__tests__/__snapshots__/index.spec.tsx.snap b/src/ebay-textbox/__tests__/__snapshots__/index.spec.tsx.snap
@@ -106,6 +106,29 @@ exports[`Storyshots ebay-textbox Floating label invalid 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Storyshots ebay-textbox Floating label type date 1`] = `
+<DocumentFragment>
+  <span
+    class="floating-label"
+  >
+    <label
+      class="floating-label__label"
+    >
+      Floating label
+    </label>
+    <span
+      class="textbox"
+    >
+      <input
+        class="textbox__control"
+        type="date"
+        value=""
+      />
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Storyshots ebay-textbox Floating label with autofocus 1`] = `
 <DocumentFragment>
   <p>

diff --git a/src/ebay-textbox/__tests__/index.stories.tsx b/src/ebay-textbox/__tests__/index.stories.tsx
@@ -134,6 +134,15 @@ storiesOf('ebay-textbox', module)
             onFloatingLabelInit={() => action('onFloatingLabelInit')()}
         />
     ))
+    .add('Floating label type date', () => (
+        <EbayTextbox
+            type="date"
+            floatingLabel="Floating label"
+            onChange={action('onChange')}
+            onInputChange={action('onInputChange')}
+            onFloatingLabelInit={() => action('onFloatingLabelInit')()}
+        />
+    ))
     .add('Floating label with value', () => (
         <EbayTextbox
             onChange={action('textbox-changed')}

diff --git a/src/ebay-textbox/textbox.tsx b/src/ebay-textbox/textbox.tsx
@@ -86,6 +86,7 @@ const EbayTextbox: FC<EbayTextboxProps> = ({
         inputValue: controlledValue || inputValue,
         placeholder,
         invalid,
+        type,
         opaqueLabel,
         onMount: onFloatingLabelInit
     })