@hero-design/rn 8.25.1 → 8.25.2

package/src/components/FAB/FAB.tsx

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

package/src/components/FAB/StyledFAB.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/native';
 import type { TextProps, TouchableHighlightProps } from 'react-native';
 import { TouchableHighlight } from 'react-native';
-import Box from '../Box';
 import type { IconProps } from '../Icon';
 import Icon from '../Icon';
 import Typography from '../Typography';
@@ -12,12 +11,15 @@ const StyledFAB = styled(TouchableHighlight)<TouchableHighlightProps>(
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
     justifyContent: 'center',
-    overflow: 'hidden',
     alignSelf: 'flex-start',
     paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
     paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
     flexDirection: 'row',
     elevation: theme.__hd__.fab.shadows.elevation,
+    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowOffset: theme.__hd__.fab.shadows.offset,
+    shadowRadius: theme.__hd__.fab.shadows.radius,
+    shadowOpacity: theme.__hd__.fab.shadows.opacity,
   })
 );
 
@@ -38,11 +40,4 @@ const StyledFABText = styled(Typography.Text)<TextProps>(({ theme }) => ({
   marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal,
 }));
 
-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 };
+export { StyledFAB, StyledFABIcon, StyledFABText };

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { Typography } from '../../../index';
-import { StyledFABContainer, StyledFABIcon } from '../StyledFAB';
+import { StyledFAB, StyledFABIcon } from '../StyledFAB';
 
-describe('StyledFABContainer', () => {
+describe('StyledFAB', () => {
   it('renders correctly', () => {
     const { toJSON } = renderWithTheme(
-      <StyledFABContainer>
+      <StyledFAB>
         <Typography.Text> button </Typography.Text>
-      </StyledFABContainer>
+      </StyledFAB>
     );
 
     expect(toJSON()).toMatchSnapshot();

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

@@ -1,22 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledFABContainer renders correctly 1`] = `
+exports[`StyledFAB 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 {},
-      Array [
-        Object {
-          "shadowColor": "#001f23",
-          "shadowOffset": Object {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 8,
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "elevation": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 16,
+        "shadowColor": "#001f23",
+        "shadowOffset": Object {
+          "height": 2,
+          "width": 0,
         },
-        undefined,
-      ],
+        "shadowOpacity": 0.12,
+        "shadowRadius": 8,
+      },
+      undefined,
     ]
   }
 >

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

@@ -2,53 +2,115 @@
 
 exports[`FAB when animated is false renders StyledFABIcon 1`] = `
 <View
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {},
-      Array [
-        Object {
-          "shadowColor": "#001f23",
-          "shadowOffset": Object {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 8,
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "elevation": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 16,
+        "shadowColor": "#001f23",
+        "shadowOffset": Object {
+          "height": 2,
+          "width": 0,
         },
-        Object {
-          "backgroundColor": "#001f23",
-        },
-      ],
+        "shadowOpacity": 0.12,
+        "shadowRadius": 8,
+      },
+      Object {
+        "backgroundColor": "#001f23",
+      },
     ]
   }
 >
-  <View
-    accessible={true}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+  <HeroIcon
+    name="add"
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "elevation": 2,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
+          "color": "#001f23",
+          "fontSize": 24,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#ffffff",
+            "lineHeight": 24,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
       ]
     }
+    testID="styled-fab-icon"
+    themeIntent="text"
+    themeSize="medium"
+  />
+</View>
+`;
+
+exports[`FAB when animated is true renders animatedFABIcon 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,
+        "elevation": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 16,
+        "shadowColor": "#001f23",
+        "shadowOffset": Object {
+          "height": 2,
+          "width": 0,
+        },
+        "shadowOpacity": 0.12,
+        "shadowRadius": 8,
+      },
+      Object {
+        "backgroundColor": "#001f23",
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "transform": Array [
+          Object {
+            "rotate": "0deg",
+          },
+        ],
+      }
+    }
   >
     <HeroIcon
       name="add"
@@ -65,11 +127,11 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
               "textAlign": "center",
               "textAlignVertical": "center",
             },
-            undefined,
+            Object {},
           ],
         ]
       }
-      testID="styled-fab-icon"
+      testID="animated-fab-icon"
       themeIntent="text"
       themeSize="medium"
     />
@@ -77,201 +139,97 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
 </View>
 `;
 
-exports[`FAB when animated is true renders animatedFABIcon 1`] = `
+exports[`FAB when title has value 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 {},
-      Array [
-        Object {
-          "shadowColor": "#001f23",
-          "shadowOffset": Object {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 8,
-        },
-        Object {
-          "backgroundColor": "#001f23",
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "elevation": 2,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 16,
+        "shadowColor": "#001f23",
+        "shadowOffset": Object {
+          "height": 2,
+          "width": 0,
         },
-      ],
+        "shadowOpacity": 0.12,
+        "shadowRadius": 8,
+      },
+      Object {
+        "backgroundColor": "#001f23",
+      },
     ]
   }
 >
-  <View
-    accessible={true}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+  <HeroIcon
+    name="pencil"
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "elevation": 2,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
+          "color": "#001f23",
+          "fontSize": 16,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#ffffff",
+            "lineHeight": 24,
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
       ]
     }
-  >
-    <View
-      collapsable={false}
-      style={
-        Object {
-          "transform": Array [
-            Object {
-              "rotate": "0deg",
-            },
-          ],
-        }
-      }
-    >
-      <HeroIcon
-        name="add"
-        style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontSize": 24,
-            },
-            Array [
-              Object {
-                "color": "#ffffff",
-                "lineHeight": 24,
-                "textAlign": "center",
-                "textAlignVertical": "center",
-              },
-              Object {},
-            ],
-          ]
-        }
-        testID="animated-fab-icon"
-        themeIntent="text"
-        themeSize="medium"
-      />
-    </View>
-  </View>
-</View>
-`;
-
-exports[`FAB when title has value renders correctly 1`] = `
-<View
-  style={
-    Array [
-      Object {},
-      Array [
-        Object {
-          "shadowColor": "#001f23",
-          "shadowOffset": Object {
-            "height": 2,
-            "width": 0,
-          },
-          "shadowOpacity": 0.12,
-          "shadowRadius": 8,
-        },
-        Object {
-          "backgroundColor": "#001f23",
-        },
-      ],
-    ]
-  }
->
-  <View
-    accessible={true}
-    focusable={false}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    testID="styled-fab-icon"
+    themeIntent="text"
+    themeSize="xsmall"
+  />
+  <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "backgroundColor": "#401960",
-          "borderRadius": 999,
-          "elevation": 2,
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "paddingHorizontal": 16,
-          "paddingVertical": 16,
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
         },
-        undefined,
-      ]
-    }
-  >
-    <HeroIcon
-      name="pencil"
-      style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 16,
+            "lineHeight": 24,
+            "marginHorizontal": 8,
+            "textAlign": "center",
+            "textAlignVertical": "center",
           },
-          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>
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Shout out
+  </Text>
 </View>
 `;