Skip to content

Commit

Permalink
Add list visual-diffs and dialog demos to show the sticky list contro…
Browse files Browse the repository at this point in the history
…ls + scroll issue
  • Loading branch information
svanherk committed Aug 11, 2023
1 parent 34d9d51 commit 4d81420
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 2 deletions.
3 changes: 3 additions & 0 deletions components/dialog/demo/dialog-fullscreen.html
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions components/dialog/demo/dialog.html
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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">
Expand Down
4 changes: 3 additions & 1 deletion components/list/demo/demo-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ class DemoList extends LitElement {
static get properties() {
return {
grid: { type: Boolean },
extendSeparators: { type: Boolean, attribute: 'extend-separators' },
_lastItemLoadedIndex: { state: true }
};
}
Expand All @@ -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;
Expand All @@ -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>
Expand Down
28 changes: 27 additions & 1 deletion components/list/test/list.visual-diff.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
18 changes: 18 additions & 0 deletions components/list/test/list.visual-diff.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down

0 comments on commit 4d81420

Please sign in to comment.