style: fix Checkbox style when customize token.lineWidth (#46431)

* style: fix Checkbox style when customize token.lineWidth

* test: update snapshot

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

@@ -165,6 +165,75 @@ Array [
 
 exports[`renders components/checkbox/demo/controller.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/checkbox/demo/custom-line-width.tsx extend context correctly 1`] = `
+Array [
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+  >
+    <span
+      class="ant-checkbox ant-wave-target ant-checkbox-checked"
+    >
+      <input
+        checked=""
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper"
+  >
+    <span
+      class="ant-checkbox ant-wave-target"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+  >
+    <span
+      class="ant-checkbox ant-wave-target ant-checkbox-checked"
+    >
+      <input
+        checked=""
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper"
+  >
+    <span
+      class="ant-checkbox ant-wave-target"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+]
+`;
+
+exports[`renders components/checkbox/demo/custom-line-width.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/checkbox/demo/debug-disable-popover.tsx extend context correctly 1`] = `
 <div
   style="padding: 56px;"

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

@@ -159,6 +159,73 @@ Array [
 ]
 `;
 
+exports[`renders components/checkbox/demo/custom-line-width.tsx correctly 1`] = `
+Array [
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+  >
+    <span
+      class="ant-checkbox ant-wave-target ant-checkbox-checked"
+    >
+      <input
+        checked=""
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper"
+  >
+    <span
+      class="ant-checkbox ant-wave-target"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
+  >
+    <span
+      class="ant-checkbox ant-wave-target ant-checkbox-checked"
+    >
+      <input
+        checked=""
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+  <label
+    class="ant-checkbox-wrapper"
+  >
+    <span
+      class="ant-checkbox ant-wave-target"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+  </label>,
+]
+`;
+
 exports[`renders components/checkbox/demo/debug-disable-popover.tsx correctly 1`] = `
 <div
   style="padding:56px"

components/checkbox/demo/custom-line-width.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+测试自定义 lineWidth 的情况：https://github.com/ant-design/ant-design/issues/46307
+
+## en-US
+
+测试自定义 lineWidth 的情况：https://github.com/ant-design/ant-design/issues/46307

components/checkbox/demo/custom-line-width.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Checkbox, ConfigProvider } from 'antd';
+
+const App: React.FC = () => (
+  <>
+    <ConfigProvider
+      theme={{
+        cssVar: false,
+        components: {
+          Checkbox: {
+            lineWidth: 6,
+          },
+        },
+      }}
+    >
+      <Checkbox checked />
+      <Checkbox />
+    </ConfigProvider>
+    <Checkbox checked />
+    <Checkbox />
+  </>
+);
+
+export default App;

components/checkbox/index.en-US.md

@@ -26,6 +26,7 @@ Checkbox component.
 <code src="./demo/layout.tsx">Use with Grid</code>
 <code src="./demo/debug-line.tsx" debug>Same line</code>
 <code src="./demo/debug-disable-popover.tsx" debug>Disabled to show Tooltip</code>
+<code src="./demo/custom-line-width.tsx" debug>customize lineWidth</code>
 
 ## API
 

components/checkbox/index.zh-CN.md

@@ -27,6 +27,7 @@ demo:
 <code src="./demo/layout.tsx">布局</code>
 <code src="./demo/debug-line.tsx" debug>同行布局</code>
 <code src="./demo/debug-disable-popover.tsx" debug>禁用下的 Tooltip</code>
+<code src="./demo/custom-line-width.tsx" debug>自定义 lineWidth</code>
 
 ## API
 

components/checkbox/style/index.ts

@@ -96,9 +96,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
         // Wrapper > Checkbox > inner
         [`${checkboxCls}-inner`]: {
           boxSizing: 'border-box',
-          position: 'relative',
-          top: 0,
-          insetInlineStart: 0,
           display: 'block',
           width: token.checkboxSize,
           height: token.checkboxSize,
@@ -113,7 +110,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
             boxSizing: 'border-box',
             position: 'absolute',
             top: '50%',
-            insetInlineStart: '21.5%',
+            insetInlineStart: '25%',
             display: 'table',
             width: token.calc(token.checkboxSize).div(14).mul(5).equal(),
             height: token.calc(token.checkboxSize).div(14).mul(8).equal(),