@hero-design/rn 8.33.1 → 8.33.2

package/src/components/TextInput/index.tsx

@@ -17,13 +17,13 @@ import {
   StyledContainer,
   StyledMaxLengthMessage,
   StyledErrorContainer,
-  StyledHelperText,
   StyledAsteriskLabelInsideTextInput,
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
   StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
+  StyledHelperText,
 } from './StyledTextInput';
 import Icon from '../Icon';
 import { useTheme } from '../../theme';
@@ -346,7 +346,6 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
                   <StyledLabelInsideTextInput
                     nativeID={accessibilityLabelledBy}
                     testID="input-label"
-                    fontSize="medium"
                     themeState={state}
                   >
                     {label}
@@ -396,7 +395,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
               !!helpText && <StyledHelperText>{helpText}</StyledHelperText>
             )}
             {shouldShowMaxLength && (
-              <StyledMaxLengthMessage themeState={state} fontSize="small">
+              <StyledMaxLengthMessage themeState={state}>
                 {displayText.length}/{maxLength}
               </StyledMaxLengthMessage>
             )}

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

@@ -105,14 +105,13 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 12,
                     "lineHeight": 12,
                   },
                   Object {
@@ -122,11 +121,9 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
-            themeTypeface="neutral"
           >
             Break time
           </Text>
@@ -188,6 +185,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
             Object {
               "minHeight": 16,
               "paddingLeft": 16,
+              "paddingTop": 2,
             },
             undefined,
           ]
@@ -211,22 +209,15 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
-                Array [
-                  Object {
-                    "fontSize": 12,
-                  },
-                  undefined,
-                ],
+                undefined,
               ]
             }
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
-            themeTypeface="neutral"
           >
             This is help text
           </Text>
@@ -342,14 +333,13 @@ exports[`TimePickerAndroid 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": "#001f23",
-                    "fontSize": 12,
                     "lineHeight": 12,
                   },
                   Object {
@@ -359,11 +349,9 @@ exports[`TimePickerAndroid renders correctly 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
-            themeTypeface="neutral"
           >
             Break time
           </Text>
@@ -440,6 +428,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             Object {
               "minHeight": 16,
               "paddingLeft": 16,
+              "paddingTop": 2,
             },
             undefined,
           ]

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

@@ -105,14 +105,13 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 12,
                     "lineHeight": 12,
                   },
                   Object {
@@ -122,11 +121,9 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
-            themeTypeface="neutral"
           >
             Break time
           </Text>
@@ -188,6 +185,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
             Object {
               "minHeight": 16,
               "paddingLeft": 16,
+              "paddingTop": 2,
             },
             undefined,
           ]
@@ -211,22 +209,15 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
-                Array [
-                  Object {
-                    "fontSize": 12,
-                  },
-                  undefined,
-                ],
+                undefined,
               ]
             }
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
-            themeTypeface="neutral"
           >
             This is help text
           </Text>
@@ -342,14 +333,13 @@ exports[`TimePickerIOS 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": "#001f23",
-                    "fontSize": 12,
                     "lineHeight": 12,
                   },
                   Object {
@@ -359,11 +349,9 @@ exports[`TimePickerIOS renders correctly 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
-            themeTypeface="neutral"
           >
             Break time
           </Text>
@@ -440,6 +428,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
             Object {
               "minHeight": 16,
               "paddingLeft": 16,
+              "paddingTop": 2,
             },
             undefined,
           ]
@@ -625,16 +614,15 @@ exports[`TimePickerIOS renders correctly 1`] = `
                             "color": "#001f23",
                             "fontFamily": "BeVietnamPro-SemiBold",
                             "fontSize": 16,
-                            "letterSpacing": 0.48,
+                            "letterSpacing": 0.24,
                             "lineHeight": 24,
                           },
                           undefined,
                         ]
                       }
-                      themeFontSize="large"
-                      themeFontWeight="semi-bold"
                       themeIntent="body"
                       themeTypeface="neutral"
+                      themeVariant="regular-bold"
                     >
                       Break time
                     </Text>
@@ -766,28 +754,26 @@ exports[`TimePickerIOS renders correctly 1`] = `
                           Array [
                             Object {
                               "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-Regular",
-                              "fontSize": 14,
-                              "letterSpacing": 0.42,
-                              "lineHeight": 22,
+                              "fontFamily": "BeVietnamPro-SemiBold",
+                              "fontSize": 16,
+                              "letterSpacing": 0.24,
+                              "lineHeight": 24,
                             },
                             Array [
                               Object {
                                 "color": "#401960",
                                 "flexShrink": 1,
-                                "fontFamily": "BeVietnamPro-SemiBold",
-                                "fontSize": 16,
+                                "lineHeight": 22,
                                 "textAlign": "center",
                               },
                               undefined,
                             ],
                           ]
                         }
-                        themeFontSize="medium"
-                        themeFontWeight="regular"
+                        themeButtonVariant="text-primary"
                         themeIntent="body"
                         themeTypeface="neutral"
-                        themeVariant="text-primary"
+                        themeVariant="regular-bold"
                       >
                         Confirm
                       </Text>

package/src/components/Toast/Toast.tsx

@@ -111,11 +111,12 @@ const Toast = ({
         ) : null}
         <TextContainer>
           {typeof content === 'string' ? (
-            <Typography.Text
+            <Typography.Body
+              variant="small"
               intent={intent === 'snackbar' ? 'inverted' : 'body'}
             >
               {content}
-            </Typography.Text>
+            </Typography.Body>
           ) : (
             content
           )}
@@ -130,12 +131,12 @@ const Toast = ({
           }}
         >
           {typeof actionLabel === 'string' ? (
-            <Typography.Text
-              fontWeight="semi-bold"
+            <Typography.Body
+              variant="small-bold"
               intent={intent === 'snackbar' ? 'inverted' : 'body'}
             >
               {actionLabel}
-            </Typography.Text>
+            </Typography.Body>
           ) : (
             actionLabel
           )}

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

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

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

@@ -89,16 +89,15 @@ exports[`Toast Icon render custom icon correctly 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.48,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small"
       >
         Content
       </Text>
@@ -196,16 +195,15 @@ exports[`Toast renders correctly when intent is error 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.48,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small"
       >
         Toast Content
       </Text>
@@ -239,16 +237,15 @@ exports[`Toast renders correctly when intent is error 1`] = `
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.24,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="small-bold"
     >
       Action
     </Text>
@@ -345,16 +342,15 @@ exports[`Toast renders correctly when intent is info 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.48,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small"
       >
         Toast Content
       </Text>
@@ -388,16 +384,15 @@ exports[`Toast renders correctly when intent is info 1`] = `
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.24,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="small-bold"
     >
       Action
     </Text>
@@ -467,16 +462,15 @@ exports[`Toast renders correctly when intent is notification 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.48,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small"
       >
         Toast Content
       </Text>
@@ -510,16 +504,15 @@ exports[`Toast renders correctly when intent is notification 1`] = `
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.24,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="small-bold"
     >
       Action
     </Text>
@@ -589,16 +582,15 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
               "color": "#ffffff",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.48,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="inverted"
         themeTypeface="neutral"
+        themeVariant="small"
       >
         Toast Content
       </Text>
@@ -632,16 +624,15 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
             "color": "#ffffff",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.24,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
       themeIntent="inverted"
       themeTypeface="neutral"
+      themeVariant="small-bold"
     >
       Action
     </Text>
@@ -738,16 +729,15 @@ exports[`Toast renders correctly when intent is success 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.48,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small"
       >
         Toast Content
       </Text>
@@ -781,16 +771,15 @@ exports[`Toast renders correctly when intent is success 1`] = `
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.24,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="small-bold"
     >
       Action
     </Text>
@@ -887,16 +876,15 @@ exports[`Toast renders correctly when intent is warning 1`] = `
               "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.48,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small"
       >
         Toast Content
       </Text>
@@ -930,16 +918,15 @@ exports[`Toast renders correctly when intent is warning 1`] = `
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.24,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="small-bold"
     >
       Action
     </Text>

package/src/components/Toolbar/StyledToolbar.tsx

@@ -51,7 +51,7 @@ const IconButtonWrapper = styled(View)(({ theme }) => ({
   padding: theme.__hd__.toolbar.space.iconButtonWrapperPadding,
 }));
 
-const IconButtonLabel = styled(Typography.Text)(({ theme }) => ({
+const IconButtonLabel = styled(Typography.Body)(({ theme }) => ({
   marginLeft: theme.__hd__.toolbar.space.iconButtonLabelMarginLeft,
 }));
 

package/src/components/Toolbar/ToolbarItem.tsx

@@ -55,8 +55,7 @@ const IconItem = ({ icon, intent, disabled, label }: IconItemProps) => {
       />
       {label ? (
         <IconButtonLabel
-          fontSize="large"
-          fontWeight="semi-bold"
+          variant="regular-bold"
           intent={disabled ? 'subdued' : intent}
           allowFontScaling={false}
           numberOfLines={1}
@@ -87,15 +86,14 @@ const ToolbarItemContent = ({
   }
   if (label) {
     return (
-      <Typography.Text
-        fontSize="large"
-        fontWeight="semi-bold"
+      <Typography.Body
+        variant="regular-bold"
         intent={disabled ? 'disabled' : intent}
         allowFontScaling={false}
         numberOfLines={1}
       >
         {label}
-      </Typography.Text>
+      </Typography.Body>
     );
   }
   return null;