Incubator.TextField - expose retainValidationSpace (#2631)

Author: M-i-k-e-l

src/incubator/TextField/ValidationMessage.tsx

@@ -9,15 +9,15 @@ const ValidationMessage = ({
   validationMessage,
   enableErrors,
   validationMessageStyle,
-  retainSpace,
+  retainValidationSpace,
   validate,
   testID
 }: ValidationMessageProps) => {
   const context = useContext(FieldContext);
 
   const style = useMemo(() => [styles.validationMessage, validationMessageStyle], [validationMessageStyle]);
 
-  if (!enableErrors || (!retainSpace && context.isValid)) {
+  if (!enableErrors || (!retainValidationSpace && context.isValid)) {
     return null;
   }
 

src/incubator/TextField/index.tsx

@@ -69,6 +69,7 @@ const TextField = (props: InternalTextFieldProps) => {
     enableErrors, // TODO: rename to enableValidation
     validationMessageStyle,
     validationMessagePosition = ValidationMessagePosition.BOTTOM,
+    retainValidationSpace = true,
     // Char Counter
     showCharCounter,
     charCounterStyle,
@@ -140,7 +141,7 @@ const TextField = (props: InternalTextFieldProps) => {
             validate={others.validate}
             validationMessage={others.validationMessage}
             validationMessageStyle={_validationMessageStyle}
-            retainSpace={retainTopMessageSpace}
+            retainValidationSpace={retainValidationSpace && retainTopMessageSpace}
             testID={`${props.testID}.validationMessage`}
           />
         )}
@@ -195,7 +196,7 @@ const TextField = (props: InternalTextFieldProps) => {
               validate={others.validate}
               validationMessage={others.validationMessage}
               validationMessageStyle={_validationMessageStyle}
-              retainSpace
+              retainValidationSpace={retainValidationSpace}
               testID={`${props.testID}.validationMessage`}
             />
           )}

src/incubator/TextField/textField.api.json

@@ -43,6 +43,12 @@
       "description": "The position of the validation message (top/bottom)"
     },
     {"name": "validationMessageStyle", "type": "TextStyle", "description": "Custom style for the validation message"},
+    {
+      "name": "retainValidationSpace",
+      "type": "boolean",
+      "description": "Keep the validation space even if there is no validation message",
+      "default": "true"
+    },
     {"name": "validateOnStart", "type": "boolean", "description": "Should validate when the TextField mounts"},
     {"name": "validateOnChange", "type": "boolean", "description": "Should validate when the TextField value changes"},
     {"name": "validateOnBlur", "type": "boolean", "description": "Should validate when losing focus of TextField"},

src/incubator/TextField/types.ts

@@ -112,7 +112,10 @@ export interface ValidationMessageProps {
    * Custom style for the validation message
    */
   validationMessageStyle?: StyleProp<TextStyle>;
-  retainSpace?: boolean;
+  /**
+   * Keep the validation space even if there is no validation message
+   */
+  retainValidationSpace?: boolean;
   validate?: FieldStateProps['validate'];
   testID?: string;
 }