@hero-design/rn 7.24.0 → 7.25.0

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

@@ -23,32 +23,6 @@ exports[`BottomSheet renders correctly with close state 1`] = `
       ]
     }
   >
-    <View
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      nativeID="animatedComponent"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "backgroundColor": "#001f23",
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0.48,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <View
       onLayout={[Function]}
       style={
@@ -66,6 +40,32 @@ exports[`BottomSheet renders correctly with close state 1`] = `
         ]
       }
     >
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        nativeID="animatedComponent"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "backgroundColor": "#001f23",
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0.48,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
       <RCTSafeAreaView
         collapsable={false}
         emulateUnlessSupported={true}
@@ -305,32 +305,6 @@ exports[`BottomSheet renders correctly with open state 1`] = `
       ]
     }
   >
-    <View
-      accessible={true}
-      collapsable={false}
-      focusable={true}
-      nativeID="animatedComponent"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      onResponderGrant={[Function]}
-      onResponderMove={[Function]}
-      onResponderRelease={[Function]}
-      onResponderTerminate={[Function]}
-      onResponderTerminationRequest={[Function]}
-      onStartShouldSetResponder={[Function]}
-      style={
-        Object {
-          "backgroundColor": "#001f23",
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <View
       onLayout={[Function]}
       style={
@@ -348,6 +322,32 @@ exports[`BottomSheet renders correctly with open state 1`] = `
         ]
       }
     >
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        nativeID="animatedComponent"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "backgroundColor": "#001f23",
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          }
+        }
+      />
       <RCTSafeAreaView
         collapsable={false}
         emulateUnlessSupported={true}

package/src/components/BottomSheet/index.tsx

@@ -155,14 +155,14 @@ const BottomSheet = ({
       onShow={onOpen}
     >
       <StyledWrapper pointerEvents="box-none">
-        <StyledBackdrop
-          style={{ opacity: interpolateOpacity }}
-          onPress={onRequestClose}
-        />
         <StyledKeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
           {...keyboardAvoidingViewProps}
         >
+          <StyledBackdrop
+            style={{ opacity: interpolateOpacity }}
+            onPress={onRequestClose}
+          />
           <StyledBottomSheet
             style={[
               style,

package/src/components/Button/Button.tsx

@@ -1,4 +1,3 @@
-import { useTheme } from '@emotion/react';
 import React from 'react';
 import type { ReactChild } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
@@ -112,21 +111,14 @@ const Button = ({
   text,
   variant = 'filled',
 }: ButtonProps): JSX.Element => {
-  const [pressed, setPressed] = React.useState(false);
-  const theme = useTheme();
   const themeVariant = getThemeVariant(variant, intent);
   return (
     <StyledButtonContainer
-      onShowUnderlay={() => setPressed(true)}
-      onHideUnderlay={() => setPressed(false)}
-      underlayColor={theme.__hd__.button.colors.underlayColors[themeVariant]}
       accessibilityHint={accessibilityHint}
       accessibilityLabel={accessibilityLabel}
       disabled={disabled || loading}
-      activeOpacity={0.5}
       onPress={onPress}
       testID={testID}
-      pressed={pressed}
       themeVariant={themeVariant}
       style={style}
     >
@@ -142,7 +134,6 @@ const Button = ({
               <StyledButtonIcon
                 disabled={disabled}
                 icon={icon}
-                pressed={pressed}
                 testID={`${testID}-left-icon`}
                 themeVariant={themeVariant}
               />
@@ -152,7 +143,6 @@ const Button = ({
             disabled={disabled}
             ellipsizeMode="tail"
             numberOfLines={1}
-            pressed={pressed}
             themeVariant={themeVariant}
           >
             {text}
@@ -162,7 +152,6 @@ const Button = ({
               <StyledButtonIcon
                 disabled={disabled}
                 icon={rightIcon}
-                pressed={pressed}
                 testID={`${testID}-right-icon`}
                 themeVariant={themeVariant}
               />

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

@@ -105,7 +105,7 @@ exports[`StyledLoadingIndicator has outlined-primary style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,
@@ -125,7 +125,7 @@ exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#795e90",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,
@@ -165,7 +165,7 @@ exports[`StyledLoadingIndicator has text-primary style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,
@@ -185,7 +185,7 @@ exports[`StyledLoadingIndicator has text-secondary style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#795e90",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,

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

@@ -641,7 +641,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -675,7 +675,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -709,7 +709,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -762,7 +762,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -796,7 +796,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -830,7 +830,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1004,7 +1004,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1038,7 +1038,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1072,7 +1072,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1125,7 +1125,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1159,7 +1159,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1193,7 +1193,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
       style={
         Array [
           Object {
-            "backgroundColor": "#401960",
+            "backgroundColor": "#795e90",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,

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

@@ -115,7 +115,7 @@ const LoadingIndicator = ({
     };
   }, []);
 
-  const renderLoadingDot = (item: any, index: number) => {
+  const renderLoadingDot = (_item: any, index: number) => {
     if (typeof renderDotComponent === 'function') {
       return renderDotComponent({
         index,

package/src/components/Button/StyledButton.tsx

@@ -1,4 +1,4 @@
-import { TouchableHighlight, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import styled from '@emotion/native';
 import type { ReactNativeStyle } from '@emotion/native';
 import type { Theme } from '@emotion/react';
@@ -19,15 +19,8 @@ type ThemeVariant =
   | 'text-secondary'
   | 'text-danger';
 
-const PRESSED_COLORS = {
-  primary: 'pressedPrimary',
-  secondary: 'pressedSecondary',
-  danger: 'pressedDanger',
-} as const;
-
 const genBasicTransparentContainerStyles = (
   theme: Theme,
-  pressed: boolean,
   disabled: boolean
 ): ReactNativeStyle => {
   const borderColorStyling = () => {
@@ -51,7 +44,6 @@ const genBasicTransparentContainerStyles = (
     borderWidth: theme.__hd__.button.borderWidth.default,
     borderRadius: theme.__hd__.button.radii.default,
     backgroundColor: 'transparent',
-    opacity: pressed ? 0.6 : 1,
     ...borderColorStyling(),
   };
 };
@@ -59,7 +51,6 @@ const genBasicTransparentContainerStyles = (
 const genFilledContainerStyles = (
   theme: Theme,
   intent: Intent,
-  pressed: boolean,
   disabled: boolean
 ): ReactNativeStyle => {
   const backgroundColorStyling = () => {
@@ -69,12 +60,6 @@ const genFilledContainerStyles = (
       };
     }
 
-    if (pressed) {
-      return {
-        backgroundColor: theme.__hd__.button.colors[PRESSED_COLORS[intent]],
-      };
-    }
-
     return { backgroundColor: theme.__hd__.button.colors[intent] };
   };
 
@@ -92,7 +77,6 @@ const genFilledContainerStyles = (
 const genOutlineContainerStyles = (
   theme: Theme,
   intent: Intent,
-  pressed: boolean,
   disabled: boolean
 ): ReactNativeStyle => {
   const borderColorStyling = () => {
@@ -102,12 +86,6 @@ const genOutlineContainerStyles = (
       };
     }
 
-    if (pressed) {
-      return {
-        borderColor: theme.__hd__.button.colors[PRESSED_COLORS[intent]],
-      };
-    }
-
     return { borderColor: theme.__hd__.button.colors[intent] };
   };
 
@@ -129,7 +107,6 @@ const genOutlineContainerStyles = (
 const genOutlineTextStyles = (
   theme: Theme,
   intent: Intent,
-  pressed?: boolean,
   disabled?: boolean
 ): ReactNativeStyle => {
   const textColorStyling = () => {
@@ -139,12 +116,6 @@ const genOutlineTextStyles = (
       };
     }
 
-    if (pressed) {
-      return {
-        color: theme.__hd__.button.colors[PRESSED_COLORS[intent]],
-      };
-    }
-
     return { color: theme.__hd__.button.colors[intent] };
   };
 
@@ -158,7 +129,6 @@ const genOutlineTextStyles = (
 const genTextVariantTextStyles = (
   theme: Theme,
   intent: Intent,
-  pressed?: boolean,
   disabled?: boolean
 ): ReactNativeStyle => {
   const textColorStyling = () => {
@@ -168,12 +138,6 @@ const genTextVariantTextStyles = (
       };
     }
 
-    if (pressed) {
-      return {
-        color: theme.__hd__.button.colors[PRESSED_COLORS[intent]],
-      };
-    }
-
     return { color: theme.__hd__.button.colors[intent] };
   };
 
@@ -184,26 +148,25 @@ const genTextVariantTextStyles = (
   };
 };
 
-const StyledButtonContainer = styled(TouchableHighlight)<{
+const StyledButtonContainer = styled(TouchableOpacity)<{
   disabled?: boolean;
-  pressed?: boolean;
   themeVariant: ThemeVariant;
-}>(({ disabled = false, pressed = false, themeVariant, theme }) => {
+}>(({ disabled = false, themeVariant, theme }) => {
   switch (themeVariant) {
     case 'basic-transparent':
-      return genBasicTransparentContainerStyles(theme, pressed, disabled);
+      return genBasicTransparentContainerStyles(theme, disabled);
     case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', pressed, disabled);
+      return genFilledContainerStyles(theme, 'primary', disabled);
     case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', pressed, disabled);
+      return genFilledContainerStyles(theme, 'secondary', disabled);
     case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', pressed, disabled);
+      return genFilledContainerStyles(theme, 'danger', disabled);
     case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', pressed, disabled);
+      return genOutlineContainerStyles(theme, 'primary', disabled);
     case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', pressed, disabled);
+      return genOutlineContainerStyles(theme, 'secondary', disabled);
     case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', pressed, disabled);
+      return genOutlineContainerStyles(theme, 'danger', disabled);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
@@ -219,9 +182,8 @@ const StyledButtonContainer = styled(TouchableHighlight)<{
 
 const StyledButtonText = styled(Typography.Text)<{
   disabled?: boolean;
-  pressed?: boolean;
   themeVariant: ThemeVariant;
-}>(({ disabled, pressed, themeVariant, theme }) => {
+}>(({ disabled, themeVariant, theme }) => {
   const themeStyling = () => {
     switch (themeVariant) {
       case 'basic-transparent':
@@ -241,17 +203,17 @@ const StyledButtonText = styled(Typography.Text)<{
           color: theme.__hd__.button.colors.invertedText,
         };
       case 'outlined-primary':
-        return genOutlineTextStyles(theme, 'primary', pressed, disabled);
+        return genOutlineTextStyles(theme, 'primary', disabled);
       case 'outlined-secondary':
-        return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
+        return genOutlineTextStyles(theme, 'secondary', disabled);
       case 'outlined-danger':
-        return genOutlineTextStyles(theme, 'danger', pressed, disabled);
+        return genOutlineTextStyles(theme, 'danger', disabled);
       case 'text-primary':
-        return genTextVariantTextStyles(theme, 'primary', pressed, disabled);
+        return genTextVariantTextStyles(theme, 'primary', disabled);
       case 'text-secondary':
-        return genTextVariantTextStyles(theme, 'secondary', pressed, disabled);
+        return genTextVariantTextStyles(theme, 'secondary', disabled);
       case 'text-danger':
-        return genTextVariantTextStyles(theme, 'danger', pressed, disabled);
+        return genTextVariantTextStyles(theme, 'danger', disabled);
     }
   };
   return {
@@ -275,9 +237,8 @@ const StyledButtonIconWrapper = styled(View)<{
 
 const StyledButtonIcon = styled(Icon)<{
   disabled?: boolean;
-  pressed?: boolean;
   themeVariant: ThemeVariant;
-}>(({ disabled, pressed, themeVariant, theme }) => {
+}>(({ disabled, themeVariant, theme }) => {
   const themeStyling = () => {
     switch (themeVariant) {
       case 'basic-transparent':
@@ -291,17 +252,17 @@ const StyledButtonIcon = styled(Icon)<{
       case 'filled-danger':
         return { color: theme.__hd__.button.colors.invertedText };
       case 'outlined-primary':
-        return genOutlineTextStyles(theme, 'primary', pressed, disabled);
+        return genOutlineTextStyles(theme, 'primary', disabled);
       case 'outlined-secondary':
-        return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
+        return genOutlineTextStyles(theme, 'secondary', disabled);
       case 'outlined-danger':
-        return genOutlineTextStyles(theme, 'danger', pressed, disabled);
+        return genOutlineTextStyles(theme, 'danger', disabled);
       case 'text-primary':
-        return genTextVariantTextStyles(theme, 'primary', pressed, disabled);
+        return genTextVariantTextStyles(theme, 'primary', disabled);
       case 'text-secondary':
-        return genTextVariantTextStyles(theme, 'secondary', pressed, disabled);
+        return genTextVariantTextStyles(theme, 'secondary', disabled);
       case 'text-danger':
-        return genTextVariantTextStyles(theme, 'danger', pressed, disabled);
+        return genTextVariantTextStyles(theme, 'danger', disabled);
     }
   };
 

package/src/components/Button/UtilityButton/__tests__/index.spec.tsx

@@ -12,7 +12,7 @@ describe('UtilityButton', () => {
         text="Settings"
         icon="cog-outlined"
         testID="settings-btn"
-        onPress={() => {}}
+        onPress={jest.fn()}
       />
     );
 
@@ -46,7 +46,7 @@ describe('UtilityButton snapshot', () => {
         text="Settings"
         icon="cog-outlined"
         testID="settings-btn"
-        onPress={() => {}}
+        onPress={jest.fn()}
       />
     );
 

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

@@ -9,21 +9,26 @@ import { getThemeVariant } from '../Button';
 describe('Button', () => {
   it('renders button text', () => {
     const { getByText } = renderWithTheme(
-      <Button text="A button" onPress={() => {}} />
+      <Button text="A button" onPress={jest.fn()} />
     );
     expect(getByText('A button')).toBeDefined();
   });
 
   it('renders no icon by default', () => {
     const { queryByTestId } = renderWithTheme(
-      <Button text="A button" testID="button" onPress={() => {}} />
+      <Button text="A button" testID="button" onPress={jest.fn()} />
     );
     expect(queryByTestId('button-left-icon')).toBeNull();
   });
 
   it('renders icon', () => {
     const { getByTestId } = renderWithTheme(
-      <Button text="A button" icon="heart" testID="button" onPress={() => {}} />
+      <Button
+        text="A button"
+        icon="heart"
+        testID="button"
+        onPress={jest.fn()}
+      />
     );
     expect(getByTestId('button-left-icon')).toBeDefined();
   });
@@ -34,7 +39,7 @@ describe('Button', () => {
         text="A button"
         rightIcon="heart"
         testID="button"
-        onPress={() => {}}
+        onPress={jest.fn()}
       />
     );
     expect(getByTestId('button-right-icon')).toBeDefined();
@@ -42,7 +47,7 @@ describe('Button', () => {
 
   it('renders loading icon', () => {
     const { getByTestId } = renderWithTheme(
-      <Button text="A button" testID="button" onPress={() => {}} loading />
+      <Button text="A button" testID="button" onPress={jest.fn()} loading />
     );
     expect(getByTestId('button-loading-indicator')).toBeDefined();
   });