refactor(component): adjust confirm modal api (#7589)

packages/frontend/component/src/ui/modal/confirm-modal.stories.tsx

@@ -22,9 +22,7 @@ export const UsingHook = () => {
   const showConfirm = () => {
     openConfirmModal({
       cancelText: 'Cancel',
-      confirmButtonOptions: {
-        children: 'Confirm',
-      },
+      confirmText: 'Confirm',
       title: 'Confirm Modal',
       children: 'Are you sure you want to confirm?',
       onConfirm,
@@ -43,9 +41,7 @@ export const AutoClose = () => {
   const onConfirm = () => {
     openConfirmModal({
       cancelText: 'Cancel',
-      confirmButtonOptions: {
-        children: 'Confirm',
-      },
+      confirmText: 'Confirm',
       title: 'Confirm Modal',
       children: 'Are you sure you want to confirm?',
       onConfirm: () => console.log('Confirmed'),

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -10,11 +10,12 @@ import { Modal } from './modal';
 import * as styles from './styles.css';
 
 export interface ConfirmModalProps extends ModalProps {
-  confirmButtonOptions?: ButtonProps;
+  confirmButtonOptions?: Omit<ButtonProps, 'children'>;
   onConfirm?: (() => void) | (() => Promise<void>);
   onCancel?: () => void;
-  cancelText?: string;
-  cancelButtonOptions?: ButtonProps;
+  confirmText?: React.ReactNode;
+  cancelText?: React.ReactNode;
+  cancelButtonOptions?: Omit<ButtonProps, 'children'>;
   reverseFooter?: boolean;
 }
 
@@ -22,6 +23,7 @@ export const ConfirmModal = ({
   children,
   confirmButtonOptions,
   // FIXME: we need i18n
+  confirmText,
   cancelText = 'Cancel',
   cancelButtonOptions,
   reverseFooter,
@@ -64,7 +66,9 @@ export const ConfirmModal = ({
             {cancelText}
           </Button>
         </DialogTrigger>
-        <Button onClick={onConfirmClick} {...confirmButtonOptions}></Button>
+        <Button onClick={onConfirmClick} {...confirmButtonOptions}>
+          {confirmText}
+        </Button>
       </div>
     </Modal>
   );

packages/frontend/component/src/ui/modal/modal.stories.tsx

@@ -58,10 +58,10 @@ const ConfirmModalTemplate: StoryFn<ConfirmModalProps> = () => {
         onConfirm={handleConfirm}
         title="Modal Title"
         description="Modal description"
+        confirmText="Confirm"
         confirmButtonOptions={{
           loading: loading,
           type: 'primary',
-          children: 'Confirm',
         }}
       >
         <Input placeholder="input someting" status={inputStatus} />