@hero-design/rn 8.12.0 → 8.12.2

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

@@ -1,5 +1,282 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`TextInput backgroundColor renders correctly 1`] = `
+<View
+  pointerEvents="auto"
+  style={
+    Array [
+      Object {
+        "marginTop": 8,
+        "width": "100%",
+      },
+      Object {},
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          Array [
+            Object {
+              "backgroundColor": "#f6f6f7",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="text-input-border"
+      themeFocused={false}
+      themeVariant="filled"
+    />
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "flexDirection": "row",
+            "left": 16,
+            "paddingHorizontal": 4,
+            "position": "absolute",
+            "top": -10,
+            "zIndex": 1,
+          },
+          Object {
+            "backgroundColor": "#f6f6f7",
+          },
+        ]
+      }
+      testID="label-container"
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#de350b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="filled"
+      >
+        *
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#001f23",
+              },
+              Object {
+                "backgroundColor": "#f6f6f7",
+              },
+            ],
+          ]
+        }
+        testID="input-label"
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="filled"
+      >
+        Amount (AUD)
+      </Text>
+    </View>
+    <HeroIcon
+      name="dollar-sign"
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontSize": 16,
+          },
+          undefined,
+        ]
+      }
+      testID="input-prefix"
+      themeIntent="text"
+      themeSize="xsmall"
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+            "flexShrink": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <TextInput
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        defaultValue="1000"
+        editable={true}
+        maxLength={255}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholder=" "
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontSize": 14,
+              "marginHorizontal": 8,
+              "paddingVertical": 0,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "backgroundColor": "#f6f6f7",
+              "color": "#001f23",
+            },
+          ]
+        }
+        testID="text-input"
+        value="2000"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "minHeight": 16,
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            Array [
+              Object {
+                "fontSize": 12,
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        This is helper text
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "alignSelf": "flex-end",
+                "color": "#001f23",
+                "flex": 1,
+                "flexGrow": 1,
+                "fontSize": 12,
+                "marginRight": 4,
+                "textAlign": "right",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="filled"
+      >
+        4
+        /
+        255
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
 <View
   pointerEvents="auto"
@@ -18,6 +295,8 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -38,9 +317,15 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="filled"
     />
@@ -57,9 +342,12 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             "top": -10,
             "zIndex": 1,
           },
-          undefined,
+          Object {
+            "backgroundColor": "#ffffff",
+          },
         ]
       }
+      testID="label-container"
     >
       <Text
         style={
@@ -101,7 +389,9 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
               Object {
                 "color": "#001f23",
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ],
           ]
         }
@@ -168,6 +458,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -280,6 +571,8 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -300,9 +593,15 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="filled"
     />
@@ -319,9 +618,12 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             "top": -10,
             "zIndex": 1,
           },
-          undefined,
+          Object {
+            "backgroundColor": "#ffffff",
+          },
         ]
       }
+      testID="label-container"
     >
       <Text
         style={
@@ -363,7 +665,9 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
               Object {
                 "color": "#001f23",
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ],
           ]
         }
@@ -430,6 +734,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -544,6 +849,8 @@ exports[`TextInput disabled renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -564,9 +871,15 @@ exports[`TextInput disabled renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="disabled"
     />
@@ -583,9 +896,12 @@ exports[`TextInput disabled renders correctly 1`] = `
             "top": -10,
             "zIndex": 1,
           },
-          undefined,
+          Object {
+            "backgroundColor": "#ffffff",
+          },
         ]
       }
+      testID="label-container"
     >
       <Text
         style={
@@ -627,7 +943,9 @@ exports[`TextInput disabled renders correctly 1`] = `
               Object {
                 "color": "#bfc1c5",
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ],
           ]
         }
@@ -677,6 +995,7 @@ exports[`TextInput disabled renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -730,6 +1049,8 @@ exports[`TextInput error renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -750,9 +1071,15 @@ exports[`TextInput error renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="error"
     />
@@ -885,6 +1212,7 @@ exports[`TextInput error renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -996,6 +1324,8 @@ exports[`TextInput filled renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -1016,9 +1346,15 @@ exports[`TextInput filled renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="filled"
     />
@@ -1035,9 +1371,12 @@ exports[`TextInput filled renders correctly 1`] = `
             "top": -10,
             "zIndex": 1,
           },
-          undefined,
+          Object {
+            "backgroundColor": "#ffffff",
+          },
         ]
       }
+      testID="label-container"
     >
       <Text
         style={
@@ -1053,7 +1392,9 @@ exports[`TextInput filled renders correctly 1`] = `
               Object {
                 "color": "#001f23",
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ],
           ]
         }
@@ -1118,6 +1459,7 @@ exports[`TextInput filled renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -1186,6 +1528,8 @@ exports[`TextInput helper text renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -1206,9 +1550,15 @@ exports[`TextInput helper text renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="default"
     />
@@ -1341,6 +1691,7 @@ exports[`TextInput helper text renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -1422,6 +1773,8 @@ exports[`TextInput idle renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -1442,9 +1795,15 @@ exports[`TextInput idle renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="default"
     />
@@ -1550,6 +1909,7 @@ exports[`TextInput idle renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -1617,6 +1977,8 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -1637,9 +1999,15 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="default"
     />
@@ -1772,6 +2140,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -1839,6 +2208,8 @@ exports[`TextInput loading renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -1859,9 +2230,15 @@ exports[`TextInput loading renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="readonly"
     />
@@ -1918,6 +2295,7 @@ exports[`TextInput loading renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -1998,6 +2376,8 @@ exports[`TextInput max length renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -2018,9 +2398,15 @@ exports[`TextInput max length renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="error"
     />
@@ -2037,9 +2423,12 @@ exports[`TextInput max length renders correctly 1`] = `
             "top": -10,
             "zIndex": 1,
           },
-          undefined,
+          Object {
+            "backgroundColor": "#ffffff",
+          },
         ]
       }
+      testID="label-container"
     >
       <Text
         style={
@@ -2081,7 +2470,9 @@ exports[`TextInput max length renders correctly 1`] = `
               Object {
                 "color": "#001f23",
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ],
           ]
         }
@@ -2133,6 +2524,7 @@ exports[`TextInput max length renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -2279,6 +2671,8 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -2299,9 +2693,15 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="default"
     />
@@ -2434,6 +2834,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -2512,6 +2913,8 @@ exports[`TextInput readonly renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -2532,9 +2935,15 @@ exports[`TextInput readonly renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="readonly"
     />
@@ -2551,9 +2960,12 @@ exports[`TextInput readonly renders correctly 1`] = `
             "top": -10,
             "zIndex": 1,
           },
-          undefined,
+          Object {
+            "backgroundColor": "#ffffff",
+          },
         ]
       }
+      testID="label-container"
     >
       <Text
         style={
@@ -2595,7 +3007,9 @@ exports[`TextInput readonly renders correctly 1`] = `
               Object {
                 "color": "#808f91",
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ],
           ]
         }
@@ -2660,6 +3074,7 @@ exports[`TextInput readonly renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -2728,6 +3143,8 @@ exports[`TextInput ref ref methods work correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -2748,9 +3165,15 @@ exports[`TextInput ref ref methods work correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="filled"
     />
@@ -2767,9 +3190,12 @@ exports[`TextInput ref ref methods work correctly 1`] = `
             "top": -10,
             "zIndex": 1,
           },
-          undefined,
+          Object {
+            "backgroundColor": "#ffffff",
+          },
         ]
       }
+      testID="label-container"
     >
       <Text
         style={
@@ -2785,7 +3211,9 @@ exports[`TextInput ref ref methods work correctly 1`] = `
               Object {
                 "color": "#001f23",
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ],
           ]
         }
@@ -2835,6 +3263,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]
@@ -2888,6 +3317,8 @@ exports[`TextInput required renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "flexDirection": "row",
           "padding": 16,
         },
@@ -2908,9 +3339,15 @@ exports[`TextInput required renders correctly 1`] = `
             "right": 0,
             "top": 0,
           },
-          undefined,
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
         ]
       }
+      testID="text-input-border"
       themeFocused={false}
       themeVariant="default"
     />
@@ -3043,6 +3480,7 @@ exports[`TextInput required renders correctly 1`] = `
               "textAlignVertical": "center",
             },
             Object {
+              "backgroundColor": "#ffffff",
               "color": "#001f23",
             },
           ]