TextField - fix validationIcon with no validationMassage (#3114)

* TextField - fix validationIcon with no validationMassage

* fix validationIcon type

Author: Inbal-Tish

demo/src/screens/componentScreens/TextFieldScreen.tsx

@@ -204,7 +204,7 @@ export default class TextFieldScreen extends Component {
             containerStyle={{flex: 1}}
             validationMessagePosition={errorPosition}
             helperText={'Enter first and last name'}
-            validationIcon={validationIcon}
+            validationIcon={{source: validationIcon, style: {marginTop: 1}}}
           />
           <Button
             outline

src/components/textField/ValidationMessage.tsx

@@ -36,10 +36,11 @@ const ValidationMessage = ({
     );
   };
 
-  if (validationIcon) {
+  if (validationIcon?.source) {
     return (
       <View row>
-        <Icon source={validationIcon} tintColor={Colors.$textDangerLight} size={14} marginR-s1 marginT-1/>
+        {showValidationMessage &&
+          <Icon tintColor={Colors.$textDangerLight} size={14} marginR-s1 {...validationIcon}/>}
         {renderMessage()}
       </View>
     );

src/components/textField/textField.api.json

@@ -48,7 +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": "validationIcon", "type": "IconProps", "description": "Icon left to the validation message"},
     {
       "name": "validationMessagePosition",
       "type": "ValidationMessagePosition",

src/components/textField/types.ts

@@ -12,7 +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';
+import type {IconProps} from '../icon';
 
 export type ColorType =
   | string
@@ -129,7 +129,7 @@ export interface ValidationMessageProps {
   /** 
    * Icon left to the validation message
    */
-  validationIcon?: ImageProps['source'];
+  validationIcon?: IconProps;
   /**
    * Keep the validation space even if there is no validation message
    */