diff --git a/.changeset/poor-mirrors-float.md b/.changeset/poor-mirrors-float.md new file mode 100644 index 000000000..9b503702d --- /dev/null +++ b/.changeset/poor-mirrors-float.md @@ -0,0 +1,5 @@ +--- +"@ebay/ebayui-core": minor +--- + +fix(ebay-table): update row-header attribute, removed aria-pressed diff --git a/src/components/ebay-table/component.ts b/src/components/ebay-table/component.ts index 76b500cba..ac49ebca1 100644 --- a/src/components/ebay-table/component.ts +++ b/src/components/ebay-table/component.ts @@ -3,13 +3,10 @@ import { WithNormalizedProps } from "../../global"; import { CheckboxEvent } from "../ebay-checkbox/component-browser"; export type TableSort = "asc" | "desc" | "none"; + export interface TableHeader extends Omit, `on${string}`> { - "column-type"?: - | "normal" - | "numeric" - | "row-header" - | "layout" - | "icon-action"; + "column-type"?: "normal" | "numeric" | "layout" | "icon-action"; + "row-header"?: boolean; name?: string; sort?: TableSort | boolean; href?: AttrString; diff --git a/src/components/ebay-table/examples/default.marko b/src/components/ebay-table/examples/default.marko index b8b1d347c..155c7d852 100644 --- a/src/components/ebay-table/examples/default.marko +++ b/src/components/ebay-table/examples/default.marko @@ -1,7 +1,7 @@ import data from "./data.json"; - <@header column-type="row-header"> + <@header row-header> Seller <@header>Item diff --git a/src/components/ebay-table/examples/selection.marko b/src/components/ebay-table/examples/selection.marko index 55764de9b..a4620fff2 100644 --- a/src/components/ebay-table/examples/selection.marko +++ b/src/components/ebay-table/examples/selection.marko @@ -1,7 +1,7 @@ import data from "./data.json"; - <@header column-type="row-header"> + <@header row-header> Seller <@header>Item diff --git a/src/components/ebay-table/examples/sort-client-side.marko b/src/components/ebay-table/examples/sort-client-side.marko index 59010280a..441d8e321 100644 --- a/src/components/ebay-table/examples/sort-client-side.marko +++ b/src/components/ebay-table/examples/sort-client-side.marko @@ -36,7 +36,7 @@ class { } } - <@header name="sellerCol" column-type="row-header"> + <@header name="sellerCol" row-header> Seller <@header name="itemCol"> diff --git a/src/components/ebay-table/examples/sort-with-link.marko b/src/components/ebay-table/examples/sort-with-link.marko index f920ce90f..31e6d2891 100644 --- a/src/components/ebay-table/examples/sort-with-link.marko +++ b/src/components/ebay-table/examples/sort-with-link.marko @@ -2,7 +2,7 @@ import data from "./data.json"; <@header - column-type="row-header" + row-header sort=("asc" as const) href="https://www.ebay.com" > diff --git a/src/components/ebay-table/examples/sort.marko b/src/components/ebay-table/examples/sort.marko index 0c60a7540..9008c82c1 100644 --- a/src/components/ebay-table/examples/sort.marko +++ b/src/components/ebay-table/examples/sort.marko @@ -16,7 +16,7 @@ class { <@header name="sellerCol" - column-type="row-header" + row-header sort=(state.sorted.sellerCol || "none") > Seller diff --git a/src/components/ebay-table/examples/with-actions.marko b/src/components/ebay-table/examples/with-actions.marko index 5c8a3e30e..f3f7aec4c 100644 --- a/src/components/ebay-table/examples/with-actions.marko +++ b/src/components/ebay-table/examples/with-actions.marko @@ -1,7 +1,7 @@ import data from "./data.json"; - <@header column-type="row-header"> + <@header row-header> Seller <@header>Item diff --git a/src/components/ebay-table/index.marko b/src/components/ebay-table/index.marko index 41142fa7e..8ffeb461a 100644 --- a/src/components/ebay-table/index.marko +++ b/src/components/ebay-table/index.marko @@ -41,6 +41,7 @@ $ const { $ const { columnType = "normal", + rowHeader, class: thClass, name = `${headerIndex}`, sort, @@ -73,9 +74,7 @@ $ const { sortEleAttr = { href }; } else if (sortOrder) { sortEleAttr = { - type: "button", - "aria-pressed": - sortOrder !== "none" ? "true" : "false", + type: "button" }; } <${href ? "a" : sortOrder ? "button" : null} @@ -136,7 +135,7 @@ $ const { ) && `table-cell--${header.columnType}`, ]; - <${header.columnType === "row-header" ? "th" : "td"} + <${header.rowHeader ? "th" : "td"} ...processHtmlAttributes(tdInput) class=[cellBaseClass, tdClass] > diff --git a/src/components/ebay-table/marko-tag.json b/src/components/ebay-table/marko-tag.json index 2e55528da..3d0154037 100644 --- a/src/components/ebay-table/marko-tag.json +++ b/src/components/ebay-table/marko-tag.json @@ -19,8 +19,9 @@ }, "@html-attributes": "expression", "@column-type": { - "enum": ["normal", "numeric", "row-header", "layout", "icon-action"] - } + "enum": ["normal", "numeric", "layout", "icon-action"] + }, + "@row-header": "boolean" }, "@row []": { "attribute-groups": ["html-attributes"], diff --git a/src/components/ebay-table/table.stories.ts b/src/components/ebay-table/table.stories.ts index f15b02c21..e2e288833 100644 --- a/src/components/ebay-table/table.stories.ts +++ b/src/components/ebay-table/table.stories.ts @@ -47,6 +47,14 @@ export default { category: "@attribute tags", }, }, + rowHeader: { + name: "row-header", + control: { type: "boolean" }, + description: "If true, the cell will be rendered as a row header", + table: { + category: "@header attribute tags", + }, + }, row: { name: "@row", description: "row attribute tags", @@ -68,12 +76,14 @@ export default { options: [ "normal", "numeric", - "row-header", "layout", "icon-action", ], table: { category: "@header attribute tags", + defaultValue: { + summary: "normal", + }, }, }, href: { diff --git a/src/components/ebay-table/test/__snapshots__/test.server.js.snap b/src/components/ebay-table/test/__snapshots__/test.server.js.snap index de34290fa..020e01efe 100644 --- a/src/components/ebay-table/test/__snapshots__/test.server.js.snap +++ b/src/components/ebay-table/test/__snapshots__/test.server.js.snap @@ -15,7 +15,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = ` class="table-cell" >  Seller @@ -45,7 +44,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = ` class="table-cell" >  Item @@ -75,7 +73,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = ` class="table-cell" >  Status @@ -95,7 +92,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = ` class="table-cell table-cell--numeric" >  List Price @@ -115,7 +111,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = ` class="table-cell table-cell--numeric" >  Quantity Available @@ -135,7 +130,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = ` class="table-cell" >  Orders @@ -155,7 +149,6 @@ exports[`ebay-table > renders ColumnSorting 1`] = ` class="table-cell table-cell--numeric" >  Watchers @@ -173,7 +166,17 @@ exports[`ebay-table > renders ColumnSorting 1`] = `   +  + Protection +   +  renders ColumnSortingClientSide 1`] = ` @@ -205,7 +208,6 @@ exports[`ebay-table > renders ColumnSortingClientSide 1`] = ` class="table-cell table-cell--numeric" >  List Price @@ -235,7 +237,6 @@ exports[`ebay-table > renders ColumnSortingClientSide 1`] = ` class="table-cell table-cell--numeric" >  Quantity Available @@ -374,7 +375,11 @@ exports[`ebay-table > renders ColumnSortingClientSide 1`] = ` >  + 00-10542-89507 +  +  + ..." `; exports[`ebay-table > renders ColumnSortingWithLink 1`] = ` diff --git a/src/components/ebay-table/test/sort/test.browser.js b/src/components/ebay-table/test/sort/test.browser.js index b934743bf..e74f42f78 100644 --- a/src/components/ebay-table/test/sort/test.browser.js +++ b/src/components/ebay-table/test/sort/test.browser.js @@ -26,7 +26,6 @@ describe("given sortable table with Seller column is sorted in ascending order ( it("then proper sort event should be emitted", async () => { expect(sellerColumn).toMatchInlineSnapshot(`