From 3e2e9c389c15908b6dc70ad224253d8287273eea Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Wed, 15 Nov 2023 20:42:44 +0800
Subject: [PATCH] feat(pop-confirm): add content api (#2666)

---
 .changeset/six-toys-grow.md                   |  5 ++++
 .changeset/stupid-cobras-exist.md             |  5 ++++
 packages/ui/pop-confirm/src/PopConfirm.tsx    |  7 ++++++
 .../pop-confirm/src/styles/pop-confirm.scss   | 11 ++++++--
 .../stories/custom-content.stories.tsx        | 25 +++++++++++++++++++
 .../ui/pop-confirm/stories/index.stories.tsx  |  1 +
 6 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/six-toys-grow.md
 create mode 100644 .changeset/stupid-cobras-exist.md
 create mode 100644 packages/ui/pop-confirm/stories/custom-content.stories.tsx

diff --git a/.changeset/six-toys-grow.md b/.changeset/six-toys-grow.md
new file mode 100644
index 000000000..1401bea83
--- /dev/null
+++ b/.changeset/six-toys-grow.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+feat(pop-confirm): add content api
diff --git a/.changeset/stupid-cobras-exist.md b/.changeset/stupid-cobras-exist.md
new file mode 100644
index 000000000..46daae191
--- /dev/null
+++ b/.changeset/stupid-cobras-exist.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/pop-confirm": minor
+---
+
+feat: add content api
diff --git a/packages/ui/pop-confirm/src/PopConfirm.tsx b/packages/ui/pop-confirm/src/PopConfirm.tsx
index eaea9e9ae..97bc2ccb3 100644
--- a/packages/ui/pop-confirm/src/PopConfirm.tsx
+++ b/packages/ui/pop-confirm/src/PopConfirm.tsx
@@ -22,6 +22,7 @@ export const PopConfirm = forwardRef<HTMLDivElement | null, PopConfirmProps>(
       className,
       children,
       title,
+      content,
       icon = defaultTipIcon,
       cancelText: cancelTextProp,
       confirmText: confirmTextProp,
@@ -61,6 +62,8 @@ export const PopConfirm = forwardRef<HTMLDivElement | null, PopConfirmProps>(
               <div className={`${prefixCls}__content-title`}>{title}</div>
             </section>
 
+            {content ? <div className={`${prefixCls}__body`}>{content}</div> : null}
+
             {hasFooter ? (
               <footer className={`${prefixCls}__footer`}>
                 {footer === undefined
@@ -103,6 +106,10 @@ export interface PopConfirmProps extends Omit<HiBaseHTMLProps<'div'>, 'title'>,
    * 确认框标题
    */
   title: React.ReactNode
+  /**
+   * 确认框内容
+   */
+  content: React.ReactNode
   /**
    * 取消按钮文案
    */
diff --git a/packages/ui/pop-confirm/src/styles/pop-confirm.scss b/packages/ui/pop-confirm/src/styles/pop-confirm.scss
index 61b65df91..df03d329c 100644
--- a/packages/ui/pop-confirm/src/styles/pop-confirm.scss
+++ b/packages/ui/pop-confirm/src/styles/pop-confirm.scss
@@ -18,16 +18,23 @@ $prefix: '#{$component-prefix}-pop-confirm' !default;
     align-items: center;
 
     &-icon {
-      margin-right: use-spacing(4);
+      margin-right: use-spacing(5);
       color: use-color-mode('warning');
-      font-size: use-text-size('xxl');
+      font-size: use-text-size('xl');
     }
 
     &-title {
       color: use-color('gray', 700);
+      font-weight: use-text-weight('semibold');
     }
   }
 
+  &__body {
+    margin: use-spacing(5) 0 0 use-spacing(14);
+    white-space: normal;
+    color: use-color('gray', 600);
+  }
+
   &__footer {
     margin-top: use-spacing(10);
     text-align: right;
diff --git a/packages/ui/pop-confirm/stories/custom-content.stories.tsx b/packages/ui/pop-confirm/stories/custom-content.stories.tsx
new file mode 100644
index 000000000..e751699f0
--- /dev/null
+++ b/packages/ui/pop-confirm/stories/custom-content.stories.tsx
@@ -0,0 +1,25 @@
+import Button from '@hi-ui/button'
+import React from 'react'
+import PopConfirm from '../src'
+
+/**
+ * @title 自定义内容
+ */
+export const CustomContent = () => {
+  return (
+    <>
+      <h1>CustomContent</h1>
+      <div className="pop-confirm-basic__wrap">
+        <PopConfirm
+          title={
+            <div style={{ whiteSpace: 'normal' }}>很长的通知标题很长的通知标题很长的通知标题</div>
+          }
+          content={<div>这是一段很长的内容这是一段很长的内容这是一段很长的内容</div>}
+          style={{ maxWidth: 300 }}
+        >
+          <Button>Trigger</Button>
+        </PopConfirm>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/pop-confirm/stories/index.stories.tsx b/packages/ui/pop-confirm/stories/index.stories.tsx
index 0e71cbe7e..4b692adbe 100644
--- a/packages/ui/pop-confirm/stories/index.stories.tsx
+++ b/packages/ui/pop-confirm/stories/index.stories.tsx
@@ -3,6 +3,7 @@ import PopConfirm from '../src'
 
 export * from './basic.stories'
 export * from './custom-icon.stories'
+export * from './custom-content.stories'
 export * from './async.stories'
 export * from './gutter-gap.stories'
 export * from './placement.stories'