@hero-design/rn 8.32.1 → 8.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.32.1",
+  "version": "8.33.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.32.1",
+    "@hero-design/colors": "8.33.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.32.1",
+    "@hero-design/eslint-plugin": "8.33.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,10 +61,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.32.1",
+    "eslint-config-hd": "8.33.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.32.1",
+    "prettier-config-hd": "8.33.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Button/LoadingIndicator/StyledLoadingIndicator.tsx

@@ -29,7 +29,8 @@ const StyledLoadingIndicatorWrapper = styled(View)<ViewProps>(({ theme }) => ({
   flexDirection: 'row',
   justifyContent: 'center',
   alignItems: 'center',
-  paddingVertical: theme.space.xxsmall,
+  paddingVertical:
+    theme.__hd__.button.space.loadingIndicatorWrapperVerticalPadding,
 }));
 
 const StyledLoadingDot = styled(View)<{

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

@@ -9,7 +9,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is basic-transpare
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 2,
+        "paddingVertical": 1,
       },
       Object {},
     ]
@@ -123,7 +123,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-danger 1
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 2,
+        "paddingVertical": 1,
       },
       Object {},
     ]
@@ -237,7 +237,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-primary
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 2,
+        "paddingVertical": 1,
       },
       Object {},
     ]
@@ -351,7 +351,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 2,
+        "paddingVertical": 1,
       },
       Object {},
     ]
@@ -465,7 +465,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 2,
+        "paddingVertical": 1,
       },
       Object {},
     ]
@@ -579,7 +579,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 2,
+        "paddingVertical": 1,
       },
       Object {},
     ]
@@ -693,7 +693,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 2,
+        "paddingVertical": 1,
       },
       Object {},
     ]
@@ -807,7 +807,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 2,
+        "paddingVertical": 1,
       },
       Object {},
     ]
@@ -921,7 +921,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 2,
+        "paddingVertical": 1,
       },
       Object {},
     ]
@@ -1035,7 +1035,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
         "alignItems": "center",
         "flexDirection": "row",
         "justifyContent": "center",
-        "paddingVertical": 2,
+        "paddingVertical": 1,
       },
       Object {},
     ]

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

@@ -107,7 +107,7 @@ exports[`Button renders correctly 2`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 2,
+          "paddingVertical": 1,
         },
         Object {},
       ]
@@ -393,7 +393,7 @@ exports[`Button renders correctly 5`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 2,
+          "paddingVertical": 1,
         },
         Object {},
       ]
@@ -677,7 +677,7 @@ exports[`Button renders correctly 8`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 2,
+          "paddingVertical": 1,
         },
         Object {},
       ]
@@ -959,7 +959,7 @@ exports[`Button renders correctly 11`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 2,
+          "paddingVertical": 1,
         },
         Object {},
       ]
@@ -1241,7 +1241,7 @@ exports[`Button renders correctly 14`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 2,
+          "paddingVertical": 1,
         },
         Object {},
       ]
@@ -1456,7 +1456,7 @@ exports[`Button renders loading icon 1`] = `
           "alignItems": "center",
           "flexDirection": "row",
           "justifyContent": "center",
-          "paddingVertical": 2,
+          "paddingVertical": 1,
         },
         Object {},
       ]

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

@@ -1,6 +1,11 @@
 import React from 'react';
 import type { ComponentProps } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import {
+  Animated,
+  Platform,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 import Icon from '../../Icon';
 import {
   StyledActionItem,
@@ -17,6 +22,8 @@ export interface ActionItemProps {
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
   key?: string;
+  index: number;
+  active?: boolean;
 }
 const ActionItem = ({
   icon,
@@ -24,23 +31,41 @@ const ActionItem = ({
   onPress,
   style,
   testID,
+  index,
+  active = false,
 }: ActionItemProps) => {
   const theme = useTheme();
+  const animatedValue = React.useRef(new Animated.Value(0));
+
+  const translateY = animatedValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [50, 0],
+  });
+
+  React.useEffect(() => {
+    Animated.spring(animatedValue.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: Platform.OS !== 'web',
+      delay: index * 20,
+    }).start();
+  }, [active, index]);
 
   return (
-    <StyledActionItem
-      underlayColor={theme.__hd__.fab.colors.actionItemPressedBackground}
-      style={style}
-      onPress={onPress}
-      testID={testID}
-    >
-      <>
-        <StyledIconContainer>
-          <StyledIcon size="xsmall" icon={icon} />
-        </StyledIconContainer>
-        <StyledActionItemText>{title}</StyledActionItemText>
-      </>
-    </StyledActionItem>
+    <Animated.View style={{ transform: [{ translateY }] }}>
+      <StyledActionItem
+        underlayColor={theme.__hd__.fab.colors.actionItemPressedBackground}
+        style={style}
+        onPress={onPress}
+        testID={testID}
+      >
+        <>
+          <StyledIconContainer>
+            <StyledIcon size="xsmall" icon={icon} />
+          </StyledIconContainer>
+          <StyledActionItemText>{title}</StyledActionItemText>
+        </>
+      </StyledActionItem>
+    </Animated.View>
   );
 };