Skip to content

Commit 930537f

Browse files
amandacxzamandacxz
committed
chore(DataTable): storybook
1 parent d9f9bfb commit 930537f

5 files changed

Lines changed: 94 additions & 20 deletions

File tree

‎playground/DataTable.html‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,13 @@
5252
.badge-click-target {
5353
cursor: pointer;
5454
}
55+
56+
.controls-stack {
57+
display: flex;
58+
flex-direction: column;
59+
gap: 8px;
60+
min-width: 220px;
61+
}
5562
</style>
5663

5764
<div class="theme-toggle">
@@ -543,8 +550,7 @@ <h3>Interactive Slotted Content (Event Hooks)</h3>
543550
<sgds-data-table-head width="170">Dropdown</sgds-data-table-head>
544551
<sgds-data-table-head width="120">Overflow</sgds-data-table-head>
545552
<sgds-data-table-head width="120">Button</sgds-data-table-head>
546-
<sgds-data-table-head width="220">Combobox</sgds-data-table-head>
547-
<sgds-data-table-head width="220">Input</sgds-data-table-head>
553+
<sgds-data-table-head width="280">Controls (Combobox + Input)</sgds-data-table-head>
548554
<sgds-data-table-head width="180">Badges</sgds-data-table-head>
549555
</sgds-data-table-row>
550556

@@ -571,14 +577,14 @@ <h3>Interactive Slotted Content (Event Hooks)</h3>
571577
<sgds-button id="table-button-1" size="sm">Run</sgds-button>
572578
</sgds-data-table-cell>
573579
<sgds-data-table-cell>
574-
<sgds-combo-box id="table-combobox-1" placeholder="Select" clearable>
575-
<sgds-combo-box-option value="opt-a">Option A</sgds-combo-box-option>
576-
<sgds-combo-box-option value="opt-b">Option B</sgds-combo-box-option>
577-
<sgds-combo-box-option value="opt-c">Option C</sgds-combo-box-option>
578-
</sgds-combo-box>
579-
</sgds-data-table-cell>
580-
<sgds-data-table-cell>
581-
<sgds-input id="table-input-1" placeholder="Type and blur"></sgds-input>
580+
<div class="controls-stack">
581+
<sgds-combo-box id="table-combobox-1" placeholder="Select" clearable>
582+
<sgds-combo-box-option value="opt-a">Option A</sgds-combo-box-option>
583+
<sgds-combo-box-option value="opt-b">Option B</sgds-combo-box-option>
584+
<sgds-combo-box-option value="opt-c">Option C</sgds-combo-box-option>
585+
</sgds-combo-box>
586+
<sgds-input id="table-input-1" placeholder="Type and blur"></sgds-input>
587+
</div>
582588
</sgds-data-table-cell>
583589
<sgds-data-table-cell>
584590
<div class="cell-inline" id="table-badges-1">
@@ -610,14 +616,14 @@ <h3>Interactive Slotted Content (Event Hooks)</h3>
610616
<sgds-button id="table-button-2" size="sm" variant="outline">Retry</sgds-button>
611617
</sgds-data-table-cell>
612618
<sgds-data-table-cell>
613-
<sgds-combo-box id="table-combobox-2" placeholder="Choose" clearable>
614-
<sgds-combo-box-option value="p1">Priority 1</sgds-combo-box-option>
615-
<sgds-combo-box-option value="p2">Priority 2</sgds-combo-box-option>
616-
<sgds-combo-box-option value="p3">Priority 3</sgds-combo-box-option>
617-
</sgds-combo-box>
618-
</sgds-data-table-cell>
619-
<sgds-data-table-cell>
620-
<sgds-input id="table-input-2" value="Editable"></sgds-input>
619+
<div class="controls-stack">
620+
<sgds-combo-box id="table-combobox-2" placeholder="Choose" clearable>
621+
<sgds-combo-box-option value="p1">Priority 1</sgds-combo-box-option>
622+
<sgds-combo-box-option value="p2">Priority 2</sgds-combo-box-option>
623+
<sgds-combo-box-option value="p3">Priority 3</sgds-combo-box-option>
624+
</sgds-combo-box>
625+
<sgds-input id="table-input-2" value="Editable"></sgds-input>
626+
</div>
621627
</sgds-data-table-cell>
622628
<sgds-data-table-cell>
623629
<div class="cell-inline" id="table-badges-2">

‎stories/component-templates/DataTable/additional.mdx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
## Basic content examples
2+
3+
The basic table story uses static cell content patterns without event handlers:
4+
`sgds-badge` for status, a combined controls column with `sgds-combo-box` and `sgds-input`
5+
(plus a small `sgds-button` with `size="sm"`), and a small `sgds-overflow-menu`.
6+
7+
<Canvas of={DataTableStories.Basic}>
8+
<Story of={DataTableStories.Basic} />
9+
</Canvas>
10+
111
## Server Loading
212

313
Use `mode="server"` with `isLoading` to show the loading state while waiting for remote data.

‎stories/component-templates/DataTable/basic.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,24 @@ export const Template = args => html`
3434
<sgds-data-table-head .sorting=${false}>#</sgds-data-table-head>
3535
<sgds-data-table-head .sorting=${false}>Name</sgds-data-table-head>
3636
<sgds-data-table-head .sorting=${false}>Status</sgds-data-table-head>
37-
<sgds-data-table-head .sorting=${false}>Action</sgds-data-table-head>
37+
<sgds-data-table-head .sorting=${false}>Button (sm)</sgds-data-table-head>
38+
<sgds-data-table-head .sorting=${false}>Overflow</sgds-data-table-head>
3839
</sgds-data-table-row>
3940
${sampleRows.map(
4041
row => html`
4142
<sgds-data-table-row>
4243
<sgds-data-table-cell>${row.id}</sgds-data-table-cell>
4344
<sgds-data-table-cell>${row.name}</sgds-data-table-cell>
44-
<sgds-data-table-cell>${row.status}</sgds-data-table-cell>
45+
<sgds-data-table-cell>
46+
${row.status === "Active"
47+
? html`<sgds-badge variant="success" outlined>${row.status}</sgds-badge>`
48+
: row.status === "Pending"
49+
? html`<sgds-badge variant="warning" outlined>${row.status}</sgds-badge>`
50+
: html`<sgds-badge variant="neutral" outlined>${row.status}</sgds-badge>`}
51+
</sgds-data-table-cell>
52+
<sgds-data-table-cell>
53+
<sgds-button size="sm" variant="outline">View</sgds-button>
54+
</sgds-data-table-cell>
4555
<sgds-data-table-cell>
4656
<sgds-overflow-menu size="sm">
4757
<sgds-dropdown-item ariaLabel="View">View</sgds-dropdown-item>

‎test/a11y/axe-core/data-table.a11y.test.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,30 @@ import SgdsDataTableHead from "../../../src/components/DataTable/sgds-data-table
55
import "../../sgds-web-component";
66

77
describe("<sgds-data-table>", () => {
8+
it("projects slotted table cells through named slots in row shadow DOM", async () => {
9+
const el = await fixture<SgdsDataTable>(html`
10+
<sgds-data-table dataLength="1" itemsPerPage="5" currentPage="1">
11+
<sgds-data-table-row>
12+
<sgds-data-table-head>Name</sgds-data-table-head>
13+
</sgds-data-table-row>
14+
<sgds-data-table-row>
15+
<sgds-data-table-cell>
16+
<sgds-button size="sm">Action</sgds-button>
17+
</sgds-data-table-cell>
18+
</sgds-data-table-row>
19+
</sgds-data-table>
20+
`);
21+
await elementUpdated(el);
22+
23+
const slot = el.shadowRoot?.querySelector("slot") as HTMLSlotElement;
24+
const bodyRow = slot.assignedElements({ flatten: true })[1] as HTMLElement;
25+
const cellHost = bodyRow.querySelector("sgds-data-table-cell") as HTMLElement;
26+
const projectedCellSlot = bodyRow.shadowRoot?.querySelector('slot[name="cell-0"]') as HTMLSlotElement;
27+
28+
expect(projectedCellSlot).to.exist;
29+
expect(projectedCellSlot.assignedElements({ flatten: true })[0]).to.equal(cellHost);
30+
});
31+
832
it("renders data rows and header row from slotted content", async () => {
933
const el = await fixture<SgdsDataTable>(html`
1034
<sgds-data-table dataLength="2" itemsPerPage="5" currentPage="1">

‎test/data-table.test.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,30 @@ import SgdsDataTableHead from "../src/components/DataTable/sgds-data-table-head"
55
import "./sgds-web-component";
66

77
describe("<sgds-data-table>", () => {
8+
it("projects slotted table cells through named slots in row shadow DOM", async () => {
9+
const el = await fixture<SgdsDataTable>(html`
10+
<sgds-data-table dataLength="1" itemsPerPage="5" currentPage="1">
11+
<sgds-data-table-row>
12+
<sgds-data-table-head>Name</sgds-data-table-head>
13+
</sgds-data-table-row>
14+
<sgds-data-table-row>
15+
<sgds-data-table-cell>
16+
<sgds-button size="sm">Action</sgds-button>
17+
</sgds-data-table-cell>
18+
</sgds-data-table-row>
19+
</sgds-data-table>
20+
`);
21+
await elementUpdated(el);
22+
23+
const slot = el.shadowRoot?.querySelector("slot") as HTMLSlotElement;
24+
const bodyRow = slot.assignedElements({ flatten: true })[1] as HTMLElement;
25+
const cellHost = bodyRow.querySelector("sgds-data-table-cell") as HTMLElement;
26+
const projectedCellSlot = bodyRow.shadowRoot?.querySelector('slot[name="cell-0"]') as HTMLSlotElement;
27+
28+
expect(projectedCellSlot).to.exist;
29+
expect(projectedCellSlot.assignedElements({ flatten: true })[0]).to.equal(cellHost);
30+
});
31+
832
it("renders data rows and header row from slotted content", async () => {
933
const el = await fixture<SgdsDataTable>(html`
1034
<sgds-data-table dataLength="2" itemsPerPage="5" currentPage="1">

0 commit comments

Comments
 (0)