kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-29 04:35:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(scaleable): add scaleable props to each component (#531)

Browse Source 
* feat(scaleable): add scaleable props to each component

* chore(scaleable): update the exported type

* feat: apply scaleable to components

chore: remove with-default

test: improve testcase for scaleable

chore: resolve test warning

ci: upgrade nodejs to latest lts

docs: fix type error in document site

* docs: update documents to be compatible with scaleable

chore: fix build errors

* chore: remove all size-related attributes

docs: improve guide document

* docs: add scaleable documentation

test: update snapshots

chore: remove unused

* feat: add scaleable to grid components

* docs: improve docs

* test: update snapshots

* fix(grid): fix basic component props
This commit is contained in:
witt
2021-06-23 10:53:30 +08:00
committed by unix
parent c3708c1948
commit 7facec3849
382 changed files with 15046 additions and 27916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
components/table/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -5,16 +5,17 @@ exports[`Table should be no erros when width is too large 1`] = `
thead {
border-collapse: separate;
border-spacing: 0;
font-size: inherit;
}
th {
padding: 0 8pt;
font-size: 0.75rem;
padding: 0 0.5em;
font-size: calc(0.75 * var(--table-font-size));
font-weight: normal;
text-align: left;
letter-spacing: 0;
vertical-align: middle;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
color: #666;
background: #fafafa;
border-bottom: 1px solid #eaeaea;
@@ -42,12 +43,13 @@ exports[`Table should be no erros when width is too large 1`] = `
display: flex;
align-items: center;
-webkit-box-align: center;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
text-transform: uppercase;
}
</style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
tr {
transition: background-color 0.25s ease;
font-size: inherit;
}
tr.hover:hover {
@@ -55,15 +57,15 @@ exports[`Table should be no erros when width is too large 1`] = `
}
tr :global(td) {
padding: 0 8pt;
padding: 0 0.5em;
border-bottom: 1px solid #eaeaea;
color: #444;
font-size: 0.875rem;
font-size: calc(0.875 * var(--table-font-size));
text-align: left;
}
tr :global(.cell) {
min-height: 3.125rem;
min-height: calc(3.125 * var(--table-font-size));
display: flex;
-webkit-box-align: center;
align-items: center;
@@ -73,7 +75,12 @@ exports[`Table should be no erros when width is too large 1`] = `
table {
border-collapse: separate;
border-spacing: 0;
--table-font-size: calc(1 * 16px);
font-size: var(--table-font-size);
width: 100%;
height: auto;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
</style></table>"
`;
@@ -83,16 +90,17 @@ exports[`Table should render children for table head 1`] = `
thead {
border-collapse: separate;
border-spacing: 0;
font-size: inherit;
}
th {
padding: 0 8pt;
font-size: 0.75rem;
padding: 0 0.5em;
font-size: calc(0.75 * var(--table-font-size));
font-weight: normal;
text-align: left;
letter-spacing: 0;
vertical-align: middle;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
color: #666;
background: #fafafa;
border-bottom: 1px solid #eaeaea;
@@ -120,12 +128,13 @@ exports[`Table should render children for table head 1`] = `
display: flex;
align-items: center;
-webkit-box-align: center;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
text-transform: uppercase;
}
</style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td></tr><style>
tr {
transition: background-color 0.25s ease;
font-size: inherit;
}
tr.hover:hover {
@@ -133,15 +142,15 @@ exports[`Table should render children for table head 1`] = `
}
tr :global(td) {
padding: 0 8pt;
padding: 0 0.5em;
border-bottom: 1px solid #eaeaea;
color: #444;
font-size: 0.875rem;
font-size: calc(0.875 * var(--table-font-size));
text-align: left;
}
tr :global(.cell) {
min-height: 3.125rem;
min-height: calc(3.125 * var(--table-font-size));
display: flex;
-webkit-box-align: center;
align-items: center;
@@ -151,7 +160,12 @@ exports[`Table should render children for table head 1`] = `
table {
border-collapse: separate;
border-spacing: 0;
--table-font-size: calc(1 * 16px);
font-size: var(--table-font-size);
width: 100%;
height: auto;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
</style></table>"
`;
@@ -161,16 +175,17 @@ exports[`Table should render correctly 1`] = `
thead {
border-collapse: separate;
border-spacing: 0;
font-size: inherit;
}
th {
padding: 0 8pt;
font-size: 0.75rem;
padding: 0 0.5em;
font-size: calc(0.75 * var(--table-font-size));
font-weight: normal;
text-align: left;
letter-spacing: 0;
vertical-align: middle;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
color: #666;
background: #fafafa;
border-bottom: 1px solid #eaeaea;
@@ -198,12 +213,13 @@ exports[`Table should render correctly 1`] = `
display: flex;
align-items: center;
-webkit-box-align: center;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
text-transform: uppercase;
}
</style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
tr {
transition: background-color 0.25s ease;
font-size: inherit;
}
tr.hover:hover {
@@ -211,15 +227,15 @@ exports[`Table should render correctly 1`] = `
}
tr :global(td) {
padding: 0 8pt;
padding: 0 0.5em;
border-bottom: 1px solid #eaeaea;
color: #444;
font-size: 0.875rem;
font-size: calc(0.875 * var(--table-font-size));
text-align: left;
}
tr :global(.cell) {
min-height: 3.125rem;
min-height: calc(3.125 * var(--table-font-size));
display: flex;
-webkit-box-align: center;
align-items: center;
@@ -229,7 +245,12 @@ exports[`Table should render correctly 1`] = `
table {
border-collapse: separate;
border-spacing: 0;
--table-font-size: calc(1 * 16px);
font-size: var(--table-font-size);
width: 100%;
height: auto;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
</style></table>"
`;
@@ -239,16 +260,17 @@ exports[`Table should set width automatically 1`] = `
thead {
border-collapse: separate;
border-spacing: 0;
font-size: inherit;
}
th {
padding: 0 8pt;
font-size: 0.75rem;
padding: 0 0.5em;
font-size: calc(0.75 * var(--table-font-size));
font-weight: normal;
text-align: left;
letter-spacing: 0;
vertical-align: middle;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
color: #666;
background: #fafafa;
border-bottom: 1px solid #eaeaea;
@@ -276,12 +298,13 @@ exports[`Table should set width automatically 1`] = `
display: flex;
align-items: center;
-webkit-box-align: center;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
text-transform: uppercase;
}
</style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
tr {
transition: background-color 0.25s ease;
font-size: inherit;
}
tr.hover:hover {
@@ -289,15 +312,15 @@ exports[`Table should set width automatically 1`] = `
}
tr :global(td) {
padding: 0 8pt;
padding: 0 0.5em;
border-bottom: 1px solid #eaeaea;
color: #444;
font-size: 0.875rem;
font-size: calc(0.875 * var(--table-font-size));
text-align: left;
}
tr :global(.cell) {
min-height: 3.125rem;
min-height: calc(3.125 * var(--table-font-size));
display: flex;
-webkit-box-align: center;
align-items: center;
@@ -307,7 +330,12 @@ exports[`Table should set width automatically 1`] = `
table {
border-collapse: separate;
border-spacing: 0;
--table-font-size: calc(1 * 16px);
font-size: var(--table-font-size);
width: 100%;
height: auto;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
</style></table>"
`;
@@ -317,16 +345,17 @@ exports[`Table should work with other components 1`] = `
thead {
border-collapse: separate;
border-spacing: 0;
font-size: inherit;
}
th {
padding: 0 8pt;
font-size: 0.75rem;
padding: 0 0.5em;
font-size: calc(0.75 * var(--table-font-size));
font-weight: normal;
text-align: left;
letter-spacing: 0;
vertical-align: middle;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
color: #666;
background: #fafafa;
border-bottom: 1px solid #eaeaea;
@@ -354,12 +383,13 @@ exports[`Table should work with other components 1`] = `
display: flex;
align-items: center;
-webkit-box-align: center;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
text-transform: uppercase;
}
</style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\"><code>boolean</code></div></td><td><div class=\\"cell\\">true</div></td></tr><style>
tr {
transition: background-color 0.25s ease;
font-size: inherit;
}
tr.hover:hover {
@@ -367,15 +397,15 @@ exports[`Table should work with other components 1`] = `
}
tr :global(td) {
padding: 0 8pt;
padding: 0 0.5em;
border-bottom: 1px solid #eaeaea;
color: #444;
font-size: 0.875rem;
font-size: calc(0.875 * var(--table-font-size));
text-align: left;
}
tr :global(.cell) {
min-height: 3.125rem;
min-height: calc(3.125 * var(--table-font-size));
display: flex;
-webkit-box-align: center;
align-items: center;
@@ -385,7 +415,12 @@ exports[`Table should work with other components 1`] = `
table {
border-collapse: separate;
border-spacing: 0;
--table-font-size: calc(1 * 16px);
font-size: var(--table-font-size);
width: 100%;
height: auto;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
</style></table>"
`;
@@ -395,16 +430,17 @@ exports[`Table should work without hover effect 1`] = `
thead {
border-collapse: separate;
border-spacing: 0;
font-size: inherit;
}
th {
padding: 0 8pt;
font-size: 0.75rem;
padding: 0 0.5em;
font-size: calc(0.75 * var(--table-font-size));
font-weight: normal;
text-align: left;
letter-spacing: 0;
vertical-align: middle;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
color: #666;
background: #fafafa;
border-bottom: 1px solid #eaeaea;
@@ -432,12 +468,13 @@ exports[`Table should work without hover effect 1`] = `
display: flex;
align-items: center;
-webkit-box-align: center;
min-height: 2.5rem;
min-height: calc(2.5 * var(--table-font-size));
text-transform: uppercase;
}
</style><tbody><tr class=\\"\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
tr {
transition: background-color 0.25s ease;
font-size: inherit;
}
tr.hover:hover {
@@ -445,15 +482,15 @@ exports[`Table should work without hover effect 1`] = `
}
tr :global(td) {
padding: 0 8pt;
padding: 0 0.5em;
border-bottom: 1px solid #eaeaea;
color: #444;
font-size: 0.875rem;
font-size: calc(0.875 * var(--table-font-size));
text-align: left;
}
tr :global(.cell) {
min-height: 3.125rem;
min-height: calc(3.125 * var(--table-font-size));
display: flex;
-webkit-box-align: center;
align-items: center;
@@ -463,7 +500,12 @@ exports[`Table should work without hover effect 1`] = `
table {
border-collapse: separate;
border-spacing: 0;
--table-font-size: calc(1 * 16px);
font-size: var(--table-font-size);
width: 100%;
height: auto;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
</style></table>"
`;