@brightspace-ui/core 1.236.4 → 1.237.2

package/components/dialog/dialog-fullscreen.js

@@ -176,12 +176,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					min-width: calc(var(--d2l-vw, 1vw) * 100);
 					top: 42px;
 				}
-
-				:host(:not([in-iframe])) dialog.d2l-dialog-outer,
-				:host(:not([in-iframe])) div.d2l-dialog-outer {
-					height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
-					min-height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
-				}
 			}
 		`];
 	}
@@ -226,6 +220,9 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 				: 0;
 			const startTop = mediaQueryList.matches ? 42 : 0;
 			topOverride = iframeTop + startTop;
+		} else if (window.innerWidth <= 615 || (window.innerWidth <= 900 && window.innerHeight <= 420)) {
+			heightOverride.height = `${window.innerHeight - 42 - 2}px`; // render full window height - 42px top padding - 2px border
+			heightOverride.minHeight = heightOverride.height;
 		}
 
 		let loading = null;

package/components/list/README.md

@@ -369,6 +369,12 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 | `selected` | Boolean | Whether the item is selected |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
 
+### Methods
+
+- `highlight()`: highlights the item
+- `scrollToItem()`: scrolls to the item
+- `scrollToAndHighlight()`: scrolls to the item and then highlights it
+
 ### Events
 
 - `d2l-list-item-link-click`: dispatched when the item's primary link action is clicked

package/components/list/list-item-mixin.js

@@ -77,6 +77,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			_hoveringPrimaryAction: { type: Boolean },
 			_focusing: { type: Boolean },
 			_focusingPrimaryAction: { type: Boolean },
+			_highlight: { type: Boolean },
+			_highlighting: { type: Boolean },
 			_tooltipShowing: { type: Boolean, attribute: '_tooltip-showing', reflect: true }
 		};
 	}
@@ -97,6 +99,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				z-index: 10; /* must be greater than adjacent selected items */
 			}
 			:host([_fullscreen-within]) {
+				position: absolute; /* required for Safari */
 				z-index: 1000; /* must be greater than floating workflow buttons */
 			}
 			:host(:first-child) d2l-list-item-generic-layout[data-separators="between"] {
@@ -282,14 +285,40 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				border-color: #79b5df;
 			}
 			:host([selected]:not([disabled])) .d2l-list-item-active-border,
-			:host([selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
-				background: #79b5df;
+			:host([selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border,
+			:host(:not([disabled])) .d2l-list-item-highlight + .d2l-list-item-active-border {
+				background-color: #79b5df;
 				bottom: 0;
 				height: 1px;
 				position: absolute;
 				width: 100%;
 				z-index: 5;
 			}
+
+			.d2l-list-item-highlight {
+				transition: background-color 400ms linear, border-color 400ms linear;
+			}
+			.d2l-list-item-highlight + .d2l-list-item-active-border {
+				transition: background-color 400ms linear;
+			}
+			d2l-list-item-generic-layout.d2l-list-item-highlighting,
+			:host([selectable]:not([disabled]):not([skeleton])) d2l-list-item-generic-layout.d2l-list-item-highlighting.d2l-focusing,
+			:host([selectable]:not([disabled]):not([skeleton])) d2l-list-item-generic-layout.d2l-list-item-highlighting.d2l-hovering {
+				background-color: var(--d2l-color-celestine-plus-2);
+				border-color: var(--d2l-color-celestine);
+			}
+			:host(:not([disabled])) d2l-list-item-generic-layout.d2l-list-item-highlighting + .d2l-list-item-active-border {
+				background-color: var(--d2l-color-celestine);
+			}
+			:host([selected]:not([disabled])) d2l-list-item-generic-layout.d2l-list-item-highlighting {
+				background-color: var(--d2l-color-celestine-plus-2);
+				border-color: var(--d2l-color-celestine);
+			}
+			:host([selected]:not([disabled])) .d2l-list-item-highlighting + .d2l-list-item-active-border,
+			:host([selected]:not([disabled])) d2l-list-item-generic-layout.d2l-list-item-highlighting.d2l-focusing + .d2l-list-item-active-border {
+				background-color: var(--d2l-color-celestine);
+			}
+
 			:host([_fullscreen-within]) .d2l-list-item-active-border,
 			:host([_fullscreen-within]) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
 				display: none;
@@ -365,6 +394,21 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		if (node) node.focus();
 	}
 
+	async highlight() {
+		if (this._highlight) return;
+		const elem = this.shadowRoot.querySelector('d2l-list-item-generic-layout');
+		this._highlight = true;
+		await this.updateComplete;
+		elem.addEventListener('transitionend', () => {
+			// more than one property is being animated so this rAF waits before wiring up the return phase listener
+			setTimeout(() => {
+				elem.addEventListener('transitionend', () => this._highlight = false, { once: true });
+				this._highlighting = false;
+			}, 1000);
+		}, { once: true });
+		this._highlighting = true;
+	}
+
 	resizedCallback(width) {
 		const lastBreakpointIndexToCheck = 3;
 		this.breakpoints.some((breakpoint, index) => {
@@ -375,6 +419,19 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		});
 	}
 
+	scrollToAndHighlight() {
+		this.scrollToItem();
+		setTimeout(() => {
+			this.highlight();
+		}, 1000);
+	}
+
+	scrollToItem() {
+		const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+		if (reduceMotion) this.scrollIntoView();
+		else this.scrollIntoView({ behavior: 'smooth' });
+	}
+
 	_getNestedList() {
 		if (!this.shadowRoot) return;
 		const nestedSlot = this.shadowRoot.querySelector('slot[name="nested"]');
@@ -470,6 +527,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		const classes = {
 			'd2l-visible-on-ancestor-target': true,
 			'd2l-list-item-content-extend-separators': this._extendSeparators,
+			'd2l-list-item-highlight': this._highlight,
+			'd2l-list-item-highlighting': this._highlighting,
 			'd2l-focusing': this._focusing,
 			'd2l-hovering': this._hovering,
 			'd2l-dragging-over': this._draggingOver

package/package.json

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