@hero-design/rn 7.8.0 → 7.10.1

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -20,34 +20,54 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
   }
 >
   <View
+    pointerEvents="auto"
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "flexDirection": "row",
-          "padding": 16,
-          "position": "relative",
+          "marginVertical": 8,
           "width": "100%",
         },
         undefined,
       ]
     }
   >
-    <Text
+    <View
       style={
         Array [
           Object {
-            "color": "#292a2b",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 12,
-            "letterSpacing": 0.36,
-            "lineHeight": 20,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "padding": 16,
           },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#8b8d92",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            undefined,
+          ]
+        }
+        themeVariant="readonly"
+      />
+      <View
+        pointerEvents="none"
+        style={
           Array [
             Object {
               "backgroundColor": "#ffffff",
+              "flexDirection": "row",
               "left": 16,
               "paddingHorizontal": 4,
               "position": "absolute",
@@ -55,49 +75,106 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
               "zIndex": 1,
             },
             undefined,
-          ],
-        ]
-      }
-      testID="input-label"
-      themeFontSize="small"
-      themeFontWeight="regular"
-      themeIntent="body"
-    >
-      Allow notifications
-    </Text>
-    <TextInput
-      editable={false}
-      multiline={true}
-      onPressIn={[Function]}
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 12,
+                "letterSpacing": 0.36,
+                "lineHeight": 20,
+              },
+              Array [
+                Object {
+                  "color": "#8b8d92",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-label"
+          themeFontSize="small"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeVariant="readonly"
+        >
+          Allow notifications
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "flexGrow": 2,
+            },
+            undefined,
+          ]
+        }
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          editable={false}
+          multiline={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          onFocus={[Function]}
+          onPressIn={[Function]}
+          style={
+            Array [
+              Object {
+                "alignSelf": "stretch",
+                "flexGrow": 2,
+                "fontSize": 14,
+                "marginHorizontal": 8,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "color": "#292a2b",
+              },
+            ]
+          }
+          testID="text-input"
+          value="Monday"
+        />
+      </View>
+      <HeroIcon
+        name="arrow-down"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="input-suffix"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+    </View>
+    <View
       style={
         Array [
           Object {
             "flex": 1,
-            "fontSize": 16,
-            "marginHorizontal": 8,
-          },
-          Object {
-            "color": "#292a2b",
-          },
-        ]
-      }
-      testID="text-input"
-      value="Monday"
-    />
-    <HeroIcon
-      name="arrow-down"
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontSize": 16,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
           },
           undefined,
         ]
       }
-      testID="input-suffix"
-      themeIntent="text"
-      themeSize="xsmall"
     />
   </View>
   <Modal
@@ -743,34 +820,54 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
   }
 >
   <View
+    pointerEvents="auto"
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "flexDirection": "row",
-          "padding": 16,
-          "position": "relative",
+          "marginVertical": 8,
           "width": "100%",
         },
         undefined,
       ]
     }
   >
-    <Text
+    <View
       style={
         Array [
           Object {
-            "color": "#292a2b",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 12,
-            "letterSpacing": 0.36,
-            "lineHeight": 20,
+            "alignItems": "center",
+            "flexDirection": "row",
+            "padding": 16,
           },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "borderColor": "#8b8d92",
+              "borderRadius": 8,
+              "borderWidth": 1,
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            },
+            undefined,
+          ]
+        }
+        themeVariant="readonly"
+      />
+      <View
+        pointerEvents="none"
+        style={
           Array [
             Object {
               "backgroundColor": "#ffffff",
+              "flexDirection": "row",
               "left": 16,
               "paddingHorizontal": 4,
               "position": "absolute",
@@ -778,49 +875,106 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               "zIndex": 1,
             },
             undefined,
-          ],
-        ]
-      }
-      testID="input-label"
-      themeFontSize="small"
-      themeFontWeight="regular"
-      themeIntent="body"
-    >
-      Allow notifications
-    </Text>
-    <TextInput
-      editable={false}
-      multiline={true}
-      onPressIn={[Function]}
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 12,
+                "letterSpacing": 0.36,
+                "lineHeight": 20,
+              },
+              Array [
+                Object {
+                  "color": "#8b8d92",
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-label"
+          themeFontSize="small"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeVariant="readonly"
+        >
+          Allow notifications
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "flexGrow": 2,
+            },
+            undefined,
+          ]
+        }
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          editable={false}
+          multiline={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          onFocus={[Function]}
+          onPressIn={[Function]}
+          style={
+            Array [
+              Object {
+                "alignSelf": "stretch",
+                "flexGrow": 2,
+                "fontSize": 14,
+                "marginHorizontal": 8,
+                "textAlignVertical": "center",
+              },
+              Object {
+                "color": "#292a2b",
+              },
+            ]
+          }
+          testID="text-input"
+          value="Monday"
+        />
+      </View>
+      <HeroIcon
+        name="arrow-down"
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontSize": 16,
+            },
+            undefined,
+          ]
+        }
+        testID="input-suffix"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+    </View>
+    <View
       style={
         Array [
           Object {
             "flex": 1,
-            "fontSize": 16,
-            "marginHorizontal": 8,
-          },
-          Object {
-            "color": "#292a2b",
-          },
-        ]
-      }
-      testID="text-input"
-      value="Monday"
-    />
-    <HeroIcon
-      name="arrow-down"
-      style={
-        Array [
-          Object {
-            "color": "#292a2b",
-            "fontSize": 16,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
           },
           undefined,
         ]
       }
-      testID="input-suffix"
-      themeIntent="text"
-      themeSize="xsmall"
     />
   </View>
   <Modal

package/src/components/TextInput/StyledTextInput.tsx

@@ -1,30 +1,152 @@
-import { TextInput, View } from 'react-native';
+import { TextInput, View, StyleSheet } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 
-const Container = styled(View)(({ theme }) => ({
-  position: 'relative',
+export type Variant =
+  | 'default'
+  | 'filled'
+  | 'focused'
+  | 'disabled'
+  | 'readonly'
+  | 'error';
+
+const StyledContainer = styled(View)(({ theme }) => ({
   width: '100%',
-  borderWidth: theme.__hd__.textInput.borderWidths.container,
-  borderRadius: theme.__hd__.textInput.radii.container,
-  padding: theme.__hd__.textInput.space.containerPadding,
-  flexDirection: 'row',
-  alignItems: 'center',
+  marginVertical: theme.__hd__.textInput.space.containerMarginVertical,
 }));
 
-const Label = styled(Typography.Text)(({ theme }) => ({
+const StyledLabelContainer = styled(View)(({ theme }) => ({
   position: 'absolute',
+  flexDirection: 'row',
   left: theme.__hd__.textInput.space.labelLeft,
   top: theme.__hd__.textInput.space.labelTop,
   backgroundColor: theme.__hd__.textInput.colors.labelBackground,
   zIndex: 1,
   paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding,
 }));
+const StyledLabel = styled(Typography.Text)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  color: theme.__hd__.textInput.colors.labels[themeVariant],
+}));
 
-const StyledTextInput = styled(TextInput)(({ theme }) => ({
+const StyledAsteriskLabel = styled(Typography.Text)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  color: theme.__hd__.textInput.colors.asterisks[themeVariant],
+}));
+
+const StyledLabelContainerInsideTextInput = styled(View)((): any => ({
+  flexDirection: 'row',
+  zIndex: 9999,
+  alignItems: 'center',
+  ...StyleSheet.absoluteFillObject,
+}));
+
+const StyledLabelInsideTextInput = styled(Typography.Text)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  textAlignVertical: 'center',
+  alignContent: 'center',
+  fontSize: theme.__hd__.textInput.fontSizes.labelInsideTextInput,
+  alignItems: 'center',
+  color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeVariant],
+}));
+
+const StyledAsteriskLabelInsideTextInput = styled(Typography.Text)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  color: theme.__hd__.textInput.colors.asterisks[themeVariant],
+  fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel,
+}));
+const StyledErrorContainer = styled(View)(({ theme }) => ({
+  marginLeft: theme.__hd__.textInput.space.errorContainerMarginLeft,
+  marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
+  flexDirection: 'row',
+  alignItems: 'center',
+  flex: 1,
+  flexGrow: 4,
+}));
+
+const StyledError = styled(Typography.Text)(({ theme }) => ({
+  color: theme.__hd__.textInput.colors.error,
+  fontSize: theme.__hd__.textInput.fontSizes.error,
+  marginLeft: theme.__hd__.textInput.space.errorMarginLeft,
+}));
+
+const StyledMaxLengthMessage = styled(Typography.Text)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  color: theme.__hd__.textInput.colors.maxLengthLabels[themeVariant],
+  fontSize: theme.__hd__.textInput.fontSizes.maxLength,
+  marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
+  alignSelf: 'flex-end',
   flex: 1,
+  flexGrow: 1,
+  textAlign: 'right',
+}));
+
+const StyledHelperText = styled(Typography.Text)(({ theme }) => ({
+  fontSize: theme.__hd__.textInput.fontSizes.error,
+  marginLeft: theme.__hd__.textInput.space.errorMarginLeft,
+}));
+
+const StyledTextInput = styled(TextInput)(({ theme }) => ({
+  textAlignVertical: 'center',
   fontSize: theme.__hd__.textInput.fontSizes.text,
+  alignSelf: 'stretch',
+  flexGrow: 2,
   marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));
 
-export { Container, Label, StyledTextInput };
+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',
+  padding: theme.__hd__.textInput.space.containerPadding,
+}));
+
+const StyledTextInputAndLabelContainer = styled(View)(() => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  flexGrow: 2,
+}));
+
+const StyledErrorAndHelpTextContainer = styled(View)(() => ({
+  flex: 1,
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+}));
+
+export {
+  StyledTextInputContainer,
+  StyledLabel,
+  StyledLabelContainer,
+  StyledAsteriskLabel,
+  StyledAsteriskLabelInsideTextInput,
+  StyledTextInput,
+  StyledError,
+  StyledMaxLengthMessage,
+  StyledLabelInsideTextInput,
+  StyledContainer,
+  StyledErrorContainer,
+  StyledHelperText,
+  StyledTextInputAndLabelContainer,
+  StyledLabelContainerInsideTextInput,
+  StyledErrorAndHelpTextContainer,
+  StyledBorderBackDrop,
+};