@hero-design/rn 8.36.2 → 8.37.0

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

@@ -10,40 +10,37 @@ describe('ActionGroup', () => {
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
-    const { toJSON, getByTestId, getByText, queryByTestId, queryByText } =
-      renderWithTheme(
-        <ActionGroup
-          fabTitle="Shout out"
-          active={active}
-          headerTitle="What would you like to create?"
-          items={[
-            {
-              icon: 'speaker',
-              title: 'Give shout out',
-              testID: 'speaker-action-item',
-            },
-            { icon: 'target', title: 'Goal', testID: 'target-action-item' },
-            {
-              icon: 'plane',
-              title: 'Leave request',
-              testID: 'plane-action-item',
-            },
-            {
-              icon: 'health-bag',
-              title: 'Safety incident',
-              testID: 'health-bag-action-item',
-            },
-            { icon: 'clock', title: 'Timesheets', testID: 'clock-action-item' },
-          ]}
-        />
-      );
+    const { toJSON, getByTestId, queryByTestId } = renderWithTheme(
+      <ActionGroup
+        fabTitle="Shout out"
+        active={active}
+        items={[
+          {
+            icon: 'speaker',
+            title: 'Give shout out',
+            testID: 'speaker-action-item',
+          },
+          { icon: 'target', title: 'Goal', testID: 'target-action-item' },
+          {
+            icon: 'plane',
+            title: 'Leave request',
+            testID: 'plane-action-item',
+          },
+          {
+            icon: 'health-bag',
+            title: 'Safety incident',
+            testID: 'health-bag-action-item',
+          },
+          { icon: 'clock', title: 'Timesheets', testID: 'clock-action-item' },
+        ]}
+      />
+    );
 
     expect(toJSON()).toMatchSnapshot();
 
     if (active) {
       // verify backdrop appears
       expect(queryByTestId('back-drop')).toBeDefined();
-      expect(getByText('What would you like to create?')).toBeDefined();
       expect(getByTestId('speaker-action-item')).toBeDefined();
       expect(getByTestId('target-action-item')).toBeDefined();
       expect(getByTestId('plane-action-item')).toBeDefined();
@@ -51,7 +48,6 @@ describe('ActionGroup', () => {
     } else {
       // verify backdrop disappears
       expect(queryByTestId('back-drop')).toBeNull();
-      expect(queryByText('What would you like to create?')).toBeNull();
     }
   });
 
@@ -74,4 +70,15 @@ describe('ActionGroup', () => {
       expect(onPressSpy).toBeCalledTimes(1);
     });
   });
+
+  describe('when user presses backdrop', () => {
+    it('calls onBackdropPress when active = true', () => {
+      const onBackdropPressSpy = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <ActionGroup onBackdropPress={onBackdropPressSpy} active />
+      );
+      fireEvent(getByTestId('back-drop'), 'press');
+      expect(onBackdropPressSpy).toBeCalledTimes(1);
+    });
+  });
 });

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

@@ -10,11 +10,11 @@ import {
   StyledContainer,
   StyledContainerInModal,
   StyledFAB,
-  StyledHeaderText,
 } from './StyledActionGroup';
 
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
+import { useDeprecation } from '../../../utils/hooks';
 
 export type ActionGroupHandles = {
   showFAB: () => void;
@@ -24,6 +24,7 @@ export type ActionGroupHandles = {
 
 export interface ActionGroupProps {
   /**
+   * @deprecated headerTitle will be removed in the next major release.
    * Title of the action group header.
    */
   headerTitle?: string;
@@ -32,7 +33,10 @@ export interface ActionGroupProps {
    * This function is called on pressing the FAB button.
    * */
   onPress?: () => void;
-
+  /**
+   * This function is called on pressing the FAB backdrop.
+   * */
+  onBackdropPress?: () => void;
   /**
    * Specify if the FAB button is in active state and the action group is shown.
    * */
@@ -74,20 +78,20 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       items,
       testID,
       fabTitle,
+      onBackdropPress,
       fabIcon = 'add',
     },
     ref
   ) => {
+    useDeprecation(
+      `FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.`,
+      headerTitle !== undefined
+    );
+
     const fabRef = useRef<FABHandles>(null);
     const tranlateXAnimation = useRef<Animated.Value>(
       new Animated.Value(active ? 1 : 0)
     );
-    const titleTranslateYValue = React.useRef(new Animated.Value(0));
-
-    const titleTranslateY = titleTranslateYValue.current.interpolate({
-      inputRange: [0, 1],
-      outputRange: [50, 0],
-    });
 
     React.useImperativeHandle(
       ref,
@@ -100,16 +104,10 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
     );
 
     React.useEffect(() => {
-      Animated.parallel([
-        Animated.spring(tranlateXAnimation.current, {
-          toValue: active ? 1 : 0,
-          useNativeDriver: Platform.OS !== 'web',
-        }),
-        Animated.spring(titleTranslateYValue.current, {
-          toValue: active ? 1 : 0,
-          useNativeDriver: Platform.OS !== 'web',
-        }),
-      ]).start();
+      Animated.spring(tranlateXAnimation.current, {
+        toValue: active ? 1 : 0,
+        useNativeDriver: Platform.OS !== 'web',
+      }).start();
     }, [active]);
     const interpolatedActionGroupOpacityAnimation =
       tranlateXAnimation.current.interpolate({
@@ -148,23 +146,14 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
           statusBarTranslucent
         >
           <StyledContainerInModal testID={testID} style={[style]}>
-            <StyledBackdrop testID="back-drop" />
+            <StyledBackdrop testID="back-drop" onPress={onBackdropPress} />
             <StyledActionGroupContainer
               testID="action-group"
+              pointerEvents="box-none"
               style={{
                 opacity: interpolatedActionGroupOpacityAnimation,
               }}
             >
-              {!!headerTitle && (
-                <Animated.View
-                  style={{ transform: [{ translateY: titleTranslateY }] }}
-                >
-                  <StyledHeaderText testID="header-text" level="h4">
-                    {headerTitle}
-                  </StyledHeaderText>
-                </Animated.View>
-              )}
-
               <Box style={[style, { paddingBottom: 0 }]}>
                 {items?.map((itemProp, index) => (
                   <ActionItem

package/src/components/FAB/StyledFAB.tsx

@@ -21,7 +21,7 @@ const StyledFAB = styled(TouchableHighlight)<
   padding: theme.__hd__.fab.space.containerPadding,
   flexDirection: 'row',
   elevation: theme.__hd__.fab.shadows.elevation,
-  shadowColor: theme.__hd__.fab.colors.shadow,
+  shadowColor: theme.__hd__.fab.shadows.color,
   shadowOffset: theme.__hd__.fab.shadows.offset,
   shadowRadius: theme.__hd__.fab.shadows.radius,
   shadowOpacity: theme.__hd__.fab.shadows.opacity,

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

@@ -18,7 +18,7 @@ exports[`StyledFAB renders correctly 1`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#401960",
         "borderRadius": 999,
-        "elevation": 2,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
         "padding": 20,
@@ -28,7 +28,7 @@ exports[`StyledFAB renders correctly 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 8,
+        "shadowRadius": 4,
       },
       undefined,
     ]
@@ -75,7 +75,7 @@ exports[`StyledFAB renders correctly 2`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#33144d",
         "borderRadius": 999,
-        "elevation": 2,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
         "padding": 20,
@@ -85,7 +85,7 @@ exports[`StyledFAB renders correctly 2`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 8,
+        "shadowRadius": 4,
       },
       undefined,
     ]

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

@@ -19,7 +19,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#401960",
         "borderRadius": 999,
-        "elevation": 2,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
         "padding": 20,
@@ -29,7 +29,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 8,
+        "shadowRadius": 4,
       },
       Array [
         Object {
@@ -87,7 +87,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#401960",
         "borderRadius": 999,
-        "elevation": 2,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
         "padding": 20,
@@ -97,7 +97,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 8,
+        "shadowRadius": 4,
       },
       Array [
         Object {
@@ -185,7 +185,7 @@ exports[`FAB when title has value renders correctly 1`] = `
         "alignSelf": "flex-start",
         "backgroundColor": "#401960",
         "borderRadius": 999,
-        "elevation": 2,
+        "elevation": 3,
         "flexDirection": "row",
         "justifyContent": "center",
         "padding": 20,
@@ -195,7 +195,7 @@ exports[`FAB when title has value renders correctly 1`] = `
           "width": 0,
         },
         "shadowOpacity": 0.12,
-        "shadowRadius": 8,
+        "shadowRadius": 4,
       },
       Array [
         Object {

package/src/components/List/StyledListItem.tsx

@@ -29,11 +29,11 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
       return {
         ...sharedStyles,
         alignItems: 'center',
-        shadowColor: theme.colors.secondaryOutline,
-        shadowRadius: theme.__hd__.list.radii.cardShadow,
-        shadowOffset: theme.__hd__.list.shadows.cardOffset,
-        shadowOpacity: theme.__hd__.list.opacity.cardShadow,
-        elevation: theme.__hd__.list.shadows.cardElevation,
+        shadowColor: theme.__hd__.list.shadows.card.color,
+        shadowRadius: theme.__hd__.list.shadows.card.radius,
+        shadowOffset: theme.__hd__.list.shadows.card.offset,
+        shadowOpacity: theme.__hd__.list.shadows.card.opacity,
+        elevation: theme.__hd__.list.shadows.card.elevation,
       };
     default:
       return sharedStyles;

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

@@ -102,15 +102,15 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
         "alignItems": "center",
         "backgroundColor": "#ffffff",
         "borderRadius": 8,
-        "elevation": 10,
+        "elevation": 3,
         "flexDirection": "row",
         "padding": 16,
-        "shadowColor": "#e8e9ea",
+        "shadowColor": "#001f23",
         "shadowOffset": Object {
           "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 1,
+        "shadowOpacity": 0.12,
         "shadowRadius": 4,
       },
       undefined,
@@ -203,15 +203,15 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
         "alignItems": "center",
         "backgroundColor": "#ece8ef",
         "borderRadius": 8,
-        "elevation": 10,
+        "elevation": 3,
         "flexDirection": "row",
         "padding": 16,
-        "shadowColor": "#e8e9ea",
+        "shadowColor": "#001f23",
         "shadowOffset": Object {
           "height": 2,
           "width": 0,
         },
-        "shadowOpacity": 1,
+        "shadowOpacity": 0.12,
         "shadowRadius": 4,
       },
       undefined,

package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledHeaderText } from '../../FAB/ActionGroup/StyledActionGroup';
 import {
+  StyledHelperText,
   StyledLabel,
   StyledTextInput,
   StyledMaxLengthMessage,
@@ -113,7 +113,7 @@ describe('StyledMaxLengthMessage', () => {
 describe('StyledHelperText', () => {
   it('renders correctly', (): void => {
     const { toJSON } = renderWithTheme(
-      <StyledHeaderText>helper text</StyledHeaderText>
+      <StyledHelperText>helper text</StyledHelperText>
     );
 
     expect(toJSON()).toMatchSnapshot();

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -659,24 +659,15 @@ exports[`StyledHelperText renders correctly 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 42,
-        "letterSpacing": 0,
-        "lineHeight": 50,
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
       },
-      Array [
-        Object {
-          "color": "#001f23",
-          "marginBottom": 24,
-          "marginRight": 24,
-          "textAlign": "right",
-        },
-        undefined,
-      ],
+      undefined,
     ]
   }
+  themeFontWeight="regular"
   themeIntent="body"
-  themeLevel="h1"
-  themeTypeface="neutral"
 >
   helper text
 </Text>

package/src/components/Toast/StyledToast.tsx

@@ -22,7 +22,7 @@ const Container = styled(Animated.View)<{
   backgroundColor: theme.__hd__.toast.colors[themeIntent],
   minHeight: theme.__hd__.toast.sizes.height,
   flexDirection: 'row',
-  shadowColor: theme.__hd__.toast.colors.shadow,
+  shadowColor: theme.__hd__.toast.shadows.color,
   shadowOffset: theme.__hd__.toast.shadows.offset,
   shadowRadius: theme.__hd__.toast.shadows.radius,
   shadowOpacity: theme.__hd__.toast.shadows.opacity,

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

@@ -7,7 +7,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
     Object {
       "backgroundColor": "#b5c3fd",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -113,7 +113,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
     Object {
       "backgroundColor": "#f46363",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -260,7 +260,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
     Object {
       "backgroundColor": "#b5c3fd",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -407,7 +407,7 @@ exports[`Toast renders correctly when intent is notification 1`] = `
     Object {
       "backgroundColor": "#ffffff",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -527,7 +527,7 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
     Object {
       "backgroundColor": "#001f23",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -647,7 +647,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
     Object {
       "backgroundColor": "#5ace7d",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,
@@ -794,7 +794,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
     Object {
       "backgroundColor": "#ffbe71",
       "borderRadius": 0,
-      "elevation": 4,
+      "elevation": 3,
       "flexDirection": "row",
       "minHeight": 48,
       "opacity": 0,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -288,19 +288,19 @@ Object {
     "cardCarousel": Object {
       "colors": Object {
         "carouselItemBackground": "#f6f6f7",
-        "shadow": "#001f23",
       },
       "radii": Object {
         "card": 8,
       },
       "shadows": Object {
-        "elevation": 4,
+        "color": "#001f23",
+        "elevation": 3,
         "offset": Object {
           "height": 2,
           "width": 0,
         },
         "opacity": 0.12,
-        "radius": 8,
+        "radius": 4,
       },
       "space": Object {
         "carouselItemSpacing": 8,
@@ -473,24 +473,19 @@ Object {
         "buttonActiveBackground": "#33144d",
         "buttonBackground": "#401960",
         "buttonPressedBackground": "#33144d",
-        "headerText": "#001f23",
         "icon": "#ffffff",
-        "shadow": "#001f23",
         "titleText": "#ffffff",
       },
       "fontSizes": Object {
         "actionItemText": 16,
-        "header": 24,
         "title": 16,
       },
       "fonts": Object {
         "actionItemText": "BeVietnamPro-Regular",
-        "header": "BeVietnamPro-SemiBold",
         "title": "BeVietnamPro-SemiBold",
       },
       "lineHeights": Object {
         "actionItemText": 22,
-        "header": 32,
         "icon": 24,
         "title": 24,
       },
@@ -498,13 +493,14 @@ Object {
         "actionItem": 999,
       },
       "shadows": Object {
-        "elevation": 2,
+        "color": "#001f23",
+        "elevation": 3,
         "offset": Object {
           "height": 2,
           "width": 0,
         },
         "opacity": 0.12,
-        "radius": 8,
+        "radius": 4,
       },
       "sizes": Object {
         "height": 64,
@@ -520,8 +516,6 @@ Object {
         "buttonMarginRight": 24,
         "buttonMarginTop": 24,
         "containerPadding": 20,
-        "headerTextMarginBottom": 24,
-        "headerTextMarginRight": 24,
         "titleMarginHorizontal": 8,
       },
     },
@@ -564,21 +558,24 @@ Object {
         "listItemContainerBackground": "#ffffff",
       },
       "opacity": Object {
-        "cardShadow": 1,
         "disabled": 0.38,
         "enabled": 1,
       },
       "radii": Object {
         "basicItem": 4,
-        "cardShadow": 4,
         "item": 8,
         "leadingStatus": 999,
       },
       "shadows": Object {
-        "cardElevation": 10,
-        "cardOffset": Object {
-          "height": 2,
-          "width": 0,
+        "card": Object {
+          "color": "#001f23",
+          "elevation": 3,
+          "offset": Object {
+            "height": 2,
+            "width": 0,
+          },
+          "opacity": 0.12,
+          "radius": 4,
         },
       },
       "space": Object {
@@ -1053,7 +1050,6 @@ Object {
         "error": "#f46363",
         "info": "#b5c3fd",
         "notification": "#ffffff",
-        "shadow": "#001f23",
         "snackbar": "#001f23",
         "success": "#5ace7d",
         "warning": "#ffbe71",
@@ -1062,7 +1058,8 @@ Object {
         "default": 16,
       },
       "shadows": Object {
-        "elevation": 4,
+        "color": "#001f23",
+        "elevation": 3,
         "offset": Object {
           "height": 2,
           "width": 0,
@@ -1383,13 +1380,13 @@ Object {
   },
   "shadows": Object {
     "default": Object {
-      "elevation": 10,
-      "shadowColor": "#e8e9ea",
+      "elevation": 3,
+      "shadowColor": "#001f23",
       "shadowOffset": Object {
         "height": 2,
         "width": 0,
       },
-      "shadowOpacity": 1,
+      "shadowOpacity": 0.12,
       "shadowRadius": 4,
     },
   },

package/src/theme/components/cardCarousel.ts

@@ -8,14 +8,14 @@ const getCardCarouselTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    shadow: theme.colors.primaryOutline,
     carouselItemBackground: theme.colors.defaultSurface,
   };
   const shadows = {
-    offset: { width: 0, height: 2 },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 4,
+    color: theme.shadows.default.shadowColor,
+    offset: theme.shadows.default.shadowOffset,
+    opacity: theme.shadows.default.shadowOpacity,
+    radius: theme.shadows.default.shadowRadius,
+    elevation: theme.shadows.default.elevation,
   };
 
   const radii = {