kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-01-30 22:48:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(checkbox): add docs for size prop

Browse Source 
test(checkbox): add testcases for size
This commit is contained in:
unix
2020-05-23 07:59:26 +08:00
parent 840757b996
commit 2b3f7c974f
6 changed files with 564 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

404
components/checkbox/__tests__/__snapshots__/group.test.tsx.snap
View File

@@ -15,9 +15,7 @@ initialize {
Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -52,8 +50,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -95,20 +93,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -171,16 +170,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -191,8 +186,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -234,20 +229,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -303,9 +299,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -339,16 +333,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -384,20 +374,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -447,8 +438,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -467,9 +458,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -503,16 +492,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -549,20 +534,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -611,8 +597,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -631,9 +617,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -667,16 +651,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -706,20 +686,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -779,8 +760,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -799,9 +780,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -835,16 +814,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -881,7 +856,8 @@ initialize {
Object {
"data": "
.group :global(label) {
margin-right: 1.875rem;
margin-right: calc(.875rem * 2);
--checkbox-size: .875rem;
}
",
"next": null,
@@ -915,7 +891,8 @@ initialize {
Object {
"data": "
.group :global(label) {
margin-right: 1.875rem;
margin-right: calc(.875rem * 2);
--checkbox-size: .875rem;
}
",
"next": null,
@@ -936,9 +913,7 @@ initialize {
Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -973,8 +948,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -1016,20 +991,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -1092,16 +1068,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -1112,8 +1084,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -1155,20 +1127,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -1224,9 +1197,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -1260,16 +1231,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -1305,20 +1272,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -1368,8 +1336,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -1388,9 +1356,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -1424,16 +1390,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -1470,20 +1432,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -1532,8 +1495,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -1552,9 +1515,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -1588,16 +1549,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -1627,20 +1584,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -1700,8 +1658,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -1720,9 +1678,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -1756,16 +1712,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -1849,3 +1801,191 @@ initialize {
},
}
`;
exports[`Checkbox Group should work correctly with different sizes 1`] = `
"<div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
label {
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><style>
.group :global(label) {
margin-right: calc(.75rem * 2);
--checkbox-size: .75rem;
}
</style></div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
label {
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><style>
.group :global(label) {
margin-right: calc(.875rem * 2);
--checkbox-size: .875rem;
}
</style></div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
label {
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><style>
.group :global(label) {
margin-right: calc(1rem * 2);
--checkbox-size: 1rem;
}
</style></div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
label {
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><style>
.group :global(label) {
margin-right: calc(1.125rem * 2);
--checkbox-size: 1.125rem;
}
</style></div></div>"
`;

273
components/checkbox/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -10,9 +10,7 @@ initialize {
Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -47,8 +45,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -90,20 +88,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -166,16 +165,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -186,8 +181,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -229,20 +224,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -298,9 +294,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -334,16 +328,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -379,20 +369,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -442,8 +433,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -462,9 +453,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -498,16 +487,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -544,20 +529,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -606,8 +592,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -626,9 +612,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -662,16 +646,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -701,20 +681,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -774,8 +755,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -794,9 +775,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -830,16 +809,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -905,3 +880,171 @@ initialize {
},
}
`;
exports[`Checkbox should work correctly with different sizes 1`] = `
"<div><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">mini</span><style>
label {
--checkbox-size: .75rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">small</span><style>
label {
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">medium</span><style>
label {
--checkbox-size: 1rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">large</span><style>
label {
--checkbox-size: 1.125rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label></div>"
`;

21
components/checkbox/__tests__/group.test.tsx
View File

@@ -18,6 +18,27 @@ describe('Checkbox Group', () => {
expect(rendered).toMatchSnapshot()
})
it('should work correctly with different sizes', () => {
const wrapper = mount(
<div>
<Checkbox.Group value={[]} size="mini">
<Checkbox value="sydney">Sydney</Checkbox>
</Checkbox.Group>
<Checkbox.Group value={[]} size="small">
<Checkbox value="sydney">Sydney</Checkbox>
</Checkbox.Group>
<Checkbox.Group value={[]} size="medium">
<Checkbox value="sydney">Sydney</Checkbox>
</Checkbox.Group>
<Checkbox.Group value={[]} size="large">
<Checkbox value="sydney">Sydney</Checkbox>
</Checkbox.Group>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work correctly with initial value', () => {
let wrapper = mount(
<Checkbox.Group value={['sydney']}>

13
components/checkbox/__tests__/index.test.tsx
View File

@@ -10,6 +10,19 @@ describe('Checkbox', () => {
expect(rendered).toMatchSnapshot()
})
it('should work correctly with different sizes', () => {
const wrapper = mount(
<div>
<Checkbox size="mini">mini</Checkbox>
<Checkbox size="small">small</Checkbox>
<Checkbox size="medium">medium</Checkbox>
<Checkbox size="large">large</Checkbox>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work correctly with initial value', () => {
let wrapper = mount(<Checkbox checked={true}>Sydney</Checkbox>)
let input = wrapper.find('input').getDOMNode()

27
pages/en-us/components/checkbox.mdx
View File

@@ -10,7 +10,6 @@ export const meta = {
Displays a boolean value.
<Playground
desc="Change state with `checked` props."
scope={{ Checkbox }}
@@ -18,6 +17,22 @@ Displays a boolean value.
<Checkbox checked={true}>Sydney</Checkbox>
`} />
<Playground
title="sizes"
desc="Checkbox of different sizes."
scope={{ Checkbox, Spacer }}
code={`
<>
<Checkbox checked={true} size="mini">mini</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="small">small</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="medium">medium</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="large">large</Checkbox>
</>
`} />
<Playground
title="disable"
scope={{ Checkbox, Spacer }}
@@ -59,6 +74,7 @@ Displays a boolean value.
| **onChange** | change event handler | `CheckboxEvent` | - | - |
| **value** | unique identification value (only in group) | `string` | - | - |
| **disabled** | disable checkbox | `boolean` | - | `false` |
| **size** | checkbox size | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
| ... | native props | `LabelHTMLAttributes` | `'form', 'className', ...` | - |
<Attributes.Title>Checkbox.Group.Props</Attributes.Title>
@@ -68,7 +84,14 @@ Displays a boolean value.
| **value** | checked children | `Array<string>` | - | `[]` |
| **disabled** | disable checkbox group | `boolean` | - | `false` |
| **onChange** | change event handler | `(values: string[]) => void` | - | - |
| ... | native props | `HTMLAttributes` | `'spellCheck', 'style', 'className', ...` | - |
| **size** | size of all checkboxes in the group | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>NormalSizes</Attributes.Title>
```ts
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```
<Attributes.Title>CheckboxEvent</Attributes.Title>

26
pages/zh-cn/components/checkbox.mdx
View File

@@ -18,6 +18,22 @@ export const meta = {
<Checkbox initialChecked={true}>墨西哥</Checkbox>
`} />
<Playground
title="大小"
desc="不同大小的复选框。"
scope={{ Checkbox, Spacer }}
code={`
<>
<Checkbox checked={true} size="mini">最小</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="small">较小</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="medium">中等</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="large">最大</Checkbox>
</>
`} />
<Playground
title="禁用的"
scope={{ Checkbox, Spacer }}
@@ -59,6 +75,7 @@ export const meta = {
| **onChange** | 复选框的变化事件 | `CheckboxEvent` | - | - |
| **value** | 唯一的鉴别值 (仅在组内可用) | `string` | - | - |
| **disabled** | 禁用复选框 | `boolean` | - | `false` |
| **size** | 复选框的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
| ... | 原生属性 | `LabelHTMLAttributes` | `'form', 'className', ...` | - |
<Attributes.Title>Checkbox.Group.Props</Attributes.Title>
@@ -68,7 +85,14 @@ export const meta = {
| **value** | 选中的一组值 | `Array<string>` | - | `[]` |
| **disabled** | 禁用一个组的复选框 | `boolean` | - | `false` |
| **onChange** | 复选框的变化事件 | `(values: string[]) => void` | - | - |
| ... | 原生属性 | `HTMLAttributes` | `'spellCheck', 'style', 'className', ...` | - |
| **size** | 组内所有复选框的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>NormalSizes</Attributes.Title>
```ts
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```
<Attributes.Title>CheckboxEvent</Attributes.Title>