feat(table): added sorting, cell types, actions, and inputs (#2444)

Author: ArtBlue

.changeset/wise-cougars-cross.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(table): added sorting, cell types, actions, and inputs

dist/table/table.css

@@ -1,9 +1,3 @@
-:root {
-    --density-compact-cell-height: 36px;
-    --density-default-cell-height: 48px;
-    --density-relaxed-cell-height: 56px;
-}
-
 .table {
     overflow-x: auto;
     position: relative;
@@ -20,42 +14,206 @@
     background-color: var(--color-background-primary);
     border-bottom: 1px solid var(--color-stroke-subtle);
     box-sizing: border-box;
-    height: var(--density-default-cell-height);
+    height: 80px;
+    max-height: 80px;
     max-width: 400px;
     min-width: 124px;
-    padding-block: var(--spacing-100);
-    padding-inline: var(--spacing-200);
+    padding: 12px;
+}
+
+.table th {
+    white-space: nowrap;
 }
 
+.table--density-compact td,
+.table--density-compact th {
+    height: 64px;
+    max-height: 64px;
+    padding: 12px;
+}
+
+.table--density-relaxed td,
+.table--density-relaxed th {
+    height: 112px;
+    max-height: 112px;
+    padding: 16px;
+}
+
+.table th button {
+    font-weight: 700;
+}
+
+.table tbody tr:last-child td,
+.table tbody tr:last-child th {
+    border-bottom: none;
+}
+
+.table-cell {
+    text-align: left;
+}
+
+.table-cell--numeric {
+    text-align: right;
+}
 .table__cell {
     text-align: left;
 }
 
-.table [data-type="numeric"],
 .table__cell--numeric {
     text-align: right;
 }
 
-.table td:last-child,
-.table th:last-child {
-    padding-inline-end: 0;
+.table-cell--icon-action {
+    text-align: center;
+    width: 64px;
 }
 
-.table--density-compact td,
-.table--density-compact th {
-    height: var(--density-compact-cell-height);
+.table [data-type="numeric"] {
+    text-align: right;
 }
 
-.table--density-relaxed td,
-.table--density-relaxed th {
-    height: var(--density-relaxed-cell-height);
+.table-cell img {
+    max-height: 56px;
+    max-width: 56px;
+}
+
+.table--density-compact .table-cell img {
+    max-height: 40px;
+    max-width: 40px;
+}
+
+.table--density-relaxed .table-cell img {
+    max-height: 72px;
+    max-width: 72px;
+}
+
+.table th[scope="row"] {
+    text-align: left;
+}
+
+.table td:last-child,
+.table th:last-child {
+    padding-inline-end: 0;
 }
 
 .table--mode-selection td:first-child,
 .table--mode-selection th:first-child {
-    min-width: unset;
+    min-width: 48px;
+    text-align: center;
+    width: 48px;
 }
 
 .table tbody th {
     font-weight: 400;
 }
+
+.table thead button {
+    background-color: initial;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    box-sizing: border-box;
+    color: inherit;
+    display: inline-block;
+    font-family: inherit;
+    font-size: var(--font-size-default);
+    margin: 0;
+    min-height: 40px;
+    min-width: auto;
+    padding: 3px;
+    text-align: center;
+    text-decoration: none;
+    transform: translateZ(0);
+    vertical-align: initial;
+    white-space: nowrap;
+}
+
+.table-cell__data {
+    line-height: var(--spacing-250);
+    max-width: 400px;
+    min-width: 124px;
+}
+
+.table-cell__data--secondary {
+    color: var(--color-foreground-secondary);
+    font-size: var(--font-size-12);
+    line-height: var(--spacing-200);
+}
+
+.table-cell__thumbnail {
+    align-items: center;
+    background-color: var(--color-background-tertiary);
+    border-radius: 8px;
+    display: flex;
+    flex-wrap: nowrap;
+    height: 56px;
+    justify-content: center;
+    overflow: hidden;
+    text-align: center;
+    width: 56px;
+}
+
+.table--density-compact .table-cell__thumbnail {
+    border-radius: 4px;
+    height: 40px;
+    width: 40px;
+}
+
+.table--density-relaxed .table-cell__thumbnail {
+    border-radius: 8px;
+    height: 72px;
+    width: 72px;
+}
+
+.table-cell__layout {
+    align-items: center;
+    display: flex;
+    gap: var(--spacing-200);
+    width: max-content;
+}
+
+.table-cell__layout > * {
+    flex-shrink: 0;
+}
+
+.table-cell__multiline {
+    max-height: 80px;
+    max-width: 304px;
+}
+
+.table--density-compact .table-cell__multiline {
+    max-height: 64px;
+    max-width: 320px;
+}
+
+.table--density-relaxed .table-cell__multiline {
+    max-height: 112px;
+    max-width: 272px;
+}
+
+.table-cell__layout .table-cell__multiline .table-cell__data {
+    -webkit-margin-after: var(--spacing-50);
+    margin-block-end: var(--spacing-50);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.table-cell .textbox,
+.table-cell .textbox__control {
+    width: 100%;
+}
+
+.table-cell--numeric .textbox__control {
+    text-align: right;
+}
+
+.table-cell .signal {
+    white-space: nowrap;
+}
+[dir="rtl"] .table th[scope="row"],
+[dir="rtl"] .table-cell {
+    text-align: right;
+}
+[dir="rtl"] .table-cell--numeric {
+    text-align: left;
+}