kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-26 06:55:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #286 from zeit-ui/rc

Browse Source 
chore: release v1.7.2
This commit is contained in:
witt
2020-06-23 19:53:22 +08:00
committed by GitHub
parent 9ee41b29fe cab92e52e6
commit 965654f91a
19 changed files with 424 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/badge/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -316,7 +316,7 @@ initialize {
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #ff0000;
background-color: #e00;
color: white;
font-size: .875rem;
border: 0;
@@ -358,7 +358,7 @@ initialize {
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #ff0000;
background-color: #e00;
color: white;
font-size: .875rem;
border: 0;
@@ -645,7 +645,7 @@ initialize {
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #ff0000;
background-color: #e00;
color: white;
font-size: .875rem;
border: 0;
@@ -687,7 +687,7 @@ initialize {
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #ff0000;
background-color: #e00;
color: white;
font-size: .875rem;
border: 0;
@@ -974,7 +974,7 @@ initialize {
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #ff0000;
background-color: #e00;
color: white;
font-size: .875rem;
border: 0;
@@ -1016,7 +1016,7 @@ initialize {
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #ff0000;
background-color: #e00;
color: white;
font-size: .875rem;
border: 0;
@@ -1303,7 +1303,7 @@ initialize {
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #ff0000;
background-color: #e00;
color: white;
font-size: .875rem;
border: 0;
@@ -1345,7 +1345,7 @@ initialize {
font-variant: tabular-nums;
line-height: 1;
vertical-align: middle;
background-color: #ff0000;
background-color: #e00;
color: white;
font-size: .875rem;
border: 0;

240
components/button-dropdown/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -301,8 +301,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -353,8 +353,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -407,7 +407,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -417,8 +417,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -459,7 +459,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -469,8 +469,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -544,7 +544,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -554,8 +554,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -596,7 +596,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -606,8 +606,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -672,8 +672,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -724,8 +724,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -832,8 +832,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -884,8 +884,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -938,7 +938,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -948,8 +948,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -990,7 +990,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -1000,8 +1000,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -1075,7 +1075,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -1085,8 +1085,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -1127,7 +1127,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -1137,8 +1137,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -1203,8 +1203,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -1255,8 +1255,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -1733,8 +1733,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -1785,8 +1785,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -1839,7 +1839,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -1849,8 +1849,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -1891,7 +1891,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -1901,8 +1901,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -1976,7 +1976,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -1986,8 +1986,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -2028,7 +2028,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -2038,8 +2038,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -2104,8 +2104,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -2156,8 +2156,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -2264,8 +2264,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -2316,8 +2316,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -2370,7 +2370,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -2380,8 +2380,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -2422,7 +2422,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -2432,8 +2432,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -2507,7 +2507,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -2517,8 +2517,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -2559,7 +2559,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -2569,8 +2569,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -2635,8 +2635,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -2687,8 +2687,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -3356,8 +3356,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -3408,8 +3408,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -3462,7 +3462,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -3472,8 +3472,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -3514,7 +3514,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -3524,8 +3524,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -3599,7 +3599,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -3609,8 +3609,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -3651,7 +3651,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -3661,8 +3661,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -3727,8 +3727,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -3779,8 +3779,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -3887,8 +3887,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -3939,8 +3939,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -3993,7 +3993,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -4003,8 +4003,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -4045,7 +4045,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -4055,8 +4055,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -4130,7 +4130,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -4140,8 +4140,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -4182,7 +4182,7 @@ initialize {
box-sizing: border-box;
margin: 0;
border: none;
background-color: #ff0000;
background-color: #e00;
color: #fff;
width: 100%;
height: 2.5rem;
@@ -4192,8 +4192,8 @@ initialize {
}
button:hover {
border-color: #c00;
background-color: #c00;
border-color: #c50000;
background-color: #c50000;
}
",
"next": null,
@@ -4258,8 +4258,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,
@@ -4310,8 +4310,8 @@ initialize {
}
button:hover {
border-color: #f49b0b;
background-color: #f49b0b;
border-color: #ab570a;
background-color: #ab570a;
}
",
"next": null,

24
components/capacity/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -176,7 +176,7 @@ initialize {
span {
width: 20%;
background-color: #79ffe1;
background-color: #50e3c2;
height: 100%;
margin: 0;
padding: 0;
@@ -219,7 +219,7 @@ initialize {
span {
width: 20%;
background-color: #79ffe1;
background-color: #50e3c2;
height: 100%;
margin: 0;
padding: 0;
@@ -386,7 +386,7 @@ initialize {
span {
width: 66.67%;
background-color: #c00;
background-color: #c50000;
height: 100%;
margin: 0;
padding: 0;
@@ -429,7 +429,7 @@ initialize {
span {
width: 66.67%;
background-color: #c00;
background-color: #c50000;
height: 100%;
margin: 0;
padding: 0;
@@ -633,7 +633,7 @@ initialize {
span {
width: 66.67%;
background-color: #c00;
background-color: #c50000;
height: 100%;
margin: 0;
padding: 0;
@@ -676,7 +676,7 @@ initialize {
span {
width: 66.67%;
background-color: #c00;
background-color: #c50000;
height: 100%;
margin: 0;
padding: 0;
@@ -752,7 +752,7 @@ initialize {
span {
width: 20%;
background-color: #79ffe1;
background-color: #50e3c2;
height: 100%;
margin: 0;
padding: 0;
@@ -795,7 +795,7 @@ initialize {
span {
width: 20%;
background-color: #79ffe1;
background-color: #50e3c2;
height: 100%;
margin: 0;
padding: 0;
@@ -880,7 +880,7 @@ initialize {
span {
width: 66.67%;
background-color: #c00;
background-color: #c50000;
height: 100%;
margin: 0;
padding: 0;
@@ -923,7 +923,7 @@ initialize {
span {
width: 66.67%;
background-color: #c00;
background-color: #c50000;
height: 100%;
margin: 0;
padding: 0;
@@ -1094,7 +1094,7 @@ initialize {
span {
width: 20%;
background-color: #79ffe1;
background-color: #50e3c2;
height: 100%;
margin: 0;
padding: 0;
@@ -1137,7 +1137,7 @@ initialize {
span {
width: 20%;
background-color: #79ffe1;
background-color: #50e3c2;
height: 100%;
margin: 0;
padding: 0;

24
components/dot/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -721,7 +721,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -787,7 +787,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -853,7 +853,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -1443,7 +1443,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -1509,7 +1509,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -1575,7 +1575,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -2165,7 +2165,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -2231,7 +2231,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -2297,7 +2297,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -2887,7 +2887,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -2953,7 +2953,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}
@@ -3019,7 +3019,7 @@ initialize {
width: 0.625rem;
height: 0.625rem;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
user-select: none;
}

240
components/grid/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -25,7 +25,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 4.166666666666667%;
flex-basis: 4.166666666666667%;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -33,7 +33,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 4.166666666666667%;
flex-basis: 4.166666666666667%;
display: flex;
}
}
@@ -42,7 +42,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 8.333333333333334%;
flex-basis: 8.333333333333334%;
display: flex;
}
}
@@ -51,7 +51,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 12.5%;
flex-basis: 12.5%;
display: flex;
}
}
@@ -60,7 +60,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 16.666666666666668%;
flex-basis: 16.666666666666668%;
display: flex;
}
}
@@ -69,7 +69,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 20.833333333333336%;
flex-basis: 20.833333333333336%;
display: flex;
}
}
</style></div><style>
@@ -96,7 +96,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 4.166666666666667%;
flex-basis: 4.166666666666667%;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -104,7 +104,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 4.166666666666667%;
flex-basis: 4.166666666666667%;
display: flex;
}
}
@@ -113,7 +113,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 8.333333333333334%;
flex-basis: 8.333333333333334%;
display: flex;
}
}
@@ -122,7 +122,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 12.5%;
flex-basis: 12.5%;
display: flex;
}
}
@@ -131,7 +131,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 16.666666666666668%;
flex-basis: 16.666666666666668%;
display: flex;
}
}
@@ -140,7 +140,7 @@ exports[`Grid all breakpoint values should be supported 1`] = `
flex-grow: 0;
max-width: 20.833333333333336%;
flex-basis: 20.833333333333336%;
display: flex;
}
}
</style></div>"
@@ -171,7 +171,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -179,7 +179,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -188,7 +188,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -197,7 +197,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -206,7 +206,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -215,7 +215,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><style>
@@ -242,7 +242,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -250,7 +250,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -259,7 +259,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -268,7 +268,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -277,7 +277,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -286,7 +286,7 @@ exports[`Grid css value should be passed through 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div>"
@@ -317,7 +317,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -325,7 +325,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -334,7 +334,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -343,7 +343,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -352,7 +352,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -361,7 +361,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><style>
@@ -388,7 +388,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -396,7 +396,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -405,7 +405,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -414,7 +414,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -423,7 +423,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -432,7 +432,7 @@ exports[`Grid decimal spacing should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div>"
@@ -463,7 +463,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -471,7 +471,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -480,7 +480,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -489,7 +489,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -498,7 +498,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -507,7 +507,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><div class=\\"item mock \\"><div class=\\"item mock \\">test<style>
@@ -534,7 +534,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -542,7 +542,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -551,7 +551,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -560,7 +560,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -569,7 +569,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -578,7 +578,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><div class=\\"item mock \\"><div class=\\"item mock \\">test<style>
@@ -605,7 +605,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -613,7 +613,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -622,7 +622,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -631,7 +631,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -640,7 +640,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -649,7 +649,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><div class=\\"item mock \\"><div class=\\"item mock \\">test<style>
@@ -676,7 +676,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -684,7 +684,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -693,7 +693,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -702,7 +702,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -711,7 +711,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -720,7 +720,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><style>
@@ -747,7 +747,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -755,7 +755,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -764,7 +764,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -773,7 +773,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -782,7 +782,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -791,7 +791,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div>,<style>
@@ -818,7 +818,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -826,7 +826,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -835,7 +835,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -844,7 +844,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -853,7 +853,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -862,7 +862,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div>,<style>
@@ -889,7 +889,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -897,7 +897,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -906,7 +906,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -915,7 +915,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -924,7 +924,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -933,7 +933,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div>,<style>
@@ -960,7 +960,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -968,7 +968,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -977,7 +977,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -986,7 +986,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -995,7 +995,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1004,7 +1004,7 @@ exports[`Grid nested components should be supported 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div>"
@@ -1035,7 +1035,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -1043,7 +1043,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1052,7 +1052,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1061,7 +1061,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1070,7 +1070,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1079,7 +1079,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><div class=\\"item mock \\">test<style>
@@ -1106,7 +1106,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -1114,7 +1114,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1123,7 +1123,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1132,7 +1132,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1141,7 +1141,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1150,7 +1150,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><style>
@@ -1177,7 +1177,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -1185,7 +1185,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1194,7 +1194,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1203,7 +1203,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1212,7 +1212,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1221,7 +1221,7 @@ exports[`Grid should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div>"
@@ -1252,7 +1252,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 0;
max-width: 100%;
flex-basis: 100%;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -1260,7 +1260,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 0;
max-width: 100%;
flex-basis: 100%;
display: flex;
}
}
@@ -1269,7 +1269,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1278,7 +1278,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1287,7 +1287,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1296,7 +1296,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><div class=\\"item xs mock \\">test<style>
@@ -1323,7 +1323,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 0;
max-width: 0;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -1331,7 +1331,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 0;
max-width: 0;
flex-basis: 0;
display: flex;
}
}
@@ -1340,7 +1340,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1349,7 +1349,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1358,7 +1358,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1367,7 +1367,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><style>
@@ -1394,7 +1394,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -1402,7 +1402,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1411,7 +1411,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1420,7 +1420,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1429,7 +1429,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -1438,7 +1438,7 @@ exports[`Grid should work correctly when size exceeds 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div>"

17
components/grid/basic-item.tsx
View File

@@ -35,7 +35,7 @@ type ItemLayoutValue = {
display: string
}
const getItemLayout = (val: BreakpointsValue): ItemLayoutValue => {
const display = val === 0 ? 'none' : 'flex'
const display = val === 0 ? 'display: none;' : ''
if (typeof val === 'number') {
const width = (100 / 24) * val
const ratio = width > 100 ? '100%' : width < 0 ? '0' : `${width}%`
@@ -66,6 +66,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
alignContent,
children,
className,
...props
}) => {
const theme = useTheme()
const classes = useMemo(() => {
@@ -103,7 +104,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
)
return (
<div className={`item ${classes} ${className}`}>
<div className={`item ${classes} ${className}`} {...props}>
{children}
<style jsx>{`
.item {
@@ -129,7 +130,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.xs.grow};
max-width: ${layout.xs.width};
flex-basis: ${layout.xs.basis};
display: ${layout.xs.display};
${layout.xs.display}
}
@media only screen and (max-width: ${theme.breakpoints.xs.max}) {
@@ -137,7 +138,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.xs.grow};
max-width: ${layout.xs.width};
flex-basis: ${layout.xs.basis};
display: ${layout.xs.display};
${layout.xs.display}
}
}
@@ -146,7 +147,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.sm.grow};
max-width: ${layout.sm.width};
flex-basis: ${layout.sm.basis};
display: ${layout.sm.display};
${layout.sm.display}
}
}
@@ -155,7 +156,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.md.grow};
max-width: ${layout.md.width};
flex-basis: ${layout.md.basis};
display: ${layout.md.display};
${layout.md.display}
}
}
@@ -164,7 +165,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.lg.grow};
max-width: ${layout.lg.width};
flex-basis: ${layout.lg.basis};
display: ${layout.lg.display};
${layout.lg.display}
}
}
@@ -173,7 +174,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.xl.grow};
max-width: ${layout.xl.width};
flex-basis: ${layout.xl.basis};
display: ${layout.xl.display};
${layout.xl.display}
}
}
`}</style>

2
components/loading/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -760,7 +760,7 @@ exports[`Loading should work with different types 1`] = `
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #ff0000;
background-color: #e00;
margin: 0 1px;
display: inline-block;
animation: loading-blink 1.4s infinite both;

4
components/note/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -182,8 +182,8 @@ exports[`Note should work with different types 1`] = `
padding: 8pt 16pt;
font-size: 14px;
line-height: 1.8;
border: 1px solid #ff0000;
color: #ff0000;
border: 1px solid #e00;
color: #e00;
background-color: #fff;
border-radius: 5px;
}

2
components/progress/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -414,7 +414,7 @@ exports[`Progress should work with different types 1`] = `
bottom: 0;
transition: all 100ms ease-in;
border-radius: 5px;
background-color: #ff0000;
background-color: #e00;
width: 1%;
}
</style></div></div>"

12
components/select/__tests__/__snapshots__/multiple.test.tsx.snap
View File

@@ -32,7 +32,7 @@ exports[`Select Multiple should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
@media only screen and (max-width: 650px) {
@@ -40,7 +40,7 @@ exports[`Select Multiple should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -49,7 +49,7 @@ exports[`Select Multiple should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -58,7 +58,7 @@ exports[`Select Multiple should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -67,7 +67,7 @@ exports[`Select Multiple should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
@@ -76,7 +76,7 @@ exports[`Select Multiple should render correctly 1`] = `
flex-grow: 1;
max-width: 100%;
flex-basis: 0;
display: flex;
}
}
</style></div><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>

22
components/styles/themes/dark.ts
View File

@@ -18,19 +18,29 @@ export const palette: ZeitUIThemesPalette = {
secondary: '#888',
code: '#79ffe1',
border: '#333',
error: '#ff0000',
error: '#e00',
errorLighter: '#f7d4d6',
errorLight: '#ff1a1a',
errorDark: '#c00',
errorDark: '#c50000',
success: '#0070f3',
successLighter: '#d3e5ff',
successLight: '#3291ff',
successDark: '#0366d6',
successDark: '#0761d1',
warning: '#f5a623',
warningLighter: '#ffefcf',
warningLight: '#f7b955',
warningDark: '#f49b0b',
cyan: '#79ffe1',
warningDark: '#ab570a',
cyan: '#50e3c2',
cyanLighter: '#aaffec',
cyanLight: '#79ffe1',
cyanDark: '#29bc9b',
violet: '#7928ca',
violetLighter: '#e3d7fc',
violetLight: '#8a63d2',
violetDark: '#4c2889',
purple: '#f81ce5',
alert: '#ff0080',
violet: '#7928ca',
magenta: '#eb367f',
link: '#3291ff',
}

22
components/styles/themes/default.ts
View File

@@ -18,19 +18,29 @@ export const palette: ZeitUIThemesPalette = {
secondary: '#666',
code: '#f81ce5',
border: '#eaeaea',
error: '#ff0000',
error: '#e00',
errorLight: '#ff1a1a',
errorDark: '#c00',
errorLighter: '#f7d4d6',
errorDark: '#c50000',
success: '#0070f3',
successLight: '#3291ff',
successDark: '#0366d6',
successLighter: '#d3e5ff',
successDark: '#0761d1',
warning: '#f5a623',
warningLight: '#f7b955',
warningDark: '#f49b0b',
cyan: '#79ffe1',
warningLighter: '#ffefcf',
warningDark: '#ab570a',
cyan: '#50e3c2',
cyanLighter: '#aaffec',
cyanLight: '#79ffe1',
cyanDark: '#29bc9b',
violet: '#7928ca',
violetLighter: '#e3d7fc',
violetLight: '#8a63d2',
violetDark: '#4c2889',
purple: '#f81ce5',
alert: '#ff0080',
violet: '#7928ca',
magenta: '#eb367f',
link: '#0070f3',
}

14
components/styles/themes/index.ts
View File

@@ -18,19 +18,29 @@ export interface ZeitUIThemesPalette {
code: string
border: string
success: string
successLighter: string
successLight: string
successDark: string
error: string
errorLighter: string
errorLight: string
errorDark: string
warning: string
warningLighter: string
warningLight: string
warningDark: string
cyan: string
purple: string
alert: string
cyanLighter: string
cyanLight: string
cyanDark: string
violet: string
violetLighter: string
violetLight: string
violetDark: string
link: string
purple: string
magenta: string
alert: string
}
export interface ZeitUIThemesExpressiveness {

32
components/tag/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -319,9 +319,9 @@ initialize {
font-size: 0.875rem;
height: 1.75rem;
border-radius: 5px;
border: 1px solid #ff0000;
border: 1px solid #e00;
background-color: #fff;
color: #ff0000;
color: #e00;
padding: 6px;
box-sizing: border-box;
}
@@ -356,9 +356,9 @@ initialize {
font-size: 0.875rem;
height: 1.75rem;
border-radius: 5px;
border: 1px solid #ff0000;
border: 1px solid #e00;
background-color: #fff;
color: #ff0000;
color: #e00;
padding: 6px;
box-sizing: border-box;
}
@@ -618,9 +618,9 @@ initialize {
font-size: 0.875rem;
height: 1.75rem;
border-radius: 5px;
border: 1px solid #ff0000;
border: 1px solid #e00;
background-color: #fff;
color: #ff0000;
color: #e00;
padding: 6px;
box-sizing: border-box;
}
@@ -655,9 +655,9 @@ initialize {
font-size: 0.875rem;
height: 1.75rem;
border-radius: 5px;
border: 1px solid #ff0000;
border: 1px solid #e00;
background-color: #fff;
color: #ff0000;
color: #e00;
padding: 6px;
box-sizing: border-box;
}
@@ -917,9 +917,9 @@ initialize {
font-size: 0.875rem;
height: 1.75rem;
border-radius: 5px;
border: 1px solid #ff0000;
border: 1px solid #e00;
background-color: #fff;
color: #ff0000;
color: #e00;
padding: 6px;
box-sizing: border-box;
}
@@ -954,9 +954,9 @@ initialize {
font-size: 0.875rem;
height: 1.75rem;
border-radius: 5px;
border: 1px solid #ff0000;
border: 1px solid #e00;
background-color: #fff;
color: #ff0000;
color: #e00;
padding: 6px;
box-sizing: border-box;
}
@@ -1390,9 +1390,9 @@ initialize {
font-size: 0.875rem;
height: 1.75rem;
border-radius: 5px;
border: 1px solid #ff0000;
border: 1px solid #e00;
background-color: #fff;
color: #ff0000;
color: #e00;
padding: 6px;
box-sizing: border-box;
}
@@ -1427,9 +1427,9 @@ initialize {
font-size: 0.875rem;
height: 1.75rem;
border-radius: 5px;
border: 1px solid #ff0000;
border: 1px solid #e00;
background-color: #fff;
color: #ff0000;
color: #e00;
padding: 6px;
box-sizing: border-box;
}

2
components/text/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -75,7 +75,7 @@ exports[`Text should work with different styles 1`] = `
}
</style><p class=\\" \\">test-value</p><style>
p {
color: #ff0000;
color: #e00;
}
.custom-size {

32
lib/components/displays/colors-data.ts
View File

@@ -20,28 +20,44 @@ const normal: ColorEnum = {
/* eslint-enable camelcase */
const error: ColorEnum = {
errorLighter: 'Lighter',
errorLight: 'Light',
error: 'Default',
errorDark: 'Dark',
}
const success: ColorEnum = {
successLighter: 'Lighter',
successLight: 'Light',
success: 'Default',
successDark: 'Dark',
}
const warning: ColorEnum = {
warningLighter: 'Lighter',
warningLight: 'Light',
warning: 'Default',
warningDark: 'Dark',
}
const violet: ColorEnum = {
violetLighter: 'Lighter',
violetLight: 'Light',
violet: 'Default',
violetDark: 'Dark',
}
const cyan: ColorEnum = {
cyanLighter: 'Lighter',
cyanLight: 'Light',
cyan: 'Default',
cyanDark: 'Dark',
}
const highlight: ColorEnum = {
alert: 'Alert',
purple: 'Purple',
violet: 'Violet',
cyan: 'Cyan',
magenta: 'Violet',
}
const colorsData: { [key: string]: ColorEnum } = {
@@ -49,6 +65,8 @@ const colorsData: { [key: string]: ColorEnum } = {
success,
warning,
error,
violet,
cyan,
highlight,
}
@@ -72,5 +90,15 @@ export const getCurrentColor = (
return 'black'
}
if (type === 'warning' || type === 'cyan') {
if (index < 3) return 'black'
return 'white'
}
if (Object.keys(colorsData[type]).find(key => key.endsWith('Lighter'))) {
if (index === 0) return 'black'
return 'white'
}
return palette.background
}

39
lib/components/displays/colors.tsx
View File

@@ -1,5 +1,5 @@
import React, { useMemo } from 'react'
import { useTheme, useToasts, Code, ZeitUIThemesPalette } from 'components'
import { useTheme, useToasts, Code, Grid, ZeitUIThemesPalette } from 'components'
import useClipboard from 'components/utils/use-clipboard'
import { getColorData, getCurrentColor } from './colors-data'
@@ -14,13 +14,21 @@ const getColorItem = (type: string, palette: ZeitUIThemesPalette, copy: Function
return (keys as Array<keyof ZeitUIThemesPalette>).map((key, index) => (
<div className="color" key={`color-item-${index}`}>
<h4>{data[key]}</h4>
<span className="usage" onClick={() => copy(`theme.palette.${key}`)}>
theme.palette.{key}
</span>
<span className="value" onClick={() => copy(palette[key])}>
{palette[key]}
</span>
<Grid.Container justify="space-between" style={{ height: '4.5rem' }}>
<Grid.Container alignItems="center" sm={8} xs={16}>
<h4>{data[key]}</h4>
</Grid.Container>
<Grid.Container alignItems="center" justify="center" sm={8} xs={0}>
<span className="usage" onClick={() => copy(`theme.palette.${key}`)}>
theme.palette.{key}
</span>
</Grid.Container>
<Grid.Container alignItems="center" justify="flex-end" sm={8} xs>
<span className="value" onClick={() => copy(palette[key])}>
{palette[key]}
</span>
</Grid.Container>
</Grid.Container>
<style jsx>{`
.color {
background-color: ${palette[key]};
@@ -61,13 +69,8 @@ const Colors: React.FC<Props> = ({ type }) => {
}
.colors :global(.color) {
display: flex;
align-items: center;
justify-content: space-between;
padding: ${theme.layout.gap};
height: 6rem;
position: relative;
cursor: pointer;
user-select: none;
}
@@ -86,18 +89,16 @@ const Colors: React.FC<Props> = ({ type }) => {
}
.colors :global(.usage) {
font-size: 0.875rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 1rem;
padding: 1rem;
cursor: pointer;
}
.colors :global(.value) {
font-size: 0.875rem;
text-transform: uppercase;
padding: 1rem 0;
padding: 1rem;
cursor: pointer;
}
`}</style>
</div>

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@zeit-ui/react",
"version": "1.7.1",
"version": "1.7.2",
"main": "dist/index.js",
"module": "esm/index.js",
"types": "dist/index.d.ts",

26
pages/en-us/guide/colors.mdx
View File

@@ -38,27 +38,43 @@ const myComponent = () => {
<Colors type="normal" />
<Spacer y={3} />
### Status
### STATUS
Use different colors to express more emotional changes.
#### Success
### Success
<Spacer y={.75} />
<Colors type="success" />
<Spacer y={3} />
#### Error
### Error
<Spacer y={.75} />
<Colors type="error" />
<Spacer y={3} />
#### Warning
### Warning
<Spacer y={.75} />
<Colors type="warning" />
<Spacer y={3} />
#### Highlight
### Cyan
<Spacer y={.75} />
<Colors type="cyan" />
<Spacer y={3} />
### Violet
<Spacer y={.75} />
<Colors type="violet" />
<Spacer y={3} />
### Highlight
<Spacer y={.75} />
<Colors type="highlight" />
<Spacer y={3} />