TextField - new features: helperText and validationIcon (#3097)

* TextField - new features: helperText and validationIcon

* add icon and remove const

* fix example and att top margins

* fix example

* remove redundent

Author: Inbal-Tish

demo/src/assets/icons/exclamationFillSmall.png

@@ -16,6 +16,7 @@ import {
 import Assets from '../../assets/Assets';
 const {KeyboardAwareInsetsView} = Keyboard;
 const priceFormatter = Intl.NumberFormat('en-US');
+const validationIcon = require('../../assets/icons/exclamationFillSmall.png');
 
 export default class TextFieldScreen extends Component {
   input = React.createRef<TextFieldRef>();
@@ -199,9 +200,11 @@ export default class TextFieldScreen extends Component {
             label="Name"
             placeholder="Enter full name"
             validate="required"
-            validationMessage="This field is required"
-            containerStyle={{flexGrow: 1}}
+            validationMessage="This field is required. That means you have to enter some value"
+            containerStyle={{flex: 1}}
             validationMessagePosition={errorPosition}
+            helperText={'Enter first and last name'}
+            validationIcon={validationIcon}
           />
           <Button
             outline
@@ -351,7 +354,7 @@ export default class TextFieldScreen extends Component {
   renderHintExample() {
     return (
       <>
-        <Text h3>
+        <Text h3 marginT-s4>
           Hint
         </Text>
 

demo/src/assets/icons/[email protected]

@@ -1,12 +1,16 @@
 import React, {useContext, useMemo} from 'react';
 import {StyleSheet} from 'react-native';
+import {Colors} from '../../style';
+import View from '../view';
 import Text from '../text';
+import Icon from '../icon';
 import FieldContext from './FieldContext';
 import {getRelevantValidationMessage} from './Presenter';
 import {ValidationMessageProps} from './types';
 
 const ValidationMessage = ({
   validationMessage,
+  validationIcon,
   enableErrors,
   validationMessageStyle,
   retainValidationSpace,
@@ -24,11 +28,24 @@ const ValidationMessage = ({
   const relevantValidationMessage = getRelevantValidationMessage(validationMessage, context.failingValidatorIndex);
   const showValidationMessage = !context.isValid || (!validate && !!validationMessage);
 
-  return (
-    <Text testID={testID} $textDangerLight style={style}>
-      {showValidationMessage ? relevantValidationMessage : ''}
-    </Text>
-  );
+  const renderMessage = () => {
+    return (
+      <Text testID={testID} $textDangerLight style={style}>
+        {showValidationMessage ? relevantValidationMessage : ''}
+      </Text>
+    );
+  };
+
+  if (validationIcon) {
+    return (
+      <View row>
+        <Icon source={validationIcon} tintColor={Colors.$textDangerLight} size={14} marginR-s1 marginT-1/>
+        {renderMessage()}
+      </View>
+    );
+  }
+
+  return renderMessage();
 };
 
 const styles = StyleSheet.create({

demo/src/assets/icons/[email protected]

@@ -61,6 +61,8 @@ const TextField = (props: InternalTextFieldProps) => {
     floatOnFocus,
     placeholderTextColor,
     hint,
+    helperText,
+    validationIcon,
     // Label
     label,
     labelColor,
@@ -74,7 +76,7 @@ const TextField = (props: InternalTextFieldProps) => {
     enableErrors, // TODO: rename to enableValidation
     validationMessageStyle,
     validationMessagePosition = ValidationMessagePosition.BOTTOM,
-    retainValidationSpace = true,
+    retainValidationSpace = !helperText,
     // Char Counter
     showCharCounter,
     charCounterStyle,
@@ -206,6 +208,7 @@ const TextField = (props: InternalTextFieldProps) => {
               enableErrors={enableErrors}
               validate={others.validate}
               validationMessage={others.validationMessage}
+              validationIcon={validationIcon}
               validationMessageStyle={_validationMessageStyle}
               retainValidationSpace={retainValidationSpace}
               testID={`${props.testID}.validationMessage`}
@@ -220,6 +223,7 @@ const TextField = (props: InternalTextFieldProps) => {
             />
           )}
         </View>
+        <Text $textNeutralHeavy subtext marginT-s1>{helperText}</Text>
       </View>
     </FieldContext.Provider>
   );

demo/src/assets/icons/[email protected]

@@ -20,6 +20,7 @@
     {"name": "labelStyle", "type": "TextStyle", "description": "Custom style for the field label"},
     {"name": "labelProps", "type": "TextProps", "description": "Pass extra props to the label Text element"},
     {"name": "hint", "type": "string", "description": "A hint text to display when focusing the field"},
+    {"name": "helperText", "type": "string", "description": "Text to display under the input"},
     {"name": "placeholder", "type": "string", "description": "The placeholder for the field"},
     {"name": "placeholderTextColor", "type": "ColorType", "description": "Placeholder text color"},
     {"name": "floatingPlaceholder", "type": "boolean", "description": "Pass to add floating placeholder support"},
@@ -47,6 +48,7 @@
       "type": "string | string[]",
       "description": "The validation message to display when field is invalid (depends on validate)"
     },
+    {"name": "validationIcon", "type": "ImageProps['source']", "description": "Icon left to the validation message"},
     {
       "name": "validationMessagePosition",
       "type": "ValidationMessagePosition",

demo/src/assets/icons/[email protected]

@@ -12,6 +12,7 @@ import {TextProps} from '../text';
 import {RecorderProps} from '../../typings/recorderTypes';
 import {PropsWithChildren, ReactElement} from 'react';
 import {ViewProps} from '../view';
+import type {ImageProps} from '../image';
 
 export type ColorType =
   | string
@@ -125,6 +126,10 @@ export interface ValidationMessageProps {
    * Custom style for the validation message
    */
   validationMessageStyle?: StyleProp<TextStyle>;
+  /** 
+   * Icon left to the validation message
+   */
+  validationIcon?: ImageProps['source'];
   /**
    * Keep the validation space even if there is no validation message
    */
@@ -200,6 +205,10 @@ export type TextFieldProps = MarginModifiers &
      * Pass to render a bottom element below the input
      */
     bottomAccessory?: ReactElement;
+    /**
+     * Text to display under the input
+     */
+    helperText?: string;
     /**
      * Pass to add floating placeholder support
      */