@hero-design/rn 8.12.2 → 8.12.4

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -34,6 +34,7 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -107,6 +108,7 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -166,6 +168,7 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -239,6 +242,7 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -298,6 +302,7 @@ exports[`AccordionItem renders correctly when open 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -371,6 +376,7 @@ exports[`AccordionItem renders correctly when open 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -430,6 +436,7 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -503,6 +510,7 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {

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

@@ -42,6 +42,7 @@ exports[`Accordion allows fully controlled 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -115,6 +116,7 @@ exports[`Accordion allows fully controlled 1`] = `
           }
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -171,6 +173,7 @@ exports[`Accordion allows fully controlled 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -244,6 +247,7 @@ exports[`Accordion allows fully controlled 1`] = `
           }
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -312,6 +316,7 @@ exports[`Accordion renders correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -385,6 +390,7 @@ exports[`Accordion renders correctly 1`] = `
           }
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -441,6 +447,7 @@ exports[`Accordion renders correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -514,6 +521,7 @@ exports[`Accordion renders correctly 1`] = `
           }
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -582,6 +590,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -655,6 +664,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
           }
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {
@@ -722,6 +732,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -795,6 +806,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
           }
         >
           <Text
+            allowFontScaling={false}
             style={
               Array [
                 Object {

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

@@ -70,6 +70,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -164,6 +165,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -184,6 +186,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -313,6 +316,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -333,6 +337,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -435,6 +440,7 @@ exports[`Alert renders correctly when intent is notification 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -455,6 +461,7 @@ exports[`Alert renders correctly when intent is notification 1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -584,6 +591,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -604,6 +612,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -733,6 +742,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -753,6 +763,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -882,6 +893,7 @@ exports[`Alert renders correctly without rounded  1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -902,6 +914,7 @@ exports[`Alert renders correctly without rounded  1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {

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

@@ -61,6 +61,7 @@ exports[`Attachment renders correctly 1`] = `
       testID="attachment-content"
     >
       <Text
+        allowFontScaling={false}
         numberOfLines={1}
         style={
           Array [

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap

@@ -46,18 +46,35 @@ exports[`StyledAvatar renders correctly 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 18,
-            "overflow": "hidden",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
-          undefined,
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 18,
+              "lineHeight": 0,
+              "overflow": "hidden",
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
         ]
       }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
       themeSize="medium"
+      themeTypeface="neutral"
     >
       AA
     </Text>

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap

@@ -60,18 +60,35 @@ exports[`AvatarStack renders correctly by default 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="small"
+        themeTypeface="neutral"
       >
         TT
       </Text>
@@ -121,18 +138,35 @@ exports[`AvatarStack renders correctly by default 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="small"
+        themeTypeface="neutral"
       >
         SS
       </Text>
@@ -182,18 +216,35 @@ exports[`AvatarStack renders correctly by default 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="small"
+        themeTypeface="neutral"
       >
         AA
       </Text>
@@ -243,18 +294,35 @@ exports[`AvatarStack renders correctly by default 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="small"
+        themeTypeface="neutral"
       >
         OO
       </Text>
@@ -304,18 +372,35 @@ exports[`AvatarStack renders correctly by default 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="small"
+        themeTypeface="neutral"
       >
         NA
       </Text>
@@ -384,18 +469,35 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 18,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="medium"
+        themeTypeface="neutral"
       >
         TT
       </Text>
@@ -445,18 +547,35 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 18,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="medium"
+        themeTypeface="neutral"
       >
         SS
       </Text>
@@ -506,18 +625,35 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 18,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="medium"
+        themeTypeface="neutral"
       >
         AA
       </Text>
@@ -567,18 +703,35 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 18,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="medium"
+        themeTypeface="neutral"
       >
         +2
       </Text>

package/src/components/Avatar/StyledAvatar.tsx

@@ -1,5 +1,7 @@
-import { View, Image, TouchableOpacity, Text } from 'react-native';
+import { View, Image, TouchableOpacity } from 'react-native';
 import styled from '@emotion/native';
+import Typography from '../Typography';
+import { TextProps } from '../Typography/Text';
 
 type ThemeSize =
   | 'small'
@@ -31,11 +33,16 @@ const StyledTextWrapper = styled(View)(() => ({
   height: '100%',
 }));
 
-const StyledText = styled(Text)<{
-  themeSize: ThemeSize;
-}>(({ themeSize, theme }) => ({
+const StyledText = styled(Typography.Text)<
+  TextProps & {
+    themeSize: ThemeSize;
+  }
+>(({ themeSize, theme }) => ({
   fontFamily: theme.__hd__.avatar.fonts.default,
   fontSize: theme.__hd__.avatar.fontSizes[themeSize],
+  lineHeight: 0, // auto center
+  textAlignVertical: 'center',
+  textAlign: 'center',
   color: theme.__hd__.avatar.colors.text,
   overflow: 'hidden',
 }));