fix: float input label when placeholder text is present

washingtonpost · Dec 20, 2022 · 6fe91b4 · 6fe91b4 · vercel · Dec 20, 2022
1 parent 6cb6f25
commit 6fe91b4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/ui/input-text/src/InputText.tsx b/ui/input-text/src/InputText.tsx
@@ -97,6 +97,8 @@ export interface InputTextProps
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   /** Callback executed when the input fires a focus event */
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  /** placeholder text */
+  placeholder?: string;
   /** The input elements required attribute */
   required?: boolean;
   /** indicates there is a success */
@@ -127,6 +129,7 @@ export const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(
       onChange,
       onFocus,
       onButtonIconClick,
+      placeholder,
       required,
       success,
       type = "text",
@@ -180,7 +183,7 @@ export const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(
 
     const [isFloating, handleOnFocus, handleOnBlur, handleOnChange] =
       useFloating(
-        value || defaultValue || isAutofilled,
+        value || defaultValue || placeholder || isAutofilled,
         onFocus,
         onBlur,
         onChange
@@ -278,6 +281,7 @@ export const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(
               onBlur={handleOnBlur}
               onChange={handleOnChange}
               onFocus={handleOnFocus}
+              placeholder={placeholder}
               ref={internalRef}
               required={required}
               type={type}

diff --git a/ui/input-text/src/play.stories.jsx b/ui/input-text/src/play.stories.jsx
@@ -143,6 +143,7 @@ const ChromaticTemplate = () => (
       label="Behavior"
       defaultValue="Overflow - Four score and seven years ago"
     />
+    <Component label="Placeholder" placeholder="Example input" />
   </Column>
 );
 

diff --git a/ui/input-textarea/src/InputTextarea.tsx b/ui/input-textarea/src/InputTextarea.tsx
@@ -87,6 +87,8 @@ export interface InputTextareaProps
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   /** Callback executed when the input fires a focus event */
   onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+  /** placeholder text */
+  placeholder?: string;
   /** The input elements required attribute */
   required?: boolean;
   /** The input element value for controlled components */
@@ -115,6 +117,7 @@ export const InputTextarea = React.forwardRef<
       onBlur,
       onChange,
       required,
+      placeholder,
       ...props
     },
     ref
@@ -164,7 +167,7 @@ export const InputTextarea = React.forwardRef<
     });
 
     const [isFloating, handleFocus, handleBlur, handleChange] = useFloating(
-      value || defaultValue || isAutofilled,
+      value || defaultValue || placeholder || isAutofilled,
       onFocus,
       onBlur,
       onChange
@@ -185,6 +188,7 @@ export const InputTextarea = React.forwardRef<
           })}
           required={required}
           disabled={disabled}
+          placeholder={placeholder}
           onFocus={handleFocus}
           onBlur={handleBlur}
           onChange={handleChange}