Error => ErrorMessage

packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx

@@ -120,8 +120,16 @@ function ChangePassword({
   const updatePasswordText = translate('Update password');
 
   /* Subcomponents */
-  const { CurrentPassword, NewPassword, ConfirmPassword, SubmitButton, Error } =
-    React.useMemo(() => ({ ...DEFAULTS, ...(components ?? {}) }), [components]);
+  const {
+    CurrentPassword,
+    NewPassword,
+    ConfirmPassword,
+    SubmitButton,
+    ErrorMessage,
+  } = React.useMemo(
+    () => ({ ...DEFAULTS, ...(components ?? {}) }),
+    [components]
+  );
 
   /* Event Handlers */
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -208,7 +216,7 @@ function ChangePassword({
         <SubmitButton isDisabled={isDisabled} type="submit">
           {updatePasswordText}
         </SubmitButton>
-        {errorMessage ? <Error>{errorMessage}</Error> : null}
+        {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : null}
       </Flex>
     </View>
   );
@@ -218,6 +226,6 @@ ChangePassword.CurrentPassword = DEFAULTS.CurrentPassword;
 ChangePassword.NewPassword = DEFAULTS.NewPassword;
 ChangePassword.ConfirmPassword = DEFAULTS.ConfirmPassword;
 ChangePassword.SubmitButton = DEFAULTS.SubmitButton;
-ChangePassword.Error = DEFAULTS.Error;
+ChangePassword.ErrorMessage = DEFAULTS.ErrorMessage;
 
 export default ChangePassword;

packages/react/src/components/AccountSettings/ChangePassword/defaults.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, PasswordField } from '../../../primitives';
 import { ValidationErrors } from '../../shared/ValidationErrors';
-import { DefaultError } from '../shared/Defaults';
+import { DefaultErrorMessage } from '../shared/Defaults';
 import { PasswordFieldComponent } from '../types';
 import { ChangePasswordComponents } from './types';
 
@@ -23,7 +23,7 @@ const DEFAULTS: Required<ChangePasswordComponents> = {
   NewPassword: DefaultPasswordField,
   ConfirmPassword: DefaultPasswordField,
   SubmitButton: Button,
-  Error: DefaultError,
+  ErrorMessage: DefaultErrorMessage,
 };
 
 export default DEFAULTS;

packages/react/src/components/AccountSettings/ChangePassword/types.ts

@@ -1,6 +1,6 @@
 import { InputEventType, ValidatorOptions } from '@aws-amplify/ui';
 import {
-  ErrorComponent,
+  ErrorMessageComponent,
   PasswordFieldComponent,
   SubmitButtonComponent,
   FormValues,
@@ -11,7 +11,7 @@ export interface ChangePasswordComponents {
   NewPassword?: PasswordFieldComponent;
   ConfirmPassword?: PasswordFieldComponent;
   SubmitButton?: SubmitButtonComponent;
-  Error?: ErrorComponent;
+  ErrorMessage?: ErrorMessageComponent;
 }
 
 export type ValidateParams = {

packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx

@@ -24,7 +24,7 @@ function DeleteUser({
   const { user, isLoading } = useAuth();
 
   // subcomponents
-  const { Error, DeleteButton, Warning } = React.useMemo(
+  const { ErrorMessage, DeleteButton, Warning } = React.useMemo(
     () => ({ ...DEFAULTS, ...(components ?? {}) }),
     [components]
   );
@@ -101,12 +101,12 @@ function DeleteUser({
           onConfirm={handleConfirmDelete}
         />
       ) : null}
-      {errorMessage ? <Error>{errorMessage}</Error> : null}
+      {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : null}
     </Flex>
   );
 }
 
-DeleteUser.Error = DEFAULTS.Error;
+DeleteUser.ErrorMessage = DEFAULTS.ErrorMessage;
 DeleteUser.DeleteButton = DEFAULTS.DeleteButton;
 DeleteUser.Warning = DEFAULTS.Warning;
 

packages/react/src/components/AccountSettings/DeleteUser/__tests__/DeleteUser.test.tsx

@@ -37,7 +37,7 @@ const CustomDeleteButton = ({ onClick, isDisabled }) => {
   );
 };
 
-const CustomError = ({ children }) => (
+const CustomErrorMessage = ({ children }) => (
   <>
     <Heading>Custom Error Message</Heading>
     <Text>{children}</Text>
@@ -47,7 +47,7 @@ const CustomError = ({ children }) => (
 const components: DeleteUserComponents = {
   DeleteButton: CustomDeleteButton,
   Warning: CustomWarning,
-  Error: CustomError,
+  ErrorMessage: CustomErrorMessage,
 };
 
 describe('DeleteUser', () => {

packages/react/src/components/AccountSettings/DeleteUser/defaults.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { translate } from '@aws-amplify/ui';
 
 import { Button, Card, Flex, Text } from '../../../primitives';
-import { DefaultError } from '../shared/Defaults';
+import { DefaultErrorMessage } from '../shared/Defaults';
 import { DeleteUserComponents, WarningComponent } from './types';
 
 const DefaultWarning: WarningComponent = ({
@@ -40,7 +40,7 @@ const DefaultWarning: WarningComponent = ({
 };
 
 const DEFAULTS: Required<DeleteUserComponents> = {
-  Error: DefaultError,
+  ErrorMessage: DefaultErrorMessage,
   DeleteButton: Button,
   Warning: DefaultWarning,
 };

packages/react/src/components/AccountSettings/DeleteUser/types.ts

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { AmplifyUser } from '@aws-amplify/ui';
 
-import { ButtonComponent, ErrorComponent } from '../types';
+import { ButtonComponent, ErrorMessageComponent } from '../types';
 
 export interface WarningProps {
   /** called when end user cancels account deletion */
@@ -25,7 +25,7 @@ export type DeleteUserState =
   | 'ERROR';
 
 export interface DeleteUserComponents {
-  Error?: ErrorComponent;
+  ErrorMessage?: ErrorMessageComponent;
   DeleteButton?: ButtonComponent;
   Warning?: WarningComponent;
 }

packages/react/src/components/AccountSettings/shared/Defaults.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Alert } from '../../../primitives';
-import { ErrorComponent } from '../types';
+import { ErrorMessageComponent } from '../types';
 
-export const DefaultError: ErrorComponent = (props) => {
+export const DefaultErrorMessage: ErrorMessageComponent = (props) => {
   return <Alert variation="error" {...props} />;
 };

packages/react/src/components/AccountSettings/types.ts

@@ -49,7 +49,7 @@ export type SubmitButtonComponent<Props = {}> = React.ComponentType<
   Props & CommonButtonProps<'submit'>
 >;
 
-export type ErrorComponent<Props = {}> = React.ComponentType<
+export type ErrorMessageComponent<Props = {}> = React.ComponentType<
   Props & CommonAlertProps
 >;