From 2b3f7c974fa66e232be07cb27331f8eda91ab283 Mon Sep 17 00:00:00 2001 From: unix Date: Sat, 23 May 2020 07:59:26 +0800 Subject: [PATCH] docs(checkbox): add docs for size prop test(checkbox): add testcases for size --- .../__snapshots__/group.test.tsx.snap | 404 ++++++++++++------ .../__snapshots__/index.test.tsx.snap | 273 +++++++++--- components/checkbox/__tests__/group.test.tsx | 21 + components/checkbox/__tests__/index.test.tsx | 13 + pages/en-us/components/checkbox.mdx | 27 +- pages/zh-cn/components/checkbox.mdx | 26 +- 6 files changed, 564 insertions(+), 200 deletions(-) diff --git a/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap index 499b31f..9318552 100644 --- a/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap +++ b/components/checkbox/__tests__/__snapshots__/group.test.tsx.snap @@ -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`] = ` +"
" +`; diff --git a/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap b/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap index d66d815..72e8f6a 100644 --- a/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/checkbox/__tests__/__snapshots__/index.test.tsx.snap @@ -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`] = ` +"
" +`; diff --git a/components/checkbox/__tests__/group.test.tsx b/components/checkbox/__tests__/group.test.tsx index 896a815..abf36b6 100644 --- a/components/checkbox/__tests__/group.test.tsx +++ b/components/checkbox/__tests__/group.test.tsx @@ -18,6 +18,27 @@ describe('Checkbox Group', () => { expect(rendered).toMatchSnapshot() }) + it('should work correctly with different sizes', () => { + const wrapper = mount( +
+ + Sydney + + + Sydney + + + Sydney + + + Sydney + +
, + ) + expect(wrapper.html()).toMatchSnapshot() + expect(() => wrapper.unmount()).not.toThrow() + }) + it('should work correctly with initial value', () => { let wrapper = mount( diff --git a/components/checkbox/__tests__/index.test.tsx b/components/checkbox/__tests__/index.test.tsx index ef46cd9..acd1f71 100644 --- a/components/checkbox/__tests__/index.test.tsx +++ b/components/checkbox/__tests__/index.test.tsx @@ -10,6 +10,19 @@ describe('Checkbox', () => { expect(rendered).toMatchSnapshot() }) + it('should work correctly with different sizes', () => { + const wrapper = mount( +
+ mini + small + medium + large +
, + ) + expect(wrapper.html()).toMatchSnapshot() + expect(() => wrapper.unmount()).not.toThrow() + }) + it('should work correctly with initial value', () => { let wrapper = mount(Sydney) let input = wrapper.find('input').getDOMNode() diff --git a/pages/en-us/components/checkbox.mdx b/pages/en-us/components/checkbox.mdx index 79244f9..6e13c02 100644 --- a/pages/en-us/components/checkbox.mdx +++ b/pages/en-us/components/checkbox.mdx @@ -10,7 +10,6 @@ export const meta = { Displays a boolean value. - Sydney `} /> + + mini + + small + + medium + + large + +`} /> + Checkbox.Group.Props @@ -68,7 +84,14 @@ Displays a boolean value. | **value** | checked children | `Array` | - | `[]` | | **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', ...` | - | + +NormalSizes + +```ts +type NormalSizes = 'mini' | 'small' | 'medium' | 'large' +``` CheckboxEvent diff --git a/pages/zh-cn/components/checkbox.mdx b/pages/zh-cn/components/checkbox.mdx index 5773ee7..12bf793 100644 --- a/pages/zh-cn/components/checkbox.mdx +++ b/pages/zh-cn/components/checkbox.mdx @@ -18,6 +18,22 @@ export const meta = { 墨西哥 `} /> + + 最小 + + 较小 + + 中等 + + 最大 + +`} /> + Checkbox.Group.Props @@ -68,7 +85,14 @@ export const meta = { | **value** | 选中的一组值 | `Array` | - | `[]` | | **disabled** | 禁用一个组的复选框 | `boolean` | - | `false` | | **onChange** | 复选框的变化事件 | `(values: string[]) => void` | - | - | -| ... | 原生属性 | `HTMLAttributes` | `'spellCheck', 'style', 'className', ...` | - | +| **size** | 组内所有复选框的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `small` | +| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - | + +NormalSizes + +```ts +type NormalSizes = 'mini' | 'small' | 'medium' | 'large' +``` CheckboxEvent