fix: fix checkbox align issue (#42590)

* fix: fix checkbox align issue

* fix: use center

* chore: comment

* fix: use align-self: center

* chore: add snapshot

* fix: tree checkbox

components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -406,24 +406,50 @@ exports[`renders components/checkbox/demo/debug-line.tsx extend context correctl
       </span>
     </label>
   </div>
-  <label
-    class="ant-checkbox-wrapper"
-  >
-    <span
-      class="ant-checkbox"
+  <div>
+    <label
+      class="ant-checkbox-wrapper"
     >
-      <input
-        class="ant-checkbox-input"
-        type="checkbox"
-      />
       <span
-        class="ant-checkbox-inner"
-      />
-    </span>
-    <span>
-      Aligned
-    </span>
-  </label>
+        class="ant-checkbox"
+      >
+        <input
+          class="ant-checkbox-input"
+          type="checkbox"
+        />
+        <span
+          class="ant-checkbox-inner"
+        />
+      </span>
+      <span>
+        Aligned
+      </span>
+    </label>
+  </div>
+  <div>
+    <label
+      class="ant-checkbox-wrapper"
+    >
+      <span
+        class="ant-checkbox"
+      >
+        <input
+          class="ant-checkbox-input"
+          type="checkbox"
+        />
+        <span
+          class="ant-checkbox-inner"
+        />
+      </span>
+      <span>
+        <span
+          style="font-size: 32px;"
+        >
+          Aligned
+        </span>
+      </span>
+    </label>
+  </div>
 </div>
 `;
 

components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap

@@ -383,24 +383,50 @@ exports[`renders components/checkbox/demo/debug-line.tsx correctly 1`] = `
       </span>
     </label>
   </div>
-  <label
-    class="ant-checkbox-wrapper"
-  >
-    <span
-      class="ant-checkbox"
+  <div>
+    <label
+      class="ant-checkbox-wrapper"
     >
-      <input
-        class="ant-checkbox-input"
-        type="checkbox"
-      />
       <span
-        class="ant-checkbox-inner"
-      />
-    </span>
-    <span>
-      Aligned
-    </span>
-  </label>
+        class="ant-checkbox"
+      >
+        <input
+          class="ant-checkbox-input"
+          type="checkbox"
+        />
+        <span
+          class="ant-checkbox-inner"
+        />
+      </span>
+      <span>
+        Aligned
+      </span>
+    </label>
+  </div>
+  <div>
+    <label
+      class="ant-checkbox-wrapper"
+    >
+      <span
+        class="ant-checkbox"
+      >
+        <input
+          class="ant-checkbox-input"
+          type="checkbox"
+        />
+        <span
+          class="ant-checkbox-inner"
+        />
+      </span>
+      <span>
+        <span
+          style="font-size:32px"
+        >
+          Aligned
+        </span>
+      </span>
+    </label>
+  </div>
 </div>
 `;
 

components/checkbox/demo/debug-line.tsx

@@ -44,15 +44,23 @@ const App: React.FC = () => (
       <Radio value="little">Little</Radio>
     </div>
 
-    <ConfigProvider
-      theme={{
-        token: {
-          controlHeight: 48,
-        },
-      }}
-    >
-      <Checkbox>Aligned</Checkbox>
-    </ConfigProvider>
+    <div>
+      <ConfigProvider
+        theme={{
+          token: {
+            controlHeight: 48,
+          },
+        }}
+      >
+        <Checkbox>Aligned</Checkbox>
+      </ConfigProvider>
+    </div>
+
+    <div>
+      <Checkbox>
+        <span style={{ fontSize: 32 }}>Aligned</span>
+      </Checkbox>
+    </div>
   </div>
 );
 

components/checkbox/style/index.ts

@@ -83,13 +83,9 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
         lineHeight: 1,
         cursor: 'pointer',
 
-        alignSelf: 'start',
-        // https://github.com/ant-design/ant-design/issues/41564
-        // Since `checkboxSize` is dynamic which should align with the text box,
-        // We need do calculation here for offset.
-        transform: `translate(0, ${
-          (token.lineHeight * token.fontSize) / 2 - token.checkboxSize / 2
-        }px)`,
+        // To make alignment right when `controlHeight` is changed
+        // Ref: https://github.com/ant-design/ant-design/issues/41564
+        alignSelf: 'center',
 
         // Wrapper > Checkbox > input
         [`${checkboxCls}-input`]: {

components/tree/style/index.ts

@@ -1,10 +1,10 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { Keyframes } from '@ant-design/cssinjs';
-import { genCollapseMotion } from '../../style/motion';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
+import { genFocusOutline, resetComponent } from '../../style';
+import { genCollapseMotion } from '../../style/motion';
 import type { DerivativeToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { genFocusOutline, resetComponent } from '../../style';
 
 // ============================ Keyframes =============================
 const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', {
@@ -63,16 +63,7 @@ type TreeToken = DerivativeToken & {
 };
 
 export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => {
-  const {
-    treeCls,
-    treeNodeCls,
-    controlInteractiveSize: checkboxSize,
-    treeNodePadding,
-    treeTitleHeight,
-  } = token;
-  // Ref: https://github.com/ant-design/ant-design/issues/41564
-  const checkBoxOffset = (token.lineHeight * token.fontSize) / 2 - checkboxSize / 2;
-  const treeCheckBoxMarginVertical = (treeTitleHeight - token.fontSizeLG) / 2 - checkBoxOffset;
+  const { treeCls, treeNodeCls, treeNodePadding, treeTitleHeight } = token;
   const treeCheckBoxMarginHorizontal = token.paddingXS;
 
   return {
@@ -269,7 +260,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
       [`${treeCls}-checkbox`]: {
         top: 'initial',
         marginInlineEnd: treeCheckBoxMarginHorizontal,
-        marginBlockStart: treeCheckBoxMarginVertical,
       },
 
       // >>> Title