mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

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

Browse Source 
* style: fix Checkbox style when customize token.lineWidth

* test: update snapshot
This commit is contained in:
afc163 2023-12-13 21:46:25 +08:00 committed by GitHub
parent a3ec2936a5
commit 12db87449b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 170 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;"

67
components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -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"

7
components/checkbox/demo/custom-line-width.md Normal file
View File

@ -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

24
components/checkbox/demo/custom-line-width.tsx Normal file
View File

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

1
components/checkbox/index.en-US.md
View File

@ -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

1
components/checkbox/index.zh-CN.md
View File

@ -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

5
components/checkbox/style/index.ts
View File

@ -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(),