@brightspace-ui/core 2.147.1 → 2.149.0

package/components/alert/alert-toast.js

@@ -1,6 +1,8 @@
 import './alert.js';
 import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 
@@ -9,14 +11,18 @@ const states = {
 	CLOSING: 'closing', // the close animation is running
 	PREOPENING: 'preopening', // a pause before running the opening animation because transitions won't run when changing from 'diplay: none' to 'display: block'
 	OPENING: 'opening', // the opening animation is running
-	OPEN: 'open' // the toast is open
+	OPEN: 'open', // the toast is open
+	SLIDING: 'sliding' // the transform animation when multiple alerts are on the page is running
 };
 
+const TOAST_SPACING = 0.6;
+
 /**
  *  A component for communicating important information relating to the state of the system and the user's work flow, displayed as a pop-up at the bottom of the screen that automatically dismisses itself by default.
  * @slot - Default content placed inside of the component
  * @fires d2l-alert-toast-button-press - Dispatched when the toast's action button is clicked
  * @fires d2l-alert-toast-close - Dispatched when the toast is closed
+ * @fires d2l-alert-toast-open - Dispatched when the toast is opened
  */
 class AlertToast extends LitElement {
 
@@ -58,6 +64,9 @@ class AlertToast extends LitElement {
 			 * @default "default"
 			 */
 			type: { type: String, reflect: true },
+			_bottomHeight: { state: true },
+			_bottomMargin: { state: true },
+			_closeClicked: { state: true },
 			_state: { type: String }
 		};
 	}
@@ -70,11 +79,10 @@ class AlertToast extends LitElement {
 
 			.d2l-alert-toast-container {
 				border-radius: 0.3rem;
-				bottom: 1.5rem;
 				box-shadow: 0 0.1rem 0.6rem 0 rgba(0, 0, 0, 0.1);
 				display: none;
 				left: 0;
-				margin: 0 auto;
+				margin: 0 auto 1.5rem;
 				max-width: 600px;
 				position: fixed;
 				right: 0;
@@ -88,15 +96,26 @@ class AlertToast extends LitElement {
 
 			.d2l-alert-toast-container[data-state="opening"],
 			.d2l-alert-toast-container[data-state="closing"] {
-				transition-duration: 250ms;
-				transition-property: transform, opacity;
-				transition-timing-function: ease-in;
+				transition-duration: 600ms;
+				transition-property: opacity;
+				transition-timing-function: ease;
+			}
+			.d2l-alert-toast-container[data-state="opening"],
+			.d2l-alert-toast-container.d2l-alert-toast-container-lowest[data-state="closing"] {
+				transition-property: opacity, transform;
+			}
+
+			.d2l-alert-toast-container.d2l-alert-toast-container-close-clicked[data-state="closing"] {
+				transition-duration: 200ms;
 			}
 
 			.d2l-alert-toast-container[data-state="preopening"],
 			.d2l-alert-toast-container[data-state="closing"] {
 				opacity: 0;
-				transform: translateY(0.5rem);
+			}
+			.d2l-alert-toast-container[data-state="preopening"],
+			.d2l-alert-toast-container.d2l-alert-toast-container-lowest[data-state="closing"] {
+				transform: translateY(calc(100% + 1.5rem));
 			}
 
 			.d2l-alert-toast-container[data-state="opening"] {
@@ -104,13 +123,17 @@ class AlertToast extends LitElement {
 				transform: translateY(0);
 			}
 
+			.d2l-alert-toast-container[data-state="sliding"] {
+				transition: bottom 600ms ease;
+			}
+
 			d2l-alert {
 				animation: none;
 			}
 
 			@media (max-width: 615px) {
 				.d2l-alert-toast-container {
-					bottom: 12px;
+					margin-bottom: 12px;
 					width: calc(100% - 16px);
 				}
 			}
@@ -123,9 +146,15 @@ class AlertToast extends LitElement {
 		this.noAutoClose = false;
 		this.open = false;
 
+		this._bottomHeight = 0;
+		this._bottomMargin = 0;
+		this._closeClicked = false;
 		this._hasFocus = false;
 		this._hasMouse = false;
 		this._state = states.CLOSED;
+
+		this._handleAlertOpen = this._handleAlertOpen.bind(this);
+		this._handleAlertClose = this._handleAlertClose.bind(this);
 	}
 
 	get open() {
@@ -141,11 +170,39 @@ class AlertToast extends LitElement {
 		}
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		document.body.addEventListener('d2l-alert-toast-open', this._handleAlertOpen);
+		document.body.addEventListener('d2l-alert-toast-close', this._handleAlertClose);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.body.removeEventListener('d2l-alert-toast-open', this._handleAlertOpen);
+		document.body.removeEventListener('d2l-alert-toast-close', this._handleAlertClose);
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+
+		this._innerContainer = this.shadowRoot.querySelector('.d2l-alert-toast-container');
+	}
+
 	render() {
+		const containerStyles = {
+			bottom: (this._bottomHeight || this._bottomMargin) ? `calc(${this._bottomHeight}px + ${this._bottomMargin}rem)` : 0
+		};
+		const containerClasses = {
+			'd2l-alert-toast-container': true,
+			'd2l-alert-toast-container-close-clicked': this._closeClicked,
+			'd2l-alert-toast-container-lowest': !this._bottomHeight,
+			'vdiff-target': true
+		};
 		return html`
 			<div
-				class="d2l-alert-toast-container vdiff-target"
+				class="${classMap(containerClasses)}"
 				data-state="${this._state}"
+				style="${styleMap(containerStyles)}"
 				@transitionend=${this._onTransitionEnd}>
 				<d2l-alert
 					@blur=${this._onBlur}
@@ -200,6 +257,26 @@ class AlertToast extends LitElement {
 		clearTimeout(this._setTimeoutId);
 	}
 
+	_handleAlertClose(e) {
+		if (e?.target === this || !this.open) return;
+
+		const containerBottom = parseFloat(getComputedStyle(this._innerContainer).getPropertyValue('bottom'));
+		const closingContainerBottom = e.detail.bottom;
+		if (closingContainerBottom > containerBottom) return; // closing alert is above this alert, no need to adjust bottom spacing
+
+		this._bottomHeight -= e.detail.height;
+		this._bottomMargin -= TOAST_SPACING;
+		if (!reduceMotion) this._state = states.SLIDING;
+	}
+
+	_handleAlertOpen(e) {
+		if (e?.target === this || !this.open) return;
+
+		this._bottomHeight += e.detail.height;
+		this._bottomMargin += TOAST_SPACING;
+		if (!reduceMotion) this._state = states.SLIDING;
+	}
+
 	_handleButtonPress(e) {
 		e.stopPropagation();
 		this.dispatchEvent(new CustomEvent('d2l-alert-toast-button-press'));
@@ -212,6 +289,7 @@ class AlertToast extends LitElement {
 
 	_onCloseClicked(e) {
 		e.preventDefault();
+		this._closeClicked = true;
 		this.open = false;
 	}
 
@@ -231,10 +309,13 @@ class AlertToast extends LitElement {
 	}
 
 	_onTransitionEnd() {
-		if (this._state === states.OPENING) {
+		if (this._state === states.OPENING || this._state === states.SLIDING) {
 			this._state = states.OPEN;
 		} else if (this._state === states.CLOSING) {
 			this._state = states.CLOSED;
+			this._bottomHeight = 0;
+			this._bottomMargin = 0;
+			this._closeClicked = false;
 		}
 	}
 
@@ -256,21 +337,44 @@ class AlertToast extends LitElement {
 				}
 			}
 			this.setAttribute('role', 'alert');
+			requestAnimationFrame(() => {
+				const height = this._innerContainer.offsetHeight;
+				this.dispatchEvent(new CustomEvent(
+					'd2l-alert-toast-open', {
+						bubbles: true,
+						composed: false,
+						detail: { height }
+					}
+				));
+			});
 		} else {
+			if (!this._innerContainer) return;
+
 			if (reduceMotion || this._state === states.PREOPENING) {
 				cancelAnimationFrame(this._preopenFrame);
 				this.removeAttribute('role');
-				this._state = states.CLOSED;
-			} else if (this._state === states.OPENING || this._state === states.OPEN) {
+			} else if (this._state === states.OPENING || this._state === states.OPEN || this._state === states.SLIDING) {
 				this._state = states.CLOSING;
 			}
-			this.dispatchEvent(new CustomEvent(
-				'd2l-alert-toast-close', {
-					bubbles: true,
-					composed: false,
-					detail: { action: this._action }
+			requestAnimationFrame(() => {
+				const height = this._innerContainer.offsetHeight;
+				const bottom = parseFloat(getComputedStyle(this._innerContainer).getPropertyValue('bottom'));
+
+				if (reduceMotion || this._state === states.PREOPENING) {
+					this._state = states.CLOSED;
+					this._bottomHeight = 0;
+					this._bottomMargin = 0;
+					this._closeClicked = false;
 				}
-			));
+
+				this.dispatchEvent(new CustomEvent(
+					'd2l-alert-toast-close', {
+						bubbles: true,
+						composed: false,
+						detail: { bottom, height }
+					}
+				));
+			});
 		}
 	}
 

package/components/alert/demo/alert-toast.html

@@ -10,6 +10,11 @@
 		import '../../demo/demo-page.js';
 		import '../alert-toast.js';
 	</script>
+	<style>
+		d2l-button {
+			padding-bottom: 1rem;
+		}
+	</style>
 </head>
 
 <body unresolved>
@@ -50,6 +55,26 @@
 				<d2l-button primary data-toast="toast4">Open alert</d2l-button>
 			</template>
 		</d2l-demo-snippet>
+
+		<h2>Multiple Alerts</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-alert-toast id="toast5" no-auto-close>A default toast alert.</d2l-alert-toast>
+				<d2l-button primary data-toast="toast5">Open alert</d2l-button>
+
+				<d2l-alert-toast id="toast6" no-auto-close>A default toast alert.</d2l-alert-toast>
+				<d2l-button primary data-toast="toast6">Open alert</d2l-button>
+
+				<d2l-alert-toast id="toast7" no-auto-close>A default toast alert.</d2l-alert-toast>
+				<d2l-button primary data-toast="toast7">Open alert</d2l-button>
+
+				<d2l-alert-toast id="toast8" type="success" button-text="Do it!" has-close-button no-auto-close
+					subtext="I am subtext. I'm here to test the wrapping capabilities of adding subtext to these alerts, as well as other styling issues. Feel free to add to me!">
+					A message.
+				</d2l-alert-toast>
+				<d2l-button primary data-toast="toast8">Open alert</d2l-button>
+			</template>
+		</d2l-demo-snippet>
 	</d2l-demo-page>
 
 </body>

package/components/filter/filter-overflow-group.js

@@ -89,7 +89,7 @@ class FilterOverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 
 	getOverflowContainer(overflowItems) {
 		return html`
-			<d2l-filter class="${OVERFLOW_CLASS}" @d2l-filter-change="${this._handleFilterChange}">
+			<d2l-filter class="${OVERFLOW_CLASS} vdiff-target" @d2l-filter-change="${this._handleFilterChange}">
 				${overflowItems}
 			</d2l-filter>
 		`;

package/components/filter/filter.js

@@ -236,6 +236,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 		const dropdownContent = singleDimension ? html`
 				<d2l-dropdown-content
+					class="vdiff-target"
 					min-width="285"
 					max-width="420"
 					mobile-tray="right"
@@ -249,6 +250,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				</d2l-dropdown-content>`
 			: html`
 				<d2l-dropdown-menu
+					class="vdiff-target"
 					min-width="285"
 					max-width="420"
 					mobile-tray="right"
@@ -265,6 +267,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 		return html`
 			<d2l-dropdown-button-subtle
+				class="vdiff-target"
 				@d2l-dropdown-close="${this._handleDropdownClose}"
 				@d2l-dropdown-open="${this._handleDropdownOpen}"
 				@d2l-dropdown-position="${this._stopPropagation}"

package/components/html-block/html-block.js

@@ -199,6 +199,9 @@ class HtmlBlock extends LitElement {
 			this._contextObserverControllerResolve = resolve;
 		});
 
+		this._renderersProcessedResolve = undefined;
+		this._renderersProcessedPromise = new Promise(resolve => this._renderersProcessedResolve = resolve);
+
 		getRenderers().then(renderers => renderers.reduce((attrs, currentRenderer) => {
 			if (currentRenderer.contextAttributes) currentRenderer.contextAttributes.forEach(attr => attrs.push(attr));
 			return attrs;
@@ -242,6 +245,10 @@ class HtmlBlock extends LitElement {
 		}
 	}
 
+	async getLoadingComplete() {
+		return this._renderersProcessedPromise;
+	}
+
 	async _contextChanged() {
 		await this._contextObserverControllerInitialized;
 		if (!this._contextKeys) {
@@ -265,6 +272,7 @@ class HtmlBlock extends LitElement {
 	async _processRenderers(elem) {
 		await this._contextObserverControllerInitialized;
 		const renderers = await getRenderers();
+		const loadingCompletePromises = [];
 		for (const renderer of renderers) {
 			if (renderer.contextAttributes) {
 				const contextValues = new Map();
@@ -278,7 +286,11 @@ class HtmlBlock extends LitElement {
 					noDeferredRendering: this.noDeferredRendering
 				});
 			}
+			if (typeof renderer.getLoadingComplete === 'function') {
+				loadingCompletePromises.push(renderer.getLoadingComplete());
+			}
 		}
+		Promise.all(loadingCompletePromises).then(() => this._renderersProcessedResolve());
 	}
 
 	async _renderInline(slot) {
@@ -288,7 +300,10 @@ class HtmlBlock extends LitElement {
 		const noDeferredRenderingContainer = slot.assignedNodes({ flatten: true })
 			.find(node => (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'DIV'));
 
-		if (!noDeferredRenderingContainer) return;
+		if (!noDeferredRenderingContainer) {
+			this._renderersProcessedResolve();
+			return;
+		}
 		await this._processRenderers(noDeferredRenderingContainer);
 	}
 

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

@@ -466,6 +466,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		const oldValue = this._color;
 		this._color = getValidHexColor(value, true);
 		this.requestUpdate('value', oldValue);
+		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-property-change', { bubbles: true, composed: true, detail: { name: 'color', value: this._color } }));
 	}
 

package/components/overflow-group/overflow-group.js

@@ -160,7 +160,7 @@ class OverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 
 	getOverflowContainer(overflowItems, mini) {
 		const moreActionsText = this.localize('components.overflow-group.moreActions');
-		const menu = html`<d2l-dropdown-menu>
+		const menu = html`<d2l-dropdown-menu class="vdiff-target">
 			<d2l-menu label="${moreActionsText}">
 				${overflowItems}
 			</d2l-menu>

package/components/scroll-wrapper/demo/scroll-wrapper-test.js

@@ -79,7 +79,7 @@ class TestScrollWrapper extends RtlMixin(LitElement) {
 		` : html`<div class="d2l-scroll-wrapper-gradient" style="${styleMap(style)}"></div>`;
 
 		return html`
-			<d2l-scroll-wrapper ?hide-actions="${this.hideActions}" .customScrollers="${this._customScrollers}">
+			<d2l-scroll-wrapper class="vdiff-target" ?hide-actions="${this.hideActions}" .customScrollers="${this._customScrollers}">
 				${contents}
 			</d2l-scroll-wrapper>
 		`;

package/components/scroll-wrapper/scroll-wrapper.js

@@ -194,10 +194,10 @@ class ScrollWrapper extends RtlMixin(LitElement) {
 
 		const actions = !this.hideActions ? html`
 			<div class="d2l-scroll-wrapper-actions">
-				<div class="d2l-scroll-wrapper-button d2l-scroll-wrapper-button-left" @click="${this._scrollLeft}">
+				<div class="d2l-scroll-wrapper-button d2l-scroll-wrapper-button-left vdiff-target" @click="${this._scrollLeft}">
 					<d2l-icon icon="tier1:chevron-left"></d2l-icon>
 				</div>
-				<div class="d2l-scroll-wrapper-button d2l-scroll-wrapper-button-right" @click="${this._scrollRight}">
+				<div class="d2l-scroll-wrapper-button d2l-scroll-wrapper-button-right vdiff-target" @click="${this._scrollRight}">
 					<d2l-icon icon="tier1:chevron-right"></d2l-icon>
 				</div>
 			</div>` : null;

package/components/skeleton/demo/skeleton-group-test-wrapper.js

@@ -1,7 +1,16 @@
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { SkeletonGroupMixin } from '../skeleton-group-mixin.js';
 
 class SkeletonGroupTestWrapper extends SkeletonGroupMixin(LitElement) {
+	static get styles() {
+		return css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				gap: 0.3rem;
+			}
+		`;
+	}
 	render() {
 		return html`<slot></slot>`;
 	}

package/components/switch/switch-visibility.js

@@ -71,7 +71,8 @@ class VisibilitySwitch extends LocalizeCoreElement(SwitchMixin(LitElement)) {
 
 		const tooltipHelpClasses = {
 			'switch-visibility-conditions-show': this.on && this._hasConditions,
-			'd2l-switch-text': true
+			'd2l-switch-text': true,
+			'vdiff-target': true
 		};
 
 		const conditions = html`

package/components/tooltip/tooltip-help.js

@@ -112,7 +112,7 @@ class TooltipHelp extends SkeletonMixin(FocusMixin(LitElement)) {
 				${this.text}
 			</button>
 			${!this.skeleton ? html`
-				<d2l-tooltip for="d2l-tooltip-help-text" delay="0" offset="13" position="${ifDefined(this.position)}" ?showing="${this.showing}">
+				<d2l-tooltip class="vdiff-target" for="d2l-tooltip-help-text" delay="0" offset="13" position="${ifDefined(this.position)}" ?showing="${this.showing}">
 					<slot></slot>
 				</d2l-tooltip>
 			` : nothing }

package/custom-elements.json

@@ -91,6 +91,10 @@
         {
           "name": "d2l-alert-toast-close",
           "description": "Dispatched when the toast is closed"
+        },
+        {
+          "name": "d2l-alert-toast-open",
+          "description": "Dispatched when the toast is opened"
         }
       ],
       "slots": [
@@ -8124,9 +8128,6 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-list-item-property-change"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -8492,9 +8493,6 @@
           "name": "d2l-list-item-button-click",
           "description": "Dispatched when the item's primary button action is clicked"
         },
-        {
-          "name": "d2l-list-item-property-change"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -8983,9 +8981,6 @@
           "name": "d2l-list-item-link-click",
           "description": "Dispatched when the item's primary link action is clicked"
         },
-        {
-          "name": "d2l-list-item-property-change"
-        },
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
@@ -12125,22 +12120,10 @@
         }
       ]
     },
-    {
-      "name": "d2l-test-table-controls-visual-diff",
-      "path": "./components/table/test/table-test-controls-visual-diff.js"
-    },
-    {
-      "name": "d2l-test-table-paging-visual-diff",
-      "path": "./components/table/test/table-test-paging-visual-diff.js"
-    },
     {
       "name": "d2l-test-table-sticky-visual-diff",
       "path": "./components/table/test/table-test-sticky-visual-diff.js"
     },
-    {
-      "name": "d2l-test-table-visual-diff",
-      "path": "./components/table/test/table-test-visual-diff.js"
-    },
     {
       "name": "d2l-tab-internal",
       "path": "./components/tabs/tab-internal.js",

package/helpers/mathjax.js

@@ -75,6 +75,10 @@ class HtmlBlockMathRenderer {
 		await window.D2L.renderingPromise;
 	}
 
+	async getLoadingComplete() {
+		return new Promise(resolve => setTimeout(resolve, 100));
+	}
+
 }
 
 export function createHtmlBlockRenderer() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.147.1",
+  "version": "2.149.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.34",
+    "@brightspace-ui/testing": "^1",
     "@open-wc/semantic-dom-diff": "^0.20",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",
@@ -63,7 +63,7 @@
     "rollup": "^3",
     "rollup-plugin-copy": "^3",
     "rollup-plugin-delete": "^2",
-    "sinon": "^15",
+    "sinon": "^16",
     "stylelint": "^15"
   },
   "dependencies": {