Fix/text field right icon alignment (#997)

* remove duplicated style

* TextField - fix right icon/button alignment

* fix right icon alignment

* lint fix

* fix right icon position when 'useTopError' and 'floatingPlaceholder' are true

* adding examples

* moving method up

Co-authored-by: Ethan Sharabi <[email protected]>

Author: Inbal-Tish

demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js

@@ -215,26 +215,37 @@ export default class InputsScreen extends Component {
           <TextField
             text70
             containerStyle={{marginBottom: INPUT_SPACING}}
-            floatingPlaceholder
-            placeholder="With right button"
-            rightButtonProps={{iconSource: richText, onPress: this.onPressInfo, accessibilityLabel: 'TextField Info'}}
+            title="Title"
+            placeholder="With right icon"
+            rightIconSource={star}
+            useTopErrors
+            validate={'required'}
+            errorMessage="Please fill this input"
           />
 
           <TextField
             text70
-            containerStyle={{marginBottom: INPUT_SPACING, width: 210}}
+            containerStyle={{marginBottom: INPUT_SPACING}}
             floatingPlaceholder
-            placeholder="Multiline & right button"
-            multiline
-            rightButtonProps={{iconSource: richText, onPress: this.onPressInfo, iconColor: Colors.red30}}
+            placeholder="With right button"
+            rightButtonProps={{
+              iconSource: richText,
+              onPress: this.onPressInfo,
+              accessibilityLabel: 'TextField Info',
+              iconColor: Colors.red30
+            }}
+            useTopErrors
+            validate={'required'}
+            errorMessage="Please fill this input"
           />
 
           <TextField
             text70
-            containerStyle={{marginBottom: INPUT_SPACING}}
+            containerStyle={{marginBottom: INPUT_SPACING, width: 210}}
             floatingPlaceholder
-            placeholder="With right icon"
-            rightIconSource={star}
+            placeholder="Multiline & right button"
+            multiline
+            rightButtonProps={{iconSource: richText, onPress: this.onPressInfo}}
           />
 
           <TextField

src/components/textField/index.js

@@ -340,6 +340,10 @@ export default class TextField extends BaseInput {
     return this.shouldFakePlaceholder() ? (this.shouldShowTopError() ? undefined : 25) : undefined;
   }
 
+  getTopErrorsPosition() {
+    return !this.props.title && this.shouldShowTopError() ? {top: Constants.isIOS ? -25 : -27} : undefined;
+  }
+
   isDisabled() {
     return this.props.editable === false;
   }
@@ -397,6 +401,11 @@ export default class TextField extends BaseInput {
     return !expandable && rightButtonProps && rightButtonProps.iconSource;
   }
 
+  shouldRenderTitle() {
+    const {floatingPlaceholder, title} = this.getThemeProps();
+    return !floatingPlaceholder && title;
+  }
+
   onPressRightButton = () => {
     _.invoke(this.props, 'rightButtonProps.onPress');
   };
@@ -419,6 +428,7 @@ export default class TextField extends BaseInput {
             onLayout={this.onPlaceholderLayout}
             style={[
               this.styles.placeholder,
+              this.getTopErrorsPosition(),
               typography,
               // TODO: we need to exclude completely any dependency on line height
               // in this component since it always breaks alignments
@@ -467,10 +477,10 @@ export default class TextField extends BaseInput {
   }
 
   renderTitle() {
-    const {floatingPlaceholder, title, titleColor, titleStyle} = this.getThemeProps();
+    const {title, titleColor, titleStyle} = this.getThemeProps();
     const color = this.getStateColor(titleColor || PLACEHOLDER_COLOR_BY_STATE);
 
-    if (!floatingPlaceholder && title) {
+    if (this.shouldRenderTitle()) {
       return <Text style={[{color}, this.styles.topLabel, this.styles.label, titleStyle]}>{title}</Text>;
     }
   }
@@ -636,7 +646,7 @@ export default class TextField extends BaseInput {
       return (
         <TouchableOpacity
           {...others} accessibilityLabel={accessibilityLabel}
-          style={[this.styles.rightButton, style]} onPress={this.onPressRightButton}
+          style={[this.styles.rightButton, this.getTopErrorsPosition(), style]} onPress={this.onPressRightButton}
         >
           <Image
             pointerEvents="none"
@@ -654,7 +664,7 @@ export default class TextField extends BaseInput {
 
     if (rightIconSource) {
       return (
-        <View style={this.styles.rightIcon} pointerEvents="none">
+        <View style={[this.styles.rightButton, this.getTopErrorsPosition()]} pointerEvents="none">
           <Image source={rightIconSource} resizeMode={'center'} style={[this.styles.rightButtonImage, rightIconStyle]}/>
         </View>
       );
@@ -739,7 +749,7 @@ export default class TextField extends BaseInput {
   };
 }
 
-function createStyles({centered, multiline, hideUnderline}, rightItemTopPadding = 0) {
+function createStyles({centered, multiline, title, floatingPlaceholder}, rightItemTopPadding = 0) {
   const itemTopPadding = Constants.isIOS ? (rightItemTopPadding - 3) : (rightItemTopPadding - 1);
 
   return StyleSheet.create({
@@ -805,12 +815,6 @@ function createStyles({centered, multiline, hideUnderline}, rightItemTopPadding
     rightElement: {
       paddingRight: ICON_SIZE + ICON_LEFT_PADDING
     },
-    rightIcon: {
-      position: 'absolute',
-      right: 0,
-      alignSelf: 'flex-start',
-      paddingTop: itemTopPadding
-    },
     rightButton: {
       position: 'absolute',
       right: 0,