fix(float-button): marginBottom is invalid after the href is added (a…

…nt-design#44707) * fix(float-button): marginBottom is invalid after the href is added * chore: update demo * chore: add annotation
ammar-knowledge · Sep 8, 2023 · fa4c0c0 · fa4c0c0
1 parent 9a1fbad
commit fa4c0c0
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 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
@@ -81,9 +81,9 @@ Array [
     class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
     style="right: 94px;"
   >
-    <button
+    <a
       class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
-      type="button"
+      href="https://ant.design/index-cn"
     >
       <span
         class="ant-badge"
@@ -159,7 +159,7 @@ Array [
           </div>
         </div>
       </div>
-    </button>
+    </a>
     <button
       class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
       type="button"

diff --git a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap
@@ -79,9 +79,9 @@ Array [
     class="ant-float-btn-group ant-float-btn-group-circle ant-float-btn-group-circle-shadow"
     style="right:94px"
   >
-    <button
+    <a
       class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
-      type="button"
+      href="https://ant.design/index-cn"
     >
       <span
         class="ant-badge"
@@ -136,7 +136,7 @@ Array [
           </bdi>
         </sup>
       </span>
-    </button>
+    </a>
     <button
       class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
       type="button"

diff --git a/components/float-button/demo/badge.tsx b/components/float-button/demo/badge.tsx
@@ -6,7 +6,11 @@ const App: React.FC = () => (
   <>
     <FloatButton shape="circle" badge={{ dot: true }} style={{ right: 24 + 70 + 70 }} />
     <FloatButton.Group shape="circle" style={{ right: 24 + 70 }}>
-      <FloatButton tooltip={<div>custom badge color</div>} badge={{ count: 5, color: 'blue' }} />
+      <FloatButton
+        href="https://ant.design/index-cn"
+        tooltip={<div>custom badge color</div>}
+        badge={{ count: 5, color: 'blue' }}
+      />
       <FloatButton badge={{ count: 5 }} />
     </FloatButton.Group>
     <FloatButton.Group shape="circle">

diff --git a/components/float-button/style/index.ts b/components/float-button/style/index.ts
@@ -220,6 +220,10 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
       position: 'fixed',
       cursor: 'pointer',
       zIndex: 99,
+      // Do not remove the 'display: block' here.
+      // Deleting it will cause marginBottom to become ineffective.
+      // Ref: https://github.com/ant-design/ant-design/issues/44700
+      display: 'block',
       width: floatButtonSize,
       height: floatButtonSize,
       insetInlineEnd: token.floatButtonInsetInlineEnd,