Fix issue with TextField hint is missing when using floatingPlaceholder (#1659)

Author: ethanshar

generatedTypes/src/incubator/TextField/Presenter.d.ts

@@ -1,5 +1,7 @@
 import { FieldContextType } from './FieldContext';
 import { ColorType, Validator } from './types';
+import { TextFieldProps } from './index';
 export declare function getColorByState(color?: ColorType, context?: FieldContextType): string | undefined;
 export declare function validate(value?: string, validator?: Validator | Validator[]): [boolean, number?];
 export declare function getRelevantValidationMessage(validationMessage: string | string[] | undefined, failingValidatorIndex: undefined | number): string | string[] | undefined;
+export declare function shouldHidePlaceholder({ floatingPlaceholder, hint, floatOnFocus }: TextFieldProps, isFocused: boolean): boolean;

generatedTypes/src/incubator/TextField/usePreset.d.ts

@@ -920,7 +920,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
         error: any;
         disabled: string;
     };
-    floatingPlaceholderStyle: {
+    floatingPlaceholderStyle: ((false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | null) & import("react-native").TextStyle) | {
         color?: import("react-native").ColorValue | undefined;
         fontFamily?: string | undefined;
         fontSize?: number | undefined;
@@ -1032,7 +1032,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
         translateY?: number | undefined;
         textAlignVertical?: "auto" | "center" | "top" | "bottom" | undefined;
         includeFontPadding?: boolean | undefined;
-    } | ((false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | null) & import("react-native").TextStyle);
+    };
     floatOnFocus?: boolean | undefined;
     enableErrors: boolean;
     validationMessage?: string | string[] | undefined;

src/incubator/TextField/Presenter.ts

@@ -2,6 +2,8 @@ import _ from 'lodash';
 import {Colors} from './../../style';
 import {FieldContextType} from './FieldContext';
 import {ColorType, Validator} from './types';
+// TODO: Fix this import after moving all TextField types to a single file after we move to the new docs
+import {TextFieldProps} from './index';
 import formValidators from './validators';
 
 export function getColorByState(color?: ColorType, context?: FieldContextType) {
@@ -62,3 +64,14 @@ export function getRelevantValidationMessage(validationMessage: string | string[
     return validationMessage[failingValidatorIndex];
   }
 }
+
+export function shouldHidePlaceholder({floatingPlaceholder, hint, floatOnFocus}: TextFieldProps, isFocused: boolean) {
+  if (floatingPlaceholder) {
+    if (hint && isFocused) {
+      return !floatOnFocus;
+    }
+    return true;
+  } else {
+    return false;
+  }
+}

src/incubator/TextField/__tests__/Presenter.spec.js

@@ -59,4 +59,22 @@ describe('TextField:Presenter', () => {
       expect(uut.getRelevantValidationMessage(messages, 1)).toBe(messages[1]);
     });
   });
+
+  describe('Should hide placeholder', () => {
+    it('should keep it visible when floatingPlaceholder is false', () => {
+      expect(uut.shouldHidePlaceholder({floatingPlaceholder: false})).toBe(false);
+    });
+
+    it('should hide it when using floatingPlaceholder', () => {
+      expect(uut.shouldHidePlaceholder({floatingPlaceholder: true})).toBe(true);
+    });
+
+    it('should show it when floatingPlaceholder is true, user passed a hint text, the field is focused and floatOnFocus is true', () => {
+      expect(uut.shouldHidePlaceholder({floatingPlaceholder: true, hint: 'Hint text', floatOnFocus: true}, true)).toBe(false);
+    });
+    
+    it('should hide it when floatingPlaceholder is true, user passed a hint text, the field is focused but floatOnFocus is false', () => {
+      expect(uut.shouldHidePlaceholder({floatingPlaceholder: true, hint: 'Hint text', floatOnFocus: false}, true)).toBe(true);
+    });
+  });
 });

src/incubator/TextField/index.tsx

@@ -19,7 +19,9 @@ import {
   ColorsModifiers
 } from '../../commons/new';
 import View from '../../components/view';
+import {Colors} from '../../style';
 import {ValidationMessagePosition, Validator} from './types';
+import {shouldHidePlaceholder} from './Presenter';
 import Input, {InputProps} from './Input';
 import ValidationMessage, {ValidationMessageProps} from './ValidationMessage';
 import Label, {LabelProps} from './Label';
@@ -155,6 +157,7 @@ const TextField = (props: InternalTextFieldProps) => {
   const colorStyle = useMemo(() => color && {color}, [color]);
 
   const fieldStyle = isFunction(fieldStyleProp) ? fieldStyleProp(context, {preset: props.preset}) : fieldStyleProp;
+  const hidePlaceholder = shouldHidePlaceholder(props, fieldState.isFocused);
 
   return (
     <FieldContext.Provider value={context}>
@@ -190,7 +193,7 @@ const TextField = (props: InternalTextFieldProps) => {
               )}
               {children || (
                 <Input
-                  placeholderTextColor={floatingPlaceholder ? 'transparent' : undefined}
+                  placeholderTextColor={hidePlaceholder ? 'transparent' : Colors.grey30}
                   {...others}
                   style={[typographyStyle, colorStyle, others.style]}
                   onFocus={onFocus}