@hero-design/rn 8.33.1 → 8.34.0

package/src/components/Button/Button.tsx

@@ -9,6 +9,7 @@ import {
   StyledButtonIcon,
   StyledButtonIconWrapper,
   StyledButtonText,
+  StyledButtonTitleOfVariantText,
 } from './StyledButton';
 import { useDeprecation } from '../../utils/hooks';
 
@@ -123,6 +124,15 @@ const deprecatedVariants: ThemeVariant[] = [
   'outlined-secondary',
   'outlined-danger',
 ];
+
+function isTextVariant(
+  themeVariant: ThemeVariant
+): themeVariant is 'text-primary' | 'text-secondary' | 'text-danger' {
+  return ['text-primary', 'text-secondary', 'text-danger'].includes(
+    themeVariant
+  );
+}
+
 const Button = ({
   accessibilityHint,
   accessibilityLabel,
@@ -156,7 +166,7 @@ const Button = ({
       loading={loading}
       onPress={onPress}
       testID={testID}
-      themeVariant={themeVariant}
+      themeButtonVariant={themeVariant}
       style={style}
       underlayColor={underlayColor}
     >
@@ -173,25 +183,38 @@ const Button = ({
                 disabled={disabled}
                 icon={icon}
                 testID={`${testID}-left-icon`}
-                themeVariant={themeVariant}
+                themeButtonVariant={themeVariant}
               />
             </StyledButtonIconWrapper>
           )}
-          <StyledButtonText
-            ellipsizeMode="tail"
-            numberOfLines={1}
-            disabled={disabled}
-            themeVariant={themeVariant}
-          >
-            {text}
-          </StyledButtonText>
+          {isTextVariant(themeVariant) ? (
+            <StyledButtonTitleOfVariantText
+              variant="regular-bold"
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              disabled={disabled}
+              themeButtonVariant={themeVariant}
+            >
+              {text}
+            </StyledButtonTitleOfVariantText>
+          ) : (
+            <StyledButtonText
+              level="h5"
+              ellipsizeMode="tail"
+              numberOfLines={1}
+              disabled={disabled}
+              themeButtonVariant={themeVariant}
+            >
+              {text}
+            </StyledButtonText>
+          )}
           {rightIcon !== undefined && (
             <StyledButtonIconWrapper themePosition="right">
               <StyledButtonIcon
                 disabled={disabled}
                 icon={rightIcon}
                 testID={`${testID}-right-icon`}
-                themeVariant={themeVariant}
+                themeButtonVariant={themeVariant}
               />
             </StyledButtonIconWrapper>
           )}

package/src/components/Button/StyledButton.tsx

@@ -81,20 +81,13 @@ const genOutlineTextStyles = (
   intent: Intent,
   disabled?: boolean
 ): ReactNativeStyle => {
-  const textColorStyling = () => {
-    if (disabled) {
-      return {
-        color: theme.__hd__.button.colors.disabledText,
-      };
-    }
-
-    return { color: theme.__hd__.button.colors[intent] };
-  };
+  if (disabled) {
+    return {
+      color: theme.__hd__.button.colors.disabledText,
+    };
+  }
 
-  return {
-    fontSize: theme.__hd__.button.fontSize.default,
-    ...textColorStyling(),
-  };
+  return { color: theme.__hd__.button.colors[intent] };
 };
 
 const genTextVariantTextStyles = (
@@ -102,28 +95,21 @@ const genTextVariantTextStyles = (
   intent: Intent,
   disabled?: boolean
 ): ReactNativeStyle => {
-  const textColorStyling = () => {
-    if (disabled) {
-      return {
-        color: theme.__hd__.button.colors.disabledText,
-      };
-    }
-
-    return { color: theme.__hd__.button.colors[intent] };
-  };
+  if (disabled) {
+    return {
+      color: theme.__hd__.button.colors.disabledText,
+    };
+  }
 
-  return {
-    fontSize: theme.__hd__.button.fontSize.textVariant,
-    ...textColorStyling(),
-  };
+  return { color: theme.__hd__.button.colors[intent] };
 };
 
 const StyledButtonContainer = styled(TouchableHighlight)<{
   disabled?: boolean;
-  themeVariant: ThemeVariant;
+  themeButtonVariant: ThemeVariant;
   loading?: boolean;
-}>(({ disabled = false, loading = false, themeVariant, theme }) => {
-  switch (themeVariant) {
+}>(({ disabled = false, loading = false, themeButtonVariant, theme }) => {
+  switch (themeButtonVariant) {
     case 'filled-primary':
       return genFilledContainerStyles(theme, 'primary', disabled, loading);
     case 'filled-secondary':
@@ -153,17 +139,16 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
   }
 });
 
-const StyledButtonText = styled(Typography.Text)<{
+const StyledButtonText = styled(Typography.Title)<{
   disabled?: boolean;
-  themeVariant: ThemeVariant;
-}>(({ disabled, themeVariant, theme }) => {
+  themeButtonVariant: ThemeVariant;
+}>(({ disabled, themeButtonVariant, theme }) => {
   const themeStyling = () => {
-    switch (themeVariant) {
+    switch (themeButtonVariant) {
       case 'filled-primary':
       case 'filled-secondary':
       case 'filled-danger':
         return {
-          fontSize: theme.__hd__.button.fontSize.default,
           color: theme.__hd__.button.colors.invertedText,
         };
       case 'outlined-primary':
@@ -183,7 +168,28 @@ const StyledButtonText = styled(Typography.Text)<{
   return {
     flexShrink: 1,
     textAlign: 'center',
-    fontFamily: theme.__hd__.button.fonts.default,
+    ...themeStyling(),
+  };
+});
+
+const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
+  disabled?: boolean;
+  themeButtonVariant: 'text-primary' | 'text-secondary' | 'text-danger';
+}>(({ disabled, themeButtonVariant, theme }) => {
+  const themeStyling = () => {
+    switch (themeButtonVariant) {
+      case 'text-primary':
+        return genTextVariantTextStyles(theme, 'primary', disabled);
+      case 'text-secondary':
+        return genTextVariantTextStyles(theme, 'secondary', disabled);
+      case 'text-danger':
+        return genTextVariantTextStyles(theme, 'danger', disabled);
+    }
+  };
+  return {
+    flexShrink: 1,
+    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant, // align text on Android
+    textAlign: 'center',
     ...themeStyling(),
   };
 });
@@ -201,10 +207,10 @@ const StyledButtonIconWrapper = styled(View)<{
 
 const StyledButtonIcon = styled(Icon)<{
   disabled?: boolean;
-  themeVariant: ThemeVariant;
-}>(({ disabled, themeVariant, theme }) => {
+  themeButtonVariant: ThemeVariant;
+}>(({ disabled, themeButtonVariant, theme }) => {
   const themeStyling = () => {
-    switch (themeVariant) {
+    switch (themeButtonVariant) {
       case 'filled-primary':
       case 'filled-secondary':
       case 'filled-danger':
@@ -235,5 +241,6 @@ export {
   StyledButtonText,
   StyledButtonIconWrapper,
   StyledButtonIcon,
+  StyledButtonTitleOfVariantText,
 };
 export type { Intent, ThemeVariant };

package/src/components/Button/UtilityButton/StyledUtilityButton.tsx

@@ -17,9 +17,7 @@ export const IconWrapper = styled(View)(({ theme }) => ({
   paddingRight: theme.__hd__.button.space.iconPadding,
 }));
 
-export const ButtonText = styled(Typography.Text)(({ theme }) => ({
+export const ButtonText = styled(Typography.Body)({
   flexShrink: 1,
   textAlign: 'center',
-  fontSize: theme.__hd__.button.fontSize.utility,
-  fontFamily: theme.__hd__.button.fonts.utility,
-}));
+});

package/src/components/Button/UtilityButton/__tests__/__snapshots__/index.spec.tsx.snap

@@ -59,25 +59,22 @@ exports[`UtilityButton snapshot has intent primary style 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"
   >
     Settings
   </Text>
@@ -143,25 +140,22 @@ exports[`UtilityButton snapshot has intent text style 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"
   >
     Settings
   </Text>

package/src/components/Button/__tests__/StyledButton.spec.tsx

@@ -24,7 +24,7 @@ describe('StyledButtonContainer', () => {
     ${'text-danger'}
   `('has $themeVariant style', ({ themeVariant }): void => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonContainer themeVariant={themeVariant}>
+      <StyledButtonContainer themeButtonVariant={themeVariant}>
         <Text>Title</Text>
       </StyledButtonContainer>
     );
@@ -34,7 +34,7 @@ describe('StyledButtonContainer', () => {
 
   it('renders disabled correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonContainer themeVariant="filled-primary" disabled>
+      <StyledButtonContainer themeButtonVariant="filled-primary" disabled>
         <Text>Title</Text>
       </StyledButtonContainer>
     );
@@ -57,7 +57,9 @@ describe('StyledButtonText', () => {
     ${'text-danger'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonText themeVariant={themeVariant}>Example</StyledButtonText>
+      <StyledButtonText themeButtonVariant={themeVariant}>
+        Example
+      </StyledButtonText>
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -65,7 +67,7 @@ describe('StyledButtonText', () => {
 
   it('renders disabled correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonText themeVariant="filled-primary" disabled>
+      <StyledButtonText themeButtonVariant="filled-primary" disabled>
         Example
       </StyledButtonText>
     );
@@ -102,7 +104,7 @@ describe('StyledButtonIcon', () => {
     ${'text-danger'}
   `('has $themeVariant style', ({ themeVariant }) => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonIcon icon="bell" themeVariant={themeVariant} />
+      <StyledButtonIcon icon="bell" themeButtonVariant={themeVariant} />
     );
 
     expect(toJSON()).toMatchSnapshot();
@@ -110,7 +112,11 @@ describe('StyledButtonIcon', () => {
 
   it('renders disabled correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledButtonIcon icon="bell" themeVariant="filled-primary" disabled />
+      <StyledButtonIcon
+        icon="bell"
+        themeButtonVariant="filled-primary"
+        disabled
+      />
     );
 
     expect(toJSON()).toMatchSnapshot();