@hero-design/rn 7.22.2 → 7.23.0

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -6,16 +6,12 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="filled"
 >
   <View
     style={
@@ -29,6 +25,24 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="filled"
+    />
     <View
       pointerEvents="none"
       style={
@@ -58,7 +72,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#f46363",
               },
               undefined,
             ],
@@ -246,16 +260,12 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="filled"
 >
   <View
     style={
@@ -269,6 +279,24 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="filled"
+    />
     <View
       pointerEvents="none"
       style={
@@ -298,7 +326,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#f46363",
               },
               undefined,
             ],
@@ -487,9 +515,6 @@ exports[`TextInput disabled renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#bfc1c5",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
@@ -497,7 +522,6 @@ exports[`TextInput disabled renders correctly 1`] = `
     ]
   }
   testID="disabled-text-input"
-  themeVariant="disabled"
 >
   <View
     style={
@@ -511,6 +535,24 @@ exports[`TextInput disabled renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#bfc1c5",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="disabled"
+    />
     <View
       pointerEvents="none"
       style={
@@ -654,16 +696,12 @@ exports[`TextInput error renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="error"
 >
   <View
     style={
@@ -677,6 +715,24 @@ exports[`TextInput error renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#f46363",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="error"
+    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -736,7 +792,7 @@ exports[`TextInput error renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#f46363",
                   "fontSize": 14,
                 },
                 undefined,
@@ -871,7 +927,7 @@ exports[`TextInput error renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#f46363",
                   "fontSize": 12,
                   "marginLeft": 4,
                 },
@@ -898,16 +954,12 @@ exports[`TextInput filled renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="filled"
 >
   <View
     style={
@@ -921,6 +973,24 @@ exports[`TextInput filled renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="filled"
+    />
     <View
       pointerEvents="none"
       style={
@@ -1069,16 +1139,12 @@ exports[`TextInput helper text renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="default"
 >
   <View
     style={
@@ -1092,6 +1158,24 @@ exports[`TextInput helper text renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="default"
+    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -1151,7 +1235,7 @@ exports[`TextInput helper text renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#f46363",
                   "fontSize": 14,
                 },
                 undefined,
@@ -1279,9 +1363,6 @@ exports[`TextInput idle renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
@@ -1291,7 +1372,6 @@ exports[`TextInput idle renders correctly 1`] = `
     ]
   }
   testID="idle-text-input"
-  themeVariant="default"
 >
   <View
     style={
@@ -1305,6 +1385,24 @@ exports[`TextInput idle renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="default"
+    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -1457,16 +1555,12 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="default"
 >
   <View
     style={
@@ -1480,6 +1574,24 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="default"
+    />
     <HeroIcon
       name="eye-circle"
       style={
@@ -1539,7 +1651,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#f46363",
                   "fontSize": 14,
                 },
                 undefined,
@@ -1658,16 +1770,12 @@ exports[`TextInput loading renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#808f91",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="readonly"
 >
   <View
     style={
@@ -1681,6 +1789,24 @@ exports[`TextInput loading renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#808f91",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="readonly"
+    />
     <View
       style={
         Array [
@@ -1801,16 +1927,12 @@ exports[`TextInput max length renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#de350b",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="error"
 >
   <View
     style={
@@ -1824,6 +1946,24 @@ exports[`TextInput max length renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#f46363",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="error"
+    />
     <View
       pointerEvents="none"
       style={
@@ -1853,7 +1993,7 @@ exports[`TextInput max length renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#de350b",
+                "color": "#f46363",
               },
               undefined,
             ],
@@ -2000,7 +2140,7 @@ exports[`TextInput max length renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#f46363",
                   "fontSize": 12,
                   "marginLeft": 4,
                 },
@@ -2029,7 +2169,7 @@ exports[`TextInput max length renders correctly 1`] = `
             Array [
               Object {
                 "alignSelf": "flex-end",
-                "color": "#de350b",
+                "color": "#f46363",
                 "flex": 1,
                 "flexGrow": 1,
                 "fontSize": 12,
@@ -2060,16 +2200,12 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="default"
 >
   <View
     style={
@@ -2083,6 +2219,24 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="default"
+    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -2142,7 +2296,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#f46363",
                   "fontSize": 14,
                 },
                 undefined,
@@ -2270,16 +2424,12 @@ exports[`TextInput readonly renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#808f91",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="readonly"
 >
   <View
     style={
@@ -2293,6 +2443,24 @@ exports[`TextInput readonly renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#808f91",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="readonly"
+    />
     <View
       pointerEvents="none"
       style={
@@ -2347,7 +2515,7 @@ exports[`TextInput readonly renders correctly 1`] = `
             },
             Array [
               Object {
-                "color": "#808f91",
+                "color": "#bfc1c5",
               },
               undefined,
             ],
@@ -2466,16 +2634,12 @@ exports[`TextInput required renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="default"
 >
   <View
     style={
@@ -2489,6 +2653,24 @@ exports[`TextInput required renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="default"
+    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -2548,7 +2730,7 @@ exports[`TextInput required renders correctly 1`] = `
               },
               Array [
                 Object {
-                  "color": "#de350b",
+                  "color": "#f46363",
                   "fontSize": 14,
                 },
                 undefined,

package/src/components/TextInput/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
@@ -22,12 +22,14 @@ import {
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
+  StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
 } from './StyledTextInput';
 import Icon from '../Icon';
 import { useTheme } from '../../theme';
 import type { Variant } from './StyledTextInput';
 import type { IconName } from '../Icon';
+import { omit, pick } from '../../utils/helpers';
 
 export interface TextInputProps extends NativeTextInputProps {
   /**
@@ -169,10 +171,25 @@ const TextInput = ({
 
   const theme = useTheme();
 
+  const { borderStyle, textStyleWithoutBorderStyle } = useMemo(() => {
+    if (!textStyle) {
+      return {};
+    }
+
+    const flattenTextStyle = StyleSheet.flatten(textStyle);
+    const borderKeys = Object.keys(flattenTextStyle).filter((key) => {
+      return key.startsWith('border');
+    });
+    return {
+      borderStyle: pick(borderKeys, flattenTextStyle),
+      textStyleWithoutBorderStyle: omit(borderKeys, flattenTextStyle),
+    };
+  }, [textStyle]);
+
   const nativeInputProps: NativeTextInputProps = {
     style: StyleSheet.flatten([
       { color: theme.__hd__.textInput.colors.text },
-      textStyle,
+      textStyleWithoutBorderStyle,
     ]),
     testID: 'text-input',
     accessibilityState: {
@@ -201,14 +218,14 @@ const TextInput = ({
 
   return (
     <StyledContainer
+      style={style}
       pointerEvents={
         variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
       }
       testID={testID}
-      style={style}
-      themeVariant={variant}
     >
       <StyledTextInputContainer>
+        <StyledBorderBackDrop themeVariant={variant} style={borderStyle} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (