chore(account-settings): overrides cleanup

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

@@ -24,7 +24,7 @@ function DeleteUser({
   const { user, isLoading } = useAuth();
 
   // subcomponents
-  const { Error, SubmitButton, Warning } = React.useMemo(
+  const { Error, DeleteButton, Warning } = React.useMemo(
     () => ({ ...DEFAULTS, ...(components ?? {}) }),
     [components]
   );
@@ -88,12 +88,12 @@ function DeleteUser({
 
   return (
     <Flex direction="column">
-      <SubmitButton
+      <DeleteButton
         isDisabled={state === 'CONFIRMATION'}
         onClick={startConfirmation}
       >
         {deleteAccountText}
-      </SubmitButton>
+      </DeleteButton>
       {state === 'CONFIRMATION' || state === 'DELETING' ? (
         <Warning
           onCancel={handleCancel}
@@ -107,7 +107,7 @@ function DeleteUser({
 }
 
 DeleteUser.Error = DEFAULTS.Error;
-DeleteUser.SubmitButton = DEFAULTS.SubmitButton;
+DeleteUser.DeleteButton = DEFAULTS.DeleteButton;
 DeleteUser.Warning = DEFAULTS.Warning;
 
 export default DeleteUser;

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

@@ -23,30 +23,40 @@ jest.mock('../../../../internal', () => ({
 
 const deleteUserSpy = jest.spyOn(UIModule, 'deleteUser');
 
-function CustomWarning({ onCancel, onConfirm, isDisabled }) {
+function CustomWarning({ onCancel, onConfirm }) {
   return (
     <Flex direction="column">
       <Text variation="warning">Custom Warning Message</Text>
       <Button onClick={onCancel}>Back</Button>
-      <Button variation="primary" onClick={onConfirm} isDisabled={isDisabled}>
+      <Button variation="primary" onClick={onConfirm}>
         Custom Confirm Button
       </Button>
     </Flex>
   );
 }
 
+const CustomDeleteButton = ({ onClick, isDisabled }) => {
+  return (
+    <Button isDisabled={isDisabled} onClick={onClick}>
+      Custom Delete Button
+    </Button>
+  );
+};
+
+const CustomError = ({ children }) => (
+  <>
+    <Heading>Custom Error Message</Heading>
+    <Text>{children}</Text>
+  </>
+);
+
 const components: DeleteUserComponents = {
-  SubmitButton: (props) => <Button {...props}>Custom Delete Button</Button>,
+  DeleteButton: CustomDeleteButton,
   Warning: CustomWarning,
-  Error: ({ children }) => (
-    <>
-      <Heading>Custom Error Message</Heading>
-      <Text>{children}</Text>
-    </>
-  ),
+  Error: CustomError,
 };
 
-describe('ChangePassword', () => {
+describe('DeleteUser', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ChangePassword renders as expected 1`] = `
+exports[`DeleteUser renders as expected 1`] = `
 <div>
   <div
     class="amplify-flex"
@@ -17,7 +17,7 @@ exports[`ChangePassword renders as expected 1`] = `
 </div>
 `;
 
-exports[`ChangePassword renders as expected with components overrides 1`] = `
+exports[`DeleteUser renders as expected with components overrides 1`] = `
 <div>
   <div
     class="amplify-flex"

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

@@ -41,7 +41,7 @@ const DefaultWarning: WarningComponent = ({
 
 const DEFAULTS: Required<DeleteUserComponents> = {
   Error: DefaultError,
-  SubmitButton: Button,
+  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 { ErrorComponent, SubmitButtonComponent } from '../types';
+import { ButtonComponent, ErrorComponent } from '../types';
 
 export interface WarningProps {
   /** called when end user cancels account deletion */
@@ -26,7 +26,7 @@ export type DeleteUserState =
 
 export interface DeleteUserComponents {
   Error?: ErrorComponent;
-  SubmitButton?: SubmitButtonComponent;
+  DeleteButton?: ButtonComponent;
   Warning?: WarningComponent;
 }
 

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

@@ -6,29 +6,45 @@ import {
   PrimitiveProps,
 } from '../../primitives/types';
 
-/**
+/*
  * These are primitive prop types that account settings component use.
  *
  * Note that `PrimitiveProps` is used to get native html types, like `onSubmit`.
  */
-type CommonPasswordFieldProps = Partial<
-  PrimitiveProps<PasswordFieldProps, 'input'>
->;
-type CommonButtonProps = Partial<PrimitiveProps<ButtonProps, 'button'>>;
-type CommonAlertProps = Partial<PrimitiveProps<AlertProps, 'div'>>;
+type PasswordFieldPrimitiveProps = PrimitiveProps<PasswordFieldProps, 'input'>;
+type ButtonPrimtiveProps = PrimitiveProps<ButtonProps, 'button'>;
+type AlertPrimitiveProps = PrimitiveProps<AlertProps, 'div'>;
+
+/*
+ * These are common prop types for component overrides.
+ *
+ * Any essential props for overriding components are marked as required.
+ */
+type CommonPasswordFieldProps = Partial<PasswordFieldPrimitiveProps> &
+  Required<Pick<PasswordFieldPrimitiveProps, 'onBlur' | 'onChange' | 'name'>>;
+type CommonButtonProps = Partial<ButtonPrimtiveProps> &
+  Required<Pick<ButtonPrimtiveProps, 'onClick' | 'isDisabled'>>;
+type CommonSubmitButtonProps = Partial<PrimitiveProps<ButtonProps, 'button'>> &
+  Required<Pick<ButtonPrimtiveProps, 'isDisabled'>>;
+type CommonAlertProps = Partial<PrimitiveProps<AlertProps, 'div'>> &
+  Required<Pick<AlertPrimitiveProps, 'children'>>;
 
-/**
- * These are overridable component types (e.g. submit button).
+/*
+ * These are component override types.
  */
 export type PasswordFieldComponent<Props = {}> = React.ComponentType<
   // `Props` generic allows additional props passed on override components
   Props & CommonPasswordFieldProps & { validationErrors?: string[] }
 >;
 
-export type SubmitButtonComponent<Props = {}> = React.ComponentType<
+export type ButtonComponent<Props = {}> = React.ComponentType<
   Props & CommonButtonProps
 >;
 
+export type SubmitButtonComponent<Props = {}> = React.ComponentType<
+  Props & CommonSubmitButtonProps
+>;
+
 export type ErrorComponent<Props = {}> = React.ComponentType<
   Props & CommonAlertProps
 >;