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

…ropdown (#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>
BrightspaceUI · Jan 22, 2025 · 3d13249 · 3d13249
1 parent 8afcb5a
commit 3d13249
Show file tree

Hide file tree

Showing 21 changed files with 26 additions and 3 deletions.
diff --git a/components/filter/demo/filter.html b/components/filter/demo/filter.html
@@ -16,7 +16,7 @@
 		import './filter-load-more-demo.js';
 	</script>
 	<script>
-		window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
+		window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } }; // TODO: remove with GAUD-131-dropdown-fixed-positioning flag clean up
 	</script>
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
     <meta charset="UTF-8">

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 } } } } }; // TODO: remove with GAUD-131-dropdown-fixed-positioning flag clean up
+		</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/.../chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png b/.../chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png
diff --git a/...e/chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png b/...e/chromium/ltr-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png
diff --git a/...n/table/chromium/ltr-default-sticky-multi-row-col-sort-button-dropdown-open.png b/...n/table/chromium/ltr-default-sticky-multi-row-col-sort-button-dropdown-open.png
diff --git a/...m/ltr-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png b/...m/ltr-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png
diff --git a/...le/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png b/...le/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png
diff --git a/...ble/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png b/...ble/chromium/ltr-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png
diff --git a/...test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open.png b/...test/golden/table/chromium/ltr-light-nonstick-col-sort-button-dropdown-open.png
diff --git a/...den/table/chromium/ltr-light-sticky-multi-row-col-sort-button-dropdown-open.png b/...den/table/chromium/ltr-light-sticky-multi-row-col-sort-button-dropdown-open.png
diff --git a/.../chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png b/.../chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-off.png
diff --git a/...e/chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png b/...e/chromium/rtl-default-nonstick-col-sort-button-dropdown-open-short-flag-on.png
diff --git a/...st/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open.png b/...st/golden/table/chromium/rtl-default-nonstick-col-sort-button-dropdown-open.png
diff --git a/...n/table/chromium/rtl-default-sticky-multi-row-col-sort-button-dropdown-open.png b/...n/table/chromium/rtl-default-sticky-multi-row-col-sort-button-dropdown-open.png
diff --git a/...m/rtl-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png b/...m/rtl-default-sticky-scroll-wrapper-multi-row-col-sort-button-dropdown-open.png
diff --git a/...le/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png b/...le/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-off.png
diff --git a/...ble/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png b/...ble/chromium/rtl-light-nonstick-col-sort-button-dropdown-open-short-flag-on.png
diff --git a/...test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open.png b/...test/golden/table/chromium/rtl-light-nonstick-col-sort-button-dropdown-open.png
diff --git a/...den/table/chromium/rtl-light-sticky-multi-row-col-sort-button-dropdown-open.png b/...den/table/chromium/rtl-light-sticky-multi-row-col-sort-button-dropdown-open.png
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();