@hero-design/rn 7.22.1 → 7.22.2

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

@@ -6,12 +6,16 @@ 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={
@@ -25,24 +29,6 @@ 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={
@@ -260,12 +246,16 @@ 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={
@@ -279,24 +269,6 @@ 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={
@@ -515,6 +487,9 @@ exports[`TextInput disabled renders correctly 1`] = `
   style={
     Array [
       Object {
+        "borderColor": "#bfc1c5",
+        "borderRadius": 8,
+        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
@@ -522,6 +497,7 @@ exports[`TextInput disabled renders correctly 1`] = `
     ]
   }
   testID="disabled-text-input"
+  themeVariant="disabled"
 >
   <View
     style={
@@ -535,24 +511,6 @@ 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={
@@ -696,12 +654,16 @@ exports[`TextInput error renders correctly 1`] = `
   style={
     Array [
       Object {
+        "borderColor": "#de350b",
+        "borderRadius": 8,
+        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
+  themeVariant="error"
 >
   <View
     style={
@@ -715,24 +677,6 @@ exports[`TextInput error renders correctly 1`] = `
       ]
     }
   >
-    <View
-      style={
-        Array [
-          Object {
-            "borderColor": "#de350b",
-            "borderRadius": 8,
-            "borderWidth": 1,
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          undefined,
-        ]
-      }
-      themeVariant="error"
-    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -954,12 +898,16 @@ exports[`TextInput filled renders correctly 1`] = `
   style={
     Array [
       Object {
+        "borderColor": "#001f23",
+        "borderRadius": 8,
+        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
+  themeVariant="filled"
 >
   <View
     style={
@@ -973,24 +921,6 @@ 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={
@@ -1139,12 +1069,16 @@ 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={
@@ -1158,24 +1092,6 @@ 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={
@@ -1363,13 +1279,19 @@ exports[`TextInput idle renders correctly 1`] = `
   style={
     Array [
       Object {
+        "borderColor": "#001f23",
+        "borderRadius": 8,
+        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
-      undefined,
+      Object {
+        "borderColor": "#de350b",
+      },
     ]
   }
   testID="idle-text-input"
+  themeVariant="default"
 >
   <View
     style={
@@ -1383,26 +1305,6 @@ 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,
-          },
-          Object {
-            "borderColor": "#de350b",
-          },
-        ]
-      }
-      themeVariant="default"
-    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -1555,12 +1457,16 @@ 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={
@@ -1574,24 +1480,6 @@ 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={
@@ -1770,12 +1658,16 @@ exports[`TextInput loading renders correctly 1`] = `
   style={
     Array [
       Object {
+        "borderColor": "#808f91",
+        "borderRadius": 8,
+        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
+  themeVariant="readonly"
 >
   <View
     style={
@@ -1789,24 +1681,6 @@ 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 [
@@ -1927,12 +1801,16 @@ 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={
@@ -1946,24 +1824,6 @@ exports[`TextInput max length renders correctly 1`] = `
       ]
     }
   >
-    <View
-      style={
-        Array [
-          Object {
-            "borderColor": "#de350b",
-            "borderRadius": 8,
-            "borderWidth": 1,
-            "bottom": 0,
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          undefined,
-        ]
-      }
-      themeVariant="error"
-    />
     <View
       pointerEvents="none"
       style={
@@ -2200,12 +2060,16 @@ 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={
@@ -2219,24 +2083,6 @@ 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={
@@ -2424,12 +2270,16 @@ exports[`TextInput readonly renders correctly 1`] = `
   style={
     Array [
       Object {
+        "borderColor": "#808f91",
+        "borderRadius": 8,
+        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
+  themeVariant="readonly"
 >
   <View
     style={
@@ -2443,24 +2293,6 @@ 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={
@@ -2634,12 +2466,16 @@ exports[`TextInput required renders correctly 1`] = `
   style={
     Array [
       Object {
+        "borderColor": "#001f23",
+        "borderRadius": 8,
+        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
+  themeVariant="default"
 >
   <View
     style={
@@ -2653,24 +2489,6 @@ 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={

package/src/components/TextInput/index.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { StyleSheet } from "react-native";
+import React from 'react';
+import { StyleSheet } from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-} from "react-native";
+} from 'react-native';
 import {
   StyledTextInputContainer,
   StyledLabel,
@@ -22,13 +22,12 @@ 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";
+} from './StyledTextInput';
+import Icon from '../Icon';
+import { useTheme } from '../../theme';
+import type { Variant } from './StyledTextInput';
+import type { IconName } from '../Icon';
 
 export interface TextInputProps extends NativeTextInputProps {
   /**
@@ -114,21 +113,21 @@ export const getVariant = ({
   isEmptyValue?: boolean;
 }): Variant => {
   if (disabled) {
-    return "disabled";
+    return 'disabled';
   }
   if (error) {
-    return "error";
+    return 'error';
   }
   if (!editable || loading) {
-    return "readonly";
+    return 'readonly';
   }
   if (isFocused) {
-    return "focused";
+    return 'focused';
   }
   if (!isEmptyValue) {
-    return "filled";
+    return 'filled';
   }
-  return "default";
+  return 'default';
 };
 
 const TextInput = ({
@@ -151,9 +150,9 @@ const TextInput = ({
   renderInputValue,
   ...nativeProps
 }: TextInputProps): JSX.Element => {
-  const displayText = (value !== undefined ? value : defaultValue) ?? "";
+  const displayText = (value !== undefined ? value : defaultValue) ?? '';
   const isEmptyValue = displayText.length === 0;
-  const actualSuffix = loading ? "loading" : suffix;
+  const actualSuffix = loading ? 'loading' : suffix;
 
   const [isFocused, setIsFocused] = React.useState(false);
 
@@ -175,9 +174,9 @@ const TextInput = ({
       { color: theme.__hd__.textInput.colors.text },
       textStyle,
     ]),
-    testID: "text-input",
+    testID: 'text-input',
     accessibilityState: {
-      disabled: variant === "disabled" || variant === "readonly",
+      disabled: variant === 'disabled' || variant === 'readonly',
     },
     // @ts-ignore
     accessibilityLabelledBy,
@@ -197,18 +196,19 @@ const TextInput = ({
       nativeProps.onChangeText?.(text);
     },
     defaultValue,
-    placeholder: variant === "focused" ? nativeProps.placeholder : undefined,
+    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined,
   };
 
   return (
     <StyledContainer
       pointerEvents={
-        variant === "disabled" || variant === "readonly" ? "none" : "auto"
+        variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
       }
       testID={testID}
+      style={style}
+      themeVariant={variant}
     >
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} style={style} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (
@@ -228,9 +228,9 @@ const TextInput = ({
             )}
           </StyledLabelContainer>
         )}
-        {typeof prefix === "string" ? (
+        {typeof prefix === 'string' ? (
           <Icon
-            intent={variant === "disabled" ? "disabled-text" : "text"}
+            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
             testID="input-prefix"
             icon={prefix}
             size="xsmall"
@@ -264,12 +264,12 @@ const TextInput = ({
             <StyledTextInput {...nativeInputProps} />
           )}
         </StyledTextInputAndLabelContainer>
-        {typeof actualSuffix === "string" ? (
+        {typeof actualSuffix === 'string' ? (
           <Icon
-            intent={variant === "disabled" ? "disabled-text" : "text"}
+            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
             testID="input-suffix"
             icon={actualSuffix}
-            spin={actualSuffix === "loading"}
+            spin={actualSuffix === 'loading'}
             size="xsmall"
           />
         ) : (