From 18db232637dd377869f33730ac80a3c495ea62c7 Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Wed, 18 Aug 2021 11:24:32 -0700
Subject: [PATCH 1/7] Handle errorText in TextInputWithLabel

---
 .../ExpensiTextInput/BaseExpensiTextInput.js  | 85 ++++++++++---------
 1 file changed, 46 insertions(+), 39 deletions(-)

diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
index 6c911d4fde85..d6db9a275e72 100644
--- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js
+++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -4,6 +4,7 @@ import {
 } from 'react-native';
 import Str from 'expensify-common/lib/str';
 import ExpensiTextInputLabel from './ExpensiTextInputLabel';
+import Text from '../Text';
 import {propTypes, defaultProps} from './propTypes';
 import themeColors from '../../styles/themes/default';
 import styles from '../../styles/styles';
@@ -118,51 +119,57 @@ class BaseExpensiTextInput extends Component {
             ignoreLabelTranslateX,
             innerRef,
             autoFocus,
+            errorText,
             ...inputProps
         } = this.props;
 
         const hasLabel = Boolean(label.length);
         return (
-            <View style={[styles.componentHeightLarge, ...containerStyles]}>
-                <TouchableWithoutFeedback onPress={() => this.input.focus()} focusable={false}>
-                    <View
-                        style={[
-                            styles.expensiTextInputContainer,
-                            !hasLabel && styles.pv0,
-                            this.state.isFocused && styles.borderColorFocus,
-                            hasError && styles.borderColorDanger,
-                        ]}
-                    >
-                        {hasLabel ? (
-                            <ExpensiTextInputLabel
-                                label={label}
-                                labelTranslateX={
-                                    ignoreLabelTranslateX
-                                        ? new Animated.Value(0)
-                                        : this.state.labelTranslateX
-                                }
-                                labelTranslateY={this.state.labelTranslateY}
-                                labelScale={this.state.labelScale}
+            <View>
+                <View style={[styles.componentHeightLarge, ...containerStyles]}>
+                    <TouchableWithoutFeedback onPress={() => this.input.focus()} focusable={false}>
+                        <View
+                            style={[
+                                styles.expensiTextInputContainer,
+                                !hasLabel && styles.pv0,
+                                this.state.isFocused && styles.borderColorFocus,
+                                (hasError || errorText) && styles.borderColorDanger,
+                            ]}
+                        >
+                            {hasLabel ? (
+                                <ExpensiTextInputLabel
+                                    label={label}
+                                    labelTranslateX={
+                                        ignoreLabelTranslateX
+                                            ? new Animated.Value(0)
+                                            : this.state.labelTranslateX
+                                    }
+                                    labelTranslateY={this.state.labelTranslateY}
+                                    labelScale={this.state.labelScale}
+                                />
+                            ) : null}
+                            <TextInput
+                                ref={(ref) => {
+                                    if (typeof innerRef === 'function') { innerRef(ref); }
+                                    this.input = ref;
+                                }}
+                                // eslint-disable-next-line
+                                {...inputProps}
+                                value={value}
+                                placeholder={(this.state.isFocused || !label) ? placeholder : null}
+                                placeholderTextColor={themeColors.placeholderText}
+                                underlineColorAndroid="transparent"
+                                style={[...inputStyle, errorText ? styles.errorOutline : undefined]}
+                                onFocus={this.onFocus}
+                                onBlur={this.onBlur}
+                                onChangeText={this.setValue}
                             />
-                        ) : null}
-                        <TextInput
-                            ref={(ref) => {
-                                if (typeof innerRef === 'function') { innerRef(ref); }
-                                this.input = ref;
-                            }}
-                            // eslint-disable-next-line
-                            {...inputProps}
-                            value={value}
-                            placeholder={(this.state.isFocused || !label) ? placeholder : null}
-                            placeholderTextColor={themeColors.placeholderText}
-                            underlineColorAndroid="transparent"
-                            style={inputStyle}
-                            onFocus={this.onFocus}
-                            onBlur={this.onBlur}
-                            onChangeText={this.setValue}
-                        />
-                    </View>
-                </TouchableWithoutFeedback>
+                        </View>
+                    </TouchableWithoutFeedback>
+                </View>
+                {errorText !== '' && (
+                    <Text style={[styles.formError]}>{errorText}</Text>
+                )}
             </View>
         );
     }

From 1118460c8bbb13c4677ca3e28525766d6d62434f Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Thu, 19 Aug 2021 09:41:34 -0700
Subject: [PATCH 2/7] Add mt1 to error label. Handle errorText undefined

---
 src/components/ExpensiTextInput/BaseExpensiTextInput.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
index d6db9a275e72..bd6835aac2d8 100644
--- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js
+++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -167,8 +167,8 @@ class BaseExpensiTextInput extends Component {
                         </View>
                     </TouchableWithoutFeedback>
                 </View>
-                {errorText !== '' && (
-                    <Text style={[styles.formError]}>{errorText}</Text>
+                {Boolean(errorText) && (
+                    <Text style={[styles.formError, styles.mt1]}>{errorText}</Text>
                 )}
             </View>
         );

From c1850644d4f1f3e8fb697a7c5a3f712fb4cd28e4 Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Thu, 19 Aug 2021 09:44:35 -0700
Subject: [PATCH 3/7] Updated propTypes with errorText

---
 src/components/ExpensiTextInput/propTypes.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/ExpensiTextInput/propTypes.js b/src/components/ExpensiTextInput/propTypes.js
index 6231018ccee5..e4f935fa14a1 100644
--- a/src/components/ExpensiTextInput/propTypes.js
+++ b/src/components/ExpensiTextInput/propTypes.js
@@ -4,6 +4,9 @@ const propTypes = {
     /** Input label */
     label: PropTypes.string,
 
+    /** Text to show if there is an error */
+    errorText: PropTypes.string,
+
     /** Input value */
     value: PropTypes.string.isRequired,
 
@@ -28,6 +31,7 @@ const propTypes = {
 
 const defaultProps = {
     label: '',
+    errorText: '',
     placeholder: '',
     error: false,
     containerStyles: [],

From 41621a751bfe88d5091a0e16decac33790206162 Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Thu, 19 Aug 2021 09:48:08 -0700
Subject: [PATCH 4/7] Add displayName to BaseExpensiTextInput

---
 src/components/ExpensiTextInput/BaseExpensiTextInput.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
index bd6835aac2d8..a9deccfeb13d 100644
--- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js
+++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -177,5 +177,6 @@ class BaseExpensiTextInput extends Component {
 
 BaseExpensiTextInput.propTypes = propTypes;
 BaseExpensiTextInput.defaultProps = defaultProps;
+BaseExpensiTextInput.displayName = 'BaseExpensiTextInput';
 
 export default BaseExpensiTextInput;

From b9cd49351f59417b99d16bbcf68bb5439a4978df Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Thu, 19 Aug 2021 10:16:26 -0700
Subject: [PATCH 5/7] Remove displayName because it is inferred

---
 src/components/ExpensiTextInput/BaseExpensiTextInput.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
index a9deccfeb13d..bd6835aac2d8 100644
--- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js
+++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -177,6 +177,5 @@ class BaseExpensiTextInput extends Component {
 
 BaseExpensiTextInput.propTypes = propTypes;
 BaseExpensiTextInput.defaultProps = defaultProps;
-BaseExpensiTextInput.displayName = 'BaseExpensiTextInput';
 
 export default BaseExpensiTextInput;

From 7a603ccceecea68bc984b290510c0d5e48218973 Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Thu, 19 Aug 2021 10:22:16 -0700
Subject: [PATCH 6/7] Move errorText prop next to hasError

---
 src/components/ExpensiTextInput/BaseExpensiTextInput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ExpensiTextInput/BaseExpensiTextInput.js b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
index bd6835aac2d8..564d9afd0bfe 100644
--- a/src/components/ExpensiTextInput/BaseExpensiTextInput.js
+++ b/src/components/ExpensiTextInput/BaseExpensiTextInput.js
@@ -113,13 +113,13 @@ class BaseExpensiTextInput extends Component {
             label,
             value,
             placeholder,
+            errorText,
             hasError,
             containerStyles,
             inputStyle,
             ignoreLabelTranslateX,
             innerRef,
             autoFocus,
-            errorText,
             ...inputProps
         } = this.props;
 

From ec12ec437e1e43c8583bbdb71415923709ecb214 Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Thu, 19 Aug 2021 10:38:22 -0700
Subject: [PATCH 7/7] Update comment on errorText prop

---
 src/components/ExpensiTextInput/propTypes.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ExpensiTextInput/propTypes.js b/src/components/ExpensiTextInput/propTypes.js
index e4f935fa14a1..e3a42808a3d5 100644
--- a/src/components/ExpensiTextInput/propTypes.js
+++ b/src/components/ExpensiTextInput/propTypes.js
@@ -4,15 +4,15 @@ const propTypes = {
     /** Input label */
     label: PropTypes.string,
 
-    /** Text to show if there is an error */
-    errorText: PropTypes.string,
-
     /** Input value */
     value: PropTypes.string.isRequired,
 
     /** Input value placeholder */
     placeholder: PropTypes.string,
 
+    /** Error text to display */
+    errorText: PropTypes.string,
+
     /** Should the input be styled for errors  */
     hasError: PropTypes.bool,