@hero-design/rn 8.33.1 → 8.34.0

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

@@ -69,25 +69,22 @@ exports[`Tabs renders correctly 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
           },
           Array [
             Object {
               "flexShrink": 1,
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
               "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       Move to Work
     </Text>
@@ -166,7 +163,7 @@ exports[`Tabs renders correctly 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-SemiBold",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.24,
                       "lineHeight": 22,
                     },
                     Object {
@@ -174,10 +171,9 @@ exports[`Tabs renders correctly 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="semi-bold"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small-bold"
               >
                 Work
               </Text>
@@ -214,7 +210,7 @@ exports[`Tabs renders correctly 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     Object {
@@ -222,10 +218,9 @@ exports[`Tabs renders correctly 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                 Personal
               </Text>
@@ -268,7 +263,7 @@ exports[`Tabs renders correctly 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     Object {
@@ -276,10 +271,9 @@ exports[`Tabs renders correctly 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                 Home
               </Text>
@@ -347,7 +341,7 @@ exports[`Tabs renders correctly 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     Object {
@@ -355,10 +349,9 @@ exports[`Tabs renders correctly 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                 Money
               </Text>
@@ -392,17 +385,14 @@ exports[`Tabs renders correctly 1`] = `
                       Object {
                         "color": "#001f23",
                         "fontFamily": "BeVietnamPro-Regular",
-                        "fontSize": 14,
-                        "letterSpacing": 0.42,
-                        "lineHeight": 22,
+                        "fontSize": 12,
+                        "letterSpacing": 0.48,
+                        "lineHeight": 16,
                       },
                       Array [
                         Object {
                           "color": "#ffffff",
-                          "fontFamily": "BeVietnamPro-SemiBold",
-                          "fontSize": 12,
                           "includeFontPadding": false,
-                          "lineHeight": 16,
                           "textAlign": "center",
                           "textAlignVertical": "center",
                         },
@@ -410,10 +400,8 @@ exports[`Tabs renders correctly 1`] = `
                       ],
                     ]
                   }
-                  themeFontSize="medium"
                   themeFontWeight="regular"
                   themeIntent="body"
-                  themeTypeface="neutral"
                 >
                   50
                 </Text>
@@ -664,25 +652,22 @@ exports[`useIsFocused renders correctly 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
           },
           Array [
             Object {
               "flexShrink": 1,
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
               "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       Move to Work
     </Text>
@@ -761,7 +746,7 @@ exports[`useIsFocused renders correctly 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-SemiBold",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.24,
                       "lineHeight": 22,
                     },
                     Object {
@@ -769,10 +754,9 @@ exports[`useIsFocused renders correctly 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="semi-bold"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small-bold"
               >
                 Work
               </Text>
@@ -809,7 +793,7 @@ exports[`useIsFocused renders correctly 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     Object {
@@ -817,10 +801,9 @@ exports[`useIsFocused renders correctly 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                 Personal
               </Text>
@@ -863,7 +846,7 @@ exports[`useIsFocused renders correctly 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     Object {
@@ -871,10 +854,9 @@ exports[`useIsFocused renders correctly 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                 Home
               </Text>
@@ -942,7 +924,7 @@ exports[`useIsFocused renders correctly 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     Object {
@@ -950,10 +932,9 @@ exports[`useIsFocused renders correctly 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                 Money
               </Text>
@@ -987,17 +968,14 @@ exports[`useIsFocused renders correctly 1`] = `
                       Object {
                         "color": "#001f23",
                         "fontFamily": "BeVietnamPro-Regular",
-                        "fontSize": 14,
-                        "letterSpacing": 0.42,
-                        "lineHeight": 22,
+                        "fontSize": 12,
+                        "letterSpacing": 0.48,
+                        "lineHeight": 16,
                       },
                       Array [
                         Object {
                           "color": "#ffffff",
-                          "fontFamily": "BeVietnamPro-SemiBold",
-                          "fontSize": 12,
                           "includeFontPadding": false,
-                          "lineHeight": 16,
                           "textAlign": "center",
                           "textAlignVertical": "center",
                         },
@@ -1005,10 +983,8 @@ exports[`useIsFocused renders correctly 1`] = `
                       ],
                     ]
                   }
-                  themeFontSize="medium"
                   themeFontWeight="regular"
                   themeIntent="body"
-                  themeTypeface="neutral"
                 >
                   50
                 </Text>
@@ -1259,25 +1235,22 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
           },
           Array [
             Object {
               "flexShrink": 1,
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
               "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       Move to Work
     </Text>
@@ -1356,7 +1329,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     Object {
@@ -1364,10 +1337,9 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                 Work
               </Text>
@@ -1404,7 +1376,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-SemiBold",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.24,
                       "lineHeight": 22,
                     },
                     Object {
@@ -1412,10 +1384,9 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="semi-bold"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small-bold"
               >
                 Personal
               </Text>
@@ -1458,7 +1429,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     Object {
@@ -1466,10 +1437,9 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                 Home
               </Text>
@@ -1537,7 +1507,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
-                      "letterSpacing": 0.42,
+                      "letterSpacing": 0.48,
                       "lineHeight": 22,
                     },
                     Object {
@@ -1545,10 +1515,9 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                     },
                   ]
                 }
-                themeFontSize="medium"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
+                themeVariant="small"
               >
                 Money
               </Text>
@@ -1582,17 +1551,14 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                       Object {
                         "color": "#001f23",
                         "fontFamily": "BeVietnamPro-Regular",
-                        "fontSize": 14,
-                        "letterSpacing": 0.42,
-                        "lineHeight": 22,
+                        "fontSize": 12,
+                        "letterSpacing": 0.48,
+                        "lineHeight": 16,
                       },
                       Array [
                         Object {
                           "color": "#ffffff",
-                          "fontFamily": "BeVietnamPro-SemiBold",
-                          "fontSize": 12,
                           "includeFontPadding": false,
-                          "lineHeight": 16,
                           "textAlign": "center",
                           "textAlignVertical": "center",
                         },
@@ -1600,10 +1566,8 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                       ],
                     ]
                   }
-                  themeFontSize="medium"
                   themeFontWeight="regular"
                   themeIntent="body"
-                  themeTypeface="neutral"
                 >
                   50
                 </Text>

package/src/components/Tabs/index.tsx

@@ -89,13 +89,13 @@ const getTabItem = ({
 }) => {
   if (typeof item === 'string') {
     return (
-      <Typography.Text
-        fontWeight={active ? 'semi-bold' : 'regular'}
+      <Typography.Body
+        variant={active ? 'small-bold' : 'small'}
         numberOfLines={1}
         style={{ color }}
       >
         {item}
-      </Typography.Text>
+      </Typography.Body>
     );
   }
 

package/src/components/Tag/StyledTag.tsx

@@ -44,7 +44,7 @@ const StyledView = styled(View)<{
   };
 });
 
-const StyledText = styled(Typography.Text)<{
+const StyledText = styled(Typography.Caption)<{
   themeIntent: ThemeIntent;
   themeVariant: ThemeVariant;
 }>(({ themeIntent, themeVariant, theme }) => {
@@ -54,9 +54,6 @@ const StyledText = styled(Typography.Text)<{
       : getOutlinedStyles(themeIntent, theme);
 
   return {
-    fontFamily: theme.__hd__.tag.fonts.default,
-    fontSize: theme.__hd__.tag.fontSizes.default,
-    lineHeight: theme.__hd__.tag.lineHeights.default,
     color: textColor,
     includeFontPadding: false,
     textAlignVertical: 'center',

package/src/components/Tag/__tests__/Tag.spec.tsx

@@ -29,7 +29,11 @@ describe('Tag', () => {
 
   it('renders correctly with custom content', () => {
     const { getByText, toJSON } = renderWithTheme(
-      <Tag content={<Typography.Text>Custom Content</Typography.Text>} />
+      <Tag
+        content={
+          <Typography.Body variant="small">Custom Content</Typography.Body>
+        }
+      />
     );
 
     expect(toJSON()).toMatchSnapshot();