@aws-amplify/ui-react-native 1.2.18 → 1.2.20

package/src/Authenticator/Defaults/SignIn/SignIn.tsx

@@ -30,7 +30,11 @@ const SignIn: DefaultSignInComponent = ({
     getForgotPasswordText,
   } = authenticatorTextUtil;
 
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -49,12 +53,13 @@ const SignIn: DefaultSignInComponent = ({
       onPress: toResetPassword,
     };
     return {
-      primary: { children: signInText, onPress: handleFormSubmit },
+      primary: { children: signInText, disabled, onPress: handleFormSubmit },
       links: hideSignUp
         ? [forgotPassword]
         : [forgotPassword, { children: signUpText, onPress: toSignUp }],
     };
   }, [
+    disabled,
     forgotPasswordText,
     handleFormSubmit,
     hideSignUp,

package/src/Authenticator/Defaults/SignIn/__tests__/__snapshots__/SignIn.spec.tsx.snap

@@ -261,6 +261,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -290,6 +295,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -677,6 +683,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -706,6 +717,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -1059,6 +1071,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -1103,6 +1116,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -1132,6 +1150,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/Defaults/SignUp/SignUp.tsx

@@ -25,12 +25,17 @@ const SignUp: DefaultSignUpComponent = ({
   handleBlur,
   handleChange,
   handleSubmit,
+  hasValidationErrors,
   hideSignIn,
   isPending,
   toSignIn,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -38,6 +43,7 @@ const SignUp: DefaultSignUpComponent = ({
     handleSubmit,
   });
 
+  const disabled = hasValidationErrors || disableFormSubmit;
   const headerText = getSignUpTabText();
   const primaryButtonText = isPending
     ? getCreatingAccountText()
@@ -46,12 +52,17 @@ const SignUp: DefaultSignUpComponent = ({
 
   const buttons = useMemo(
     () => ({
-      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      primary: {
+        children: primaryButtonText,
+        disabled,
+        onPress: handleFormSubmit,
+      },
       links: hideSignIn
         ? undefined
         : [{ children: secondaryButtonText, onPress: toSignIn }],
     }),
     [
+      disabled,
       handleFormSubmit,
       hideSignIn,
       primaryButtonText,

package/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx

@@ -39,6 +39,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: SignUp.Header,
   isPending: false,
   socialProviders: [],

package/src/Authenticator/Defaults/SignUp/__tests__/__snapshots__/SignUp.spec.tsx.snap

@@ -499,6 +499,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -528,6 +533,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -1105,6 +1111,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -1134,6 +1145,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -1661,6 +1673,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -1690,6 +1707,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -2281,6 +2299,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -2325,6 +2344,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -2354,6 +2378,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -2968,6 +2993,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -2997,6 +3027,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx

@@ -27,7 +27,11 @@ const VerifyUser: DefaultVerifyUserComponent = ({
   skipVerification,
   ...rest
 }) => {
-  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+  const {
+    disableFormSubmit: disabled,
+    fields: fieldsWithHandlers,
+    handleFormSubmit,
+  } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
@@ -42,10 +46,10 @@ const VerifyUser: DefaultVerifyUserComponent = ({
 
   const buttons = useMemo(
     () => ({
-      primary: { children: verifyText, onPress: handleFormSubmit },
+      primary: { children: verifyText, disabled, onPress: handleFormSubmit },
       links: [{ children: skipText, onPress: skipVerification }],
     }),
-    [handleFormSubmit, skipText, skipVerification, verifyText]
+    [disabled, handleFormSubmit, skipText, skipVerification, verifyText]
   );
 
   return (

package/src/Authenticator/Defaults/VerifyUser/__tests__/__snapshots__/VerifyUser.spec.tsx.snap

@@ -102,6 +102,7 @@ Array [
                 "borderRadius": 999,
                 "borderWidth": 2,
                 "justifyContent": "center",
+                "margin": 4,
               },
               Object {
                 "height": 20,
@@ -168,6 +169,7 @@ Array [
                 "borderRadius": 999,
                 "borderWidth": 2,
                 "justifyContent": "center",
+                "margin": 4,
               },
               Object {
                 "height": 20,
@@ -201,6 +203,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -220,6 +227,7 @@ Array [
           "backgroundColor": "hsl(190, 95%, 30%)",
           "borderRadius": 4,
           "justifyContent": "center",
+          "opacity": 0.6,
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
@@ -230,6 +238,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={
@@ -410,6 +419,7 @@ Array [
                 "borderRadius": 999,
                 "borderWidth": 2,
                 "justifyContent": "center",
+                "margin": 4,
               },
               Object {
                 "height": 20,
@@ -476,6 +486,7 @@ Array [
                 "borderRadius": 999,
                 "borderWidth": 2,
                 "justifyContent": "center",
+                "margin": 4,
               },
               Object {
                 "height": 20,
@@ -523,6 +534,7 @@ Array [
         },
       ]
     }
+    testID="amplify__error-message"
   >
     <Image
       accessibilityRole="image"
@@ -567,6 +579,11 @@ Array [
   </View>,
   <View
     accessibilityRole="button"
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -586,6 +603,7 @@ Array [
           "backgroundColor": "hsl(190, 95%, 30%)",
           "borderRadius": 4,
           "justifyContent": "center",
+          "opacity": 0.6,
           "paddingHorizontal": 16,
           "paddingVertical": 12,
         },
@@ -596,6 +614,7 @@ Array [
         },
       ]
     }
+    testID="amplify__button"
   >
     <Text
       style={

package/src/Authenticator/common/DefaultContent/DefaultContent.tsx

@@ -69,6 +69,7 @@ export default function DefaultContent<
           iconStyle={themedStyles.errorMessageIcon}
           labelStyle={themedStyles.errorMessageLabel}
           style={themedStyles.errorMessage}
+          testID="amplify__error-message"
         >
           {error}
         </ErrorMessage>
@@ -78,6 +79,7 @@ export default function DefaultContent<
         variant="primary"
         textStyle={themedStyles.buttonPrimaryLabel}
         style={themedStyles.buttonPrimary}
+        testID="amplify__button"
       />
       {secondary ? (
         <Button

package/src/hooks/index.ts

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

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

@@ -0,0 +1,42 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { platform } from '../../../utils';
+import useDeprecationWarning from '../useDeprecationWarning';
+
+const mockIsDev = jest.fn();
+jest.mock('../../../utils', () => ({
+  ...jest.requireActual('../../../utils'),
+  IS_DEV: mockIsDev,
+}));
+
+// add empty mockImplementation to prevent logging output to the console
+const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();
+
+const message = 'This component is deprecated, use X instead';
+const shouldWarn = true;
+
+describe('useDeprecationWarning', () => {
+  beforeAll(() => {
+    platform.IS_DEV = true;
+  });
+
+  beforeEach(() => {
+    consoleWarnSpy.mockClear();
+  });
+
+  it('should log an error if `shouldWarn` is set to `true` and `__DEV__` is `true`', () => {
+    renderHook(() => useDeprecationWarning({ shouldWarn, message }));
+    expect(consoleWarnSpy).toHaveBeenCalledTimes(1);
+    expect(consoleWarnSpy).toHaveBeenCalledWith(message);
+  });
+
+  it('should not log an error if `shouldWarn` is set to `true` and `__DEV__` is `false`', () => {
+    const message = 'This component is deprecated, use X instead';
+
+    platform.IS_DEV = false;
+
+    renderHook(() => useDeprecationWarning({ shouldWarn, message }));
+    expect(consoleWarnSpy).toHaveBeenCalledTimes(0);
+    expect(consoleWarnSpy).not.toHaveBeenCalledWith(message);
+  });
+});

package/src/hooks/useDeprecationWarning/index.ts

@@ -0,0 +1 @@
+export { default as useDeprecationWarning } from './useDeprecationWarning';

package/src/hooks/useDeprecationWarning/useDeprecationWarning.ts

@@ -0,0 +1,21 @@
+import {
+  useDeprecationWarning as useDeprecationWarningBase,
+  UseDeprecationWarning,
+} from '@aws-amplify/ui-react-core';
+
+import { platform } from '../../utils';
+
+/**
+ * Logs a deprecation warning `message` to the console.
+ */
+const useDeprecationWarning: UseDeprecationWarning = ({
+  message,
+  shouldWarn: _shouldWarn,
+}): void => {
+  // only log warnings in dev
+  const shouldWarn = _shouldWarn && platform.IS_DEV;
+
+  useDeprecationWarningBase({ message, shouldWarn });
+};
+
+export default useDeprecationWarning;

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

@@ -37,6 +37,7 @@ exports[`Radio applies theme and custom styles 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,
@@ -108,6 +109,7 @@ exports[`Radio renders as expected when disabled 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,
@@ -174,6 +176,7 @@ exports[`Radio renders as expected when passing a number to the size prop 1`] =
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 40,
@@ -257,6 +260,7 @@ exports[`Radio renders as expected when selected is false 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,
@@ -323,6 +327,7 @@ exports[`Radio renders as expected when selected is true 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,
@@ -406,6 +411,7 @@ exports[`Radio renders as expected when size is large 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 24,
@@ -489,6 +495,7 @@ exports[`Radio renders as expected when size is medium 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,
@@ -572,6 +579,7 @@ exports[`Radio renders as expected when size is small 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 16,
@@ -655,6 +663,7 @@ exports[`Radio renders as expected with accessibilityRole 1`] = `
           "borderRadius": 999,
           "borderWidth": 2,
           "justifyContent": "center",
+          "margin": 4,
         },
         Object {
           "height": 20,

package/src/primitives/Radio/styles.ts

@@ -9,7 +9,7 @@ const ROUNDED_BORDER_RADIUS = 999;
 export const getThemedStyles = (theme: StrictTheme): Required<RadioStyles> => {
   const {
     components,
-    tokens: { colors, fontSizes, opacities, borderWidths },
+    tokens: { colors, fontSizes, opacities, borderWidths, space },
   } = theme;
 
   return StyleSheet.create({
@@ -31,6 +31,7 @@ export const getThemedStyles = (theme: StrictTheme): Required<RadioStyles> => {
       borderRadius: ROUNDED_BORDER_RADIUS,
       borderWidth: borderWidths.medium,
       justifyContent: 'center',
+      margin: space.xxs,
       ...components?.radio?.radioContainer,
     },
     radioDot: {