@hero-design/rn 7.22.0 → 7.22.2

package/src/components/TextInput/StyledTextInput.tsx

@@ -10,9 +10,19 @@ export type Variant =
   | 'readonly'
   | 'error';
 
-const StyledContainer = styled(View)(({ theme }) => ({
+const StyledContainer = styled(View)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
   width: '100%',
   marginVertical: theme.__hd__.textInput.space.containerMarginVertical,
+  borderWidth:
+    themeVariant === 'focused'
+      ? theme.__hd__.textInput.borderWidths.container.focused
+      : theme.__hd__.textInput.borderWidths.container.normal,
+  borderRadius: theme.__hd__.textInput.radii.container,
+  borderColor:
+    theme.__hd__.textInput.colors.borders[themeVariant] ??
+    theme.__hd__.textInput.colors.borders.default,
 }));
 
 const StyledLabelContainer = styled(View)(({ theme }) => ({
@@ -97,20 +107,6 @@ const StyledTextInput = styled(TextInput)(({ theme }) => ({
   marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));
 
-const StyledBorderBackDrop = styled(View)<{
-  themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
-  ...StyleSheet.absoluteFillObject,
-  borderWidth:
-    themeVariant === 'focused'
-      ? theme.__hd__.textInput.borderWidths.container.focused
-      : theme.__hd__.textInput.borderWidths.container.normal,
-  borderRadius: theme.__hd__.textInput.radii.container,
-  borderColor:
-    theme.__hd__.textInput.colors.borders[themeVariant] ??
-    theme.__hd__.textInput.colors.borders.default,
-}));
-
 const StyledTextInputContainer = styled(View)(({ theme }) => ({
   flexDirection: 'row',
   alignItems: 'center',
@@ -151,6 +147,5 @@ export {
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
-  StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
 };

package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx

@@ -10,7 +10,7 @@ import {
   StyledAsteriskLabel,
   StyledLabelContainer,
   StyledLabelInsideTextInput,
-  StyledBorderBackDrop,
+  StyledContainer,
 } from '../StyledTextInput';
 
 describe('Label', () => {
@@ -133,7 +133,7 @@ describe('StyledHelperText', () => {
   });
 });
 
-describe('StyledBorderBackDrop', () => {
+describe('StyledContainer', () => {
   it.each`
     themeVariant
     ${'default'}
@@ -146,7 +146,7 @@ describe('StyledBorderBackDrop', () => {
     'renders correctly with themeVariant $themeVariant',
     ({ themeVariant }): void => {
       const { toJSON } = renderWithTheme(
-        <StyledBorderBackDrop themeVariant={themeVariant} />
+        <StyledContainer themeVariant={themeVariant} />
       );
 
       expect(toJSON()).toMatchSnapshot();

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

@@ -547,7 +547,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant readonly 1`] =
 </Text>
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] = `
+exports[`StyledContainer renders correctly with themeVariant default 1`] = `
 <View
   style={
     Array [
@@ -555,11 +555,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] =
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -568,7 +565,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] =
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] = `
+exports[`StyledContainer renders correctly with themeVariant disabled 1`] = `
 <View
   style={
     Array [
@@ -576,11 +573,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] =
         "borderColor": "#bfc1c5",
         "borderRadius": 8,
         "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -589,7 +583,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] =
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
+exports[`StyledContainer renders correctly with themeVariant error 1`] = `
 <View
   style={
     Array [
@@ -597,11 +591,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
         "borderColor": "#de350b",
         "borderRadius": 8,
         "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -610,7 +601,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
+exports[`StyledContainer renders correctly with themeVariant filled 1`] = `
 <View
   style={
     Array [
@@ -618,11 +609,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -631,7 +619,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] = `
+exports[`StyledContainer renders correctly with themeVariant focused 1`] = `
 <View
   style={
     Array [
@@ -639,11 +627,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] =
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 2,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]
@@ -652,7 +637,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] =
 />
 `;
 
-exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] = `
+exports[`StyledContainer renders correctly with themeVariant readonly 1`] = `
 <View
   style={
     Array [
@@ -660,11 +645,8 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] =
         "borderColor": "#808f91",
         "borderRadius": 8,
         "borderWidth": 1,
-        "bottom": 0,
-        "left": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "marginVertical": 8,
+        "width": "100%",
       },
       undefined,
     ]