From 6bf2f15696ecca0abdeaea80aaedecdf87b15a04 Mon Sep 17 00:00:00 2001
From: xiexiejie <zhangjie891124@126.com>
Date: Fri, 6 Dec 2024 16:25:27 +0800
Subject: [PATCH] feat: add default content-padding

---
 packages/bui-core/src/Popover/Popover.less   |  2 +-
 packages/bui-core/src/Popover/index.en-US.md | 84 +++++---------------
 packages/bui-core/src/Popover/index.zh-CN.md | 84 +++++---------------
 3 files changed, 39 insertions(+), 131 deletions(-)

diff --git a/packages/bui-core/src/Popover/Popover.less b/packages/bui-core/src/Popover/Popover.less
index 616f390..a9d3175 100644
--- a/packages/bui-core/src/Popover/Popover.less
+++ b/packages/bui-core/src/Popover/Popover.less
@@ -40,7 +40,7 @@
   --localtion-position: var(--bui-popover-localtion-position, 8PX);
   --max-width: var(--bui-popover-max-width, 350px);
   --content-min-width: var(--bui-popover-content-min-width, 30px);
-  --content-padding: var(--bui-popover-content-padding, 0);
+  --content-padding: var(--bui-popover-content-padding, 6px 8px);
   max-width: var(--max-width);
   font-size: var(--bui-text-size-1);
   position: absolute;
diff --git a/packages/bui-core/src/Popover/index.en-US.md b/packages/bui-core/src/Popover/index.en-US.md
index 3dbcf20..66ffe8e 100644
--- a/packages/bui-core/src/Popover/index.en-US.md
+++ b/packages/bui-core/src/Popover/index.en-US.md
@@ -19,10 +19,7 @@ import React from 'react';
 
 export default () => {
   return (
-    <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a title</div>}
-      content={<div style={{ padding: '2px 8px' }}>This is a content</div>}
-    >
+    <Popover title="This is a title" content="This is a content">
       <span>click显示</span>
     </Popover>
   );
@@ -40,10 +37,7 @@ import React, { useState } from 'react';
 export default () => {
   const [open, setOpen] = useState(true);
   return (
-    <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-      open={open}
-    >
+    <Popover title="This is a popover" open={open}>
       <span onClick={() => setOpen(!open)}>open控制显隐</span>
     </Popover>
   );
@@ -60,10 +54,7 @@ import React from 'react';
 
 export default () => {
   return (
-    <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-      defaultOpen
-    >
+    <Popover title="This is a popover" defaultOpen>
       <span>defaultOpen默认显示</span>
     </Popover>
   );
@@ -80,11 +71,7 @@ import React from 'react';
 
 export default () => {
   return (
-    <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-      defaultOpen
-      hideArrow
-    >
+    <Popover title="This is a popover" defaultOpen hideArrow>
       <span>defaultOpen默认显示</span>
     </Popover>
   );
@@ -118,25 +105,13 @@ export default () => {
           justifyContent: 'space-between',
         }}
       >
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="topLeft"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="topLeft">
           {packageButton(<span>topLeft</span>)}
         </Popover>
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="top"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="top">
           {packageButton(<span>top</span>)}
         </Popover>
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="topRight"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="topRight">
           {packageButton(<span>topRight</span>)}
         </Popover>
       </div>
@@ -148,23 +123,15 @@ export default () => {
           flexDirection: 'column',
         }}
       >
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="leftTop"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="leftTop">
           {packageButton(<span>leftTop</span>)}
         </Popover>
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="left"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="left">
           {packageButton(<span>left</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
+          title="This is a popover"
           placement="leftBottom"
         >
           {packageButton(<span>leftBottom</span>)}
@@ -178,23 +145,15 @@ export default () => {
           flexDirection: 'column',
         }}
       >
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="rightTop"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="rightTop">
           {packageButton(<span>rightTop</span>)}
         </Popover>
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="right"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="right">
           {packageButton(<span>right</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
+          title="This is a popover"
           placement="rightBottom"
         >
           {packageButton(<span>rightBottom</span>)}
@@ -211,21 +170,17 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
+          title="This is a popover"
           placement="bottomLeft"
         >
           {packageButton(<span>bottomLeft</span>)}
         </Popover>
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="bottom"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="bottom">
           {packageButton(<span>bottom</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
+          title="This is a popover"
           placement="bottomRight"
         >
           {packageButton(<span>bottomRight</span>)}
@@ -246,10 +201,7 @@ import React from 'react';
 
 export default () => {
   return (
-    <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-      trigger="hover"
-    >
+    <Popover title="This is a popover" trigger="hover">
       <span>hover触发方式</span>
     </Popover>
   );
@@ -268,7 +220,7 @@ export default () => {
   };
   return (
     <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
+      title="This is a popover"
       trigger="hover"
       onOpenChange={onOpenChange}
     >
diff --git a/packages/bui-core/src/Popover/index.zh-CN.md b/packages/bui-core/src/Popover/index.zh-CN.md
index 977106c..db08a59 100644
--- a/packages/bui-core/src/Popover/index.zh-CN.md
+++ b/packages/bui-core/src/Popover/index.zh-CN.md
@@ -20,8 +20,9 @@ import React from 'react';
 export default () => {
   return (
     <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a title</div>}
-      content={<div style={{ padding: '2px 8px' }}>This is a content</div>}
+      title="This is a title"
+      content="This is a content"
+      placement="topLeft"
     >
       <span>click显示</span>
     </Popover>
@@ -40,10 +41,7 @@ import React, { useState } from 'react';
 export default () => {
   const [open, setOpen] = useState(true);
   return (
-    <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-      open={open}
-    >
+    <Popover title="This is a popover" open={open}>
       <span onClick={() => setOpen(!open)}>open控制显隐</span>
     </Popover>
   );
@@ -60,10 +58,7 @@ import React from 'react';
 
 export default () => {
   return (
-    <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-      defaultOpen
-    >
+    <Popover title="This is a popover" defaultOpen>
       <span>defaultOpen默认显示</span>
     </Popover>
   );
@@ -80,11 +75,7 @@ import React from 'react';
 
 export default () => {
   return (
-    <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-      defaultOpen
-      hideArrow
-    >
+    <Popover title="This is a popover" defaultOpen hideArrow>
       <span>defaultOpen默认显示</span>
     </Popover>
   );
@@ -118,25 +109,13 @@ export default () => {
           justifyContent: 'space-between',
         }}
       >
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="topLeft"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="topLeft">
           {packageButton(<span>topLeft</span>)}
         </Popover>
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="top"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="top">
           {packageButton(<span>top</span>)}
         </Popover>
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="topRight"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="topRight">
           {packageButton(<span>topRight</span>)}
         </Popover>
       </div>
@@ -148,23 +127,15 @@ export default () => {
           flexDirection: 'column',
         }}
       >
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="leftTop"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="leftTop">
           {packageButton(<span>leftTop</span>)}
         </Popover>
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="left"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="left">
           {packageButton(<span>left</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
+          title="This is a popover"
           placement="leftBottom"
         >
           {packageButton(<span>leftBottom</span>)}
@@ -178,23 +149,15 @@ export default () => {
           flexDirection: 'column',
         }}
       >
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="rightTop"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="rightTop">
           {packageButton(<span>rightTop</span>)}
         </Popover>
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="right"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="right">
           {packageButton(<span>right</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
+          title="This is a popover"
           placement="rightBottom"
         >
           {packageButton(<span>rightBottom</span>)}
@@ -211,21 +174,17 @@ export default () => {
       >
         <Popover
           trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
+          title="This is a popover"
           placement="bottomLeft"
         >
           {packageButton(<span>bottomLeft</span>)}
         </Popover>
-        <Popover
-          trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-          placement="bottom"
-        >
+        <Popover trigger="hover" title="This is a popover" placement="bottom">
           {packageButton(<span>bottom</span>)}
         </Popover>
         <Popover
           trigger="hover"
-          title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
+          title="This is a popover"
           placement="bottomRight"
         >
           {packageButton(<span>bottomRight</span>)}
@@ -246,10 +205,7 @@ import React from 'react';
 
 export default () => {
   return (
-    <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
-      trigger="hover"
-    >
+    <Popover title="This is a popover" trigger="hover">
       <span>hover触发方式</span>
     </Popover>
   );
@@ -268,7 +224,7 @@ export default () => {
   };
   return (
     <Popover
-      title={<div style={{ padding: '2px 8px' }}>This is a popover</div>}
+      title="This is a popover"
       trigger="hover"
       onOpenChange={onOpenChange}
     >