release 18.4.0

.changeset/great-ways-taste.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+chore: removed unused storybook files (and percy workflow)

.changeset/khaki-worms-hug.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(table): added frozen header, frozen column, permanent scrollbars

.changeset/little-days-wait.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": patch
+---
+
+feat(eek): updated size

.changeset/moody-otters-wait.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+chore(table): added thead line for scrolling, reverted table contraint

.changeset/proud-dodos-cover.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(icons): added and modified icons

.changeset/real-sheep-cough.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": patch
+---
+
+Add description to file preview card

.changeset/strong-dingos-suffer.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(list): new component

.github/workflows/pages-html-proofer.yml

@@ -1,16 +1,17 @@
 name: pages-html-proofer
 
-on:
-  push:
-    paths:
-      - 'docs/**'
-      - '!docs/storybook'
-      - '.github/workflows/pages-html-proofer.yml'
-  pull_request:
-    paths:
-      - 'docs/**'
-      - '!docs/storybook'
-      - '.github/workflows/pages-html-proofer.yml'
+# Disabled for now. Will re-enable once we have a better html proofer
+# on:
+#   push:
+#     paths:
+#       - 'docs/**'
+#       - '!docs/storybook'
+#       - '.github/workflows/pages-html-proofer.yml'
+#   pull_request:
+#     paths:
+#       - 'docs/**'
+#       - '!docs/storybook'
+#       - '.github/workflows/pages-html-proofer.yml'
 
 jobs:
   pages-html-proofer:
@@ -26,5 +27,5 @@ jobs:
         - run: npm run deploy:only
         - uses: chabad360/htmlproofer@master
           with:
-            directory: "./_site"
+            directory: "./_siteDev"
             arguments: --disable_external --ignore_empty_alt --allow_hash_href --allow_missing_href

.gitignore

@@ -1,5 +1,6 @@
 _cdn
 _site
+_siteDev
 site
 docs/.jekyll-metadata
 node_modules

dist/eek/eek.css

@@ -3,7 +3,7 @@
     display: inline-flex;
     font-family: Arial, sans-serif;
     font-weight: 700;
-    height: 28px;
+    height: 24px;
     position: relative;
 }
 
@@ -16,7 +16,7 @@
 }
 
 .eek .icon--eek-arrow {
-    width: 11px;
+    width: 9px;
 }
 
 .eek__arrow {
@@ -111,7 +111,7 @@
     border-radius: 1px 0 0 1px;
     display: inline-flex;
     flex-direction: column;
-    height: 24px;
+    height: 20px;
     margin: 1px;
     padding: 0 1px;
 }

dist/file-preview-card/file-preview-card.css

@@ -37,6 +37,7 @@ video.file-preview-card__asset {
 }
 
 .file-preview-card__asset--fade {
+    background-color: inherit;
     opacity: 0.5;
 }
 
@@ -45,16 +46,19 @@ video.file-preview-card__asset {
     width: 40%;
 }
 
-.icon-btn.file-preview-card__action {
+.file-preview-card__body .icon-btn {
     height: var(--spacing-400);
+    width: var(--spacing-400);
+}
+
+.file-preview-card__body > .file-preview-card__action {
     position: absolute;
     right: var(--spacing-100);
     top: var(--spacing-100);
-    width: var(--spacing-400);
     z-index: 1;
 }
 
-.file-preview-card__action:dir(rtl) {
+.file-preview-card__body > .file-preview-card__action:dir(rtl) {
     left: var(--spacing-100);
     right: auto;
 }

dist/list/list.css

@@ -0,0 +1,76 @@
+.list {
+    max-width: 480px;
+}
+
+.list ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.list ul li > * {
+    align-items: center;
+    background-color: var(
+        --list-background-color,
+        var(--color-background-primary)
+    );
+    box-sizing: border-box;
+    color: var(--color-foreground-on-primary);
+    display: inline-flex;
+    font-size: var(--font-size-16);
+    margin-block: 1px;
+    min-height: var(--spacing-600);
+    padding: var(--spacing-150) var(--spacing-200);
+    width: 100%;
+}
+
+.list__leading {
+    margin-inline-end: var(--spacing-200);
+}
+
+.list__trailing {
+    margin-inline-start: var(--spacing-200);
+}
+
+.list__body {
+    flex: 1;
+}
+
+.list li > a,
+.list li > button {
+    border: none;
+    text-align: left;
+    text-decoration: none;
+}
+
+.list li > a:focus,
+.list li > a:hover,
+.list li > button:focus,
+.list li > button:hover {
+    color: var(--color-foreground-on-primary);
+}
+
+.list li > a:active,
+.list li > a:focus,
+.list li > a:hover,
+.list li > button:active,
+.list li > button:focus,
+.list li > button:hover {
+    background-color: var(
+        --list-background-hover-color,
+        var(--color-state-primary-hover)
+    );
+}
+
+.list hr {
+    border: 0;
+    border-top: 1px solid var(--color-stroke-subtle);
+    height: 1px;
+    margin-inline: var(--spacing-200);
+    padding: 0;
+}
+
+[dir="rtl"] .list li > a,
+[dir="rtl"] .list li > button {
+    text-align: right;
+}

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;
+    }
+}