fix: fixed issue with textinput styling after new release (#4466)

kamilkedzierski · web-flow · commit 178122123a63 · 2024-07-28T20:30:13.000+02:00
* fix: fixed issue with textinput styling after new release

* fix: updated snapshots
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
@@ -443,11 +443,11 @@ const styles = StyleSheet.create({
   labelContainer: {
     paddingTop: 0,
     paddingBottom: 0,
-    flex: 1,
+    flexGrow: 1,
   },
   input: {
     margin: 0,
-    flex: 1,
+    flexGrow: 1,
   },
   inputFlat: {
     paddingTop: 24,
diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
@@ -429,11 +429,11 @@ export default TextInputOutlined;
 const styles = StyleSheet.create({
   labelContainer: {
     paddingBottom: 0,
-    flex: 1,
+    flexGrow: 1,
   },
   input: {
     margin: 0,
-    flex: 1,
+    flexGrow: 1,
   },
   inputOutlined: {
     paddingTop: 8,
diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`call onPress when affix adornment pressed 1`] = `
     style={
       [
         {
-          "flex": 1,
+          "flexGrow": 1,
           "paddingBottom": 0,
           "paddingTop": 0,
         },
@@ -187,7 +187,7 @@ exports[`call onPress when affix adornment pressed 1`] = `
       style={
         [
           {
-            "flex": 1,
+            "flexGrow": 1,
             "margin": 0,
           },
           {},
@@ -337,7 +337,7 @@ exports[`correctly applies a component as the text label 1`] = `
     style={
       [
         {
-          "flex": 1,
+          "flexGrow": 1,
           "paddingBottom": 0,
           "paddingTop": 0,
         },
@@ -503,7 +503,7 @@ exports[`correctly applies a component as the text label 1`] = `
       style={
         [
           {
-            "flex": 1,
+            "flexGrow": 1,
             "margin": 0,
           },
           {},
@@ -577,7 +577,7 @@ exports[`correctly applies cursorColor prop 1`] = `
     style={
       [
         {
-          "flex": 1,
+          "flexGrow": 1,
           "paddingBottom": 0,
           "paddingTop": 0,
         },
@@ -727,7 +727,7 @@ exports[`correctly applies cursorColor prop 1`] = `
       style={
         [
           {
-            "flex": 1,
+            "flexGrow": 1,
             "margin": 0,
           },
           {},
@@ -801,7 +801,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
     style={
       [
         {
-          "flex": 1,
+          "flexGrow": 1,
           "paddingBottom": 0,
           "paddingTop": 0,
         },
@@ -951,7 +951,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
       style={
         [
           {
-            "flex": 1,
+            "flexGrow": 1,
             "margin": 0,
           },
           {},
@@ -1018,7 +1018,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
     style={
       [
         {
-          "flex": 1,
+          "flexGrow": 1,
           "paddingBottom": 0,
         },
         {
@@ -1207,7 +1207,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
       style={
         [
           {
-            "flex": 1,
+            "flexGrow": 1,
             "margin": 0,
           },
           {
@@ -1282,7 +1282,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
     style={
       [
         {
-          "flex": 1,
+          "flexGrow": 1,
           "paddingBottom": 0,
           "paddingTop": 0,
         },
@@ -1432,7 +1432,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
       style={
         [
           {
-            "flex": 1,
+            "flexGrow": 1,
             "margin": 0,
           },
           {},
@@ -1508,7 +1508,7 @@ exports[`correctly applies textAlign center 1`] = `
     style={
       [
         {
-          "flex": 1,
+          "flexGrow": 1,
           "paddingBottom": 0,
           "paddingTop": 0,
         },
@@ -1658,7 +1658,7 @@ exports[`correctly applies textAlign center 1`] = `
       style={
         [
           {
-            "flex": 1,
+            "flexGrow": 1,
             "margin": 0,
           },
           {},
@@ -1732,7 +1732,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
     style={
       [
         {
-          "flex": 1,
+          "flexGrow": 1,
           "paddingBottom": 0,
           "paddingTop": 0,
         },
@@ -1882,7 +1882,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
       style={
         [
           {
-            "flex": 1,
+            "flexGrow": 1,
             "margin": 0,
           },
           {},
@@ -2158,7 +2158,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
     style={
       [
         {
-          "flex": 1,
+          "flexGrow": 1,
           "paddingBottom": 0,
           "paddingTop": 0,
         },
@@ -2308,7 +2308,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
       style={
         [
           {
-            "flex": 1,
+            "flexGrow": 1,
             "margin": 0,
           },
           {},

Original file line number	Diff line number	Diff line change
@@ -38,7 +38,7 @@ exports[`call onPress when affix adornment pressed 1`] = `
`38`	`38`	`style={`
`39`	`39`	`[`
`40`	`40`	`{`
`41`		`- "flex": 1,`
	`41`	`+ "flexGrow": 1,`
`42`	`42`	`"paddingBottom": 0,`
`43`	`43`	`"paddingTop": 0,`
`44`	`44`	`},`
@@ -187,7 +187,7 @@ exports[`call onPress when affix adornment pressed 1`] = `
`187`	`187`	`style={`
`188`	`188`	`[`
`189`	`189`	`{`
`190`		`- "flex": 1,`
	`190`	`+ "flexGrow": 1,`
`191`	`191`	`"margin": 0,`
`192`	`192`	`},`
`193`	`193`	`{},`
@@ -337,7 +337,7 @@ exports[`correctly applies a component as the text label 1`] = `
`337`	`337`	`style={`
`338`	`338`	`[`
`339`	`339`	`{`
`340`		`- "flex": 1,`
	`340`	`+ "flexGrow": 1,`
`341`	`341`	`"paddingBottom": 0,`
`342`	`342`	`"paddingTop": 0,`
`343`	`343`	`},`
@@ -503,7 +503,7 @@ exports[`correctly applies a component as the text label 1`] = `
`503`	`503`	`style={`
`504`	`504`	`[`
`505`	`505`	`{`
`506`		`- "flex": 1,`
	`506`	`+ "flexGrow": 1,`
`507`	`507`	`"margin": 0,`
`508`	`508`	`},`
`509`	`509`	`{},`
@@ -577,7 +577,7 @@ exports[`correctly applies cursorColor prop 1`] = `
`577`	`577`	`style={`
`578`	`578`	`[`
`579`	`579`	`{`
`580`		`- "flex": 1,`
	`580`	`+ "flexGrow": 1,`
`581`	`581`	`"paddingBottom": 0,`
`582`	`582`	`"paddingTop": 0,`
`583`	`583`	`},`
@@ -727,7 +727,7 @@ exports[`correctly applies cursorColor prop 1`] = `
`727`	`727`	`style={`
`728`	`728`	`[`
`729`	`729`	`{`
`730`		`- "flex": 1,`
	`730`	`+ "flexGrow": 1,`
`731`	`731`	`"margin": 0,`
`732`	`732`	`},`
`733`	`733`	`{},`
@@ -801,7 +801,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
`801`	`801`	`style={`
`802`	`802`	`[`
`803`	`803`	`{`
`804`		`- "flex": 1,`
	`804`	`+ "flexGrow": 1,`
`805`	`805`	`"paddingBottom": 0,`
`806`	`806`	`"paddingTop": 0,`
`807`	`807`	`},`
@@ -951,7 +951,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
`951`	`951`	`style={`
`952`	`952`	`[`
`953`	`953`	`{`
`954`		`- "flex": 1,`
	`954`	`+ "flexGrow": 1,`
`955`	`955`	`"margin": 0,`
`956`	`956`	`},`
`957`	`957`	`{},`
@@ -1018,7 +1018,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
`1018`	`1018`	`style={`
`1019`	`1019`	`[`
`1020`	`1020`	`{`
`1021`		`- "flex": 1,`
	`1021`	`+ "flexGrow": 1,`
`1022`	`1022`	`"paddingBottom": 0,`
`1023`	`1023`	`},`
`1024`	`1024`	`{`
@@ -1207,7 +1207,7 @@ exports[`correctly applies height to multiline Outline TextInput 1`] = `
`1207`	`1207`	`style={`
`1208`	`1208`	`[`
`1209`	`1209`	`{`
`1210`		`- "flex": 1,`
	`1210`	`+ "flexGrow": 1,`
`1211`	`1211`	`"margin": 0,`
`1212`	`1212`	`},`
`1213`	`1213`	`{`
@@ -1282,7 +1282,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
`1282`	`1282`	`style={`
`1283`	`1283`	`[`
`1284`	`1284`	`{`
`1285`		`- "flex": 1,`
	`1285`	`+ "flexGrow": 1,`
`1286`	`1286`	`"paddingBottom": 0,`
`1287`	`1287`	`"paddingTop": 0,`
`1288`	`1288`	`},`
@@ -1432,7 +1432,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
`1432`	`1432`	`style={`
`1433`	`1433`	`[`
`1434`	`1434`	`{`
`1435`		`- "flex": 1,`
	`1435`	`+ "flexGrow": 1,`
`1436`	`1436`	`"margin": 0,`
`1437`	`1437`	`},`
`1438`	`1438`	`{},`
@@ -1508,7 +1508,7 @@ exports[`correctly applies textAlign center 1`] = `
`1508`	`1508`	`style={`
`1509`	`1509`	`[`
`1510`	`1510`	`{`
`1511`		`- "flex": 1,`
	`1511`	`+ "flexGrow": 1,`
`1512`	`1512`	`"paddingBottom": 0,`
`1513`	`1513`	`"paddingTop": 0,`
`1514`	`1514`	`},`
@@ -1658,7 +1658,7 @@ exports[`correctly applies textAlign center 1`] = `
`1658`	`1658`	`style={`
`1659`	`1659`	`[`
`1660`	`1660`	`{`
`1661`		`- "flex": 1,`
	`1661`	`+ "flexGrow": 1,`
`1662`	`1662`	`"margin": 0,`
`1663`	`1663`	`},`
`1664`	`1664`	`{},`
@@ -1732,7 +1732,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
`1732`	`1732`	`style={`
`1733`	`1733`	`[`
`1734`	`1734`	`{`
`1735`		`- "flex": 1,`
	`1735`	`+ "flexGrow": 1,`
`1736`	`1736`	`"paddingBottom": 0,`
`1737`	`1737`	`"paddingTop": 0,`
`1738`	`1738`	`},`
@@ -1882,7 +1882,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
`1882`	`1882`	`style={`
`1883`	`1883`	`[`
`1884`	`1884`	`{`
`1885`		`- "flex": 1,`
	`1885`	`+ "flexGrow": 1,`
`1886`	`1886`	`"margin": 0,`
`1887`	`1887`	`},`
`1888`	`1888`	`{},`
@@ -2158,7 +2158,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
`2158`	`2158`	`style={`
`2159`	`2159`	`[`
`2160`	`2160`	`{`
`2161`		`- "flex": 1,`
	`2161`	`+ "flexGrow": 1,`
`2162`	`2162`	`"paddingBottom": 0,`
`2163`	`2163`	`"paddingTop": 0,`
`2164`	`2164`	`},`
@@ -2308,7 +2308,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
`2308`	`2308`	`style={`
`2309`	`2309`	`[`
`2310`	`2310`	`{`
`2311`		`- "flex": 1,`
	`2311`	`+ "flexGrow": 1,`
`2312`	`2312`	`"margin": 0,`
`2313`	`2313`	`},`
`2314`	`2314`	`{},`