demo: update demo (#39576)

components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -691,8 +691,10 @@ Array [
 `;
 
 exports[`renders ./components/float-button/demo/group-menu.tsx extend context correctly 1`] = `
+Array [
   <div
     class="ant-float-btn-group ant-float-btn-group-circle"
+    style="right:24px"
   >
     <button
       class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@@ -752,7 +754,71 @@ exports[`renders ./components/float-button/demo/group-menu.tsx extend context co
         </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

components/float-button/__tests__/__snapshots__/demo.test.ts.snap

@@ -449,8 +449,10 @@ Array [
 `;
 
 exports[`renders ./components/float-button/demo/group-menu.tsx correctly 1`] = `
+Array [
   <div
     class="ant-float-btn-group ant-float-btn-group-circle"
+    style="right:24px"
   >
     <button
       class="ant-float-btn ant-float-btn-primary ant-float-btn-circle"
@@ -488,7 +490,49 @@ exports[`renders ./components/float-button/demo/group-menu.tsx correctly 1`] = `
         </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>
+    </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

components/float-button/demo/group-menu.md

@@ -1,6 +1,6 @@
 ## zh-CN
 
-设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式
+设置 `trigger` 属性即可开启菜单模式。提供 `hover` 和 `click` 两种触发方式。
 
 ## en-US
 

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.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;

components/float-button/demo/shape.md

@@ -1,6 +1,6 @@
 ## zh-CN
 
-你可以通过 `shape` 设置不同的形状
+通过 `shape` 设置不同的形状。
 
 ## en-US
 

components/float-button/demo/shape.tsx

@@ -1,22 +1,22 @@
-import React, { useState } from 'react';
+import React from 'react';
-import { FloatButton, Radio } from 'antd';
+import { FloatButton } from 'antd';
-import type { RadioChangeEvent, FloatButtonProps } from 'antd';
 import { CustomerServiceOutlined } from '@ant-design/icons';
 
-const App: React.FC = () => {
+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 }}>
+    <FloatButton
-        <Radio value="circle">圆形</Radio>
+      shape="circle"
-        <Radio value="square">方形</Radio>
+      type="primary"
-      </Radio.Group>
+      style={{ right: 94 }}
-      <FloatButton icon={<CustomerServiceOutlined />} type="primary" shape={shape} />
+      icon={<CustomerServiceOutlined />}
+    />
+    <FloatButton
+      shape="square"
+      type="primary"
+      style={{ right: 24 }}
+      icon={<CustomerServiceOutlined />}
+    />
   </>
 );
-};
 
 export default App;

components/float-button/demo/tooltip.md

@@ -1,6 +1,6 @@
 ## zh-CN
 
-设置 tooltip 属性，即可开启气泡卡片
+设置 tooltip 属性，即可开启气泡卡片。
 
 ## en-US
 

components/float-button/demo/type.md

@@ -1,6 +1,6 @@
 ## zh-CN
 
-通过 `type` 改变悬浮按钮的类型
+通过 `type` 改变悬浮按钮的类型。
 
 ## en-US