Skip to content
This repository was archived by the owner on Apr 28, 2025. It is now read-only.

Commit 32b6d59

Browse files
ArtBlueArtBlue
authored
feat(table): added frozen header, frozen column, permanent scrollbars (#2464)
1 parent a83ea89 commit 32b6d59

File tree

16 files changed

+1649
-987
lines changed

16 files changed

+1649
-987
lines changed

‎.changeset/khaki-worms-hug.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ebay/skin": minor
3+
---
4+
5+
feat(table): added frozen header, frozen column, permanent scrollbars

‎dist/mixins/_utility-mixins.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,39 @@
6060
@mixin inline-flex-items-centered() {
6161
@include flex-items-centered(inline-flex);
6262
}
63+
64+
@mixin scrollbars-permanent($target) {
65+
#{$target} {
66+
-webkit-overflow-scrolling: touch;
67+
scroll-behavior: smooth;
68+
/* stylelint-disable declaration-block-no-duplicate-properties */
69+
-webkit-scroll-snap-type: mandatory;
70+
-webkit-scroll-snap-type: x mandatory;
71+
-ms-scroll-snap-type: mandatory;
72+
-ms-scroll-snap-type: x mandatory;
73+
scroll-snap-type: proximity;
74+
scroll-snap-type: x proximity;
75+
/* stylelint-enable declaration-block-no-duplicate-properties */
76+
}
77+
78+
#{$target}::-webkit-scrollbar {
79+
background-color: var(--color-background-faint);
80+
border-radius: 12px;
81+
}
82+
83+
#{$target}::-webkit-scrollbar:vertical {
84+
width: 6px;
85+
}
86+
87+
#{$target}::-webkit-scrollbar:horizontal {
88+
height: 6px;
89+
}
90+
91+
#{$target}::-webkit-scrollbar-thumb {
92+
background-color: var(--color-foreground-secondary);
93+
border-color: transparent;
94+
border-radius: 12px;
95+
border-right-style: inset;
96+
box-shadow: none;
97+
}
98+
}

‎dist/table/table.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,32 @@
11
.table {
2+
max-height: 90vh;
23
overflow-x: auto;
34
position: relative;
5+
-webkit-overflow-scrolling: touch;
6+
scroll-behavior: smooth;
7+
scroll-snap-type: proximity;
8+
scroll-snap-type: x proximity;
9+
}
10+
11+
.table::-webkit-scrollbar {
12+
background-color: var(--color-background-faint);
13+
border-radius: 12px;
14+
}
15+
16+
.table::-webkit-scrollbar:vertical {
17+
width: 6px;
18+
}
19+
20+
.table::-webkit-scrollbar:horizontal {
21+
height: 6px;
22+
}
23+
24+
.table::-webkit-scrollbar-thumb {
25+
background-color: var(--color-foreground-secondary);
26+
border-color: transparent;
27+
border-radius: 12px;
28+
border-right-style: inset;
29+
box-shadow: none;
430
}
531

632
.table table {
@@ -39,8 +65,32 @@
3965
padding: 16px;
4066
}
4167

68+
.table--frozen-header thead {
69+
position: sticky;
70+
top: 0;
71+
z-index: 3;
72+
}
73+
74+
.table--freeze-column-1 tr td:nth-child(-n + 1),
75+
.table--freeze-column-1 tr th:nth-child(-n + 1),
76+
.table--freeze-column-2 tr td:nth-child(-n + 2),
77+
.table--freeze-column-2 tr th:nth-child(-n + 2),
78+
.table--freeze-column-3 tr td:nth-child(-n + 3),
79+
.table--freeze-column-3 tr th:nth-child(-n + 3) {
80+
left: 0;
81+
position: sticky;
82+
}
83+
84+
.table--full-height {
85+
max-height: unset;
86+
}
87+
88+
.table th a,
4289
.table th button {
90+
align-items: center;
91+
display: flex;
4392
font-weight: 700;
93+
text-decoration: none;
4494
}
4595

4696
.table tbody tr:last-child td,
@@ -102,6 +152,9 @@
102152
text-align: center;
103153
width: 48px;
104154
}
155+
.table--mode-selection tr:has(input:checked) :where(td, th) {
156+
background-color: var(--color-background-secondary);
157+
}
105158

106159
.table tbody th {
107160
font-weight: 400;

‎dist/tokens/evo-dark.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
--color-background-primary: var(--color-neutral-900);
44
--color-background-secondary: var(--color-neutral-800);
55
--color-background-tertiary: var(--color-neutral-700);
6+
--color-background-faint: rgba(var(--color-neutral-100-rgb), 0.05);
67
--color-background-disabled: var(--color-neutral-600);
78
--color-background-inverse: var(--color-neutral-300);
89
--color-background-attention: var(--color-red-400);

‎dist/tokens/evo-light.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
--color-background-primary: var(--color-neutral-100);
33
--color-background-secondary: var(--color-neutral-200);
44
--color-background-tertiary: var(--color-neutral-300);
5+
--color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);
56
--color-background-disabled: var(--color-neutral-400);
67
--color-background-inverse: var(--color-neutral-700);
78
--color-background-attention: var(--color-red-600);

‎dist/utility/utility.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,3 +101,31 @@
101101
text-overflow: ellipsis;
102102
white-space: nowrap;
103103
}
104+
105+
.scrollbars-permanent {
106+
-webkit-overflow-scrolling: touch;
107+
scroll-behavior: smooth;
108+
scroll-snap-type: proximity;
109+
scroll-snap-type: x proximity;
110+
}
111+
112+
.scrollbars-permanent::-webkit-scrollbar {
113+
background-color: var(--color-background-faint);
114+
border-radius: 12px;
115+
}
116+
117+
.scrollbars-permanent::-webkit-scrollbar:vertical {
118+
width: 6px;
119+
}
120+
121+
.scrollbars-permanent::-webkit-scrollbar:horizontal {
122+
height: 6px;
123+
}
124+
125+
.scrollbars-permanent::-webkit-scrollbar-thumb {
126+
background-color: var(--color-foreground-secondary);
127+
border-color: transparent;
128+
border-radius: 12px;
129+
border-right-style: inset;
130+
box-shadow: none;
131+
}

‎src/components/highlight-code/index.marko‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ $ let parser = input.type || "html";
2323
$ if (parser === "js") {
2424
parser = "babel";
2525
}
26+
$ const height = input.height || 400;
2627
$ const code = input.code || input.bodyCode || "";
2728
$ const promise = prettier.format(code.trim(), {
2829
parser,
@@ -49,3 +50,31 @@ $ const promise = prettier.format(code.trim(), {
4950
<pre><code class="language-plaintext">$!{error}</code></pre>
5051
</@catch>
5152
</await>
53+
54+
<style>
55+
pre[class*=language-] {
56+
max-height: ${height}px;
57+
overflow: auto;
58+
}
59+
60+
pre[class*=language-]::-webkit-scrollbar {
61+
background-color: var(--color-code-scrollbar);
62+
border-radius: 12px;
63+
}
64+
65+
pre[class*=language-]::-webkit-scrollbar:vertical {
66+
width: 6px;
67+
}
68+
69+
pre[class*=language-]::-webkit-scrollbar:horizontal {
70+
height: 6px;
71+
}
72+
73+
pre[class*=language-]::-webkit-scrollbar-thumb {
74+
background-color: var(--color-code-scrollbar-thumb);
75+
border-color: transparent;
76+
border-radius: 12px;
77+
border-right-style: inset;
78+
box-shadow: none;
79+
}
80+
</style>

0 commit comments

Comments
 (0)