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

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

@@ -11,7 +11,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -28,9 +28,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -51,9 +51,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -80,6 +80,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -94,9 +95,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -104,8 +105,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -147,6 +147,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -246,8 +247,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -341,7 +341,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -358,9 +358,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -381,9 +381,9 @@ Array [
     style={
       Array [
         Object {
-          "fontSize": 14,
+          "fontSize": 16,
           "fontWeight": "400",
-          "lineHeight": 21,
+          "lineHeight": 24,
         },
         Object {
           "color": "hsl(210, 50%, 10%)",
@@ -410,6 +410,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -424,9 +425,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -434,8 +435,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -477,6 +477,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -517,8 +518,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }

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

@@ -9,11 +9,11 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultSignInComponent } from '../types';
+import { DefaultSignInProps } from '../types';
 
 const COMPONENT_NAME = 'SignIn';
 
-const SignIn: DefaultSignInComponent = ({
+const SignIn = ({
   fields,
   handleBlur,
   handleChange,
@@ -21,8 +21,9 @@ const SignIn: DefaultSignInComponent = ({
   hideSignUp,
   toResetPassword,
   toSignUp,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultSignInProps): JSX.Element => {
   const {
     getSignInTabText,
     getSignInText,
@@ -33,6 +34,7 @@ const SignIn: DefaultSignInComponent = ({
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -40,6 +42,7 @@ const SignIn: DefaultSignInComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getSignInTabText();
@@ -75,6 +78,7 @@ const SignIn: DefaultSignInComponent = ({
       buttons={buttons}
       fields={fieldsWithHandlers}
       headerText={headerText}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

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

@@ -29,6 +29,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: SignIn.Header,
   isPending: false,
   socialProviders: undefined,

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

@@ -11,7 +11,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -35,6 +35,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -49,9 +50,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -59,8 +60,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -102,6 +102,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -115,6 +116,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Array [
             Object {},
@@ -132,9 +134,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -142,8 +144,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -186,6 +187,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -290,8 +292,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -433,7 +434,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -457,6 +458,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -471,9 +473,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -481,8 +483,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -524,6 +525,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -537,6 +539,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Array [
             Object {},
@@ -554,9 +557,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -564,8 +567,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -608,6 +610,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -712,8 +715,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }
@@ -807,7 +809,7 @@ Array [
         },
         Object {
           "fontSize": 24,
-          "fontWeight": "300",
+          "fontWeight": "500",
           "lineHeight": 36,
         },
         Object {
@@ -831,6 +833,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Object {
             "paddingHorizontal": 12,
@@ -845,9 +848,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -855,8 +858,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -898,6 +900,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -911,6 +914,7 @@ Array [
         Array [
           Object {
             "alignItems": "flex-start",
+            "marginBottom": 8,
           },
           Array [
             Object {},
@@ -928,9 +932,9 @@ Array [
         style={
           Array [
             Object {
-              "fontSize": 14,
+              "fontSize": 16,
               "fontWeight": "400",
-              "lineHeight": 21,
+              "lineHeight": 24,
             },
             Object {
               "color": "hsl(210, 50%, 10%)",
@@ -938,8 +942,7 @@ Array [
             Array [
               Object {
                 "color": "hsl(210, 25%, 25%)",
-                "lineHeight": 21,
-                "padding": 4,
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -982,6 +985,7 @@ Array [
                 "color": "hsl(210, 50%, 10%)",
                 "flexGrow": 1,
                 "fontSize": 16,
+                "paddingHorizontal": 4,
                 "paddingVertical": 12,
               },
               Object {},
@@ -1145,8 +1149,7 @@ Array [
         },
         undefined,
         Object {
-          "marginHorizontal": 16,
-          "marginVertical": 12,
+          "margin": 12,
         },
       ]
     }

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

@@ -9,7 +9,7 @@ import {
 } from '../../common';
 import { useFieldValues } from '../../hooks';
 
-import { DefaultSignUpComponent } from '../types';
+import { DefaultSignUpProps } from '../types';
 
 const COMPONENT_NAME = 'SignUp';
 
@@ -20,7 +20,7 @@ const {
   getSignUpTabText,
 } = authenticatorTextUtil;
 
-const SignUp: DefaultSignUpComponent = ({
+const SignUp = ({
   fields,
   handleBlur,
   handleChange,
@@ -29,11 +29,13 @@ const SignUp: DefaultSignUpComponent = ({
   hideSignIn,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultSignUpProps): JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -41,6 +43,7 @@ const SignUp: DefaultSignUpComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const disabled = hasValidationErrors || disableFormSubmit;
@@ -78,6 +81,7 @@ const SignUp: DefaultSignUpComponent = ({
       fields={fieldsWithHandlers}
       headerText={headerText}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };