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

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/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: {

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

@@ -54,6 +54,7 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -134,6 +135,7 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -197,6 +199,7 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -261,6 +264,7 @@ exports[`RadioGroup renders as expected when direction is horizontal 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -348,6 +352,7 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -428,6 +433,7 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -491,6 +497,7 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -555,6 +562,7 @@ exports[`RadioGroup renders as expected when direction is vertical 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -642,6 +650,7 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 24,
@@ -722,6 +731,7 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 24,
@@ -785,6 +795,7 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 24,
@@ -849,6 +860,7 @@ exports[`RadioGroup renders as expected when size is large 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 24,
@@ -936,6 +948,7 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -1016,6 +1029,7 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -1079,6 +1093,7 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -1143,6 +1158,7 @@ exports[`RadioGroup renders as expected when size is medium 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -1230,6 +1246,7 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 16,
@@ -1310,6 +1327,7 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 16,
@@ -1373,6 +1391,7 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 16,
@@ -1437,6 +1456,7 @@ exports[`RadioGroup renders as expected when size is small 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 16,
@@ -1524,6 +1544,7 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -1604,6 +1625,7 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -1667,6 +1689,7 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,
@@ -1731,6 +1754,7 @@ exports[`RadioGroup renders default RadioGroup as expected 1`] = `
               "borderRadius": 999,
               "borderWidth": 2,
               "justifyContent": "center",
+              "margin": 4,
             },
             Object {
               "height": 20,

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '1.2.18';
+export const VERSION = '1.2.19';