diff --git a/.changeset/khaki-worms-hug.md b/.changeset/khaki-worms-hug.md new file mode 100644 index 000000000..f76dfcfb4 --- /dev/null +++ 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 index 60fdec3a4..1b36c3b2e 100644 --- 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 index 9e98a4ff6..e5a3a6b30 100644 --- 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 index fc12c1f4e..db4e1dabb 100644 --- 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 index 0941583ce..0b0cd0f08 100644 --- 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 index 9696d6187..410b6fb51 100644 --- 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 index 98b0b3ae9..77654c72b 100644 --- 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(), { 
$!{error}
+ + diff --git a/src/modules/table.marko b/src/modules/table.marko index 32ceab84b..5e5c6712a 100644 --- a/src/modules/table.marko +++ b/src/modules/table.marko @@ -209,7 +209,7 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg"; - +
@@ -262,138 +262,10 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg"; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +
FREE 4/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
@@ -648,138 +520,10 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg"; FREE 4/1 - 4/5 - - Nintendo - -
-
- Nintendo SNES -
-
-
- Nintendo SNES Brand New Gaming System with Four Controllers -
-
- SKU : A43BTR5678 • Quantity : 1 -
-
-
- - - Ready to Ship - - $89.85 - 45 - -
- 00-10542-89507 -
-
200
- - 5 - $18.95 - FREE - 4/11 - 4/15 - - - Microsoft - -
-
- Microsoft XBOX 360 -
-
-
- Microsoft XBOX 360 Brand New Gaming System with Four Controllers -
-
- SKU : A43BTR5678 • Quantity : 1 -
-
-
- - - Backorder - - $499.99 - 345 - -
- 00-10542-89507 -
-
100
- - 205 - $17.99 - FREE - 4/17 - 4/25 - - - Microsoft - -
-
- Microsoft XBOX One -
-
-
- Microsoft XBOX One Brand New Gaming System with Four Controllers -
-
- SKU : A43BTR5678 • Quantity : 1 -
-
-
- - - Preparing - - $499.99 - 399 - -
- 00-10542-89507 -
-
100
- - 407 - $27.99 - FREE - 4/9 - 4/11 - - - Sony - -
-
- Sony Playstation 5 -
-
-
- Sony Playstation 5 Brand New Gaming System with Four Controllers -
-
- SKU : A43BTR5678 • Quantity : 1 -
-
-
- - - Restocking - - $519.99 - 205 - -
- 00-10542-89507 -
-
100
- - 265 - $29.99 - FREE - 4/11 - 4/15 - + + + + @@ -1034,26 +778,702 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg"; FREE 4/1 - 4/5 - + + + + + + + + + +

Table with a Frozen Header

+

+ A table with a frozen header allows the header row to persist in a sticky manner while scrolling vertically through the table. You can make headers frozen by adding the table--frozen-header modifier class to module. +

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemStatusList CountList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
Nintendo +
+
+ Nintendo Switch +
+
+
+ Nintendo Switch Brand New Gaming System with Four Controllers +
+
+ SKU : A43BTR5678 • Quantity : 1 +
+
+
+ 		+ Ready to Ship + + + + +
+
+ Option 1 + +
+
+ Option 2 + +
+
+ Option 3 + +
+
+ + + 		$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 + + + + +
+
+ Option 1 + +
+
+ Option 2 + +
+
+ Option 3 + +
+
+ + + 		$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 + + + + +
+
+ Option 1 + +
+
+ Option 2 + +
+
+ Option 3 + +
+
+ + + 		$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 + + + + +
+
+ Option 1 + +
+
+ Option 2 + +
+
+ Option 3 + +
+
+ + + 		$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 + + + + +
+
+ Option 1 + +
+
+ Option 2 + +
+
+ Option 3 + +
+
+ + + 		$519.99205 +
+ 00-10542-89507 +
+
100
+ 		265$29.99FREE4/11 - 4/15
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
Nintendo +
+
+ Nintendo SNES +
+
+
+ Nintendo SNES 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
+
+ + +

Full Height Table

+

+ By default a table takes up only a portion of the viewport height to allow for easier scrolling, especially on smaller screens where a table could potentially take up the entire screen and force users to scroll the table before being able to scroll the page body. Also, with a preferred number of rows adjustable by the user, the table could grow in height and make it even more difficult for users to navigate and explore the page. The default experience is highly recommended. +

+

+ However, in the rare instance an exception is needed, you can make tables full height by adding the table--full-height modifier class to module. That will display the full table without any max-height restrictons. +

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
Nintendo +
+
+ Microsoft XBOX 360 +
+
+
+ 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
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + +
SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
Nintendo
- Nintendo SNES + Nintendo Switch
- Nintendo SNES Brand New Gaming System with Four Controllers -
-
- SKU : A43BTR5678 • Quantity : 1 + Nintendo Switch Brand New Gaming System with Four Controllers
- Ready to Ship - $89.85 45 @@ -1068,25 +1488,279 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg"; 4/11 - 4/15
MicrosoftMicrosoft +
+
+ Microsoft XBOX 360 +
+
+
+ Microsoft XBOX 360 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
+
+ + +

Table with a Frozen Column

+

+ You may freeze any one of the first three column so it is always present when scrolling by adding table--freeze-column-x modifier class to module, where x is the column you'd like to freeze. +

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
Nintendo +
+
+ 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
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + - - - + + - - + + - + + + + +
SellerItemStatusList PriceQuantity AvailableOrdersWatchersProtectionShippingDelivery
Nintendo
- Microsoft XBOX 360 + Nintendo Switch
- Microsoft XBOX 360 Brand New Gaming System with Four Controllers -
-
- SKU : A43BTR5678 • Quantity : 1 + Nintendo Switch Brand New Gaming System with Four Controllers
+ Backorder
- Backorder - $499.99 345 @@ -1151,21 +1825,27 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg"; - Restocking + Ready to Ship $519.99205$287.96300 -
- 00-10542-89507 +
+
+ 00-10542-89507 +
+
100
-
100
265$29.9995$17.99 FREE4/11 - 4/154/1 - 4/5
@@ -1173,7 +1853,13 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg";

Sortable Table

- A sortable table is a table that allows users to sort the data in the table by clicking on the column headers. You can make tables sortable by using sort buttons in <thead> > <th>. + A sortable table is a table that allows users to sort the data in the table by clicking on the column headers. You can make tables sortable by using sort buttons in <thead> > <th>. Additionally, for accessibility purposes, aria-sort="ascending" or aria-sort="descending" should be added respectively to the <th> to reflect the current sort order. +

+

+ If using buttons to sort the table, the aria-pressed="true" attribute should be added to the button to indicate the current sort order. The aria-pressed attribute should be toggled between true and false when the button is clicked. +

+

+ If using anchors to sort the table with a page refresh, you would forgo the pressed state and just do <a href="my-url">Seller...</a>. Additionally, you'd need to change the aria-sort attribute to match the sort order after the page refresh.

@@ -1181,8 +1867,8 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg"; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + +
- + - + - + + - + - +
- - - - - 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/15
@@ -2287,8 +2759,8 @@ import tableLandscapePic from "/src/routes/static/img/tb-landscape-pic.jpg"; - -
- + +