diff --git a/.changeset/happy-coins-stare.md b/.changeset/happy-coins-stare.md new file mode 100644 index 000000000..fc6bf67ef --- /dev/null +++ b/.changeset/happy-coins-stare.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": minor +--- + +feat(table): new module diff --git a/dist/table/table.css b/dist/table/table.css new file mode 100644 index 000000000..9eb9d15be --- /dev/null +++ b/dist/table/table.css @@ -0,0 +1,62 @@ +:root { + --density-compact-cell-height: 36px; + --density-default-cell-height: 48px; + --density-relaxed-cell-height: 56px; +} + +.table { + overflow-x: auto; + position: relative; +} + +.table table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; +} + +.table td, +.table th { + 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); +} + +.table__cell { + text-align: left; +} + +.table [data-type="numeric"], +.table__cell--numeric { + text-align: right; +} + +.table td:last-child, +.table th:last-child { + -webkit-padding-end: 0; + padding-inline-end: 0; +} + +.table--density-compact td, +.table--density-compact th { + height: var(--density-compact-cell-height); +} + +.table--density-relaxed td, +.table--density-relaxed th { + height: var(--density-relaxed-cell-height); +} + +.table--mode-selection td:first-child, +.table--mode-selection th:first-child { + min-width: unset; +} + +.table tbody th { + font-weight: 400; +} diff --git a/dist/tokens/evo-dark.css b/dist/tokens/evo-dark.css index 331cac250..d497bded1 100644 --- a/dist/tokens/evo-dark.css +++ b/dist/tokens/evo-dark.css @@ -137,6 +137,7 @@ var(--color-ai-solid-green-subtle) 0%, var(--color-ai-solid-blue-subtle) 154.5% ); + --color-loading-overlay: var(--color-neutral-900-rgb), 0.7; --color-loading-fill: #2d2d2d; --color-loading-shimmer: linear-gradient( 270deg, diff --git a/dist/tokens/evo-light.css b/dist/tokens/evo-light.css index c7d0734fc..33cc6335d 100644 --- a/dist/tokens/evo-light.css +++ b/dist/tokens/evo-light.css @@ -141,6 +141,7 @@ --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07); --shadow-strong: 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15); + --color-loading-overlay: var(--color-neutral-100-rgb), 0.7; --color-loading-fill: #ededed; --color-loading-shimmer: linear-gradient( 270deg, diff --git a/src/components/section-header.marko b/src/components/section-header.marko index e918d0099..84f514d7d 100644 --- a/src/components/section-header.marko +++ b/src/components/section-header.marko @@ -8,6 +8,9 @@ $ if (dsComponent.length > 0) { BETA + + ALPHA +
diff --git a/src/modules/table.marko b/src/modules/table.marko new file mode 100644 index 000000000..2b28f8b66 --- /dev/null +++ b/src/modules/table.marko @@ -0,0 +1,947 @@ +
+ + +

A table represents tabular data in rows and columns with incrementally enhanced feature set added on top for sorting, editing, etc.

+ +

Interactive elements should be tabbed into in correct sequence top down row by row and column by column based on the respective LTR or RTL mode.

+ +

The top-level container element should have a tabindex="0" to make it focusable, an aria-label to relay context of the component, and should have a role of group to make it accessible to screen readers. That will also allow the table element to be scrollable inside the container, both vertically (when overflowing) and horizontally.

+ +

Basic Default Table

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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/15
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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/15
+
+ + +

Compact Density Table

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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/15
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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/15
+
+ + +

Relaxed Density Table

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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/15
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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/15
+
+ + +

Table in Selection Mode

+ +

+ A table can be put into 'selection mode' by adding the class table--mode-selection to the component parent. This will make slight spacing accommodations for the layout. +

+ +

+ A table in selection mode allows users to select rows within a table. This is useful when users need to perform actions on selected rows. +

+ +

+ The first column of the table will contain a checkbox that allows users to select the row. The first row of the table will contain a checkbox that allows users to select all rows. The checkbox in the table header should have an aria-label of something like, "Select all rows" while all other checkboxes should have an aria-label of something like, "Select row". +

+ +

+ Each row should have one column that is its unique idenitifier. That column should typically be the first static column in the row. That column should be indicated using <th scope="row"> element, which affords various accessibility benefits. +

+ + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + 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/15
+
+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + 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/15
+
+ + +
+export const metadata = { + "ds-component": { + name: "table", + version: 0.1, + alpha: true, + }, +}; diff --git a/src/sass/bundles/skin-headless.scss b/src/sass/bundles/skin-headless.scss index 987a59a0f..f7e569b48 100644 --- a/src/sass/bundles/skin-headless.scss +++ b/src/sass/bundles/skin-headless.scss @@ -61,6 +61,7 @@ @import "../star-rating/star-rating"; @import "../star-rating-select/star-rating-select"; @import "../switch/switch"; +@import "../table/table"; @import "../tabs/tabs"; @import "../textbox/textbox"; @import "../toast-dialog/toast-dialog"; diff --git a/src/sass/table/stories/table.selection.stories.js b/src/sass/table/stories/table.selection.stories.js new file mode 100644 index 000000000..11dd85b4b --- /dev/null +++ b/src/sass/table/stories/table.selection.stories.js @@ -0,0 +1,409 @@ +export default { title: "Skin/Table/Selection" }; + +export const base = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
+ Nintendo$287.9630020795$17.994/1 - 4/5
+ Nintendo$89.8545175$18.954/11 - 4/15
+ XBOX 360 + $499.99345455205$17.994/17 - 4/25
+ XBOX One + $499.99399407305$27.994/9 - 4/11
+ Playstation 5 + $519.99205265199$29.994/11 - 4/15
+
+`; + +export const compact = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
+ Switch + $287.9630020795$17.994/1 - 4/5
+ SNES + + $89.85 + 45175$18.954/11 - 4/15
+ XBOX 360 + $499.99345455205$17.994/17 - 4/25
+ XBOX One + $499.99399407305$27.994/9 - 4/11
+ Playstation 5 + $519.99205265199$29.994/11 - 4/15
+
+`; + +export const relaxed = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
+ Switch + $287.9630020795$17.994/1 - 4/5
+ SNES + $89.8545175$18.954/11 - 4/15
+ XBOX 360 + $499.99345455205$17.994/17 - 4/25
+ XBOX One + $499.99399407305$27.994/9 - 4/11
+ Playstation 5 + $519.99205265199$29.994/11 - 4/15
+
+`; + +export const RTL = () => ` +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
+ Switch + $287.9630020795$17.994/1 - 4/5
+ SNES + $89.8545175$18.954/11 - 4/15
+ XBOX 360 + $499.99345455205$17.994/17 - 4/25
+ XBOX One + $499.99399407305$27.994/9 - 4/11
+ Playstation 5 + $519.99205265199$29.994/11 - 4/15
+
+
+`; diff --git a/src/sass/table/stories/table.stories.js b/src/sass/table/stories/table.stories.js new file mode 100644 index 000000000..55fcba728 --- /dev/null +++ b/src/sass/table/stories/table.stories.js @@ -0,0 +1,254 @@ +export default { title: "Skin/Table" }; + +export const base = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
Switch + $287.9630020795$17.994/1 - 4/5
SNES + $89.8545175$18.954/11 - 4/15
XBOX 360 + $499.99345455205$17.994/17 - 4/25
XBOX One + $499.99399407305$27.994/9 - 4/11
Playstation 5 + $519.99205265199$29.994/11 - 4/15
+
+`; + +export const compact = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
Switch + $287.9630020795$17.994/1 - 4/5
SNES + + $89.85 + 45175$18.954/11 - 4/15
XBOX 360 + $499.99345455205$17.994/17 - 4/25
XBOX One + $499.99399407305$27.994/9 - 4/11
Playstation 5 + $519.99205265199$29.994/11 - 4/15
+
+`; + +export const relaxed = () => ` +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SellerItemImageList PriceQuantity AvailableQuantity SoldWatchersProtectionShippingDelivery
Switch + $287.9630020795$17.994/1 - 4/5
SNES + + $89.85 + 45175$18.954/11 - 4/15
XBOX 360 + $499.99345455205$17.994/17 - 4/25
XBOX One + $499.99399407305$27.994/9 - 4/11
Playstation 5 + $519.99205265199$29.994/11 - 4/15
+
+`; diff --git a/src/sass/table/table.scss b/src/sass/table/table.scss new file mode 100644 index 000000000..2894817aa --- /dev/null +++ b/src/sass/table/table.scss @@ -0,0 +1,70 @@ +@import "../variables/variables"; + +:root { + /* these exclude the 16px padding for top/bottom */ + --density-compact-cell-height: 36px; + --density-default-cell-height: 48px; + --density-relaxed-cell-height: 56px; +} + +.table { + overflow-x: auto; + position: relative; +} + +.table table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; +} + +.table th, +.table td { + // explicit background is needed for sticky columns + 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; + + // minimal padding to prevent text from touching the border + padding-block: var(--spacing-100); + padding-inline: var(--spacing-200); +} + +.table__cell { + text-align: left; +} + +.table__cell--numeric { + text-align: right; +} + +.table [data-type="numeric"] { + text-align: right; +} + +.table th:last-child, +.table td:last-child { + padding-inline-end: 0; +} + +.table--density-compact th, +.table--density-compact td { + height: var(--density-compact-cell-height); +} + +.table--density-relaxed th, +.table--density-relaxed td { + height: var(--density-relaxed-cell-height); +} + +.table--mode-selection th:first-child, +.table--mode-selection td:first-child { + min-width: unset; +} + +.table tbody th { + font-weight: normal; +} diff --git a/src/tokens/evo-dark.css b/src/tokens/evo-dark.css index 331cac250..d497bded1 100644 --- a/src/tokens/evo-dark.css +++ b/src/tokens/evo-dark.css @@ -137,6 +137,7 @@ var(--color-ai-solid-green-subtle) 0%, var(--color-ai-solid-blue-subtle) 154.5% ); + --color-loading-overlay: var(--color-neutral-900-rgb), 0.7; --color-loading-fill: #2d2d2d; --color-loading-shimmer: linear-gradient( 270deg, diff --git a/src/tokens/evo-light.css b/src/tokens/evo-light.css index c7d0734fc..33cc6335d 100644 --- a/src/tokens/evo-light.css +++ b/src/tokens/evo-light.css @@ -141,6 +141,7 @@ --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07); --shadow-strong: 0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15); + --color-loading-overlay: var(--color-neutral-100-rgb), 0.7; --color-loading-fill: #ededed; --color-loading-shimmer: linear-gradient( 270deg,