From 33f81aa01d15923e83b0223a3a56b07a8bcd7d73 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Thu, 15 Dec 2022 12:06:17 +0800
Subject: [PATCH] demo: update demo (#39576)

---
 .../__snapshots__/demo-extend.test.ts.snap    | 270 ++++++++++++------
 .../__tests__/__snapshots__/demo.test.ts.snap | 186 +++++++-----
 components/float-button/demo/group-menu.md    |   2 +-
 components/float-button/demo/group-menu.tsx   |  24 +-
 components/float-button/demo/shape.md         |   2 +-
 components/float-button/demo/shape.tsx        |  36 +--
 components/float-button/demo/tooltip.md       |   2 +-
 components/float-button/demo/type.md          |   2 +-
 8 files changed, 330 insertions(+), 194 deletions(-)

diff --git a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
index c2e30ea256..179fc62543 100644
--- a/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -691,68 +691,134 @@ Array [
 `;
 
 exports[`renders ./components/float-button/demo/group-menu.tsx extend context correctly 1`] = `
-<div
-  class="ant-float-btn-group ant-float-btn-group-circle"
->
-  <button
-    class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
-    type="button"
+Array [
+  <div
+    class="ant-float-btn-group ant-float-btn-group-circle"
+    style="right:24px"
   >
-    <div
-      class="ant-float-btn-body"
+    <button
+      class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
+      type="button"
     >
       <div
-        class="ant-float-btn-content"
+        class="ant-float-btn-body"
       >
         <div
-          class="ant-float-btn-icon"
-        >
-          <span
-            aria-label="customer-service"
-            class="anticon anticon-customer-service"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="customer-service"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
-              />
-            </svg>
-          </span>
-        </div>
-      </div>
-    </div>
-    <div>
-      <div
-        class="ant-tooltip"
-        style="opacity:0"
-      >
-        <div
-          class="ant-tooltip-content"
+          class="ant-float-btn-content"
         >
           <div
-            class="ant-tooltip-arrow"
+            class="ant-float-btn-icon"
           >
             <span
-              class="ant-tooltip-arrow-content"
-            />
+              aria-label="customer-service"
+              class="anticon anticon-customer-service"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="customer-service"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
+                />
+              </svg>
+            </span>
           </div>
-          <div
-            class="ant-tooltip-inner"
-            role="tooltip"
-          />
         </div>
       </div>
-    </div>
-  </button>
-</div>
+      <div>
+        <div
+          class="ant-tooltip"
+          style="opacity:0"
+        >
+          <div
+            class="ant-tooltip-content"
+          >
+            <div
+              class="ant-tooltip-arrow"
+            >
+              <span
+                class="ant-tooltip-arrow-content"
+              />
+            </div>
+            <div
+              class="ant-tooltip-inner"
+              role="tooltip"
+            />
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>,
+  <div
+    class="ant-float-btn-group ant-float-btn-group-circle"
+    style="right:94px"
+  >
+    <button
+      class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
+      type="button"
+    >
+      <div
+        class="ant-float-btn-body"
+      >
+        <div
+          class="ant-float-btn-content"
+        >
+          <div
+            class="ant-float-btn-icon"
+          >
+            <span
+              aria-label="customer-service"
+              class="anticon anticon-customer-service"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="customer-service"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="ant-tooltip"
+          style="opacity:0"
+        >
+          <div
+            class="ant-tooltip-content"
+          >
+            <div
+              class="ant-tooltip-arrow"
+            >
+              <span
+                class="ant-tooltip-arrow-content"
+              />
+            </div>
+            <div
+              class="ant-tooltip-inner"
+              role="tooltip"
+            />
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>,
+]
 `;
 
 exports[`renders ./components/float-button/demo/render-panel.tsx extend context correctly 1`] = `
@@ -1370,52 +1436,68 @@ exports[`renders ./components/float-button/demo/render-panel.tsx extend context
 
 exports[`renders ./components/float-button/demo/shape.tsx extend context correctly 1`] = `
 Array [
-  <div
-    class="ant-radio-group ant-radio-group-outline"
-    style="margin:20px"
-  >
-    <label
-      class="ant-radio-wrapper ant-radio-wrapper-checked"
-    >
-      <span
-        class="ant-radio ant-radio-checked"
-      >
-        <input
-          checked=""
-          class="ant-radio-input"
-          type="radio"
-          value="circle"
-        />
-        <span
-          class="ant-radio-inner"
-        />
-      </span>
-      <span>
-        圆形
-      </span>
-    </label>
-    <label
-      class="ant-radio-wrapper"
-    >
-      <span
-        class="ant-radio"
-      >
-        <input
-          class="ant-radio-input"
-          type="radio"
-          value="square"
-        />
-        <span
-          class="ant-radio-inner"
-        />
-      </span>
-      <span>
-        方形
-      </span>
-    </label>
-  </div>,
   <button
     class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
+    style="right:94px"
+    type="button"
+  >
+    <div
+      class="ant-float-btn-body"
+    >
+      <div
+        class="ant-float-btn-content"
+      >
+        <div
+          class="ant-float-btn-icon"
+        >
+          <span
+            aria-label="customer-service"
+            class="anticon anticon-customer-service"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="customer-service"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div
+        class="ant-tooltip"
+        style="opacity:0"
+      >
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-arrow"
+          >
+            <span
+              class="ant-tooltip-arrow-content"
+            />
+          </div>
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+    </div>
+  </button>,
+  <button
+    class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
+    style="right:24px"
     type="button"
   >
     <div
diff --git a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap
index ab7f62a8a6..fdce3b0a95 100644
--- a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap
@@ -449,46 +449,90 @@ Array [
 `;
 
 exports[`renders ./components/float-button/demo/group-menu.tsx correctly 1`] = `
-<div
-  class="ant-float-btn-group ant-float-btn-group-circle"
->
-  <button
-    class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
-    type="button"
+Array [
+  <div
+    class="ant-float-btn-group ant-float-btn-group-circle"
+    style="right:24px"
   >
-    <div
-      class="ant-float-btn-body"
+    <button
+      class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
+      type="button"
     >
       <div
-        class="ant-float-btn-content"
+        class="ant-float-btn-body"
       >
         <div
-          class="ant-float-btn-icon"
+          class="ant-float-btn-content"
         >
-          <span
-            aria-label="customer-service"
-            class="anticon anticon-customer-service"
-            role="img"
+          <div
+            class="ant-float-btn-icon"
           >
-            <svg
-              aria-hidden="true"
-              data-icon="customer-service"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
+            <span
+              aria-label="customer-service"
+              class="anticon anticon-customer-service"
+              role="img"
             >
-              <path
-                d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
-              />
-            </svg>
-          </span>
+              <svg
+                aria-hidden="true"
+                data-icon="customer-service"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
+                />
+              </svg>
+            </span>
+          </div>
         </div>
       </div>
-    </div>
-  </button>
-</div>
+    </button>
+  </div>,
+  <div
+    class="ant-float-btn-group ant-float-btn-group-circle"
+    style="right:94px"
+  >
+    <button
+      class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
+      type="button"
+    >
+      <div
+        class="ant-float-btn-body"
+      >
+        <div
+          class="ant-float-btn-content"
+        >
+          <div
+            class="ant-float-btn-icon"
+          >
+            <span
+              aria-label="customer-service"
+              class="anticon anticon-customer-service"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                data-icon="customer-service"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </button>
+  </div>,
+]
 `;
 
 exports[`renders ./components/float-button/demo/render-panel.tsx correctly 1`] = `
@@ -886,52 +930,46 @@ exports[`renders ./components/float-button/demo/render-panel.tsx correctly 1`] =
 
 exports[`renders ./components/float-button/demo/shape.tsx correctly 1`] = `
 Array [
-  <div
-    class="ant-radio-group ant-radio-group-outline"
-    style="margin:20px"
-  >
-    <label
-      class="ant-radio-wrapper ant-radio-wrapper-checked"
-    >
-      <span
-        class="ant-radio ant-radio-checked"
-      >
-        <input
-          checked=""
-          class="ant-radio-input"
-          type="radio"
-          value="circle"
-        />
-        <span
-          class="ant-radio-inner"
-        />
-      </span>
-      <span>
-        圆形
-      </span>
-    </label>
-    <label
-      class="ant-radio-wrapper"
-    >
-      <span
-        class="ant-radio"
-      >
-        <input
-          class="ant-radio-input"
-          type="radio"
-          value="square"
-        />
-        <span
-          class="ant-radio-inner"
-        />
-      </span>
-      <span>
-        方形
-      </span>
-    </label>
-  </div>,
   <button
     class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
+    style="right:94px"
+    type="button"
+  >
+    <div
+      class="ant-float-btn-body"
+    >
+      <div
+        class="ant-float-btn-content"
+      >
+        <div
+          class="ant-float-btn-icon"
+        >
+          <span
+            aria-label="customer-service"
+            class="anticon anticon-customer-service"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="customer-service"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384zM328 632v192H200V632h128zm496 192H696V632h128v192z"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
+  </button>,
+  <button
+    class="ant-float-btn ant-float-btn-primary ant-float-btn-square"
+    style="right:24px"
     type="button"
   >
     <div
diff --git a/components/float-button/demo/group-menu.md b/components/float-button/demo/group-menu.md
index e1d563dbf4..1f53c07a72 100644
--- a/components/float-button/demo/group-menu.md
+++ b/components/float-button/demo/group-menu.md
@@ -1,6 +1,6 @@
 ## zh-CN
 
-设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式
+设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。
 
 ## en-US
 
diff --git a/components/float-button/demo/group-menu.tsx b/components/float-button/demo/group-menu.tsx
index 29d04d5093..7954df99f8 100644
--- a/components/float-button/demo/group-menu.tsx
+++ b/components/float-button/demo/group-menu.tsx
@@ -3,10 +3,26 @@ import { FloatButton } from 'antd';
 import { CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons';
 
 const App: React.FC = () => (
-  <FloatButton.Group icon={<CustomerServiceOutlined />} type="primary" trigger="click">
-    <FloatButton />
-    <FloatButton icon={<CommentOutlined />} />
-  </FloatButton.Group>
+  <>
+    <FloatButton.Group
+      trigger="click"
+      type="primary"
+      style={{ right: 24 }}
+      icon={<CustomerServiceOutlined />}
+    >
+      <FloatButton />
+      <FloatButton icon={<CommentOutlined />} />
+    </FloatButton.Group>
+    <FloatButton.Group
+      trigger="hover"
+      type="primary"
+      style={{ right: 94 }}
+      icon={<CustomerServiceOutlined />}
+    >
+      <FloatButton />
+      <FloatButton icon={<CommentOutlined />} />
+    </FloatButton.Group>
+  </>
 );
 
 export default App;
diff --git a/components/float-button/demo/shape.md b/components/float-button/demo/shape.md
index abff2eaf0e..bd624dd101 100644
--- a/components/float-button/demo/shape.md
+++ b/components/float-button/demo/shape.md
@@ -1,6 +1,6 @@
 ## zh-CN
 
-你可以通过 `shape` 设置不同的形状
+通过 `shape` 设置不同的形状。
 
 ## en-US
 
diff --git a/components/float-button/demo/shape.tsx b/components/float-button/demo/shape.tsx
index c5c5a2aa30..1eaac27a94 100644
--- a/components/float-button/demo/shape.tsx
+++ b/components/float-button/demo/shape.tsx
@@ -1,22 +1,22 @@
-import React, { useState } from 'react';
-import { FloatButton, Radio } from 'antd';
-import type { RadioChangeEvent, FloatButtonProps } from 'antd';
+import React from 'react';
+import { FloatButton } from 'antd';
 import { CustomerServiceOutlined } from '@ant-design/icons';
 
-const App: React.FC = () => {
-  const [shape, setShape] = useState<FloatButtonProps['shape']>('circle');
-  const onChange = (e: RadioChangeEvent) => {
-    setShape(e.target.value);
-  };
-  return (
-    <>
-      <Radio.Group onChange={onChange} value={shape} style={{ margin: 20 }}>
-        <Radio value="circle">圆形</Radio>
-        <Radio value="square">方形</Radio>
-      </Radio.Group>
-      <FloatButton icon={<CustomerServiceOutlined />} type="primary" shape={shape} />
-    </>
-  );
-};
+const App: React.FC = () => (
+  <>
+    <FloatButton
+      shape="circle"
+      type="primary"
+      style={{ right: 94 }}
+      icon={<CustomerServiceOutlined />}
+    />
+    <FloatButton
+      shape="square"
+      type="primary"
+      style={{ right: 24 }}
+      icon={<CustomerServiceOutlined />}
+    />
+  </>
+);
 
 export default App;
diff --git a/components/float-button/demo/tooltip.md b/components/float-button/demo/tooltip.md
index d441ce0a61..e0f254c554 100644
--- a/components/float-button/demo/tooltip.md
+++ b/components/float-button/demo/tooltip.md
@@ -1,6 +1,6 @@
 ## zh-CN
 
-设置 tooltip 属性，即可开启气泡卡片
+设置 tooltip 属性，即可开启气泡卡片。
 
 ## en-US
 
diff --git a/components/float-button/demo/type.md b/components/float-button/demo/type.md
index 6dc8e12c7d..30c65cb5fa 100644
--- a/components/float-button/demo/type.md
+++ b/components/float-button/demo/type.md
@@ -1,6 +1,6 @@
 ## zh-CN
 
-通过 `type` 改变悬浮按钮的类型
+通过 `type` 改变悬浮按钮的类型。
 
 ## en-US