feat: table-col-sort-button: opt-in to prefer-fixed-positioning for d…

…ropdown
BrightspaceUI · Jan 22, 2025 · d680f2c · d680f2c
1 parent d0a677c
commit d680f2c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git 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';
 		</script>
+		<script>
+			window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
+		</script>
 	</head>
 	<body unresolved>
 

diff --git 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
 				<slot></slot>${iconView}
 			</button><span id="${this._describedById}" hidden>${buttonDescription}</span>${sortedView}`;
 		if (this._hasDropdownItems) {
-			return html`<d2l-dropdown>
+			return html`<d2l-dropdown prefer-fixed-positioning>
 					${button}
-					<d2l-dropdown-menu no-pointer align="start" vertical-offset="0">
+					<d2l-dropdown-menu no-pointer align="start" vertical-offset="0" prefer-fixed-positioning>
 						<d2l-menu @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
 							<slot name="items" @slotchange="${this._handleSlotChange}"></slot>
 						</d2l-menu>

diff --git 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`
+						<thead>${createSortableButtonDropdownHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					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`
+						<thead>${createSortableButtonDropdownHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					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`<d2l-test-table type="${type}"></d2l-test-table>`, { rtl });
 					await expect(elem).to.be.golden();