@hero-design/rn 8.27.1 → 8.27.3

package/src/components/FAB/ActionGroup/__tests__/index.spec.tsx

@@ -10,7 +10,7 @@ describe('ActionGroup', () => {
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
-    const { toJSON, queryByTestId, queryByText } = renderWithTheme(
+    const { toJSON, getByTestId, getByText } = renderWithTheme(
       <ActionGroup
         fabTitle="Shout out"
         active={active}
@@ -39,19 +39,25 @@ describe('ActionGroup', () => {
 
     expect(toJSON()).toMatchSnapshot();
 
-    expect(queryByText('What would you like to create?')).toBeDefined();
-    expect(queryByText('Shout out')).toBeDefined();
-    expect(queryByTestId('speaker-action-item')).toBeDefined();
-    expect(queryByTestId('target-action-item')).toBeDefined();
-    expect(queryByTestId('plane-action-item')).toBeDefined();
-    expect(queryByTestId('health-bag-action-item')).toBeDefined();
+    expect(getByText('What would you like to create?')).toBeDefined();
+    expect(getByText('Shout out')).toBeDefined();
+    expect(getByTestId('speaker-action-item')).toBeDefined();
+    expect(getByTestId('target-action-item')).toBeDefined();
+    expect(getByTestId('plane-action-item')).toBeDefined();
+    expect(getByTestId('health-bag-action-item')).toBeDefined();
 
     if (active) {
       // verify action group appears
-      expect(queryByTestId('action-group')).toHaveStyle({
+      expect(getByTestId('action-group')).toHaveStyle({
         transform: [{ translateX: 0 }],
       });
-      expect(queryByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
+      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
+    } else {
+      // verify action group disappears
+      expect(getByTestId('action-group')).toHaveStyle({
+        transform: [{ translateX: 400 }],
+      });
+      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
     }
   });
 

package/src/components/FAB/ActionGroup/index.tsx

@@ -1,18 +1,16 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, Platform, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Animated, Easing, Modal, Platform, View } from 'react-native';
-import { useTheme } from '../../../theme';
-import type { IconName } from '../../Icon';
-import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
 import {
-  StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
   StyledFAB,
   StyledHeaderText,
-  StyledModalView,
+  StyledActionGroupContainer,
 } from './StyledActionGroup';
+import type { IconName } from '../../Icon';
+import type { ActionItemProps } from './ActionItem';
 
 type ActionItemsContainerProps = {
   style?: StyleProp<ViewStyle>;
@@ -76,7 +74,6 @@ export interface ActionGroupProps {
 
   testID?: string;
 }
-
 const ActionGroup = ({
   headerTitle,
   onPress,
@@ -87,48 +84,18 @@ const ActionGroup = ({
   fabTitle,
   fabIcon = 'add',
 }: ActionGroupProps) => {
-  const theme = useTheme();
-  // Internal state to control the animation of the action group
-  const [visible, setVisibility] = useState(active);
   const tranlateXAnimation = useRef<Animated.Value>(
     new Animated.Value(active ? 1 : 0)
   );
-
-  useEffect(() => {
-    if (active && !visible) {
-      setVisibility(true);
-    }
-  }, [active]);
-
   useEffect(() => {
-    if (active) {
-      const animation = Animated.timing(tranlateXAnimation.current, {
-        toValue: 1,
-        useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-        easing: Easing.inOut(Easing.cubic),
-      });
-
-      animation.start();
-    }
-  }, [active]);
-
-  //  Make sure the animation finishes running before closing the modal
-  const onInternalFABPress = useCallback(() => {
-    if (!onPress) {
-      return;
-    }
-
     const animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: 0,
+      toValue: active ? 1 : 0,
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
       easing: Easing.inOut(Easing.cubic),
     });
 
-    animation.start(() => {
-      setVisibility(false);
-      onPress();
-    });
-  }, [visible]);
+    animation.start();
+  }, [active]);
 
   const interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate(
     {
@@ -150,63 +117,34 @@ const ActionGroup = ({
 
   return (
     <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
-      <Modal
-        visible={visible}
-        transparent
-        statusBarTranslucent
-        animationType="none"
+      <StyledBackdrop
+        pointerEvents={active ? 'auto' : 'box-none'}
+        testID="back-drop"
+        style={{ opacity: interpolatedBackdropOpacityAnimation }}
+      />
+      <StyledActionGroupContainer
+        pointerEvents={active ? 'auto' : 'none'}
+        testID="action-group"
+        style={{
+          opacity: interpolatedActionGroupOpacityAnimation,
+          transform: [{ translateX: interpolatedTranlateXAnimation }],
+        }}
       >
-        <StyledBackdrop
-          style={{
-            opacity: interpolatedBackdropOpacityAnimation,
-          }}
-          testID="back-drop"
-          pointerEvents={active ? 'auto' : 'box-none'}
-        />
-
-        <StyledModalView>
-          <StyledActionGroupContainer
-            pointerEvents={active ? 'auto' : 'none'}
-            testID="action-group"
-            style={{
-              opacity: interpolatedActionGroupOpacityAnimation,
-              transform: [{ translateX: interpolatedTranlateXAnimation }],
-            }}
-          >
-            {!!headerTitle && (
-              <StyledHeaderText testID="header-text">
-                {headerTitle}
-              </StyledHeaderText>
-            )}
-            <ActionItemsListComponent items={items} />
-          </StyledActionGroupContainer>
-
-          {active && (
-            <StyledFAB
-              testID="fab"
-              icon={fabIcon}
-              onPress={onInternalFABPress}
-              animated
-              active={active}
-              title={fabTitle}
-              style={{
-                marginBottom: theme.__hd__.fab.space.internalFABMarginBottom,
-              }}
-            />
-          )}
-        </StyledModalView>
-      </Modal>
-
-      {!active && (
-        <StyledFAB
-          testID="fab"
-          icon={fabIcon}
-          onPress={onPress}
-          animated
-          active={active}
-          title={fabTitle}
-        />
-      )}
+        {!!headerTitle && (
+          <StyledHeaderText testID="header-text">
+            {headerTitle}
+          </StyledHeaderText>
+        )}
+        <ActionItemsListComponent items={items} />
+      </StyledActionGroupContainer>
+      <StyledFAB
+        testID="fab"
+        icon={fabIcon}
+        onPress={onPress}
+        animated
+        active={active}
+        title={fabTitle}
+      />
     </StyledContainer>
   );
 };

package/src/components/List/__tests__/__snapshots__/BasicListItem.spec.tsx.snap

@@ -96,7 +96,7 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
             "letterSpacing": 0.36,
-            "lineHeight": 20,
+            "lineHeight": 16,
           },
           undefined,
         ]
@@ -234,7 +234,7 @@ exports[`BasicListItem when suffix and prefix are react element renders correctl
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
             "letterSpacing": 0.36,
-            "lineHeight": 20,
+            "lineHeight": 16,
           },
           undefined,
         ]

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -173,7 +173,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
                 "letterSpacing": 0.36,
-                "lineHeight": 20,
+                "lineHeight": 16,
               },
               undefined,
             ]
@@ -421,7 +421,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
                 "letterSpacing": 0.36,
-                "lineHeight": 20,
+                "lineHeight": 16,
               },
               undefined,
             ]
@@ -762,7 +762,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
                 "letterSpacing": 0.36,
-                "lineHeight": 20,
+                "lineHeight": 16,
               },
               undefined,
             ]

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -187,14 +187,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1486,7 +1486,7 @@ Array [
                     "left": 16,
                     "paddingHorizontal": 4,
                     "position": "absolute",
-                    "top": -5,
+                    "top": -4,
                     "zIndex": 1,
                   },
                   Object {
@@ -1587,14 +1587,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1719,7 +1719,7 @@ Array [
                     "left": 16,
                     "paddingHorizontal": 4,
                     "position": "absolute",
-                    "top": -5,
+                    "top": -4,
                     "zIndex": 1,
                   },
                   Object {
@@ -1820,14 +1820,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -3299,7 +3299,7 @@ Array [
                     "left": 16,
                     "paddingHorizontal": 4,
                     "position": "absolute",
-                    "top": -5,
+                    "top": -4,
                     "zIndex": 1,
                   },
                   Object {
@@ -3412,14 +3412,14 @@ Array [
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 16,
+                      "fontSize": 24,
                     },
                     undefined,
                   ]
                 }
                 testID="input-suffix"
                 themeIntent="text"
-                themeSize="xsmall"
+                themeSize="medium"
               />
             </View>
           </View>
@@ -3545,7 +3545,7 @@ Array [
                     "left": 16,
                     "paddingHorizontal": 4,
                     "position": "absolute",
-                    "top": -5,
+                    "top": -4,
                     "zIndex": 1,
                   },
                   Object {
@@ -3646,14 +3646,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -186,14 +186,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1408,7 +1408,7 @@ Array [
                     "left": 16,
                     "paddingHorizontal": 4,
                     "position": "absolute",
-                    "top": -5,
+                    "top": -4,
                     "zIndex": 1,
                   },
                   Object {
@@ -1509,14 +1509,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1641,7 +1641,7 @@ Array [
                     "left": 16,
                     "paddingHorizontal": 4,
                     "position": "absolute",
-                    "top": -5,
+                    "top": -4,
                     "zIndex": 1,
                   },
                   Object {
@@ -1742,14 +1742,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -3090,7 +3090,7 @@ Array [
                     "left": 16,
                     "paddingHorizontal": 4,
                     "position": "absolute",
-                    "top": -5,
+                    "top": -4,
                     "zIndex": 1,
                   },
                   Object {
@@ -3203,14 +3203,14 @@ Array [
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 16,
+                      "fontSize": 24,
                     },
                     undefined,
                   ]
                 }
                 testID="input-suffix"
                 themeIntent="text"
-                themeSize="xsmall"
+                themeSize="medium"
               />
             </View>
           </View>
@@ -3336,7 +3336,7 @@ Array [
                     "left": 16,
                     "paddingHorizontal": 4,
                     "position": "absolute",
-                    "top": -5,
+                    "top": -4,
                     "zIndex": 1,
                   },
                   Object {
@@ -3437,14 +3437,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View

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

@@ -651,7 +651,7 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 12,
                               "includeFontPadding": false,
-                              "lineHeight": 20,
+                              "lineHeight": 16,
                               "textAlign": "center",
                               "textAlignVertical": "center",
                             },
@@ -1479,7 +1479,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 12,
                               "includeFontPadding": false,
-                              "lineHeight": 20,
+                              "lineHeight": 16,
                               "textAlign": "center",
                               "textAlignVertical": "center",
                             },
@@ -2307,7 +2307,7 @@ exports[`useIsFocused renders correctly 1`] = `
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 12,
                               "includeFontPadding": false,
-                              "lineHeight": 20,
+                              "lineHeight": 16,
                               "textAlign": "center",
                               "textAlignVertical": "center",
                             },

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

@@ -560,7 +560,7 @@ exports[`ScrollableTabsHeader renders correctly 1`] = `
                             "fontFamily": "BeVietnamPro-SemiBold",
                             "fontSize": 12,
                             "includeFontPadding": false,
-                            "lineHeight": 20,
+                            "lineHeight": 16,
                             "textAlign": "center",
                             "textAlignVertical": "center",
                           },

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

@@ -53,7 +53,7 @@ exports[`TabWithBadge renders correctly with counter badge config 1`] = `
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 12,
               "includeFontPadding": false,
-              "lineHeight": 20,
+              "lineHeight": 16,
               "textAlign": "center",
               "textAlignVertical": "center",
             },

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

@@ -402,7 +402,7 @@ exports[`Tabs renders correctly 1`] = `
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 12,
                           "includeFontPadding": false,
-                          "lineHeight": 20,
+                          "lineHeight": 16,
                           "textAlign": "center",
                           "textAlignVertical": "center",
                         },
@@ -997,7 +997,7 @@ exports[`useIsFocused renders correctly 1`] = `
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 12,
                           "includeFontPadding": false,
-                          "lineHeight": 20,
+                          "lineHeight": 16,
                           "textAlign": "center",
                           "textAlignVertical": "center",
                         },
@@ -1592,7 +1592,7 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 12,
                           "includeFontPadding": false,
-                          "lineHeight": 20,
+                          "lineHeight": 16,
                           "textAlign": "center",
                           "textAlignVertical": "center",
                         },

package/src/components/Tag/StyledTag.tsx

@@ -56,6 +56,7 @@ const StyledText = styled(Typography.Text)<{
   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',