@hero-design/rn 8.12.5-alpha.0 → 8.12.5

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

@@ -73,6 +73,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
       testID="label-container"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -99,6 +100,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
         *
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -163,6 +165,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         defaultValue="1000"
         editable={true}
         maxLength={255}
@@ -214,6 +217,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -239,6 +243,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
         This is helper text
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -350,6 +355,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
       testID="label-container"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -376,6 +382,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
         *
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -440,6 +447,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         defaultValue="1000"
         editable={true}
         maxLength={255}
@@ -490,6 +498,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -515,6 +524,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
         This is helper text
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -626,6 +636,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
       testID="label-container"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -652,6 +663,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
         *
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -716,6 +728,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         defaultValue="1000"
         editable={true}
         maxLength={255}
@@ -767,6 +780,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -792,6 +806,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
         This is helper text
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -904,6 +919,7 @@ exports[`TextInput disabled renders correctly 1`] = `
       testID="label-container"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -930,6 +946,7 @@ exports[`TextInput disabled renders correctly 1`] = `
         *
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -979,6 +996,7 @@ exports[`TextInput disabled renders correctly 1`] = `
             "disabled": true,
           }
         }
+        allowFontScaling={false}
         editable={true}
         onBlur={[Function]}
         onChangeText={[Function]}
@@ -1131,6 +1149,7 @@ exports[`TextInput error renders correctly 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -1158,6 +1177,7 @@ exports[`TextInput error renders correctly 1`] = `
           *
         </Text>
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -1196,6 +1216,7 @@ exports[`TextInput error renders correctly 1`] = `
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         editable={true}
         onBlur={[Function]}
         onChangeText={[Function]}
@@ -1273,6 +1294,7 @@ exports[`TextInput error renders correctly 1`] = `
           themeSize="xsmall"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -1379,6 +1401,7 @@ exports[`TextInput filled renders correctly 1`] = `
       testID="label-container"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -1443,6 +1466,7 @@ exports[`TextInput filled renders correctly 1`] = `
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         editable={true}
         onBlur={[Function]}
         onChangeText={[Function]}
@@ -1610,6 +1634,7 @@ exports[`TextInput helper text renders correctly 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -1637,6 +1662,7 @@ exports[`TextInput helper text renders correctly 1`] = `
           *
         </Text>
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -1675,6 +1701,7 @@ exports[`TextInput helper text renders correctly 1`] = `
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         editable={true}
         onBlur={[Function]}
         onChangeText={[Function]}
@@ -1723,6 +1750,7 @@ exports[`TextInput helper text renders correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -1855,6 +1883,7 @@ exports[`TextInput idle renders correctly 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -1893,6 +1922,7 @@ exports[`TextInput idle renders correctly 1`] = `
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         editable={true}
         onBlur={[Function]}
         onChangeText={[Function]}
@@ -2059,6 +2089,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -2086,6 +2117,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
           *
         </Text>
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -2124,6 +2156,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         editable={true}
         onBlur={[Function]}
         onChangeText={[Function]}
@@ -2280,6 +2313,7 @@ exports[`TextInput loading renders correctly 1`] = `
             "disabled": true,
           }
         }
+        allowFontScaling={false}
         editable={true}
         onBlur={[Function]}
         onChangeText={[Function]}
@@ -2431,6 +2465,7 @@ exports[`TextInput max length renders correctly 1`] = `
       testID="label-container"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -2457,6 +2492,7 @@ exports[`TextInput max length renders correctly 1`] = `
         *
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -2506,6 +2542,7 @@ exports[`TextInput max length renders correctly 1`] = `
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         editable={true}
         maxLength={255}
         multiline={true}
@@ -2586,6 +2623,7 @@ exports[`TextInput max length renders correctly 1`] = `
           themeSize="xsmall"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -2615,6 +2653,7 @@ exports[`TextInput max length renders correctly 1`] = `
         </Text>
       </View>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -2753,6 +2792,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -2780,6 +2820,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           *
         </Text>
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -2818,6 +2859,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         editable={true}
         onBlur={[Function]}
         onChangeText={[Function]}
@@ -2866,6 +2908,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -2968,6 +3011,7 @@ exports[`TextInput readonly renders correctly 1`] = `
       testID="label-container"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -2994,6 +3038,7 @@ exports[`TextInput readonly renders correctly 1`] = `
         *
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -3058,6 +3103,7 @@ exports[`TextInput readonly renders correctly 1`] = `
             "disabled": true,
           }
         }
+        allowFontScaling={false}
         editable={false}
         onBlur={[Function]}
         onChangeText={[Function]}
@@ -3198,6 +3244,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
       testID="label-container"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -3247,6 +3294,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         editable={true}
         onBlur={[Function]}
         onChangeText={[Function]}
@@ -3399,6 +3447,7 @@ exports[`TextInput required renders correctly 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -3426,6 +3475,7 @@ exports[`TextInput required renders correctly 1`] = `
           *
         </Text>
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -3464,6 +3514,7 @@ exports[`TextInput required renders correctly 1`] = `
             "disabled": false,
           }
         }
+        allowFontScaling={false}
         editable={true}
         onBlur={[Function]}
         onChangeText={[Function]}

package/src/components/TextInput/index.tsx

@@ -161,6 +161,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       value,
       defaultValue,
       renderInputValue,
+      allowFontScaling = false,
       ...nativeProps
     }: TextInputProps,
     ref?: React.Ref<TextInputHandles>
@@ -251,6 +252,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       accessibilityLabelledBy,
+      allowFontScaling,
       ...nativeProps,
       onFocus: (event) => {
         setIsFocused(true);

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -99,6 +99,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
           testID="label-container"
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -148,6 +149,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                 "disabled": false,
               }
             }
+            allowFontScaling={false}
             editable={true}
             onBlur={[Function]}
             onChangeText={[Function]}
@@ -197,6 +199,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
           }
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -327,6 +330,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           testID="label-container"
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -376,6 +380,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 "disabled": false,
               }
             }
+            allowFontScaling={false}
             editable={true}
             onBlur={[Function]}
             onChangeText={[Function]}

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -99,6 +99,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
           testID="label-container"
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -148,6 +149,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                 "disabled": false,
               }
             }
+            allowFontScaling={false}
             editable={true}
             onBlur={[Function]}
             onChangeText={[Function]}
@@ -197,6 +199,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
           }
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -327,6 +330,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
           testID="label-container"
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -376,6 +380,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 "disabled": false,
               }
             }
+            allowFontScaling={false}
             editable={true}
             onBlur={[Function]}
             onChangeText={[Function]}
@@ -601,6 +606,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                     }
                   >
                     <Text
+                      allowFontScaling={false}
                       style={
                         Array [
                           Object {
@@ -740,6 +746,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       }
                     >
                       <Text
+                        allowFontScaling={false}
                         disabled={false}
                         ellipsizeMode="tail"
                         numberOfLines={1}

package/src/components/Toast/__tests__/__snapshots__/Toast.spec.tsx.snap

@@ -82,6 +82,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -188,6 +189,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -230,6 +232,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
     testID="toast-action-button"
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -335,6 +338,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -377,6 +381,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
     testID="toast-action-button"
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -455,6 +460,7 @@ exports[`Toast renders correctly when intent is notification 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -497,6 +503,7 @@ exports[`Toast renders correctly when intent is notification 1`] = `
     testID="toast-action-button"
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -575,6 +582,7 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -617,6 +625,7 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
     testID="toast-action-button"
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -722,6 +731,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -764,6 +774,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
     testID="toast-action-button"
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -869,6 +880,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -911,6 +923,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
     testID="toast-action-button"
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {

package/src/components/Typography/Text/index.tsx

@@ -66,6 +66,7 @@ const Text = ({
   fontWeight = 'regular',
   intent = 'body',
   typeface = 'neutral',
+  allowFontScaling = false,
   ...nativeProps
 }: TextProps) => (
   <StyledText
@@ -74,6 +75,7 @@ const Text = ({
     themeFontWeight={fontWeight}
     themeIntent={intent}
     themeTypeface={typeface}
+    allowFontScaling={allowFontScaling}
   >
     {children}
   </StyledText>

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -80,6 +80,16 @@ Object {
       "fonts": Object {
         "default": "BeVietnamPro-Regular",
       },
+      "lineHeights": Object {
+        "large": 28,
+        "medium": 26,
+        "small": 24,
+        "xlarge": 32,
+        "xxlarge": 44,
+        "xxxlarge": 36,
+        "xxxxlarge": 39,
+        "xxxxxlarge": 42,
+      },
       "radii": Object {
         "rounded": 999,
       },
@@ -110,6 +120,9 @@ Object {
       "fonts": Object {
         "default": "BeVietnamPro-SemiBold",
       },
+      "lineHeights": Object {
+        "default": 20,
+      },
       "sizes": Object {
         "height": 20,
         "minWidth": 20,
@@ -560,6 +573,10 @@ Object {
         "cellText": "BeVietnamPro-SemiBold",
         "errorMessage": "BeVietnamPro-Regular",
       },
+      "lineHeights": Object {
+        "cellText": 36,
+        "errorMessage": 12,
+      },
       "radii": Object {
         "cell": 8,
         "mask": 999,

package/src/theme/components/avatar.ts

@@ -35,12 +35,22 @@ const getAvatarTheme = (theme: GlobalTheme) => {
     xxxxlarge: theme.space.xlarge * 1.5,
     xxxxxlarge: theme.space.xxlarge * 1.5,
   };
+  const lineHeights = {
+    small: theme.lineHeights.large,
+    medium: theme.lineHeights.xlarge,
+    large: theme.lineHeights.xxlarge,
+    xlarge: theme.lineHeights.xxxlarge,
+    xxlarge: theme.lineHeights.medium * 2,
+    xxxlarge: theme.lineHeights.large * 1.5,
+    xxxxlarge: theme.lineHeights.xlarge * 1.5,
+    xxxxxlarge: theme.lineHeights.xxlarge * 1.5,
+  };
 
   const radii = {
     rounded: theme.radii.rounded,
   };
 
-  return { colors, sizes, radii, fonts, fontSizes };
+  return { colors, sizes, radii, fonts, fontSizes, lineHeights };
 };
 
 export default getAvatarTheme;

package/src/theme/components/badge.ts

@@ -19,6 +19,10 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     default: theme.fontSizes.small,
   };
 
+  const lineHeights = {
+    default: theme.lineHeights.small,
+  };
+
   const sizes = {
     height: theme.fontSizes.small + theme.sizes.small,
     minWidth: theme.fontSizes.small + theme.sizes.small,
@@ -32,7 +36,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     statusPositionRight: -theme.space.xxsmall,
   };
 
-  return { colors, fonts, fontSizes, sizes, space };
+  return { colors, fonts, fontSizes, sizes, space, lineHeights };
 };
 
 export default getBadgeTheme;