DE54475 - Add test and demos to show sticky d2l-list-controls scrolled + list hover/focus issue

components/dialog/demo/dialog-fullscreen.html

@@ -20,6 +20,7 @@
 			import '../../filter/filter.js';
 			import '../../filter/filter-dimension-set.js';
 			import '../../filter/filter-dimension-set-value.js';
+			import '../../list/demo/demo-list.js';
 			import '../../menu/menu.js';
 			import '../../menu/menu-item.js';
 			import '../../tabs/tabs.js';
@@ -50,6 +51,7 @@ <h2>Fullscreen Dialog</h2>
 						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
 						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
 						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<d2l-demo-list></d2l-demo-list>
 						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
 						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
 						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
@@ -101,6 +103,7 @@ <h2>Fullscreen Dialog (no-padding)</h2>
 						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
 						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
 						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<d2l-demo-list extend-separators></d2l-demo-list>
 						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
 						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
 						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>

components/dialog/demo/dialog.html

@@ -15,6 +15,7 @@
 			import '../../filter/filter.js';
 			import '../../filter/filter-dimension-set.js';
 			import '../../filter/filter-dimension-set-value.js';
+			import '../../list/demo/demo-list.js';
 			import '../dialog.js';
 			import './dialog-async-content.js';
 			import './dialog-container.js';
@@ -36,6 +37,9 @@ <h2>Dialog</h2>
 					<d2l-dialog id="dialog" title-text="Dialog Title">
 						<div>
 							<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+							<d2l-demo-list></d2l-demo-list>
+							<p>Now extend me separators:</p>
+							<d2l-demo-list extend-separators></d2l-demo-list>
 							<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
 							<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
 							<d2l-dropdown-button-subtle text="More">

components/list/demo/demo-list.js

@@ -117,6 +117,7 @@ class DemoList extends LitElement {
 	static get properties() {
 		return {
 			grid: { type: Boolean },
+			extendSeparators: { type: Boolean, attribute: 'extend-separators' },
 			_lastItemLoadedIndex: { state: true }
 		};
 	}
@@ -138,6 +139,7 @@ class DemoList extends LitElement {
 
 	constructor() {
 		super();
+		this.extendSeparators = false;
 		this.items = JSON.parse(JSON.stringify(items));
 		this._lastItemLoadedIndex = 2;
 		this._pageSize = 2;
@@ -147,7 +149,7 @@ class DemoList extends LitElement {
 		const loadedItems = this.items.slice(0, this._lastItemLoadedIndex + 1);
 		const remainingItemCount = this.items.length - loadedItems.length;
 		return html`
-			<d2l-list ?grid="${this.grid}" item-count="${this.items.length}">
+			<d2l-list ?grid="${this.grid}" item-count="${this.items.length}" ?extend-separators="${this.extendSeparators}">
 				<d2l-list-controls slot="controls" select-all-pages-allowed>
 					<d2l-selection-action icon="tier1:plus-default" text="Add" @d2l-selection-action-click="${this._handleAddItem}"></d2l-selection-action>
 					<d2l-selection-action-dropdown text="Move To" requires-selection>

components/list/test/list.visual-diff.html

@@ -46,7 +46,33 @@
 		<div style="width: 400px;">
 			<div class="visual-diff" id="stickyControls">
 				<div style="height: 200px; overflow: scroll;">
-					<d2l-list>
+					<d2l-list style="padding: 0 20px;">
+						<d2l-list-controls slot="controls"></d2l-list-controls>
+						<d2l-list-item label="Item 1" selectable key="1">
+							<d2l-list-item-content>
+								<div>Item 1</div>
+								<div slot="supporting-info">Supporting info</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="Item 2" selectable key="2">
+							<d2l-list-item-content>
+								<div>Item 2</div>
+								<div slot="supporting-info">Supporting info</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="Item 3" selectable key="3">
+							<d2l-list-item-content>
+								<div>Item 3</div>
+								<div slot="supporting-info">Supporting info</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+				</div>
+			</div>
+
+			<div class="visual-diff" id="stickyControlsSeparatorsExtended">
+				<div style="height: 200px; overflow: scroll;">
+					<d2l-list style="padding: 0 20px;" extend-separators>
 						<d2l-list-controls slot="controls"></d2l-list-controls>
 						<d2l-list-item label="Item 1" selectable key="1">
 							<d2l-list-item-content>

components/list/test/list.visual-diff.js

@@ -152,6 +152,24 @@ describe('d2l-list', () => {
 			{ name: 'sticky scrolled', selector: '#stickyControls', action: async() => {
 				await scrollTo('#stickyControls > div', 0);
 				await scrollTo('#stickyControls > div', 45);
+			}, screenshotOptions: { captureBeyondViewport: false } },
+			{ name: 'sticky scrolled hover', selector: '#stickyControls', action: async() => {
+				await scrollTo('#stickyControls > div', 0);
+				await scrollTo('#stickyControls > div', 45);
+				await hover('#stickyControls [key="1"] [slot="supporting-info"]');
+			}, screenshotOptions: { captureBeyondViewport: false } },
+			{ name: 'sticky top extended separators', selector: '#stickyControlsSeparatorsExtended', action: async() => {
+				await scrollTo('#stickyControlsSeparatorsExtended > div', 45);
+				await scrollTo('#stickyControlsSeparatorsExtended > div', 0);
+			}, screenshotOptions: { captureBeyondViewport: false } },
+			{ name: 'sticky scrolled extended separators', selector: '#stickyControlsSeparatorsExtended', action: async() => {
+				await scrollTo('#stickyControlsSeparatorsExtended > div', 0);
+				await scrollTo('#stickyControlsSeparatorsExtended > div', 45);
+			}, screenshotOptions: { captureBeyondViewport: false } },
+			{ name: 'sticky scrolled hover extended separators', selector: '#stickyControlsSeparatorsExtended', action: async() => {
+				await scrollTo('#stickyControlsSeparatorsExtended > div', 0);
+				await scrollTo('#stickyControlsSeparatorsExtended > div', 45);
+				await hover('#stickyControlsSeparatorsExtended [key="1"] [slot="supporting-info"]');
 			}, screenshotOptions: { captureBeyondViewport: false } }
 		] },
 		{ category: 'draggable', tests: [