Skip to content

Commit 3d13249

Browse files
margareegithub-actions[bot]
margaree
and
github-actions[bot]
authored
feat: table-col-sort-button: opt-in to prefer-fixed-positioning for dropdown (#5338)
* feat: table-col-sort-button: opt-in to prefer-fixed-positioning for dropdown * add comment about flag in demo pages * Updating vdiff goldens (#5339) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 8afcb5a commit 3d13249

21 files changed

+26
-3
lines changed

‎components/filter/demo/filter.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
import './filter-load-more-demo.js';
1717
</script>
1818
<script>
19-
window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
19+
window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } }; // TODO: remove with GAUD-131-dropdown-fixed-positioning flag clean up
2020
</script>
2121
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
2222
<meta charset="UTF-8">

‎components/table/demo/table.html

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
import '../../demo/demo-page.js';
99
import './table-test.js';
1010
</script>
11+
<script>
12+
window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } }; // TODO: remove with GAUD-131-dropdown-fixed-positioning flag clean up
13+
</script>
1114
</head>
1215
<body unresolved>
1316

‎components/table/table-col-sort-button.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -184,9 +184,9 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
184184
<slot></slot>${iconView}
185185
</button><span id="${this._describedById}" hidden>${buttonDescription}</span>${sortedView}`;
186186
if (this._hasDropdownItems) {
187-
return html`<d2l-dropdown>
187+
return html`<d2l-dropdown prefer-fixed-positioning>
188188
${button}
189-
<d2l-dropdown-menu no-pointer align="start" vertical-offset="0">
189+
<d2l-dropdown-menu no-pointer align="start" vertical-offset="0" prefer-fixed-positioning>
190190
<d2l-menu @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
191191
<slot name="items" @slotchange="${this._handleSlotChange}"></slot>
192192
</d2l-menu>

‎components/table/test/golden/table/chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png

16.3 KB
Loading

‎components/table/test/golden/table/chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png

18.1 KB
Loading

‎components/table/test/golden/table/chromium/ltr-default-sticky-multi-row-col-sort-button-dropdown-open.png

15 Bytes
Loading

‎components/table/test/golden/table/chromium/ltr-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png

879 Bytes
Loading

‎components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png

15 KB
Loading

‎components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png

16.7 KB
Loading

‎components/table/test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open.png

791 Bytes
Loading

‎components/table/test/golden/table/chromium/ltr-light-sticky-multi-row-col-sort-button-dropdown-open.png

35 Bytes
Loading

‎components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png

16.3 KB
Loading

‎components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png

18 KB
Loading

‎components/table/test/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open.png

776 Bytes
Loading

‎components/table/test/golden/table/chromium/rtl-default-sticky-multi-row-col-sort-button-dropdown-open.png

-350 Bytes
Loading

‎components/table/test/golden/table/chromium/rtl-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png

829 Bytes
Loading

‎components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png

15 KB
Loading

‎components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png

16.8 KB
Loading

‎components/table/test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open.png

806 Bytes
Loading

‎components/table/test/golden/table/chromium/rtl-light-sticky-multi-row-col-sort-button-dropdown-open.png

-260 Bytes
Loading

‎components/table/test/table.vdiff.js

+20
Original file line numberDiff line numberDiff line change
@@ -664,6 +664,26 @@ describe('table', () => {
664664
await expect(elem).to.be.golden();
665665
});
666666

667+
it('col-sort-button-dropdown-open-short-flag-off', async() => {
668+
window.D2L = {};
669+
const elem = await createTableFixture(html`
670+
<thead>${createSortableButtonDropdownHeaderRow()}</thead>
671+
<tbody>${createRows([1])}</tbody>
672+
`);
673+
await clickElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
674+
await expect(elem).to.be.golden();
675+
});
676+
677+
it('col-sort-button-dropdown-open-short-flag-on', async() => {
678+
window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
679+
const elem = await createTableFixture(html`
680+
<thead>${createSortableButtonDropdownHeaderRow()}</thead>
681+
<tbody>${createRows([1])}</tbody>
682+
`);
683+
await clickElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
684+
await expect(elem).to.be.golden({ margin: 50 });
685+
});
686+
667687
it('wrapper component', async() => {
668688
const elem = await fixture(html`<d2l-test-table type="${type}"></d2l-test-table>`, { rtl });
669689
await expect(elem).to.be.golden();

0 commit comments

Comments
 (0)