@brightspace-ui/core 2.138.1 → 2.138.3

package/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 @@
 						<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 @@
 						<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>

package/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,7 @@
 					<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>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">

package/components/dialog/dialog-fullscreen.js

@@ -59,6 +59,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 			}
 
 			:host([no-padding]) .d2l-dialog-content {
+				--d2l-list-controls-padding: 0px; /* stylelint-disable-line length-zero-no-unit */
 				padding: 0;
 			}
 
@@ -70,20 +71,18 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					padding-top: 1rem;
 				}
 
-				.d2l-dialog-content {
-					padding-top: 1rem;
-				}
-
 				.d2l-dialog-content > div {
 					/* required to properly calculate preferred height when there are bottom
 					margins at the end of the slotted content */
 					border-bottom: 1px solid transparent;
 					box-sizing: border-box;
 					height: calc(100% - 1rem);
+					padding-top: 1rem;
 				}
 
 				:host([no-padding]) .d2l-dialog-content > div {
 					height: 100%;
+					padding-top: 0;
 				}
 
 				.d2l-dialog-header > div > d2l-button-icon {

package/components/dialog/dialog-styles.js

@@ -116,6 +116,7 @@ export const dialogStyles = css`
 	}
 
 	.d2l-dialog-content {
+		--d2l-list-controls-padding: 30px;
 		box-sizing: border-box;
 		flex: 1 0 0;
 		overflow: hidden; /* scrollbar is kept hidden while we update the scroll position to avoid scrollbar flash */
@@ -175,6 +176,7 @@ export const dialogStyles = css`
 			margin-right: 15px;
 		}
 		.d2l-dialog-content {
+			--d2l-list-controls-padding: 20px;
 			padding: 0 20px;
 		}
 		.d2l-dialog-footer {

package/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>

package/components/list/list-controls.js

@@ -16,6 +16,7 @@ export class ListControls extends SelectionControls {
 		return [super.styles, css`
 			:host {
 				--d2l-selection-controls-background-color: var(--d2l-list-controls-background-color);
+				--d2l-selection-controls-padding: var(--d2l-list-controls-padding, 18px);
 				z-index: 6; /* must be greater than d2l-list-item-active-border */
 			}
 			:host([no-sticky]) {
@@ -37,6 +38,7 @@ export class ListControls extends SelectionControls {
 
 		const parent = findComposedAncestor(this.parentNode, node => node && node.tagName === 'D2L-LIST');
 		if (parent) this._extendSeparator = parent.hasAttribute('extend-separators');
+		if (this._extendSeparator) this.style.setProperty('--d2l-selection-controls-padding', '0px');
 	}
 
 	_getSelectionControlsContainerClasses() {

package/components/paging/README.md

@@ -6,8 +6,65 @@ The paging components and mixins can be used to provide consistent paging functi
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/paging/pager-load-more.js';
+  import { html, LitElement } from 'lit';
+  import { PageableMixin } from '@brightspace-ui/core/components/paging/pageable-mixin.js';
+
+  class PageableExample extends PageableMixin(LitElement) {
+    render() {
+      return html`
+        <slot @slotchange="${this._handleSlotChange}"></slot>
+        ${this._renderPagerContainer()}
+      `;
+    }
+    _getItemByIndex(index) {
+      return this._getItems()[index];
+    }
+    _getItems() {
+      return this.shadowRoot.querySelector('slot').assignedElements().find(node => node.tagName === 'UL').querySelectorAll('li');
+    }
+    _getItemShowingCount() {
+      return this._getItems().length;
+    }
+    _handleSlotChange(e) {
+      const list = e.target.assignedElements().find(node => node.tagName === 'UL');
+      if (!this._mutationObserver) {
+        this._mutationObserver = new MutationObserver(() => this._updateItemShowingCount());
+      } else {
+        this._mutationObserver.disconnect();
+      }
+      this._mutationObserver.observe(list, { childList: true });
+    }
+  }
+  customElements.define('d2l-pageable-example', PageableExample);
+
+  document.querySelector('d2l-pager-load-more').addEventListener('d2l-pager-load-more', (e) => {
+    const ITEM_COUNT = 12;
+    const PAGE_SIZE = 3;
+
+    const list = e.target.parentNode.querySelector('ul');
+    let remainingCount = ITEM_COUNT - list.children.length;
+    const numberToLoad = remainingCount < PAGE_SIZE ? remainingCount : PAGE_SIZE;
+    for (let i = 0; i < numberToLoad; i++) {
+      const newItem = list.lastElementChild.cloneNode(true);
+      newItem.textContent = `item ${list.children.length + 1}`;
+      list.appendChild(newItem);
+    }
+    if (list.children.length === ITEM_COUNT) {
+      e.target.hasMore = false;
+    } else {
+      remainingCount = ITEM_COUNT - list.children.length;
+      if (remainingCount < PAGE_SIZE && e.target.pageSize) e.target.pageSize = remainingCount;
+    }
+    e.detail.complete();
+  });
 </script>
-<d2l-pager-load-more has-more page-size="3"></d2l-pager-load-more>
+<d2l-pageable-example item-count="12" style="width: 100%;">
+  <ul>
+    <li>item 1</li>
+    <li>item 2</li>
+  </ul>
+  <d2l-pager-load-more slot="pager" has-more page-size="3"></d2l-pager-load-more>
+</d2l-pageable-example>
 ```
 
 ## Load More Paging [d2l-pager-load-more]

package/components/selection/selection-controls.js

@@ -48,13 +48,11 @@ export class SelectionControls extends PageableSubscriberMixin(SelectionObserver
 	static get styles() {
 		return css`
 			:host {
-				background-color: var(--d2l-selection-controls-background-color, white);
 				display: block;
 				position: sticky;
 				top: 0;
 			}
 			:host([no-sticky]) {
-				background-color: transparent;
 				position: static;
 			}
 			@media (prefers-reduced-motion: no-preference) {
@@ -69,6 +67,8 @@ export class SelectionControls extends PageableSubscriberMixin(SelectionObserver
 				clip: rect(30px, auto, 200px, auto);
 				display: var(--d2l-selection-controls-shadow-display, block);
 				height: 40px;
+				margin: 0 calc(-1*var(--d2l-selection-controls-padding, 0px));
+				padding: 0 var(--d2l-selection-controls-padding, 0);
 				position: absolute;
 				width: 100%;
 				z-index: -1;
@@ -78,10 +78,14 @@ export class SelectionControls extends PageableSubscriberMixin(SelectionObserver
 			}
 			.d2l-selection-controls-container {
 				align-items: center;
+				background-color: var(--d2l-selection-controls-background-color, white);
 				display: flex;
-				margin-bottom: 6px;
-				margin-top: 6px;
+				margin: 6px calc(-1*var(--d2l-selection-controls-padding, 0px));
 				min-height: 54px;
+				padding: 0 var(--d2l-selection-controls-padding, 0);
+			}
+			:host([no-sticky]) .d2l-selection-controls-container {
+				background-color: transparent;
 			}
 			.d2l-selection-controls-container-slim {
 				min-height: 36px;

package/custom-elements.json

@@ -7799,6 +7799,11 @@
         {
           "name": "grid",
           "type": "boolean"
+        },
+        {
+          "name": "extend-separators",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -7807,6 +7812,12 @@
           "attribute": "grid",
           "type": "boolean"
         },
+        {
+          "name": "extendSeparators",
+          "attribute": "extend-separators",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "items"
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.138.1",
+  "version": "2.138.3",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",