DE54475 - Update demo pages to demonstrate issue

BrightspaceUI · Aug 8, 2023 · 3f33cef · 3f33cef
1 parent 7cee1a7
commit 3f33cef
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/components/dialog/demo/dialog-fullscreen.html b/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>

diff --git a/components/dialog/demo/dialog.html b/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">

diff --git a/components/list/demo/demo-list.js b/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>