feat(table): added frozen header, frozen column, permanent scrollbars (…

…#2464)
eBay · Oct 25, 2024 · 6482514 · 6482514
1 parent 0529ac5
commit 6482514
Show file tree

Hide file tree

Showing 16 changed files with 1,649 additions and 987 deletions.
diff --git a/.changeset/khaki-worms-hug.md b/.changeset/khaki-worms-hug.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(table): added frozen header, frozen column, permanent scrollbars
diff --git a/dist/mixins/_utility-mixins.scss b/dist/mixins/_utility-mixins.scss
@@ -60,3 +60,39 @@
 @mixin inline-flex-items-centered() {
     @include flex-items-centered(inline-flex);
 }
+
+@mixin scrollbars-permanent($target) {
+    #{$target} {
+        -webkit-overflow-scrolling: touch;
+        scroll-behavior: smooth;
+        /* stylelint-disable declaration-block-no-duplicate-properties */
+        -webkit-scroll-snap-type: mandatory;
+        -webkit-scroll-snap-type: x mandatory;
+        -ms-scroll-snap-type: mandatory;
+        -ms-scroll-snap-type: x mandatory;
+        scroll-snap-type: proximity;
+        scroll-snap-type: x proximity;
+        /* stylelint-enable declaration-block-no-duplicate-properties */
+    }
+
+    #{$target}::-webkit-scrollbar {
+        background-color: var(--color-background-faint);
+        border-radius: 12px;
+    }
+
+    #{$target}::-webkit-scrollbar:vertical {
+        width: 6px;
+    }
+
+    #{$target}::-webkit-scrollbar:horizontal {
+        height: 6px;
+    }
+
+    #{$target}::-webkit-scrollbar-thumb {
+        background-color: var(--color-foreground-secondary);
+        border-color: transparent;
+        border-radius: 12px;
+        border-right-style: inset;
+        box-shadow: none;
+    }
+}
diff --git a/dist/table/table.css b/dist/table/table.css
@@ -1,6 +1,32 @@
 .table {
+    max-height: 90vh;
     overflow-x: auto;
     position: relative;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    scroll-snap-type: proximity;
+    scroll-snap-type: x proximity;
+}
+
+.table::-webkit-scrollbar {
+    background-color: var(--color-background-faint);
+    border-radius: 12px;
+}
+
+.table::-webkit-scrollbar:vertical {
+    width: 6px;
+}
+
+.table::-webkit-scrollbar:horizontal {
+    height: 6px;
+}
+
+.table::-webkit-scrollbar-thumb {
+    background-color: var(--color-foreground-secondary);
+    border-color: transparent;
+    border-radius: 12px;
+    border-right-style: inset;
+    box-shadow: none;
 }
 
 .table table {
@@ -39,8 +65,32 @@
     padding: 16px;
 }
 
+.table--frozen-header thead {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+}
+
+.table--freeze-column-1 tr td:nth-child(-n + 1),
+.table--freeze-column-1 tr th:nth-child(-n + 1),
+.table--freeze-column-2 tr td:nth-child(-n + 2),
+.table--freeze-column-2 tr th:nth-child(-n + 2),
+.table--freeze-column-3 tr td:nth-child(-n + 3),
+.table--freeze-column-3 tr th:nth-child(-n + 3) {
+    left: 0;
+    position: sticky;
+}
+
+.table--full-height {
+    max-height: unset;
+}
+
+.table th a,
 .table th button {
+    align-items: center;
+    display: flex;
     font-weight: 700;
+    text-decoration: none;
 }
 
 .table tbody tr:last-child td,
@@ -102,6 +152,9 @@
     text-align: center;
     width: 48px;
 }
+.table--mode-selection tr:has(input:checked) :where(td, th) {
+    background-color: var(--color-background-secondary);
+}
 
 .table tbody th {
     font-weight: 400;

diff --git a/dist/tokens/evo-dark.css b/dist/tokens/evo-dark.css
@@ -3,6 +3,7 @@
         --color-background-primary: var(--color-neutral-900);
         --color-background-secondary: var(--color-neutral-800);
         --color-background-tertiary: var(--color-neutral-700);
+        --color-background-faint: rgba(var(--color-neutral-100-rgb), 0.05);
         --color-background-disabled: var(--color-neutral-600);
         --color-background-inverse: var(--color-neutral-300);
         --color-background-attention: var(--color-red-400);

diff --git a/dist/tokens/evo-light.css b/dist/tokens/evo-light.css
@@ -2,6 +2,7 @@
     --color-background-primary: var(--color-neutral-100);
     --color-background-secondary: var(--color-neutral-200);
     --color-background-tertiary: var(--color-neutral-300);
+    --color-background-faint: rgba(var(--color-neutral-900-rgb), 0.05);
     --color-background-disabled: var(--color-neutral-400);
     --color-background-inverse: var(--color-neutral-700);
     --color-background-attention: var(--color-red-600);

diff --git a/dist/utility/utility.css b/dist/utility/utility.css
@@ -101,3 +101,31 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+.scrollbars-permanent {
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    scroll-snap-type: proximity;
+    scroll-snap-type: x proximity;
+}
+
+.scrollbars-permanent::-webkit-scrollbar {
+    background-color: var(--color-background-faint);
+    border-radius: 12px;
+}
+
+.scrollbars-permanent::-webkit-scrollbar:vertical {
+    width: 6px;
+}
+
+.scrollbars-permanent::-webkit-scrollbar:horizontal {
+    height: 6px;
+}
+
+.scrollbars-permanent::-webkit-scrollbar-thumb {
+    background-color: var(--color-foreground-secondary);
+    border-color: transparent;
+    border-radius: 12px;
+    border-right-style: inset;
+    box-shadow: none;
+}
diff --git a/src/components/highlight-code/index.marko b/src/components/highlight-code/index.marko
@@ -23,6 +23,7 @@ $ let parser = input.type || "html";
 $ if (parser === "js") {
     parser = "babel";
 }
+$ const height = input.height || 400; 
 $ const code = input.code || input.bodyCode || "";
 $ const promise = prettier.format(code.trim(), {
     parser,
@@ -49,3 +50,31 @@ $ const promise = prettier.format(code.trim(), {
         <pre><code class="language-plaintext">$!{error}</code></pre>
     </@catch>
 </await>
+
+<style>
+pre[class*=language-] {
+    max-height: ${height}px;
+    overflow: auto;
+}
+
+pre[class*=language-]::-webkit-scrollbar {
+    background-color: var(--color-code-scrollbar);
+    border-radius: 12px;
+}
+
+pre[class*=language-]::-webkit-scrollbar:vertical {
+    width: 6px;
+}
+
+pre[class*=language-]::-webkit-scrollbar:horizontal {
+    height: 6px;
+}
+
+pre[class*=language-]::-webkit-scrollbar-thumb {
+    background-color: var(--color-code-scrollbar-thumb);
+    border-color: transparent;
+    border-radius: 12px;
+    border-right-style: inset;
+    box-shadow: none;
+}
+</style>