@hero-design/rn 8.80.0-alpha.1 → 8.80.1

package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap

@@ -772,6 +772,15 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -781,6 +790,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -794,7 +804,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -803,6 +813,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGr
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -1675,6 +1686,15 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
     </View>
   </RCTScrollView>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -1684,6 +1704,7 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -1697,13 +1718,14 @@ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB corr
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -1934,6 +1956,15 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -1943,6 +1974,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -1956,7 +1988,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -1965,6 +1997,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders Action
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -2177,6 +2210,15 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
     </View>
   </RCTScrollView>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -2186,6 +2228,7 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -2199,13 +2242,14 @@ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB co
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {
@@ -2743,6 +2787,15 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
       style={{}}
     >
       <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
         accessibilityValue={
           {
             "max": undefined,
@@ -2752,6 +2805,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
           }
         }
         accessible={true}
+        collapsable={false}
         focusable={false}
         onClick={[Function]}
         onLayout={[Function]}
@@ -2765,7 +2819,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
           {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#401960",
+            "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
             "elevation": 3,
@@ -2774,6 +2828,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders Actio
             "justifyContent": "center",
             "marginRight": 24,
             "marginTop": 24,
+            "opacity": 1,
             "padding": 20,
             "shadowColor": "#001f23",
             "shadowOffset": {
@@ -3293,6 +3348,15 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
     </View>
   </RCTScrollView>
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
     accessibilityValue={
       {
         "max": undefined,
@@ -3302,6 +3366,7 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
       }
     }
     accessible={true}
+    collapsable={false}
     focusable={false}
     onClick={[Function]}
     onLayout={[Function]}
@@ -3315,13 +3380,14 @@ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB c
       {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#000000",
         "borderRadius": 999,
         "bottom": undefined,
         "elevation": 3,
         "flexDirection": "row",
         "height": 64,
         "justifyContent": "center",
+        "opacity": 1,
         "padding": 20,
         "shadowColor": "#001f23",
         "shadowOffset": {

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

@@ -12,7 +12,6 @@ import {
   StyledActionItemText,
   StyledIcon,
 } from './StyledActionItem';
-import { useTheme } from '../../../theme';
 import { StyledIconContainer } from '../StyledFAB';
 
 export interface ActionItemProps {
@@ -38,7 +37,6 @@ const ActionItem = ({
   index,
   active = false,
 }: AnimatedActionItemProps) => {
-  const theme = useTheme();
   const animatedValue = React.useRef(new Animated.Value(0));
 
   const translateY = animatedValue.current.interpolate({
@@ -59,7 +57,7 @@ const ActionItem = ({
   return (
     <Animated.View style={{ transform: [{ translateY }] }}>
       <StyledActionItem
-        underlayColor={theme.__hd__.fab.colors.actionItemPressedBackground}
+        activeOpacity={0.8}
         style={style}
         onPress={onPress}
         testID={testID}

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

@@ -45,7 +45,7 @@ const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
   right: 0,
   top: 0,
   bottom: 0,
-  opacity: 0.25,
+  opacity: 0.8,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 

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

@@ -1,11 +1,11 @@
-import { TouchableHighlight } from 'react-native';
+import { TouchableOpacity } from 'react-native';
 import styled from '@emotion/native';
 import type { TouchableOpacityProps } from 'react-native';
 import Typography from '../../Typography';
 import Icon from '../../Icon';
 import type { IconProps } from '../../Icon';
 
-const StyledActionItem = styled(TouchableHighlight)(({ theme }) => ({
+const StyledActionItem = styled(TouchableOpacity)(({ theme }) => ({
   padding: theme.__hd__.fab.space.actionItemPadding,
   margin: theme.__hd__.fab.space.actionItemMargin,
   marginRight: theme.__hd__.fab.space.actionItemMarginRight,