@aws-amplify/ui-react-native 1.1.3 → 1.1.4

package/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback } from 'react';
-import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
 
 import { Button, Icon, Label } from '../../../primitives';
+import { usePressableContainerStyles } from '../../../hooks';
 
 import { styles } from './styles';
 import { FederatedProviderButtonProps } from './types';
@@ -13,18 +13,14 @@ export default function FederatedProviderButton({
   textStyle,
   ...rest
 }: FederatedProviderButtonProps): JSX.Element {
-  const containerStyle = useCallback(
-    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
-      const pressedStateStyle =
-        typeof style === 'function' ? style({ pressed }) : style;
-      return [styles.container, pressedStateStyle];
-    },
-    [style]
-  );
+  const pressableStyle = usePressableContainerStyles({
+    containerStyle: styles.container,
+    overrideStyle: style,
+  });
 
   return (
-    <Button {...rest} style={containerStyle}>
-      {source ? <Icon source={source} style={styles.icon} size={20} /> : null}
+    <Button {...rest} style={pressableStyle}>
+      <Icon source={source} style={styles.icon} size={20} />
       <Label style={[styles.label, textStyle]}>{children}</Label>
     </Button>
   );

package/src/Authenticator/common/FederatedProviderButton/__tests__/FederatedProviderButton.spec.tsx

@@ -1,20 +1,27 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react-native';
+import { fireEvent, render, renderHook } from '@testing-library/react-native';
 
 import { icons } from '../../../../assets';
 import FederatedProviderButton from '../FederatedProviderButton';
+import { useTheme } from '../../../../theme';
+import { getThemedStyles as getButtonThemedStyles } from '../../../../primitives/Button/styles';
+import { styles } from '../styles';
 
 const signInText = 'Sign In with Amazon';
 
-/* TODO: Add more tests */
 describe('FederatedProviderButton', () => {
   it('renders default button as expected', () => {
-    const { toJSON } = render(
+    const { toJSON, getByRole } = render(
       <FederatedProviderButton source={icons.amazonLogo}>
         {signInText}
       </FederatedProviderButton>
     );
     expect(toJSON()).toMatchSnapshot();
+
+    expect(getByRole('button')).toBeDefined();
+    const icon = getByRole('image');
+    expect(icon).toBeDefined();
+    expect(icon.props.source).toEqual(icons.amazonLogo);
   });
 
   it('handles an onPress callback', () => {
@@ -33,4 +40,28 @@ describe('FederatedProviderButton', () => {
 
     expect(toFederatedSignInMock).toHaveBeenCalledTimes(1);
   });
+
+  it('applies style props', () => {
+    const customStyle = { backgroundColor: 'blue' };
+
+    const { toJSON, getByRole } = render(
+      <FederatedProviderButton source={icons.amazonLogo} style={customStyle}>
+        {signInText}
+      </FederatedProviderButton>
+    );
+
+    const { result } = renderHook(() => useTheme());
+    const buttonThemedStyle = getButtonThemedStyles(result.current);
+    expect(getByRole('button').props.style).toStrictEqual([
+      { ...buttonThemedStyle.container, ...buttonThemedStyle.containerDefault },
+      undefined, // button pressed styles
+      [
+        styles.container,
+        undefined, // pressed style
+        customStyle,
+      ],
+    ]);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/Authenticator/common/FederatedProviderButton/__tests__/__snapshots__/FederatedProviderButton.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FederatedProviderButton renders default button as expected 1`] = `
+exports[`FederatedProviderButton applies style props 1`] = `
 <View
   accessibilityRole="button"
   accessible={true}
@@ -20,17 +20,107 @@ exports[`FederatedProviderButton renders default button as expected 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 10%, 58%)",
         "borderRadius": 4,
+        "borderWidth": 1,
         "justifyContent": "center",
         "paddingHorizontal": 16,
         "paddingVertical": 12,
       },
+      undefined,
+      Array [
+        Object {
+          "alignItems": "center",
+          "borderRadius": 4,
+          "borderWidth": 0.5,
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "paddingVertical": 8,
+          "width": "100%",
+        },
+        undefined,
+        Object {
+          "backgroundColor": "blue",
+        },
+      ],
+    ]
+  }
+>
+  <Image
+    accessibilityRole="image"
+    source={
       Object {
+        "testUri": "../../../src/assets/icons/amazonLogo.png",
+      }
+    }
+    style={
+      Array [
+        Object {
+          "height": 20,
+          "resizeMode": "contain",
+          "tintColor": undefined,
+          "width": 20,
+        },
+        Object {
+          "paddingHorizontal": 16,
+        },
+      ]
+    }
+  />
+  <Text
+    accessibilityRole="text"
+    style={
+      Array [
+        Object {
+          "fontSize": 14,
+          "fontWeight": "400",
+          "lineHeight": 21,
+        },
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Array [
+          Object {
+            "fontWeight": "400",
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    Sign In with Amazon
+  </Text>
+</View>
+`;
+
+exports[`FederatedProviderButton renders default button as expected 1`] = `
+<View
+  accessibilityRole="button"
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "transparent",
         "borderColor": "hsl(210, 10%, 58%)",
+        "borderRadius": 4,
         "borderWidth": 1,
+        "justifyContent": "center",
+        "paddingHorizontal": 16,
+        "paddingVertical": 12,
       },
-      null,
-      null,
+      undefined,
       Array [
         Object {
           "alignItems": "center",
@@ -42,6 +132,7 @@ exports[`FederatedProviderButton renders default button as expected 1`] = `
           "width": "100%",
         },
         undefined,
+        undefined,
       ],
     ]
   }

package/src/Authenticator/common/FederatedProviderButtons/__tests__/__snapshots__/FederatedProviderButtons.spec.tsx.snap

@@ -27,17 +27,14 @@ exports[`FederatedProviderButtons renders as expected 1`] = `
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
+          "borderColor": "hsl(210, 10%, 58%)",
           "borderRadius": 4,
+          "borderWidth": 1,
           "justifyContent": "center",
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
-        Object {
-          "borderColor": "hsl(210, 10%, 58%)",
-          "borderWidth": 1,
-        },
-        null,
-        null,
+        undefined,
         Array [
           Object {
             "alignItems": "center",
@@ -48,6 +45,7 @@ exports[`FederatedProviderButtons renders as expected 1`] = `
             "paddingVertical": 8,
             "width": "100%",
           },
+          undefined,
           Object {
             "marginVertical": 8,
           },

package/src/InAppMessaging/components/BannerMessage/__tests__/__snapshots__/BannerMessage.spec.tsx.snap

@@ -96,8 +96,7 @@ exports[`BannerMessage renders a message as expected with an image 1`] = `
         style={
           Array [
             Object {},
-            null,
-            null,
+            undefined,
             Array [
               Object {
                 "alignSelf": "flex-start",
@@ -205,8 +204,7 @@ exports[`BannerMessage renders a message as expected without an image 1`] = `
         style={
           Array [
             Object {},
-            null,
-            null,
+            undefined,
             Array [
               Object {
                 "alignSelf": "flex-start",

package/src/InAppMessaging/components/ModalMessage/__tests__/ModalMessage.spec.tsx

@@ -7,7 +7,7 @@ import { useMessageImage } from '../../../hooks';
 
 import ModalMessage from '../ModalMessage';
 
-jest.mock('../../../../hooks');
+jest.mock('../../../../hooks/useDeviceOrientation');
 jest.mock('../../../hooks/useMessageImage');
 jest.mock('../../MessageWrapper', () => ({ MessageWrapper: 'MessageWrapper' }));
 

package/src/InAppMessaging/components/ModalMessage/__tests__/__snapshots__/ModalMessage.spec.tsx.snap

@@ -62,8 +62,7 @@ exports[`ModalMessage renders a message as expected with an image 1`] = `
         style={
           Array [
             Object {},
-            null,
-            null,
+            undefined,
             Array [
               Object {
                 "alignSelf": "flex-start",
@@ -206,8 +205,7 @@ exports[`ModalMessage renders as expected in landscape mode 1`] = `
         style={
           Array [
             Object {},
-            null,
-            null,
+            undefined,
             Array [
               Object {
                 "alignSelf": "flex-start",
@@ -307,8 +305,7 @@ exports[`ModalMessage renders as expected in portrait mode 1`] = `
         style={
           Array [
             Object {},
-            null,
-            null,
+            undefined,
             Array [
               Object {
                 "alignSelf": "flex-start",

package/src/hooks/index.ts

@@ -2,3 +2,4 @@ export {
   DeviceOrientation,
   useDeviceOrientation,
 } from './useDeviceOrientation';
+export { usePressableContainerStyles } from './usePressableContainerStyles';

package/src/hooks/usePressableContainerStyles/__tests__/usePressableContainerStyles.spec.ts

@@ -0,0 +1,68 @@
+import { renderHook } from '@testing-library/react-native';
+import { ViewStyle } from 'react-native';
+
+import {
+  UsePressableContainerStyleProps,
+  usePressableContainerStyles,
+} from '../usePressableContainerStyles';
+
+const style: ViewStyle = {
+  backgroundColor: 'red',
+};
+const themedStyle: ViewStyle = {
+  padding: 10,
+};
+const pressedStyle: ViewStyle = {
+  opacity: 70,
+};
+
+describe('usePressableContainerStyles', () => {
+  it('should apply styles correctly and return a style object', () => {
+    const props: UsePressableContainerStyleProps = {
+      overrideStyle: style,
+      containerStyle: themedStyle,
+      pressedStyle,
+    };
+
+    const { result } = renderHook(() => usePressableContainerStyles(props));
+
+    expect(result.current({ pressed: false })).toStrictEqual([
+      { ...themedStyle },
+      undefined, // no pressed styles
+      { ...style },
+    ]);
+  });
+
+  it('should apply pressed styles correctly and return a style object', () => {
+    const props: UsePressableContainerStyleProps = {
+      overrideStyle: style,
+      containerStyle: themedStyle,
+      pressedStyle,
+    };
+
+    const { result } = renderHook(() => usePressableContainerStyles(props));
+
+    expect(result.current({ pressed: true })).toStrictEqual([
+      { ...themedStyle },
+      { ...pressedStyle },
+      { ...style },
+    ]);
+  });
+
+  it('should apply style function correctly and return a style object', () => {
+    const props: UsePressableContainerStyleProps = {
+      overrideStyle: () => {
+        return style;
+      },
+      containerStyle: themedStyle,
+    };
+
+    const { result } = renderHook(() => usePressableContainerStyles(props));
+
+    expect(result.current({ pressed: false })).toStrictEqual([
+      { ...themedStyle },
+      undefined,
+      { ...style },
+    ]);
+  });
+});

package/src/hooks/usePressableContainerStyles/index.ts

@@ -0,0 +1 @@
+export { usePressableContainerStyles } from './usePressableContainerStyles';

package/src/hooks/usePressableContainerStyles/usePressableContainerStyles.ts

@@ -0,0 +1,51 @@
+import { useCallback } from 'react';
+import {
+  PressableProps,
+  PressableStateCallbackType,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+export interface UsePressableContainerStyleProps {
+  /**
+   * @description
+   * Either view styles or a function representing override styles for the pressed state
+   */
+  overrideStyle: PressableProps['style'];
+
+  /**
+   * @description
+   * Pass-through view styles, typically includes theme, disabled, variant styles
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+
+  /**
+   * @description
+   * Pass-through view styles for the pressed state applied before the override styles
+   */
+  pressedStyle?: StyleProp<ViewStyle>;
+}
+
+export const usePressableContainerStyles = ({
+  overrideStyle,
+  containerStyle,
+  pressedStyle,
+}: UsePressableContainerStyleProps): (({
+  pressed,
+}: PressableStateCallbackType) => StyleProp<ViewStyle>) => {
+  return useCallback(
+    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
+      const pressedOverrideStyle =
+        typeof overrideStyle === 'function'
+          ? overrideStyle({ pressed })
+          : overrideStyle;
+      return [
+        containerStyle,
+        pressed ? pressedStyle : undefined,
+        // include last to override other styles
+        pressedOverrideStyle,
+      ];
+    },
+    [containerStyle, overrideStyle, pressedStyle]
+  );
+};

package/src/primitives/Button/Button.tsx

@@ -1,12 +1,6 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Pressable,
-  PressableStateCallbackType,
-  StyleProp,
-  Text,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
+import React, { useMemo } from 'react';
+import { Pressable, Text, TextStyle, ViewStyle } from 'react-native';
+import { usePressableContainerStyles } from '../../hooks';
 
 import { useTheme } from '../../theme';
 import { capitalize } from '../../utils';
@@ -25,22 +19,21 @@ export default function Button({
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
-  const pressableStyle = useCallback(
-    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
-      const pressedStateStyle =
-        typeof style === 'function' ? style({ pressed }) : style;
-
-      return [
-        themedStyle.container,
-        themedStyle[`container${capitalize(variant)}`],
-        disabled ? themedStyle.disabled : null,
-        pressed ? themedStyle.pressed : null,
-        pressedStateStyle,
-      ];
-    },
-    [disabled, style, themedStyle, variant]
+  const containerStyle: ViewStyle = useMemo(
+    (): ViewStyle => ({
+      ...themedStyle.container,
+      ...themedStyle[`container${capitalize(variant)}`],
+      ...(disabled && themedStyle.disabled),
+    }),
+    [disabled, themedStyle, variant]
   );
 
+  const pressableStyle = usePressableContainerStyles({
+    overrideStyle: style,
+    containerStyle,
+    pressedStyle: themedStyle.pressed,
+  });
+
   const buttonTextStyle: TextStyle = useMemo(
     (): TextStyle => ({
       ...themedStyle.text,

package/src/primitives/Button/__tests__/__snapshots__/Button.spec.tsx.snap

@@ -20,17 +20,14 @@ exports[`Button applies theme and style props 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 10%, 58%)",
         "borderRadius": 4,
+        "borderWidth": 1,
         "justifyContent": "center",
         "paddingHorizontal": 16,
         "paddingVertical": 12,
       },
-      Object {
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderWidth": 1,
-      },
-      null,
-      null,
+      undefined,
       Object {
         "backgroundColor": "blue",
       },
@@ -77,17 +74,14 @@ exports[`Button renders as expected with a component passed as children 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 10%, 58%)",
         "borderRadius": 4,
+        "borderWidth": 1,
         "justifyContent": "center",
         "paddingHorizontal": 16,
         "paddingVertical": 12,
       },
-      Object {
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderWidth": 1,
-      },
-      null,
-      null,
+      undefined,
       undefined,
     ]
   }
@@ -118,17 +112,14 @@ exports[`Button renders as expected with a string passed as children 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "transparent",
+        "borderColor": "hsl(210, 10%, 58%)",
         "borderRadius": 4,
+        "borderWidth": 1,
         "justifyContent": "center",
         "paddingHorizontal": 16,
         "paddingVertical": 12,
       },
-      Object {
-        "borderColor": "hsl(210, 10%, 58%)",
-        "borderWidth": 1,
-      },
-      null,
-      null,
+      undefined,
       undefined,
     ]
   }

package/src/primitives/ErrorMessage/ErrorMessage.tsx

@@ -14,6 +14,7 @@ export const CLOSE_BUTTON_TEST_ID =
 
 export default function ErrorMessage({
   children,
+  iconStyle,
   labelStyle,
   onDismiss,
   style,
@@ -28,7 +29,11 @@ export default function ErrorMessage({
       accessibilityRole="alert"
       style={[themedStyle.container, style]}
     >
-      <Icon size={20} source={icons.error} style={themedStyle.icon} />
+      <Icon
+        size={20}
+        source={icons.error}
+        style={[themedStyle.icon, iconStyle]}
+      />
       <Text style={[themedStyle.label, labelStyle]}>{children}</Text>
       {onDismiss ? (
         <IconButton

package/src/primitives/ErrorMessage/__tests__/__snapshots__/ErrorMessage.spec.tsx.snap

@@ -10,7 +10,7 @@ exports[`ErrorMessage applies theme and style props 1`] = `
         "backgroundColor": "hsl(0, 75%, 85%)",
         "flexDirection": "row",
         "paddingHorizontal": 8,
-        "paddingVertical": 32,
+        "paddingVertical": 12,
       },
       Object {
         "backgroundColor": "blue",
@@ -33,9 +33,13 @@ exports[`ErrorMessage applies theme and style props 1`] = `
           "tintColor": undefined,
           "width": 20,
         },
-        Object {
-          "margin": 8,
-        },
+        Array [
+          Object {
+            "margin": 8,
+            "tintColor": "hsl(0, 100%, 20%)",
+          },
+          undefined,
+        ],
       ]
     }
   />
@@ -45,6 +49,7 @@ exports[`ErrorMessage applies theme and style props 1`] = `
         Object {
           "color": "hsl(0, 100%, 20%)",
           "flex": 1,
+          "fontSize": 16,
           "paddingHorizontal": 8,
         },
         Object {
@@ -68,7 +73,7 @@ exports[`ErrorMessage renders default ErrorMessage as expected 1`] = `
         "backgroundColor": "hsl(0, 75%, 85%)",
         "flexDirection": "row",
         "paddingHorizontal": 8,
-        "paddingVertical": 32,
+        "paddingVertical": 12,
       },
       undefined,
     ]
@@ -89,9 +94,13 @@ exports[`ErrorMessage renders default ErrorMessage as expected 1`] = `
           "tintColor": undefined,
           "width": 20,
         },
-        Object {
-          "margin": 8,
-        },
+        Array [
+          Object {
+            "margin": 8,
+            "tintColor": "hsl(0, 100%, 20%)",
+          },
+          undefined,
+        ],
       ]
     }
   />
@@ -101,6 +110,7 @@ exports[`ErrorMessage renders default ErrorMessage as expected 1`] = `
         Object {
           "color": "hsl(0, 100%, 20%)",
           "flex": 1,
+          "fontSize": 16,
           "paddingHorizontal": 8,
         },
         undefined,

package/src/primitives/ErrorMessage/styles.ts

@@ -5,7 +5,7 @@ import { ErrorMessageStyles } from './types';
 
 export const getThemedStyles = (theme: StrictTheme): ErrorMessageStyles => {
   const {
-    tokens: { colors, space },
+    tokens: { colors, fontSizes, space },
     components,
   } = theme;
 
@@ -15,16 +15,18 @@ export const getThemedStyles = (theme: StrictTheme): ErrorMessageStyles => {
       backgroundColor: colors.background.error,
       flexDirection: 'row',
       paddingHorizontal: space.xs,
-      paddingVertical: space.xl,
+      paddingVertical: space.small,
       ...components?.errorMessage?.container,
     },
     icon: {
       margin: space.xs,
+      tintColor: colors.font.error,
       ...components?.errorMessage?.icon,
     },
     label: {
       color: colors.font.error,
       flex: 1,
+      fontSize: fontSizes.medium,
       paddingHorizontal: space.xs,
       ...components?.errorMessage?.label,
     },

package/src/primitives/ErrorMessage/types.ts

@@ -6,7 +6,10 @@ import {
   ViewStyle,
 } from 'react-native';
 
+import { IconProps } from '../Icon';
+
 export interface ErrorMessageProps extends ViewProps {
+  iconStyle?: IconProps['style'];
   labelStyle?: StyleProp<TextStyle>;
   onDismiss?: () => void;
 }