Merge pull request #2667 from XiaoMi/feature/2666(pop-confirm)

feat(pop-confirm): add content api (#2666)
XiaoMi · Nov 16, 2023 · 69094e5 · 69094e5
2 parents be7fc59 + 3e2e9c3
commit 69094e5
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 2 deletions.
diff --git a/.changeset/six-toys-grow.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'