refactor: remove body dom

components/date-picker/demo/external-panel.tsx

@@ -7,7 +7,7 @@ const App: React.FC = () => {
   const [visible, setVisible] = React.useState(false);
   const [panelVisible, setPanelVisible] = React.useState(false);
 
-  const [date, setDate] = React.useState(dayjs());
+  const [date, setDate] = React.useState(() => dayjs());
 
   return (
     <Dropdown

components/float-button/FloatButton.tsx

@@ -65,11 +65,7 @@ const InternalFloatButton = React.forwardRef<FloatButtonElement, FloatButtonProp
   // 虽然在 ts 中已经 omit 过了，但是为了防止多余的属性被透传进来，这里再 omit 一遍，以防万一
   const badgeProps = omit(badge, ['title', 'children', 'status', 'text'] as any[]);
 
-  let buttonNode = (
-    <div className={`${prefixCls}-body`}>
-      <Content prefixCls={prefixCls} description={description} icon={icon} />
-    </div>
-  );
+  let buttonNode = <Content prefixCls={prefixCls} description={description} icon={icon} />;
 
   if ('badge' in props) {
     buttonNode = <Badge {...badgeProps}>{buttonNode}</Badge>;

components/float-button/__tests__/__snapshots__/group.test.tsx.snap

@@ -7,9 +7,6 @@ exports[`FloatButtonGroup should correct render 1`] = `
   <button
     class="css-var-root ant-float-btn-css-var ant-float-btn ant-float-btn-default ant-float-btn-circle"
     type="button"
-  >
-    <div
-      class="ant-float-btn-body"
   >
     <div
       class="ant-float-btn-content"
@@ -38,14 +35,10 @@ exports[`FloatButtonGroup should correct render 1`] = `
         </span>
       </div>
     </div>
-    </div>
   </button>
   <button
     class="css-var-root ant-float-btn-css-var ant-float-btn ant-float-btn-default ant-float-btn-circle"
     type="button"
-  >
-    <div
-      class="ant-float-btn-body"
   >
     <div
       class="ant-float-btn-content"
@@ -74,14 +67,10 @@ exports[`FloatButtonGroup should correct render 1`] = `
         </span>
       </div>
     </div>
-    </div>
   </button>
   <button
     class="css-var-root ant-float-btn-css-var ant-float-btn ant-float-btn-default ant-float-btn-circle"
     type="button"
-  >
-    <div
-      class="ant-float-btn-body"
   >
     <div
       class="ant-float-btn-content"
@@ -110,7 +99,6 @@ exports[`FloatButtonGroup should correct render 1`] = `
         </span>
       </div>
     </div>
-    </div>
   </button>
 </div>
 `;

components/float-button/__tests__/__snapshots__/index.test.tsx.snap

@@ -4,9 +4,6 @@ exports[`FloatButton rtl render component should be rendered correctly in RTL di
 <button
   class="css-var-root ant-float-btn-css-var ant-float-btn ant-float-btn-default ant-float-btn-circle ant-float-btn-rtl"
   type="button"
->
-  <div
-    class="ant-float-btn-body"
 >
   <div
     class="ant-float-btn-content"
@@ -35,7 +32,6 @@ exports[`FloatButton rtl render component should be rendered correctly in RTL di
       </span>
     </div>
   </div>
-  </div>
 </button>
 `;
 
@@ -43,9 +39,6 @@ exports[`FloatButton should correct render 1`] = `
 <button
   class="css-var-root ant-float-btn-css-var ant-float-btn ant-float-btn-default ant-float-btn-circle"
   type="button"
->
-  <div
-    class="ant-float-btn-body"
 >
   <div
     class="ant-float-btn-content"
@@ -74,6 +67,5 @@ exports[`FloatButton should correct render 1`] = `
       </span>
     </div>
   </div>
-  </div>
 </button>
 `;

components/float-button/__tests__/index.test.tsx

@@ -67,7 +67,7 @@ describe('FloatButton', () => {
     it('tooltip should support number `0`', async () => {
       jest.useFakeTimers();
       const { container } = render(<FloatButton tooltip={0} />);
-      fireEvent.mouseEnter(container.querySelector<HTMLDivElement>('.ant-float-btn-body')!);
+      fireEvent.mouseEnter(container.querySelector<HTMLDivElement>('.ant-float-btn-content')!);
       await waitFakeTimer();
       const element = container.querySelector('.ant-tooltip')?.querySelector('.ant-tooltip-inner');
       expect(element?.textContent).toBe('0');
@@ -77,7 +77,7 @@ describe('FloatButton', () => {
     it('tooltip should support tooltipProps', async () => {
       jest.useFakeTimers();
       const { container } = render(<FloatButton tooltip={{ title: 'hi' }} />);
-      fireEvent.mouseEnter(container.querySelector<HTMLDivElement>('.ant-float-btn-body')!);
+      fireEvent.mouseEnter(container.querySelector<HTMLDivElement>('.ant-float-btn-content')!);
       await waitFakeTimer();
       const element = container.querySelector('.ant-tooltip')?.querySelector('.ant-tooltip-inner');
       expect(element?.textContent).toBe('hi');

components/float-button/demo/badge.tsx

@@ -4,7 +4,24 @@ import { FloatButton } from 'antd';
 
 const App: React.FC = () => (
   <>
-    <FloatButton shape="circle" style={{ insetInlineEnd: 24 + 70 + 70 }} badge={{ dot: true }} />
+    <FloatButton
+      shape="circle"
+      style={{ insetInlineEnd: 24 + 70 + 70 + 70 + 70 }}
+      badge={{ dot: true }}
+    />
+    <FloatButton
+      style={{ insetInlineEnd: 24 + 70 + 70 + 70 }}
+      shape="square"
+      badge={{ count: 5 }}
+    />
+    <FloatButton.Group shape="square" style={{ insetInlineEnd: 24 + 70 + 70 }}>
+      <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" style={{ insetInlineEnd: 24 + 70 }}>
       <FloatButton
         href="https://ant.design/index-cn"

components/float-button/style/index.ts

@@ -211,6 +211,22 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
           },
         },
       },
+      [`${componentCls}-square${componentCls}-default`]: {
+        '&:hover': {
+          backgroundColor: token.floatButtonBackgroundColor,
+          [`${componentCls}-content`]: {
+            backgroundColor: token.colorFillContent,
+          },
+        },
+      },
+      [`${componentCls}-square${componentCls}-primary`]: {
+        '&:hover': {
+          backgroundColor: token.colorPrimary,
+          [`${componentCls}-content`]: {
+            backgroundColor: token.colorPrimaryHover,
+          },
+        },
+      },
       [`${groupPrefixCls}-wrap`]: {
         borderRadius: borderRadiusLG,
         boxShadow: token.boxShadowSecondary,
@@ -218,7 +234,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
           boxShadow: 'none',
           borderRadius: 0,
           padding: floatButtonBodyPadding,
-          [`${componentCls}-body`]: {
+          [`${componentCls}-content`]: {
             width: token.floatButtonBodySize,
             height: token.floatButtonBodySize,
             borderRadius: borderRadiusSM,
@@ -267,7 +283,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
       [`${componentCls}-square`]: {
         boxShadow: 'none',
         padding: floatButtonBodyPadding,
-        [`${componentCls}-body`]: {
+        [`${componentCls}-content`]: {
           width: token.floatButtonBodySize,
           height: token.floatButtonBodySize,
           borderRadius: borderRadiusSM,
@@ -295,6 +311,9 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
   return {
     [componentCls]: {
       ...resetComponent(token),
+      padding: `${unit(calc(floatButtonBodyPadding).div(2).equal())} ${unit(
+        floatButtonBodyPadding,
+      )}`,
       border: 'none',
       position: 'fixed',
       cursor: 'pointer',
@@ -305,6 +324,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
       display: 'block',
       width: floatButtonSize,
       height: floatButtonSize,
+      minHeight: floatButtonSize,
       insetInlineEnd: token.floatButtonInsetInlineEnd,
       bottom: token.floatButtonInsetBlockEnd,
       boxShadow: token.boxShadowSecondary,
@@ -322,28 +342,20 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
         [`${antCls}-badge-count`]: {
           transform: 'translate(0, 0)',
           transformOrigin: 'center',
-          top: calc(badgeOffset).mul(-1).equal(),
-          insetInlineEnd: calc(badgeOffset).mul(-1).equal(),
+          top: calc(badgeOffset).add(calc(floatButtonBodyPadding).div(2)).mul(-1).equal(),
+          insetInlineEnd: calc(badgeOffset).add(floatButtonBodyPadding).mul(-1).equal(),
         },
       },
-      [`${componentCls}-body`]: {
+      [`${componentCls}-content`]: {
         width: '100%',
         height: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
         transition: `all ${token.motionDurationMid}`,
-        [`${componentCls}-content`]: {
-          overflow: 'hidden',
+        borderRadius: '50%',
         textAlign: 'center',
-          minHeight: floatButtonSize,
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
         alignItems: 'center',
-          padding: `${unit(calc(floatButtonBodyPadding).div(2).equal())} ${unit(
-            floatButtonBodyPadding,
-          )}`,
         [`${componentCls}-icon`]: {
           textAlign: 'center',
           margin: 'auto',
@@ -353,7 +365,6 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
         },
       },
     },
-    },
 
     [`${componentCls}-rtl`]: {
       direction: 'rtl',
@@ -363,33 +374,39 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
       borderRadius: '50%',
       [`${antCls}-badge`]: {
         [`${antCls}-badge-dot`]: {
-          top: dotOffsetInCircle,
-          insetInlineEnd: dotOffsetInCircle,
+          top: unit(
+            token
+              .calc(dotOffsetInCircle)
+              .sub(token.calc(token.floatButtonBodyPadding).div(2))
+              .equal(),
+          ),
+          insetInlineEnd: unit(
+            token.calc(dotOffsetInCircle).sub(token.floatButtonBodyPadding).equal(),
+          ),
         },
       },
-      [`${componentCls}-body`]: {
-        borderRadius: '50%',
-      },
     },
     [`${componentCls}-square`]: {
-      height: 'auto',
       minHeight: floatButtonSize,
       borderRadius: borderRadiusLG,
       [`${antCls}-badge`]: {
         [`${antCls}-badge-dot`]: {
-          top: dotOffsetInSquare,
-          insetInlineEnd: dotOffsetInSquare,
+          top: unit(
+            token
+              .calc(dotOffsetInSquare)
+              .sub(token.calc(token.floatButtonBodyPadding).div(2))
+              .equal(),
+          ),
+          insetInlineEnd: unit(
+            token.calc(dotOffsetInSquare).sub(token.floatButtonBodyPadding).equal(),
+          ),
         },
       },
-      [`${componentCls}-body`]: {
-        height: 'auto',
+      [`${componentCls}-content`]: {
         borderRadius: borderRadiusLG,
       },
     },
     [`${componentCls}-default`]: {
-      backgroundColor: token.floatButtonBackgroundColor,
-      transition: `background-color ${token.motionDurationMid}`,
-      [`${componentCls}-body`]: {
       backgroundColor: token.floatButtonBackgroundColor,
       transition: `background-color ${token.motionDurationMid}`,
       '&:hover': {
@@ -408,16 +425,13 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
         },
       },
     },
-    },
     [`${componentCls}-primary`]: {
       backgroundColor: token.colorPrimary,
-      [`${componentCls}-body`]: {
-        backgroundColor: token.colorPrimary,
-        transition: `background-color ${token.motionDurationMid}`,
       '&:hover': {
         backgroundColor: token.colorPrimaryHover,
       },
       [`${componentCls}-content`]: {
+        transition: `background-color ${token.motionDurationMid}`,
         [`${componentCls}-icon`]: {
           color: token.colorTextLightSolid,
         },
@@ -430,7 +444,6 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
         },
       },
     },
-    },
   };
 };