From d680f2ca5ca8a5526a75b8b6d2a009d34d4e6ffb Mon Sep 17 00:00:00 2001 From: Margaree Peacocke Date: Wed, 22 Jan 2025 11:28:03 -0500 Subject: [PATCH] feat: table-col-sort-button: opt-in to prefer-fixed-positioning for dropdown --- components/table/demo/table.html | 3 +++ components/table/table-col-sort-button.js | 4 ++-- components/table/test/table.vdiff.js | 20 ++++++++++++++++++++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/components/table/demo/table.html b/components/table/demo/table.html index 9e713b5aeb7..093954e948a 100644 --- a/components/table/demo/table.html +++ b/components/table/demo/table.html @@ -8,6 +8,9 @@ import '../../demo/demo-page.js'; import './table-test.js'; + diff --git a/components/table/table-col-sort-button.js b/components/table/table-col-sort-button.js index 755681cab56..69135530a5f 100644 --- a/components/table/table-col-sort-button.js +++ b/components/table/table-col-sort-button.js @@ -184,9 +184,9 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen ${iconView} ${sortedView}`; if (this._hasDropdownItems) { - return html` + return html` ${button} - + diff --git a/components/table/test/table.vdiff.js b/components/table/test/table.vdiff.js index 516701aea06..a67b5b31cf8 100644 --- a/components/table/test/table.vdiff.js +++ b/components/table/test/table.vdiff.js @@ -664,6 +664,26 @@ describe('table', () => { await expect(elem).to.be.golden(); }); + it('col-sort-button-dropdown-open-short-flag-off', async() => { + window.D2L = {}; + const elem = await createTableFixture(html` + ${createSortableButtonDropdownHeaderRow()} + ${createRows([1])} + `); + await clickElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button')); + await expect(elem).to.be.golden(); + }); + + it('col-sort-button-dropdown-open-short-flag-on', async() => { + window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } }; + const elem = await createTableFixture(html` + ${createSortableButtonDropdownHeaderRow()} + ${createRows([1])} + `); + await clickElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button')); + await expect(elem).to.be.golden({ margin: 50 }); + }); + it('wrapper component', async() => { const elem = await fixture(html``, { rtl }); await expect(elem).to.be.golden();