docs(popup): optimiza popup docs (#3048)

* docs(popup): optimiza popup docs * chore: update snapshot --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Aug 20, 2024 · b21f49e · b21f49e
1 parent feb6d0b
commit b21f49e
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 30 deletions.
diff --git a/src/popup/_example/dynamic.tsx b/src/popup/_example/dynamic.tsx
@@ -2,7 +2,6 @@ import React, { useState, useRef } from 'react';
 import { Button, Popup } from 'tdesign-react';
 
 export default function Controlled() {
-  const [visible] = useState(true);
   const [spanVisible, setVisible] = useState(false);
   const [content, setContent] = useState('这是popup内容');
   const btnClicksRef = useRef(0);
@@ -15,7 +14,7 @@ export default function Controlled() {
   };
 
   return (
-    <Popup content={content} trigger="context-menu" placement="top" visible={visible}>
+    <Popup content={content} placement="top">
       <Button onClick={toggleContent}>点击改变内容{spanVisible && <span>，再点一下</span>}</Button>
     </Popup>
   );

diff --git a/src/popup/_example/visible.tsx b/src/popup/_example/visible.tsx
@@ -2,11 +2,12 @@ import React, { useState } from 'react';
 import { Button, Popup } from 'tdesign-react';
 
 export default function Controlled() {
-  const [visible] = useState(true);
+  const [visible, setVisible] = useState(false);
 
   return (
     <Popup content="这是popup内容" trigger="context-menu" placement="right" visible={visible}>
-      <Button>一直显示</Button>
+      {/* 当visible=true，trigger节点无法获取元素位置，会导致popup定位异常 */}
+      <Button onClick={() => setVisible(!visible)}>一直显示</Button>
     </Popup>
   );
 }
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -65744,7 +65744,7 @@ exports[`csr snapshot test > csr test src/popup/_example/disabled.tsx 1`] = `
 exports[`csr snapshot test > csr test src/popup/_example/dynamic.tsx 1`] = `
 <div>
   <button
-    class="t-popup-open t-button t-button--theme-primary t-button--variant-base"
+    class="t-button t-button--theme-primary t-button--variant-base"
     type="button"
   >
     <span
@@ -65753,16 +65753,6 @@ exports[`csr snapshot test > csr test src/popup/_example/dynamic.tsx 1`] = `
       点击改变内容
     </span>
   </button>
-  <div
-    class="t-popup t-popup--animation-enter t-popup--animation-enter-active"
-    style="position: absolute; left: 0px; top: 0px;"
-  >
-    <div
-      class="t-popup__content"
-    >
-      这是popup内容
-    </div>
-  </div>
 </div>
 `;
 
@@ -66137,7 +66127,7 @@ exports[`csr snapshot test > csr test src/popup/_example/trigger-element.tsx 1`]
 exports[`csr snapshot test > csr test src/popup/_example/visible.tsx 1`] = `
 <div>
   <button
-    class="t-popup-open t-button t-button--theme-primary t-button--variant-base"
+    class="t-button t-button--theme-primary t-button--variant-base"
     type="button"
   >
     <span
@@ -66146,16 +66136,6 @@ exports[`csr snapshot test > csr test src/popup/_example/visible.tsx 1`] = `
       一直显示
     </span>
   </button>
-  <div
-    class="t-popup t-popup--animation-enter t-popup--animation-enter-active"
-    style="position: absolute; left: 0px; top: 0px;"
-  >
-    <div
-      class="t-popup__content"
-    >
-      这是popup内容
-    </div>
-  </div>
 </div>
 `;
 
@@ -132963,7 +132943,7 @@ exports[`ssr snapshot test > ssr test src/popup/_example/destroy.tsx 1`] = `"<bu
 
 exports[`ssr snapshot test > ssr test src/popup/_example/disabled.tsx 1`] = `"<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">Hover me</span></button>"`;
 
-exports[`ssr snapshot test > ssr test src/popup/_example/dynamic.tsx 1`] = `"<button type=\\"button\\" class=\\"t-popup-open t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">点击改变内容</span></button><div style=\\"position:absolute;left:0;top:0\\" class=\\"t-popup\\"><div class=\\"t-popup__content\\">这是popup内容</div></div>"`;
+exports[`ssr snapshot test > ssr test src/popup/_example/dynamic.tsx 1`] = `"<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">点击改变内容</span></button>"`;
 
 exports[`ssr snapshot test > ssr test src/popup/_example/placement.tsx 1`] = `"<div style=\\"margin:0 auto;width:500px;height:260px;position:relative\\"><button style=\\"position:absolute;top:0;left:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">top</span></button><button style=\\"position:absolute;top:0;left:70px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">top-left</span></button><button style=\\"position:absolute;top:0;right:70px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">top-right</span></button><button style=\\"position:absolute;bottom:0;left:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">bottom</span></button><button style=\\"position:absolute;bottom:0;left:70px;width:120px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">bottom-left</span></button><button style=\\"position:absolute;bottom:0;right:70px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">bottom-right</span></button><button style=\\"position:absolute;left:0;top:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">left</span></button><button style=\\"position:absolute;left:0;top:50px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">left-top</span></button><button style=\\"position:absolute;left:0;bottom:50px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">left-bottom</span></button><button style=\\"position:absolute;right:0;top:42%\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">right</span></button><button style=\\"position:absolute;right:0;top:50px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">right-top</span></button><button style=\\"position:absolute;right:0;bottom:50px\\" type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">right-bottom</span></button></div>"`;
 
@@ -132975,7 +132955,7 @@ exports[`ssr snapshot test > ssr test src/popup/_example/trigger.tsx 1`] = `"<di
 
 exports[`ssr snapshot test > ssr test src/popup/_example/trigger-element.tsx 1`] = `"<div style=\\"gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-default t-button--variant-outline\\"><span class=\\"t-button__text\\">默认子节点元素触发</span></button></div><div class=\\"t-space-item\\"><button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">使用 triggerElement 元素触发</span></button></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/popup/_example/visible.tsx 1`] = `"<button type=\\"button\\" class=\\"t-popup-open t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">一直显示</span></button><div style=\\"position:absolute;left:0;top:0\\" class=\\"t-popup\\"><div class=\\"t-popup__content\\">这是popup内容</div></div>"`;
+exports[`ssr snapshot test > ssr test src/popup/_example/visible.tsx 1`] = `"<button type=\\"button\\" class=\\"t-button t-button--theme-primary t-button--variant-base\\"><span class=\\"t-button__text\\">一直显示</span></button>"`;
 
 exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"<div style=\\"gap:24px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div style=\\"text-align:center;gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>默认样式</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle\\" style=\\"width:112px;height:112px;font-size:17.5px\\"><div class=\\"t-progress__info\\">0%</div><svg width=\\"112\\" height=\\"112\\" viewBox=\\"0 0 118 118\\"><circle cx=\\"59\\" cy=\\"59\\" r=\\"56\\" stroke-width=\\"6\\" stroke=\\"var(--td-bg-color-component)\\" fill=\\"none\\"></circle></svg></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>不显示数字</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle\\" style=\\"width:112px;height:112px;font-size:17.5px\\"><svg width=\\"112\\" height=\\"112\\" viewBox=\\"0 0 118 118\\"><circle cx=\\"59\\" cy=\\"59\\" r=\\"56\\" stroke-width=\\"6\\" stroke=\\"var(--td-bg-color-component)\\" fill=\\"none\\"></circle></svg></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>自定义内容</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle\\" style=\\"width:112px;height:112px;font-size:17.5px\\"><div class=\\"t-progress__info\\"><div>75 day</div></div><svg width=\\"112\\" height=\\"112\\" viewBox=\\"0 0 118 118\\"><circle cx=\\"59\\" cy=\\"59\\" r=\\"56\\" stroke-width=\\"6\\" stroke=\\"var(--td-bg-color-component)\\" fill=\\"none\\"></circle></svg></div></div></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"text-align:center;gap:16px\\" class=\\"t-space t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>进度完成</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle t-progress--status--success\\" style=\\"width:112px;height:112px;font-size:17.5px\\"><div class=\\"t-progress__info\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-check t-progress__icon\\"><path fill=\\"currentColor\\" d=\\"M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z\\"></path></svg></div><svg width=\\"112\\" height=\\"112\\" viewBox=\\"0 0 118 118\\"><circle cx=\\"59\\" cy=\\"59\\" r=\\"56\\" stroke-width=\\"6\\" stroke=\\"var(--td-bg-color-component)\\" fill=\\"none\\"></circle><circle cx=\\"59\\" cy=\\"59\\" r=\\"56\\" stroke-width=\\"6\\" fill=\\"none\\" transform=\\"matrix(0,-1,1,0,0,118)\\" stroke-dasharray=\\"351.85837720205683  0\\" class=\\"t-progress__circle-inner\\" style=\\"stroke-linecap:round\\"></circle></svg></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>进度发生错误</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle t-progress--status--error\\" style=\\"width:112px;height:112px;font-size:17.5px\\"><div class=\\"t-progress__info\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-progress__icon\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><svg width=\\"112\\" height=\\"112\\" viewBox=\\"0 0 118 118\\"><circle cx=\\"59\\" cy=\\"59\\" r=\\"56\\" stroke-width=\\"6\\" stroke=\\"var(--td-bg-color-component)\\" fill=\\"none\\"></circle></svg></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>进度被中断</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle t-progress--status--warning\\" style=\\"width:112px;height:112px;font-size:17.5px\\"><div class=\\"t-progress__info\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-error t-progress__icon\\"><path fill=\\"currentColor\\" d=\\"M13 2v14.5h-2V2h2zm-2 17h2v2h-2v-2z\\"></path></svg></div><svg width=\\"112\\" height=\\"112\\" viewBox=\\"0 0 118 118\\"><circle cx=\\"59\\" cy=\\"59\\" r=\\"56\\" stroke-width=\\"6\\" stroke=\\"var(--td-bg-color-component)\\" fill=\\"none\\"></circle></svg></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>自定义颜色</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle t-progress--status--error\\" style=\\"width:112px;height:112px;font-size:17.5px\\"><div class=\\"t-progress__info\\"><svg fill=\\"none\\" viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-close t-progress__icon\\"><path fill=\\"currentColor\\" d=\\"M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z\\"></path></svg></div><svg width=\\"112\\" height=\\"112\\" viewBox=\\"0 0 118 118\\"><circle cx=\\"59\\" cy=\\"59\\" r=\\"56\\" stroke-width=\\"6\\" stroke=\\"#0f0\\" fill=\\"none\\"></circle></svg></div></div></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"text-align:center;gap:16px\\" class=\\"t-space t-space-align-center t-space-horizontal\\"><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>小尺寸</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle\\" style=\\"width:72px;height:72px;font-size:12.64px\\"><div class=\\"t-progress__info\\">0%</div><svg width=\\"72\\" height=\\"72\\" viewBox=\\"0 0 76 76\\"><circle cx=\\"38\\" cy=\\"38\\" r=\\"36\\" stroke-width=\\"4\\" stroke=\\"var(--td-bg-color-component)\\" fill=\\"none\\"></circle></svg></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>默认尺寸</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle\\" style=\\"width:112px;height:112px;font-size:17.5px\\"><div class=\\"t-progress__info\\">0%</div><svg width=\\"112\\" height=\\"112\\" viewBox=\\"0 0 118 118\\"><circle cx=\\"59\\" cy=\\"59\\" r=\\"56\\" stroke-width=\\"6\\" stroke=\\"var(--td-bg-color-component)\\" fill=\\"none\\"></circle></svg></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>大尺寸</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle\\" style=\\"width:160px;height:160px;font-size:23.98px\\"><div class=\\"t-progress__info\\">0%</div><svg width=\\"160\\" height=\\"160\\" viewBox=\\"0 0 166 166\\"><circle cx=\\"83\\" cy=\\"83\\" r=\\"80\\" stroke-width=\\"6\\" stroke=\\"var(--td-bg-color-component)\\" fill=\\"none\\"></circle></svg></div></div></div></div></div><div class=\\"t-space-item\\"><div style=\\"gap:16px\\" class=\\"t-space t-space-vertical\\"><div class=\\"t-space-item\\"><div>自定义尺寸</div></div><div class=\\"t-space-item\\"><div><div class=\\"t-progress--circle\\" style=\\"width:112px;height:112px;font-size:5.62px\\"><div class=\\"t-progress__info\\">0%</div><svg width=\\"112\\" height=\\"112\\" viewBox=\\"0 0 162 162\\"><circle cx=\\"81\\" cy=\\"81\\" r=\\"56\\" stroke-width=\\"50\\" stroke=\\"var(--td-bg-color-component)\\" fill=\\"none\\"></circle></svg></div></div></div></div></div></div></div></div>"`;