From c96fcef666c75aa9a3b3082b38b7953b32085330 Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Thu, 12 Sep 2024 13:27:11 -0700 Subject: [PATCH 1/8] feat(table): added sorting, cell types, table actions, and inputs --- dist/table/table.css | 167 +- src/modules/table.marko | 3663 ++++++++++++++--- .../table/stories/table.actions.stories.js | 1183 ++++++ .../table/stories/table.inputs.stories.js | 835 ++++ src/sass/table/stories/table.stories.js | 943 ++++- src/sass/table/table.scss | 162 +- 6 files changed, 6160 insertions(+), 793 deletions(-) create mode 100644 src/sass/table/stories/table.actions.stories.js create mode 100644 src/sass/table/stories/table.inputs.stories.js diff --git a/dist/table/table.css b/dist/table/table.css index 9eb9d15be..56488de83 100644 --- a/dist/table/table.css +++ b/dist/table/table.css @@ -1,7 +1,34 @@ :root { - --density-compact-cell-height: 36px; - --density-default-cell-height: 48px; - --density-relaxed-cell-height: 56px; + --density-compact-padding: var(--spacing-150); + --density-default-padding: var(--spacing-150); + --density-relaxed-padding: var(--spacing-200); + --density-compact-cell-height: 64px; + --density-default-cell-height: 80px; + --density-relaxed-cell-height: 112px; + --density-compact-img-size: 40px; + --density-default-img-size: 56px; + --density-relaxed-img-size: 72px; + --density-compact-img-radius: 4px; + --density-default-img-radius: 8px; + --density-relaxed-img-radius: 8px; + --cell-height: var(--density-default-cell-height); + --cell-padding: var(--density-default-padding); + --cell-max-width: 400px; + --cell-min-width: 124px; + --img-size: var(--density-default-img-size); + --img-radius: var(--density-default-img-radius); +} + +.table--density-compact { + --cell-height: var(--density-compact-cell-height); + --cell-padding: var(--density-compact-padding); + --img-size: var(--density-compact-img-size); +} + +.table--density-relaxed { + --cell-height: var(--density-relaxed-cell-height); + --cell-padding: var(--density-relaxed-padding); + --img-size: var(--density-relaxed-img-size); } .table { @@ -20,43 +47,139 @@ background-color: var(--color-background-primary); border-bottom: 1px solid var(--color-stroke-subtle); box-sizing: border-box; - height: var(--density-default-cell-height); - max-width: 400px; - min-width: 124px; - padding-block: var(--spacing-100); - padding-inline: var(--spacing-200); + height: var(--cell-height); + max-height: var(--cell-height); + max-width: var(--cell-max-width); + min-width: var(--cell-min-width); + padding: var(--cell-padding); +} + +.table th button { + font-weight: 700; +} + +.table tbody tr:last-child td, +.table tbody tr:last-child th { + border-bottom: none; } -.table__cell { +.table-cell { text-align: left; } -.table [data-type="numeric"], -.table__cell--numeric { +.table-cell--numeric { text-align: right; } -.table td:last-child, -.table th:last-child { - -webkit-padding-end: 0; - 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-cell img { + max-height: var(--img-size); + max-width: var(--img-size); } -.table--density-relaxed td, -.table--density-relaxed th { - height: var(--density-relaxed-cell-height); +.table th[scope="row"] { + text-align: left; +} + +.table td:last-child, +.table th:last-child { + -webkit-padding-end: 0; + 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.btn { + padding: 0; + white-space: nowrap; +} + +.table thead button.btn--borderless:focus { + outline-style: solid; +} + +.table thead button.btn svg.icon { + -webkit-margin-start: 6px; + margin-inline-start: 6px; +} + +.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: var(--img-radius); + display: flex; + flex-wrap: nowrap; + height: var(--img-size); + justify-content: center; + overflow: hidden; + text-align: center; + width: var(--img-size); +} + +.table-cell__layout { + align-items: center; + display: flex; + gap: var(--spacing-200); + height: var(--cell-height); +} + +.table-cell__layout > * { + flex-shrink: 0; +} + +.table-cell__multiline { + max-height: var(--cell-height); + max-width: calc( + var(--cell-max-width) - var(--cell-height) - var(--spacing-200) + ); +} + +.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; +} diff --git a/src/modules/table.marko b/src/modules/table.marko index 2b28f8b66..af898d77c 100644 --- a/src/modules/table.marko +++ b/src/modules/table.marko @@ -14,78 +14,255 @@ - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15Nintendo +
+
+ Nintendo Switch +
+
+
+ Nintendo Switch Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $287.96300 +
+
+ 00-10542-89507 +
+
100
+
+ 		95$17.99FREE4/1 - 4/5
Nintendo +
+
+ Nintendo SNES +
+
+
+ Nintendo SNES Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $89.8545 +
+ 00-10542-89507 +
+
200
+ 		5$18.95FREE4/11 - 4/15
Microsoft +
+
+ Microsoft XBOX 360 +
+
+
+ Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Backorder + $499.99345 +
+ 00-10542-89507 +
+
100
+ 		205$17.99FREE4/17 - 4/25
Microsoft +
+
+ Microsoft XBOX One +
+
+
+ Microsoft XBOX One Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Preparing + $499.99399 +
+ 00-10542-89507 +
+
100
+ 		407$27.99FREE4/9 - 4/11
Sony +
+
+ Sony Playstation 5 +
+
+
+ Sony Playstation 5 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Restocking + $519.99205 +
+ 00-10542-89507 +
+
100
+ 		265$29.99FREE4/11 - 4/15
@@ -98,78 +275,255 @@ - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15Nintendo +
+
+ Nintendo Switch +
+
+
+ Nintendo Switch Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $287.96300 +
+
+ 00-10542-89507 +
+
100
+
+ 		95$17.99FREE4/1 - 4/5
Nintendo +
+
+ Nintendo SNES +
+
+
+ Nintendo SNES Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $89.8545 +
+ 00-10542-89507 +
+
200
+ 		5$18.95FREE4/11 - 4/15
Microsoft +
+
+ Microsoft XBOX 360 +
+
+
+ Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Backorder + $499.99345 +
+ 00-10542-89507 +
+
100
+ 		205$17.99FREE4/17 - 4/25
Microsoft +
+
+ Microsoft XBOX One +
+
+
+ Microsoft XBOX One Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Preparing + $499.99399 +
+ 00-10542-89507 +
+
100
+ 		407$27.99FREE4/9 - 4/11
Sony +
+
+ Sony Playstation 5 +
+
+
+ Sony Playstation 5 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Restocking + $519.99205 +
+ 00-10542-89507 +
+
100
+ 		265$29.99FREE4/11 - 4/15
@@ -183,78 +537,255 @@ - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15Nintendo +
+
+ Nintendo Switch +
+
+
+ Nintendo Switch Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $287.96300 +
+
+ 00-10542-89507 +
+
100
+
+ 		95$17.99FREE4/1 - 4/5
Nintendo +
+
+ Nintendo SNES +
+
+
+ Nintendo SNES Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $89.8545 +
+ 00-10542-89507 +
+
200
+ 		5$18.95FREE4/11 - 4/15
Microsoft +
+
+ Microsoft XBOX 360 +
+
+
+ Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Backorder + $499.99345 +
+ 00-10542-89507 +
+
100
+ 		205$17.99FREE4/17 - 4/25
Microsoft +
+
+ Microsoft XBOX One +
+
+
+ Microsoft XBOX One Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Preparing + $499.99399 +
+ 00-10542-89507 +
+
100
+ 		407$27.99FREE4/9 - 4/11
Sony +
+
+ Sony Playstation 5 +
+
+
+ Sony Playstation 5 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Restocking + $519.99205 +
+ 00-10542-89507 +
+
100
+ 		265$29.99FREE4/11 - 4/15
@@ -267,78 +798,255 @@ - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15Nintendo +
+
+ Nintendo Switch +
+
+
+ Nintendo Switch Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $287.96300 +
+
+ 00-10542-89507 +
+
100
+
+ 		95$17.99FREE4/1 - 4/5
Nintendo +
+
+ Nintendo SNES +
+
+
+ Nintendo SNES Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $89.8545 +
+ 00-10542-89507 +
+
200
+ 		5$18.95FREE4/11 - 4/15
Microsoft +
+
+ Microsoft XBOX 360 +
+
+
+ Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Backorder + $499.99345 +
+ 00-10542-89507 +
+
100
+ 		205$17.99FREE4/17 - 4/25
Microsoft +
+
+ Microsoft XBOX One +
+
+
+ Microsoft XBOX One Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Preparing + $499.99399 +
+ 00-10542-89507 +
+
100
+ 		407$27.99FREE4/9 - 4/11
Sony +
+
+ Sony Playstation 5 +
+
+
+ Sony Playstation 5 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Restocking + $519.99205 +
+ 00-10542-89507 +
+
100
+ 		265$29.99FREE4/11 - 4/15
@@ -352,78 +1060,255 @@ - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15Nintendo +
+
+ Nintendo Switch +
+
+
+ Nintendo Switch Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $287.96300 +
+
+ 00-10542-89507 +
+
100
+
+ 		95$17.99FREE4/1 - 4/5
Nintendo +
+
+ Nintendo SNES +
+
+
+ Nintendo SNES Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $89.8545 +
+ 00-10542-89507 +
+
200
+ 		5$18.95FREE4/11 - 4/15
Microsoft +
+
+ Microsoft XBOX 360 +
+
+
+ Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Backorder + $499.99345 +
+ 00-10542-89507 +
+
100
+ 		205$17.99FREE4/17 - 4/25
Microsoft +
+
+ Microsoft XBOX One +
+
+
+ Microsoft XBOX One Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Preparing + $499.99399 +
+ 00-10542-89507 +
+
100
+ 		407$27.99FREE4/9 - 4/11
Sony +
+
+ Sony Playstation 5 +
+
+
+ Sony Playstation 5 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Restocking + $519.99205 +
+ 00-10542-89507 +
+
100
+ 		265$29.99FREE4/11 - 4/15
@@ -436,78 +1321,255 @@ - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15Nintendo +
+
+ Nintendo Switch +
+
+
+ Nintendo Switch Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $287.96300 +
+
+ 00-10542-89507 +
+
100
+
+ 		95$17.99FREE4/1 - 4/5
Nintendo +
+
+ Nintendo SNES +
+
+
+ Nintendo SNES Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $89.8545 +
+ 00-10542-89507 +
+
200
+ 		5$18.95FREE4/11 - 4/15
Microsoft +
+
+ Microsoft XBOX 360 +
+
+
+ Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Backorder + $499.99345 +
+ 00-10542-89507 +
+
100
+ 		205$17.99FREE4/17 - 4/25
Microsoft +
+
+ Microsoft XBOX One +
+
+
+ Microsoft XBOX One Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Preparing + $499.99399 +
+ 00-10542-89507 +
+
100
+ 		407$27.99FREE4/9 - 4/11
Sony +
+
+ Sony Playstation 5 +
+
+
+ Sony Playstation 5 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Restocking + $519.99205 +
+ 00-10542-89507 +
+
100
+ 		265$29.99FREE4/11 - 4/15
@@ -539,7 +1601,7 @@ - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + +
+ SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
+ NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
+ NintendoSNES$89.8545175$18.95FREE4/11 - 4/15NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
+ MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
+ MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
+ SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15
@@ -791,7 +1923,7 @@ - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + + +
+ - + SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
+ NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
+ NintendoSNES - $89.85 - 45175$18.95FREE4/11 - 4/15NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
+ MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
+ MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
+ SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15
+ + + +

Table with Actions

+ +

+ A table can have actions inside for performing various tasks for each row. +

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + Condition + + Multiple Actions + + Actions Plus + + + + + + + + + + + + + + +
NintendoSwitch + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360 + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5 + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $519.99205265199$29.99FREE4/11 - 4/15
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + Condition + + Multiple Actions + + Actions Plus + + + + + + + + + + + + + + +
NintendoSwitch + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360 + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5 + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $519.99205265199$29.99FREE4/11 - 4/15
+
+ + +

Table with Field Inputs

+ +

+ A table can have field inputs for quick data modification for each row. +

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + 30020795$17.99 + + + + 4/1 - 4/5
+ + + + + + + + + + + + + 45175$18.95 + + + + 4/11 - 4/15
+ + + + + + + + + + + + + 345455205$17.99 + + + + 4/17 - 4/25
+ + + + + + + + + + + + + 399407305$27.99 + + + + 4/9 - 4/11
+ + + + + + + + + + + + + 205265199$29.99 + + + + 4/11 - 4/15
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + 30020795$17.99 + + + + 4/1 - 4/5
+ + + + + + + + + + + + + 45175$18.95 + + + + 4/11 - 4/15
+ + + + + + + + + + + + + 345455205$17.99 + + + + 4/17 - 4/25
+ + + + + + + + + + + + + 399407305$27.99 + + + + 4/9 - 4/11
+ + + + + + + + + + + + + 205265199$29.99 + + + + 4/11 - 4/15
diff --git a/src/sass/table/stories/table.actions.stories.js b/src/sass/table/stories/table.actions.stories.js new file mode 100644 index 000000000..f8f6ead68 --- /dev/null +++ b/src/sass/table/stories/table.actions.stories.js @@ -0,0 +1,1183 @@ +export default { title: "Skin/Table/Actions" }; + +export const base = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + Condition + + Multiple Actions + + Actions Plus + + + + + + + + + + + + + + +
NintendoSwitch + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360 + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5 + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $519.99205265199$29.99FREE4/11 - 4/15
+
+`; + +export const compact = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + Condition + + Multiple Actions + + Actions Plus + + + + + + + + + + + + + + +
NintendoSwitch + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360 + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5 + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $519.99205265199$29.99FREE4/11 - 4/15
+
+`; + +export const relaxed = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + Condition + + Multiple Actions + + Actions Plus + + + + + + + + + + + + + + +
NintendoSwitch + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360 + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5 + + + + + +
+ + + Edit Listing + + + + + +
+ 		+ + $519.99205265199$29.99FREE4/11 - 4/15
+
+`; diff --git a/src/sass/table/stories/table.inputs.stories.js b/src/sass/table/stories/table.inputs.stories.js new file mode 100644 index 000000000..717e22eec --- /dev/null +++ b/src/sass/table/stories/table.inputs.stories.js @@ -0,0 +1,835 @@ +export default { title: "Skin/Table/Inputs" }; + +export const base = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + 30020795$17.99 + + + + 4/1 - 4/5
+ + + + + + + + + + + + + 45175$18.95 + + + + 4/11 - 4/15
+ + + + + + + + + + + + + 345455205$17.99 + + + + 4/17 - 4/25
+ + + + + + + + + + + + + 399407305$27.99 + + + + 4/9 - 4/11
+ + + + + + + + + + + + + 205265199$29.99 + + + + 4/11 - 4/15
+
+`; + +export const compact = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + 30020795$17.99 + + + + 4/1 - 4/5
+ + + + + + + + + + + + + 45175$18.95 + + + + 4/11 - 4/15
+ + + + + + + + + + + + + 345455205$17.99 + + + + 4/17 - 4/25
+ + + + + + + + + + + + + 399407305$27.99 + + + + 4/9 - 4/11
+ + + + + + + + + + + + + 205265199$29.99 + + + + 4/11 - 4/15
+
+`; + +export const relaxed = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + 30020795$17.99 + + + + 4/1 - 4/5
+ + + + + + + + + + + + + 45175$18.95 + + + + 4/11 - 4/15
+ + + + + + + + + + + + + 345455205$17.99 + + + + 4/17 - 4/25
+ + + + + + + + + + + + + 399407305$27.99 + + + + 4/9 - 4/11
+ + + + + + + + + + + + + 205265199$29.99 + + + + 4/11 - 4/15
+
+`; diff --git a/src/sass/table/stories/table.stories.js b/src/sass/table/stories/table.stories.js index 154ee53aa..47f8293d6 100644 --- a/src/sass/table/stories/table.stories.js +++ b/src/sass/table/stories/table.stories.js @@ -5,78 +5,255 @@ export const base = () => ` - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15Nintendo +
+
+ Nintendo Switch +
+
+
+ Nintendo Switch Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $287.96300 +
+
+ 00-10542-89507 +
+
100
+
+ 		95$17.99FREE4/1 - 4/5
Nintendo +
+
+ Nintendo SNES +
+
+
+ Nintendo SNES Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $89.8545 +
+ 00-10542-89507 +
+
200
+ 		5$18.95FREE4/11 - 4/15
Microsoft +
+
+ Microsoft XBOX 360 +
+
+
+ Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Backorder + $499.99345 +
+ 00-10542-89507 +
+
100
+ 		205$17.99FREE4/17 - 4/25
Microsoft +
+
+ Microsoft XBOX One +
+
+
+ Microsoft XBOX One Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Preparing + $499.99399 +
+ 00-10542-89507 +
+
100
+ 		407$27.99FREE4/9 - 4/11
Sony +
+
+ Sony Playstation 5 +
+
+
+ Sony Playstation 5 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Restocking + $519.99205 +
+ 00-10542-89507 +
+
100
+ 		265$29.99FREE4/11 - 4/15
@@ -88,80 +265,255 @@ export const compact = () => ` - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES - $89.85 - 45175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15Nintendo +
+
+ Nintendo Switch +
+
+
+ Nintendo Switch Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $287.96300 +
+
+ 00-10542-89507 +
+
100
+
+ 		95$17.99FREE4/1 - 4/5
Nintendo +
+
+ Nintendo SNES +
+
+
+ Nintendo SNES Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $89.8545 +
+ 00-10542-89507 +
+
200
+ 		5$18.95FREE4/11 - 4/15
Microsoft +
+
+ Microsoft XBOX 360 +
+
+
+ Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Backorder + $499.99345 +
+ 00-10542-89507 +
+
100
+ 		205$17.99FREE4/17 - 4/25
Microsoft +
+
+ Microsoft XBOX One +
+
+
+ Microsoft XBOX One Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Preparing + $499.99399 +
+ 00-10542-89507 +
+
100
+ 		407$27.99FREE4/9 - 4/11
Sony +
+
+ Sony Playstation 5 +
+
+
+ Sony Playstation 5 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Restocking + $519.99205 +
+ 00-10542-89507 +
+
100
+ 		265$29.99FREE4/11 - 4/15
@@ -173,80 +525,255 @@ export const relaxed = () => ` - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery + + + + + + + + + + + + + + + + + + + +
NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
NintendoSNES - $89.85 - 45175$18.95FREE4/11 - 4/15
MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15Nintendo +
+
+ Nintendo Switch +
+
+
+ Nintendo Switch Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $287.96300 +
+
+ 00-10542-89507 +
+
100
+
+ 		95$17.99FREE4/1 - 4/5
Nintendo +
+
+ Nintendo SNES +
+
+
+ Nintendo SNES Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + $89.8545 +
+ 00-10542-89507 +
+
200
+ 		5$18.95FREE4/11 - 4/15
Microsoft +
+
+ Microsoft XBOX 360 +
+
+
+ Microsoft XBOX 360 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Backorder + $499.99345 +
+ 00-10542-89507 +
+
100
+ 		205$17.99FREE4/17 - 4/25
Microsoft +
+
+ Microsoft XBOX One +
+
+
+ Microsoft XBOX One Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Preparing + $499.99399 +
+ 00-10542-89507 +
+
100
+ 		407$27.99FREE4/9 - 4/11
Sony +
+
+ Sony Playstation 5 +
+
+
+ Sony Playstation 5 Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Restocking + $519.99205 +
+ 00-10542-89507 +
+
100
+ 		265$29.99FREE4/11 - 4/15
diff --git a/src/sass/table/table.scss b/src/sass/table/table.scss index 2894817aa..ca557d689 100644 --- a/src/sass/table/table.scss +++ b/src/sass/table/table.scss @@ -1,10 +1,40 @@ @import "../variables/variables"; :root { + --density-compact-padding: var(--spacing-150); + --density-default-padding: var(--spacing-150); + --density-relaxed-padding: var(--spacing-200); /* these exclude the 16px padding for top/bottom */ - --density-compact-cell-height: 36px; - --density-default-cell-height: 48px; - --density-relaxed-cell-height: 56px; + --density-compact-cell-height: 64px; + --density-default-cell-height: 80px; + --density-relaxed-cell-height: 112px; + /* these are for image sizes in cells */ + --density-compact-img-size: 40px; + --density-default-img-size: 56px; + --density-relaxed-img-size: 72px; + /* these are for image radii in cells */ + --density-compact-img-radius: 4px; + --density-default-img-radius: 8px; + --density-relaxed-img-radius: 8px; + /* these are props that retain defaults, but can be overridden by modifiers */ + --cell-height: var(--density-default-cell-height); + --cell-padding: var(--density-default-padding); + --cell-max-width: 400px; + --cell-min-width: 124px; + --img-size: var(--density-default-img-size); + --img-radius: var(--density-default-img-radius); +} + +.table--density-compact { + --cell-height: var(--density-compact-cell-height); + --cell-padding: var(--density-compact-padding); + --img-size: var(--density-compact-img-size); +} + +.table--density-relaxed { + --cell-height: var(--density-relaxed-cell-height); + --cell-padding: var(--density-relaxed-padding); + --img-size: var(--density-relaxed-img-size); } .table { @@ -24,47 +54,139 @@ background-color: var(--color-background-primary); border-bottom: 1px solid var(--color-stroke-subtle); box-sizing: border-box; - height: var(--density-default-cell-height); - max-width: 400px; - min-width: 124px; + height: var(--cell-height); + max-height: var(--cell-height); + max-width: var(--cell-max-width); + min-width: var(--cell-min-width); // minimal padding to prevent text from touching the border - padding-block: var(--spacing-100); - padding-inline: var(--spacing-200); + padding: var(--cell-padding); } -.table__cell { +.table th button { + font-weight: bold; +} + +// last row shouldn't have a bottom border +.table tbody tr:last-child th, +.table tbody tr:last-child td { + border-bottom: none; +} + +.table-cell { text-align: left; } -.table__cell--numeric { +.table-cell--numeric { text-align: right; } +.table-cell--icon-action { + width: 64px; + text-align: center; +} + .table [data-type="numeric"] { text-align: right; } -.table th:last-child, -.table td:last-child { - padding-inline-end: 0; +.table-cell img { + max-height: var(--img-size); + max-width: var(--img-size); } -.table--density-compact th, -.table--density-compact td { - height: var(--density-compact-cell-height); +.table th[scope="row"] { + text-align: left; } -.table--density-relaxed th, -.table--density-relaxed td { - height: var(--density-relaxed-cell-height); +.table th:last-child, +.table td:last-child { + padding-inline-end: 0; } .table--mode-selection th:first-child, .table--mode-selection td:first-child { - min-width: unset; + min-width: 48px; + text-align: center; + width: 48px; } .table tbody th { font-weight: normal; } + +.table thead button.btn { + padding: 0; + white-space: nowrap; +} + +.table thead button.btn--borderless:focus { + outline-style: solid; +} + +.table thead button.btn svg.icon { + margin-inline-start: 6px; +} + +.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: var(--img-radius); + display: flex; + flex-wrap: nowrap; + height: var(--img-size); + justify-content: center; + overflow: hidden; // to round square images + text-align: center; + width: var(--img-size); +} + +.table-cell__layout { + align-items: center; + display: flex; + gap: var(--spacing-200); + height: var(--cell-height); +} + +.table-cell__layout > * { + flex-shrink: 0; +} + +.table-cell__multiline { + max-height: var(--cell-height); + max-width: calc( + var(--cell-max-width) - var(--cell-height) - var(--spacing-200) + ); +} + +.table-cell__layout .table-cell__multiline .table-cell__data { + 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; +} From 33ecb27ab803fea3049d7f62459351ac46526cf6 Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Thu, 12 Sep 2024 15:08:13 -0700 Subject: [PATCH 2/8] fix(table): made minor tweaks --- dist/table/table.css | 8 +- .../table/stories/table.selection.stories.js | 528 +++++++++--------- src/sass/table/table.scss | 15 +- 3 files changed, 285 insertions(+), 266 deletions(-) diff --git a/dist/table/table.css b/dist/table/table.css index 56488de83..4f4434370 100644 --- a/dist/table/table.css +++ b/dist/table/table.css @@ -149,7 +149,6 @@ align-items: center; display: flex; gap: var(--spacing-200); - height: var(--cell-height); } .table-cell__layout > * { @@ -183,3 +182,10 @@ .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; +} diff --git a/src/sass/table/stories/table.selection.stories.js b/src/sass/table/stories/table.selection.stories.js index 4a7e80137..381610631 100644 --- a/src/sass/table/stories/table.selection.stories.js +++ b/src/sass/table/stories/table.selection.stories.js @@ -5,96 +5,96 @@ export const base = () => ` - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + +
+ SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDeliverySellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
+ NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
+ NintendoSNES$89.8545175$18.95FREE4/11 - 4/15NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
+ MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
+ MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
+ SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15
@@ -106,98 +106,98 @@ export const compact = () => ` - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - + + + - - - - - - + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + +
+ SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDeliverySellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
+ NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
+ NintendoSNES + NintendoSNES $89.85 45175$18.95FREE4/11 - 4/1545175$18.95FREE4/11 - 4/15
+ MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
+ MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
+ SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15
@@ -209,96 +209,96 @@ export const relaxed = () => ` - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + +
+ SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDeliverySellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
+ NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
+ NintendoSNES$89.8545175$18.95FREE4/11 - 4/15NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
+ MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
+ MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
+ SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15
@@ -311,96 +311,96 @@ export const RTL = () => ` - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + +
+ SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDeliverySellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
+ NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5NintendoSwitch$287.9630020795$17.99FREE4/1 - 4/5
+ NintendoSNES$89.8545175$18.95FREE4/11 - 4/15NintendoSNES$89.8545175$18.95FREE4/11 - 4/15
+ MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25MicrosoftXBOX 360$499.99345455205$17.99FREE4/17 - 4/25
+ MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11MicrosoftXBOX One$499.99399407305$27.99FREE4/9 - 4/11
+ SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15SonyPlaystation 5$519.99205265199$29.99FREE4/11 - 4/15
diff --git a/src/sass/table/table.scss b/src/sass/table/table.scss index ca557d689..814c98a4e 100644 --- a/src/sass/table/table.scss +++ b/src/sass/table/table.scss @@ -157,7 +157,6 @@ align-items: center; display: flex; gap: var(--spacing-200); - height: var(--cell-height); } .table-cell__layout > * { @@ -190,3 +189,17 @@ .table-cell .signal { white-space: nowrap; } + +[dir="rtl"] { + .table th[scope="row"] { + text-align: right; + } + + .table-cell { + text-align: right; + } + + .table-cell--numeric { + text-align: left; + } +} From 0bd6fb7a59b7f16fc80d93be719a07aa1e0c2120 Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Fri, 13 Sep 2024 06:53:58 -0700 Subject: [PATCH 3/8] Create wise-cougars-cross.md --- .changeset/wise-cougars-cross.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wise-cougars-cross.md diff --git a/.changeset/wise-cougars-cross.md b/.changeset/wise-cougars-cross.md new file mode 100644 index 000000000..2c42a4fed --- /dev/null +++ b/.changeset/wise-cougars-cross.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": minor +--- + +feat(table): added sorting, cell types, actions, and inputs From a1a78b20394dab61e77c7337b5e3ad78d7614273 Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Thu, 19 Sep 2024 08:29:09 -0700 Subject: [PATCH 4/8] chore(table): updated to use SASS vars per PR feedback and discussions --- dist/table/table.css | 105 +++++++++++++++++-------------- src/sass/table/table.scss | 129 +++++++++++++++++++++++--------------- 2 files changed, 136 insertions(+), 98 deletions(-) diff --git a/dist/table/table.css b/dist/table/table.css index 4f4434370..20361574a 100644 --- a/dist/table/table.css +++ b/dist/table/table.css @@ -1,36 +1,3 @@ -:root { - --density-compact-padding: var(--spacing-150); - --density-default-padding: var(--spacing-150); - --density-relaxed-padding: var(--spacing-200); - --density-compact-cell-height: 64px; - --density-default-cell-height: 80px; - --density-relaxed-cell-height: 112px; - --density-compact-img-size: 40px; - --density-default-img-size: 56px; - --density-relaxed-img-size: 72px; - --density-compact-img-radius: 4px; - --density-default-img-radius: 8px; - --density-relaxed-img-radius: 8px; - --cell-height: var(--density-default-cell-height); - --cell-padding: var(--density-default-padding); - --cell-max-width: 400px; - --cell-min-width: 124px; - --img-size: var(--density-default-img-size); - --img-radius: var(--density-default-img-radius); -} - -.table--density-compact { - --cell-height: var(--density-compact-cell-height); - --cell-padding: var(--density-compact-padding); - --img-size: var(--density-compact-img-size); -} - -.table--density-relaxed { - --cell-height: var(--density-relaxed-cell-height); - --cell-padding: var(--density-relaxed-padding); - --img-size: var(--density-relaxed-img-size); -} - .table { overflow-x: auto; position: relative; @@ -47,11 +14,25 @@ background-color: var(--color-background-primary); border-bottom: 1px solid var(--color-stroke-subtle); box-sizing: border-box; - height: var(--cell-height); - max-height: var(--cell-height); - max-width: var(--cell-max-width); - min-width: var(--cell-min-width); - padding: var(--cell-padding); + height: 80px; + max-height: 80px; + max-width: 400px; + min-width: 124px; + padding: 12px; +} + +.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 { @@ -81,8 +62,18 @@ } .table-cell img { - max-height: var(--img-size); - max-width: var(--img-size); + 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"] { @@ -135,14 +126,26 @@ .table-cell__thumbnail { align-items: center; background-color: var(--color-background-tertiary); - border-radius: var(--img-radius); + border-radius: 8px; display: flex; flex-wrap: nowrap; - height: var(--img-size); + height: 56px; justify-content: center; overflow: hidden; text-align: center; - width: var(--img-size); + 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 { @@ -156,10 +159,18 @@ } .table-cell__multiline { - max-height: var(--cell-height); - max-width: calc( - var(--cell-max-width) - var(--cell-height) - var(--spacing-200) - ); + 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 { diff --git a/src/sass/table/table.scss b/src/sass/table/table.scss index 814c98a4e..86c3f484f 100644 --- a/src/sass/table/table.scss +++ b/src/sass/table/table.scss @@ -1,41 +1,24 @@ @import "../variables/variables"; -:root { - --density-compact-padding: var(--spacing-150); - --density-default-padding: var(--spacing-150); - --density-relaxed-padding: var(--spacing-200); - /* these exclude the 16px padding for top/bottom */ - --density-compact-cell-height: 64px; - --density-default-cell-height: 80px; - --density-relaxed-cell-height: 112px; - /* these are for image sizes in cells */ - --density-compact-img-size: 40px; - --density-default-img-size: 56px; - --density-relaxed-img-size: 72px; - /* these are for image radii in cells */ - --density-compact-img-radius: 4px; - --density-default-img-radius: 8px; - --density-relaxed-img-radius: 8px; - /* these are props that retain defaults, but can be overridden by modifiers */ - --cell-height: var(--density-default-cell-height); - --cell-padding: var(--density-default-padding); - --cell-max-width: 400px; - --cell-min-width: 124px; - --img-size: var(--density-default-img-size); - --img-radius: var(--density-default-img-radius); -} - -.table--density-compact { - --cell-height: var(--density-compact-cell-height); - --cell-padding: var(--density-compact-padding); - --img-size: var(--density-compact-img-size); -} - -.table--density-relaxed { - --cell-height: var(--density-relaxed-cell-height); - --cell-padding: var(--density-relaxed-padding); - --img-size: var(--density-relaxed-img-size); -} +/* these exclude the top/bottom padding */ +$density-compact-cell-height: 64px; +$density-default-cell-height: 80px; +$density-relaxed-cell-height: 112px; +/* these exclude the 16px padding for top/bottom */ +$density-compact-padding: $spacing-150; +$density-default-padding: $spacing-150; +$density-relaxed-padding: $spacing-200; +/* these are for image sizes in cells */ +$density-compact-img-size: 40px; +$density-default-img-size: 56px; +$density-relaxed-img-size: 72px; +/* these are for cell widths */ +$cell-max-width: 400px; +$cell-min-width: 124px; +/* these are for image radii in cells */ +$density-compact-img-radius: 4px; +$density-default-img-radius: 8px; +$density-relaxed-img-radius: 8px; .table { overflow-x: auto; @@ -54,13 +37,27 @@ background-color: var(--color-background-primary); border-bottom: 1px solid var(--color-stroke-subtle); box-sizing: border-box; - height: var(--cell-height); - max-height: var(--cell-height); - max-width: var(--cell-max-width); - min-width: var(--cell-min-width); + height: $density-default-cell-height; + max-height: $density-default-cell-height; + max-width: $cell-max-width; + min-width: $cell-min-width; // minimal padding to prevent text from touching the border - padding: var(--cell-padding); + padding: $density-default-padding; +} + +.table--density-compact th, +.table--density-compact td { + height: $density-compact-cell-height; + max-height: $density-compact-cell-height; + padding: $density-compact-padding; +} + +.table--density-relaxed th, +.table--density-relaxed td { + height: $density-relaxed-cell-height; + max-height: $density-relaxed-cell-height; + padding: $density-relaxed-padding; } .table th button { @@ -82,8 +79,8 @@ } .table-cell--icon-action { - width: 64px; text-align: center; + width: 64px; } .table [data-type="numeric"] { @@ -91,8 +88,18 @@ } .table-cell img { - max-height: var(--img-size); - max-width: var(--img-size); + max-height: $density-default-img-size; + max-width: $density-default-img-size; +} + +.table--density-compact .table-cell img { + max-height: $density-compact-img-size; + max-width: $density-compact-img-size; +} + +.table--density-relaxed .table-cell img { + max-height: $density-relaxed-img-size; + max-width: $density-relaxed-img-size; } .table th[scope="row"] { @@ -143,14 +150,26 @@ .table-cell__thumbnail { align-items: center; background-color: var(--color-background-tertiary); - border-radius: var(--img-radius); + border-radius: $density-default-img-radius; display: flex; flex-wrap: nowrap; - height: var(--img-size); + height: $density-default-img-size; justify-content: center; overflow: hidden; // to round square images text-align: center; - width: var(--img-size); + width: $density-default-img-size; +} + +.table--density-compact .table-cell__thumbnail { + border-radius: $density-compact-img-radius; + height: $density-compact-img-size; + width: $density-compact-img-size; +} + +.table--density-relaxed .table-cell__thumbnail { + border-radius: $density-relaxed-img-radius; + height: $density-relaxed-img-size; + width: $density-relaxed-img-size; } .table-cell__layout { @@ -164,10 +183,18 @@ } .table-cell__multiline { - max-height: var(--cell-height); - max-width: calc( - var(--cell-max-width) - var(--cell-height) - var(--spacing-200) - ); + max-height: $density-default-cell-height; + max-width: $cell-max-width - $density-default-cell-height - $spacing-200; +} + +.table--density-compact .table-cell__multiline { + max-height: $density-compact-cell-height; + max-width: $cell-max-width - $density-compact-cell-height - $spacing-200; +} + +.table--density-relaxed .table-cell__multiline { + max-height: $density-relaxed-cell-height; + max-width: $cell-max-width - $density-relaxed-cell-height - $spacing-200; } .table-cell__layout .table-cell__multiline .table-cell__data { From 541d2194b58819aaa014ce71bbda3791a256f66d Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Fri, 20 Sep 2024 10:14:48 -0700 Subject: [PATCH 5/8] fix(table): fixed Safari trailing focus issue --- dist/table/table.css | 6 +++++- src/sass/table/table.scss | 7 ++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/dist/table/table.css b/dist/table/table.css index 20361574a..e571c071d 100644 --- a/dist/table/table.css +++ b/dist/table/table.css @@ -98,7 +98,11 @@ } .table thead button.btn { - padding: 0; + border-radius: 10px; + outline-offset: -3px; + padding: 3px; + text-decoration: none; + transform: translateZ(0); white-space: nowrap; } diff --git a/src/sass/table/table.scss b/src/sass/table/table.scss index 86c3f484f..02b6fd0e6 100644 --- a/src/sass/table/table.scss +++ b/src/sass/table/table.scss @@ -123,7 +123,12 @@ $density-relaxed-img-radius: 8px; } .table thead button.btn { - padding: 0; + border-radius: 10px; + outline-offset: -3px; + padding: 3px; + text-decoration: none; + /* kick in GPU rendering to avoid trailing artifacts */ + transform: translate3d(0, 0, 0); white-space: nowrap; } From 40a7a520d50c8bda797029089c0c684e9d5f072e Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Fri, 20 Sep 2024 13:21:07 -0700 Subject: [PATCH 6/8] fix(table): fixed cell layout widths --- dist/table/table.css | 1 + src/sass/table/table.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/dist/table/table.css b/dist/table/table.css index e571c071d..dac3c6c1b 100644 --- a/dist/table/table.css +++ b/dist/table/table.css @@ -156,6 +156,7 @@ align-items: center; display: flex; gap: var(--spacing-200); + width: max-content; } .table-cell__layout > * { diff --git a/src/sass/table/table.scss b/src/sass/table/table.scss index 02b6fd0e6..a2158e110 100644 --- a/src/sass/table/table.scss +++ b/src/sass/table/table.scss @@ -181,6 +181,7 @@ $density-relaxed-img-radius: 8px; align-items: center; display: flex; gap: var(--spacing-200); + width: max-content; } .table-cell__layout > * { From 4cc85c9d981aa71c9385fb379650cd8a2db02891 Mon Sep 17 00:00:00 2001 From: Arthur Khachatryan Date: Tue, 24 Sep 2024 07:58:57 -0700 Subject: [PATCH 7/8] fix(table): made backwards compatible, removed module shell dependency on button --- dist/table/table.css | 31 ++- src/modules/table.marko | 236 +++++++++--------- .../table/stories/table.actions.stories.js | 54 ++-- .../table/stories/table.inputs.stories.js | 60 ++--- src/sass/table/stories/table.stories.js | 60 ++--- src/sass/table/table.scss | 33 ++- 6 files changed, 248 insertions(+), 226 deletions(-) diff --git a/dist/table/table.css b/dist/table/table.css index dac3c6c1b..d259e90a3 100644 --- a/dist/table/table.css +++ b/dist/table/table.css @@ -51,6 +51,13 @@ .table-cell--numeric { text-align: right; } +.table__cell { + text-align: left; +} + +.table__cell--numeric { + text-align: right; +} .table-cell--icon-action { text-align: center; @@ -97,24 +104,26 @@ font-weight: 400; } -.table thead button.btn { +.table thead button { + background-color: initial; + border: 1px solid transparent; border-radius: 10px; - outline-offset: -3px; + 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 thead button.btn--borderless:focus { - outline-style: solid; -} - -.table thead button.btn svg.icon { - -webkit-margin-start: 6px; - margin-inline-start: 6px; -} - .table-cell__data { line-height: var(--spacing-250); max-width: 400px; diff --git a/src/modules/table.marko b/src/modules/table.marko index af898d77c..27d7c0201 100644 --- a/src/modules/table.marko +++ b/src/modules/table.marko @@ -15,7 +15,7 @@ - - - - - - - - - -