@hero-design/rn 8.22.0-alpha.0 → 8.22.0

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

@@ -494,95 +494,116 @@ exports[`ActionGroup has active false 1`] = `
     </View>
   </View>
   <View
-    accessible={true}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
-        },
+        Object {},
         Array [
           Object {
-            "alignSelf": "flex-end",
-            "marginRight": 24,
-            "marginTop": 24,
+            "shadowColor": "#001f23",
+            "shadowOffset": Object {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 8,
           },
-          undefined,
+          Array [
+            Object {
+              "alignSelf": "flex-end",
+              "marginRight": 24,
+              "marginTop": 24,
+            },
+            undefined,
+          ],
         ],
       ]
     }
     testID="fab"
   >
-    <HeroIcon
-      name="add"
+    <View
+      accessible={true}
+      focusable={false}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         Array [
           Object {
-            "color": "#001f23",
-            "fontSize": 16,
+            "alignItems": "center",
+            "alignSelf": "flex-start",
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "elevation": 2,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "paddingHorizontal": 16,
+            "paddingVertical": 16,
           },
-          Array [
-            Object {
-              "color": "#ffffff",
-              "lineHeight": 24,
-              "textAlign": "center",
-              "textAlignVertical": "center",
-            },
-            undefined,
-          ],
+          undefined,
         ]
       }
-      testID="styled-fab-icon"
-      themeIntent="text"
-      themeSize="xsmall"
-    />
-    <Text
-      allowFontScaling={false}
-      style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
-          },
+    >
+      <HeroIcon
+        name="add"
+        style={
           Array [
             Object {
-              "color": "#ffffff",
-              "fontFamily": "BeVietnamPro-SemiBold",
+              "color": "#001f23",
               "fontSize": 16,
-              "lineHeight": 24,
-              "marginHorizontal": 8,
-              "textAlign": "center",
-              "textAlignVertical": "center",
             },
-            undefined,
-          ],
-        ]
-      }
-      themeFontSize="medium"
-      themeFontWeight="regular"
-      themeIntent="body"
-      themeTypeface="neutral"
-    >
-      Shout out
-    </Text>
+            Array [
+              Object {
+                "color": "#ffffff",
+                "lineHeight": 24,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="styled-fab-icon"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+      <Text
+        allowFontScaling={false}
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 16,
+                "lineHeight": 24,
+                "marginHorizontal": 8,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        Shout out
+      </Text>
+    </View>
   </View>
 </View>
 `;
@@ -1081,95 +1102,116 @@ exports[`ActionGroup has active true 1`] = `
     </View>
   </View>
   <View
-    accessible={true}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
       Array [
-        Object {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
-        },
+        Object {},
         Array [
           Object {
-            "alignSelf": "flex-end",
-            "marginRight": 24,
-            "marginTop": 24,
+            "shadowColor": "#001f23",
+            "shadowOffset": Object {
+              "height": 2,
+              "width": 0,
+            },
+            "shadowOpacity": 0.12,
+            "shadowRadius": 8,
           },
-          undefined,
+          Array [
+            Object {
+              "alignSelf": "flex-end",
+              "marginRight": 24,
+              "marginTop": 24,
+            },
+            undefined,
+          ],
         ],
       ]
     }
     testID="fab"
   >
-    <HeroIcon
-      name="add"
+    <View
+      accessible={true}
+      focusable={false}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         Array [
           Object {
-            "color": "#001f23",
-            "fontSize": 16,
+            "alignItems": "center",
+            "alignSelf": "flex-start",
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "elevation": 2,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "paddingHorizontal": 16,
+            "paddingVertical": 16,
           },
-          Array [
-            Object {
-              "color": "#ffffff",
-              "lineHeight": 24,
-              "textAlign": "center",
-              "textAlignVertical": "center",
-            },
-            undefined,
-          ],
+          undefined,
         ]
       }
-      testID="styled-fab-icon"
-      themeIntent="text"
-      themeSize="xsmall"
-    />
-    <Text
-      allowFontScaling={false}
-      style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
-          },
+    >
+      <HeroIcon
+        name="add"
+        style={
           Array [
             Object {
-              "color": "#ffffff",
-              "fontFamily": "BeVietnamPro-SemiBold",
+              "color": "#001f23",
               "fontSize": 16,
-              "lineHeight": 24,
-              "marginHorizontal": 8,
-              "textAlign": "center",
-              "textAlignVertical": "center",
             },
-            undefined,
-          ],
-        ]
-      }
-      themeFontSize="medium"
-      themeFontWeight="regular"
-      themeIntent="body"
-      themeTypeface="neutral"
-    >
-      Shout out
-    </Text>
+            Array [
+              Object {
+                "color": "#ffffff",
+                "lineHeight": 24,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="styled-fab-icon"
+        themeIntent="text"
+        themeSize="xsmall"
+      />
+      <Text
+        allowFontScaling={false}
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 16,
+                "lineHeight": 24,
+                "marginHorizontal": 8,
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        Shout out
+      </Text>
+    </View>
   </View>
 </View>
 `;

package/src/components/FAB/FAB.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { AnimatedFABIcon } from './AnimatedFABIcon';
-import { StyledFABContainer, StyledFABIcon, StyledFABText } from './StyledFAB';
+import {
+  StyledFAB,
+  StyledFABIcon,
+  StyledFABText,
+  StyledFABContainer,
+} from './StyledFAB';
 import type { IconName } from '../Icon';
 import { useTheme } from '../../theme';
 
@@ -84,17 +89,17 @@ const FAB = ({
   const isIconOnly = !title;
   const theme = useTheme();
   return (
-    <StyledFABContainer
-      underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
-      testID={testID}
-      style={style}
-      onPress={onPress}
-    >
-      {isIconOnly ? (
-        <IconOnlyContent animated={animated} active={active} icon={icon} />
-      ) : (
-        <IconWithTextContent icon={icon} title={title} />
-      )}
+    <StyledFABContainer style={style} testID={testID}>
+      <StyledFAB
+        underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
+        onPress={onPress}
+      >
+        {isIconOnly ? (
+          <IconOnlyContent animated={animated} active={active} icon={icon} />
+        ) : (
+          <IconWithTextContent icon={icon} title={title} />
+        )}
+      </StyledFAB>
     </StyledFABContainer>
   );
 };

package/src/components/FAB/StyledFAB.tsx

@@ -1,11 +1,12 @@
-import { TouchableHighlight } from 'react-native';
 import styled from '@emotion/native';
 import type { TextProps, TouchableHighlightProps } from 'react-native';
-import Icon from '../Icon';
+import { TouchableHighlight } from 'react-native';
+import Box from '../Box';
 import type { IconProps } from '../Icon';
+import Icon from '../Icon';
 import Typography from '../Typography';
 
-const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>(
+const StyledFAB = styled(TouchableHighlight)<TouchableHighlightProps>(
   ({ theme }) => ({
     backgroundColor: theme.__hd__.fab.colors.buttonBackground,
     borderRadius: theme.radii.rounded,
@@ -16,6 +17,7 @@ const StyledFABContainer = styled(TouchableHighlight)<TouchableHighlightProps>(
     paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
     paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
     flexDirection: 'row',
+    elevation: theme.__hd__.fab.shadows.elevation,
   })
 );
 
@@ -36,4 +38,11 @@ const StyledFABText = styled(Typography.Text)<TextProps>(({ theme }) => ({
   marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal,
 }));
 
-export { StyledFABContainer, StyledFABIcon, StyledFABText };
+const StyledFABContainer = styled(Box)(({ theme }) => ({
+  shadowColor: theme.__hd__.fab.colors.shadow,
+  shadowOffset: theme.__hd__.fab.shadows.offset,
+  shadowRadius: theme.__hd__.fab.shadows.radius,
+  shadowOpacity: theme.__hd__.fab.shadows.opacity,
+}));
+
+export { StyledFAB, StyledFABIcon, StyledFABText, StyledFABContainer };

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -2,29 +2,21 @@
 
 exports[`StyledFABContainer renders correctly 1`] = `
 <View
-  accessible={true}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {
-        "alignItems": "center",
-        "alignSelf": "flex-start",
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "flexDirection": "row",
-        "justifyContent": "center",
-        "overflow": "hidden",
-        "paddingHorizontal": 16,
-        "paddingVertical": 16,
-      },
-      undefined,
+      Object {},
+      Array [
+        Object {
+          "shadowColor": "#001f23",
+          "shadowOffset": Object {
+            "height": 2,
+            "width": 0,
+          },
+          "shadowOpacity": 0.12,
+          "shadowRadius": 8,
+        },
+        undefined,
+      ],
     ]
   }
 >