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

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;
 }

package/src/primitives/IconButton/IconButton.tsx

@@ -1,12 +1,9 @@
-import React, { useCallback } from 'react';
-import {
-  Pressable,
-  PressableStateCallbackType,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import React, { useMemo } from 'react';
+import { Pressable, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../theme';
+import { usePressableContainerStyles } from '../../hooks';
+
 import { getThemedStyles } from './styles';
 import { Icon, iconSizes } from '../Icon';
 import { IconButtonProps } from './types';
@@ -24,20 +21,20 @@ export default function IconButton({
   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,
-        disabled ? themedStyle.disabled : null,
-        pressed ? themedStyle.pressed : null,
-        pressedStateStyle,
-      ];
-    },
-    [disabled, style, themedStyle]
+  const containerStyle: ViewStyle = useMemo(
+    (): ViewStyle => ({
+      ...themedStyle.container,
+      ...(disabled && themedStyle.disabled),
+    }),
+    [disabled, themedStyle]
   );
 
+  const pressableStyle = usePressableContainerStyles({
+    overrideStyle: style,
+    containerStyle,
+    pressedStyle: themedStyle.pressed,
+  });
+
   return (
     <Pressable
       {...rest}

package/src/primitives/IconButton/__tests__/IconButton.spec.tsx

@@ -31,9 +31,8 @@ describe('IconButton', () => {
     const themedStyle = getThemedStyles(result.current);
 
     expect(button.props.style).toStrictEqual([
-      themedStyle.container,
-      themedStyle.disabled,
-      null,
+      { ...themedStyle.container, ...themedStyle.disabled },
+      undefined,
       undefined,
     ]);
     expect(toJSON()).toMatchSnapshot();
@@ -61,9 +60,10 @@ describe('IconButton', () => {
     const themedStyle = getThemedStyles(result.current);
 
     expect(getByRole('button').props.style).toStrictEqual([
-      themedStyle.container,
-      null,
-      null,
+      {
+        ...themedStyle.container,
+      },
+      undefined,
       customStyle,
     ]);
     expect(toJSON()).toMatchSnapshot();

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

@@ -18,8 +18,7 @@ exports[`IconButton applies theme and style props 1`] = `
   style={
     Array [
       Object {},
-      null,
-      null,
+      undefined,
       Object {
         "backgroundColor": "blue",
       },
@@ -70,11 +69,10 @@ exports[`IconButton handles disabled state 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      Object {},
       Object {
         "opacity": 0.6,
       },
-      null,
+      undefined,
       undefined,
     ]
   }
@@ -119,8 +117,7 @@ exports[`IconButton renders as expected 1`] = `
   style={
     Array [
       Object {},
-      null,
-      null,
+      undefined,
       undefined,
     ]
   }
@@ -165,8 +162,7 @@ exports[`IconButton renders as expected with custom icon style 1`] = `
   style={
     Array [
       Object {},
-      null,
-      null,
+      undefined,
       undefined,
     ]
   }

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

@@ -100,8 +100,7 @@ exports[`PasswordField applies theme and style props 1`] = `
       style={
         Array [
           Object {},
-          null,
-          null,
+          undefined,
           undefined,
         ]
       }
@@ -235,8 +234,7 @@ exports[`PasswordField renders as expected 1`] = `
       style={
         Array [
           Object {},
-          null,
-          null,
+          undefined,
           undefined,
         ]
       }
@@ -373,11 +371,10 @@ exports[`PasswordField renders as expected when disabled 1`] = `
       onStartShouldSetResponder={[Function]}
       style={
         Array [
-          Object {},
           Object {
             "opacity": 0.6,
           },
-          null,
+          undefined,
           undefined,
         ]
       }
@@ -593,8 +590,7 @@ exports[`PasswordField should be able to obscure text programmatically 1`] = `
       style={
         Array [
           Object {},
-          null,
-          null,
+          undefined,
           undefined,
         ]
       }

package/src/primitives/Radio/Radio.tsx

@@ -2,8 +2,6 @@ import React, { useCallback, useMemo } from 'react';
 import {
   GestureResponderEvent,
   Pressable,
-  PressableStateCallbackType,
-  StyleProp,
   View,
   ViewStyle,
 } from 'react-native';
@@ -11,6 +9,7 @@ import {
 import { useTheme } from '../../theme';
 import { Label } from '../Label';
 import { getFlexDirectionFromLabelPosition } from '../Label/utils';
+import { usePressableContainerStyles } from '../../hooks';
 
 import { getThemedStyles } from './styles';
 import { RadioProps } from './types';
@@ -48,21 +47,21 @@ export default function Radio<T>({
     [disabled, onChange, onPress, value]
   );
 
-  const containerStyle = useCallback(
-    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
-      const containerStyle: ViewStyle = {
-        ...themedStyle.container,
-        flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
-        ...(disabled && themedStyle.disabled),
-      };
-
-      const pressedStateStyle =
-        typeof style === 'function' ? style({ pressed }) : style;
-      return [containerStyle, pressedStateStyle];
-    },
-    [disabled, labelPosition, style, themedStyle]
+  const containerStyle: ViewStyle = useMemo(
+    (): ViewStyle => ({
+      ...themedStyle.container,
+      flexDirection: getFlexDirectionFromLabelPosition(labelPosition),
+      ...(disabled && themedStyle.disabled),
+    }),
+    [disabled, labelPosition, themedStyle]
   );
 
+  const pressableStyle = usePressableContainerStyles({
+    overrideStyle: style,
+    containerStyle,
+    pressedStyle: themedStyle.pressed,
+  });
+
   const { radioContainerDimensions, radioDotDimensions } = useMemo(
     () => getRadioDimensions(size, themedStyle),
     [size, themedStyle]
@@ -73,7 +72,7 @@ export default function Radio<T>({
       {...rest}
       accessibilityRole={accessibilityRole}
       onPress={handleOnChange}
-      style={containerStyle}
+      style={pressableStyle}
     >
       <View
         style={[

package/src/primitives/Radio/__tests__/Radio.spec.tsx

@@ -144,6 +144,7 @@ describe('Radio', () => {
 
     expect(getByRole('radio').props.style).toStrictEqual([
       { ...themedStyle.container, flexDirection: 'row' },
+      undefined, // pressed styles
       customStyle,
     ]);
 

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

@@ -21,6 +21,7 @@ exports[`Radio applies theme and custom styles 1`] = `
         "alignItems": "center",
         "flexDirection": "row",
       },
+      undefined,
       Object {
         "margin": 10,
       },
@@ -94,6 +95,7 @@ exports[`Radio renders as expected when disabled 1`] = `
         "opacity": 0.6,
       },
       undefined,
+      undefined,
     ]
   }
 >
@@ -159,6 +161,7 @@ exports[`Radio renders as expected when passing a number to the size prop 1`] =
         "flexDirection": "row",
       },
       undefined,
+      undefined,
     ]
   }
 >
@@ -241,6 +244,7 @@ exports[`Radio renders as expected when selected is false 1`] = `
         "flexDirection": "row",
       },
       undefined,
+      undefined,
     ]
   }
 >
@@ -306,6 +310,7 @@ exports[`Radio renders as expected when selected is true 1`] = `
         "flexDirection": "row",
       },
       undefined,
+      undefined,
     ]
   }
 >
@@ -388,6 +393,7 @@ exports[`Radio renders as expected when size is large 1`] = `
         "flexDirection": "row",
       },
       undefined,
+      undefined,
     ]
   }
 >
@@ -470,6 +476,7 @@ exports[`Radio renders as expected when size is medium 1`] = `
         "flexDirection": "row",
       },
       undefined,
+      undefined,
     ]
   }
 >
@@ -552,6 +559,7 @@ exports[`Radio renders as expected when size is small 1`] = `
         "flexDirection": "row",
       },
       undefined,
+      undefined,
     ]
   }
 >
@@ -634,6 +642,7 @@ exports[`Radio renders as expected with accessibilityRole 1`] = `
         "flexDirection": "row",
       },
       undefined,
+      undefined,
     ]
   }
 >

package/src/primitives/Radio/styles.ts

@@ -21,6 +21,10 @@ export const getThemedStyles = (theme: StrictTheme): Required<RadioStyles> => {
       opacity: opacities[60],
       ...components?.radio?.disabled,
     },
+    pressed: {
+      opacity: opacities[60],
+      ...components?.radio?.pressed,
+    },
     radioContainer: {
       alignItems: 'center',
       borderColor: colors.border.primary,

package/src/primitives/Radio/types.ts

@@ -22,6 +22,7 @@ export type RadioDimensions = Pick<ViewStyle, 'height' | 'width'>;
 export interface RadioStyles {
   container?: ViewStyle;
   disabled?: ViewStyle;
+  pressed?: ViewStyle;
   radioContainer?: ViewStyle;
   radioContainerLarge?: RadioDimensions;
   radioContainerMedium?: RadioDimensions;

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

@@ -41,6 +41,7 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -120,6 +121,7 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -182,6 +184,7 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -245,6 +248,7 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
             "opacity": 0.6,
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -331,6 +335,7 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -410,6 +415,7 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -472,6 +478,7 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -535,6 +542,7 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
             "opacity": 0.6,
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -621,6 +629,7 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -700,6 +709,7 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -762,6 +772,7 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -825,6 +836,7 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
             "opacity": 0.6,
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -911,6 +923,7 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -990,6 +1003,7 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -1052,6 +1066,7 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -1115,6 +1130,7 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
             "opacity": 0.6,
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -1201,6 +1217,7 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -1280,6 +1297,7 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -1342,6 +1360,7 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -1405,6 +1424,7 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
             "opacity": 0.6,
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -1491,6 +1511,7 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -1570,6 +1591,7 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -1632,6 +1654,7 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
             "flexDirection": "row",
           },
           undefined,
+          undefined,
         ]
       }
     >
@@ -1695,6 +1718,7 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
             "opacity": 0.6,
           },
           undefined,
+          undefined,
         ]
       }
     >

package/src/primitives/Tabs/Tab.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback } from 'react';
-import { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';
+import React, { useMemo } from 'react';
+import { ViewStyle } from 'react-native';
 
 import { useTheme } from '../../theme';
+import { usePressableContainerStyles } from '../../hooks';
 import { Button } from '../Button';
 import { getThemedStyles } from './styles';
 import { TabProps } from './types';
@@ -19,28 +20,26 @@ export default function Tab({
 
   const selectedStyles = selected ? themedStyle.selected : null;
 
-  const containerStyle = useCallback(
-    ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => {
-      const readonlyStyle = selected ? themedStyle.readonly : null;
-      const pressedStateStyle =
-        (typeof style === 'function' ? style({ pressed }) : style) ?? null;
-
-      // include `pressedStateStyle` last to override other styles
-      return [
-        themedStyle.tab,
-        readonlyStyle,
-        selectedStyles,
-        pressedStateStyle,
-      ];
-    },
-    [selected, selectedStyles, style, themedStyle]
+  const containerStyle: ViewStyle = useMemo(
+    (): ViewStyle => ({
+      ...themedStyle.tab,
+      ...(selected && themedStyle.readonly),
+      ...selectedStyles,
+    }),
+    [selected, selectedStyles, themedStyle]
   );
 
+  const pressableStyle = usePressableContainerStyles({
+    overrideStyle: style,
+    containerStyle,
+    pressedStyle: themedStyle.pressed,
+  });
+
   return (
     <Button
       {...rest}
       accessibilityRole="tab"
-      style={containerStyle}
+      style={pressableStyle}
       textStyle={[themedStyle.tabText, textStyle, selectedStyles]}
     >
       {children}