@brightspace-ui/core 2.152.0 → 2.152.1

package/components/alert/alert-toast.js

@@ -6,6 +6,13 @@ import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+let activeReduceMotion = reduceMotion;
+export function disableReducedMotionForTesting() {
+	activeReduceMotion = false;
+}
+export function restoreReducedMotionForTesting() {
+	activeReduceMotion = reduceMotion;
+}
 
 const states = {
 	CLOSED: 'closed', // the toast is closed
@@ -331,10 +338,10 @@ class AlertToast extends LitElement {
 		this._totalSiblingHeightBelow += e.detail.heightDifference;
 		if (e.detail.opening) {
 			this._numAlertsBelow += 1;
-			if (!reduceMotion) this._state = states.SLIDING;
+			if (!activeReduceMotion) this._state = states.SLIDING;
 		} else if (e.detail.closing) {
 			this._numAlertsBelow -= 1;
-			if (!reduceMotion) this._state = states.SLIDING;
+			if (!activeReduceMotion) this._state = states.SLIDING;
 		}
 	}
 
@@ -396,7 +403,7 @@ class AlertToast extends LitElement {
 			if (this._state === states.CLOSING) {
 				this._state = states.OPENING;
 			} else if (this._state === states.CLOSED) {
-				if (!reduceMotion) {
+				if (!activeReduceMotion) {
 					this._state = states.PREOPENING;
 					// pause before running the opening animation because transitions won't run when changing from 'diplay: none' to 'display: block'
 					this._preopenFrame = requestAnimationFrame(() => {
@@ -412,7 +419,7 @@ class AlertToast extends LitElement {
 		} else {
 			if (!this._innerContainer) return;
 
-			if (reduceMotion || this._state === states.PREOPENING) {
+			if (activeReduceMotion || this._state === states.PREOPENING) {
 				cancelAnimationFrame(this._preopenFrame);
 				this.removeAttribute('role');
 			} else if (this._state === states.OPENING || this._state === states.OPEN || this._state === states.SLIDING) {
@@ -425,7 +432,7 @@ class AlertToast extends LitElement {
 			requestAnimationFrame(() => {
 				const bottom = this._innerContainer.getBoundingClientRect().bottom;
 
-				if (reduceMotion || this._state === states.PREOPENING) {
+				if (activeReduceMotion || this._state === states.PREOPENING) {
 					this._state = states.CLOSED;
 					this._totalSiblingHeightBelow = 0;
 					this._numAlertsBelow = 0;
@@ -444,8 +451,14 @@ class AlertToast extends LitElement {
 	}
 
 	_stateChanged(newState, oldState) {
-		const newlyOpened = (newState === states.OPEN && oldState === states.OPENING);
-		const newlyOpenedReduceMotion = (newState === states.OPEN && oldState === states.CLOSED);
+		/**
+		 * Opening state changes:
+		 * - OPENING -> OPEN
+		 * - OPENING -> SLIDING (multiple alerts opened rapidly)
+		 * - CLOSED -> OPEN (prefers-reduced-motion)
+		 */
+		const newlyOpened = oldState === states.OPENING && (newState === states.OPEN || newState === states.SLIDING);
+		const newlyOpenedReduceMotion = oldState === states.CLOSED && newState === states.OPEN;
 		if (newlyOpened || newlyOpenedReduceMotion) {
 			this._closeTimerStart();
 		} else if (newState !== states.SLIDING && newState !== states.OPEN) {

package/components/inputs/input-date-time-range.js

@@ -217,8 +217,8 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
 		const startDateTimeInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-time-range-start');
 		const endDateTimeInput = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-date-time-range-end');
 
-		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" position="bottom" state="error">${this.validationError}</d2l-tooltip>` : null;
-		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" position="bottom" state="error">${this.validationError}</d2l-tooltip>` : null;
+		const tooltipStart = (this.validationError && !this.startOpened && !this.childErrors.has(startDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._startInputId}" position="bottom" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
+		const tooltipEnd = (this.validationError && !this.endOpened && !this.childErrors.has(endDateTimeInput)) ? html`<d2l-tooltip align="start" announced for="${this._endInputId}" position="bottom" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
 		return html`
 			${tooltipStart}
 			${tooltipEnd}
@@ -236,7 +236,7 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
 						<d2l-input-date-time
 							?novalidate="${this.noValidate}"
 							@change="${this._handleChange}"
-							class="d2l-input-date-time-range-start"
+							class="d2l-input-date-time-range-start vdiff-target"
 							@d2l-input-date-time-dropdown-toggle="${this._handleDropdownToggle}"
 							?disabled="${this.disabled}"
 							.forceInvalid=${this.invalid}
@@ -258,7 +258,7 @@ class InputDateTimeRange extends FocusMixin(SkeletonMixin(FormElementMixin(RtlMi
 						<d2l-input-date-time
 							?novalidate="${this.noValidate}"
 							@change="${this._handleChange}"
-							class="d2l-input-date-time-range-end"
+							class="d2l-input-date-time-range-end vdiff-target"
 							@d2l-input-date-time-dropdown-toggle="${this._handleDropdownToggle}"
 							?disabled="${this.disabled}"
 							.forceInvalid=${this.invalid}

package/components/inputs/input-date-time.js

@@ -230,11 +230,12 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 
 		const dateOpened = this.opened && !this._timeOpened && !this.disabled && !this.skeleton;
 		const parsedValue = this.value ? (this.localized ? this.value : getLocalDateTimeFromUTCDateTime(this.value)) : '';
-		const tooltip = (this.validationError && !this.opened && this.childErrors.size === 0) ? html`<d2l-tooltip align="start" announced for="${this._inputId}" state="error">${this.validationError}</d2l-tooltip>` : null;
+		const tooltip = (this.validationError && !this.opened && this.childErrors.size === 0) ? html`<d2l-tooltip align="start" announced for="${this._inputId}" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
 		const inputTime = !timeHidden ? html`<d2l-input-time
 				?novalidate="${this.noValidate}"
 				@blur="${this._handleInputTimeBlur}"
 				@change="${this._handleTimeChange}"
+				class="vdiff-target"
 				@d2l-input-time-dropdown-toggle="${this._handleDropdownToggle}"
 				default-value="${ifDefined(this.timeDefaultValue)}"
 				?disabled="${this.disabled}"
@@ -264,6 +265,7 @@ class InputDateTime extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMi
 						novalidateminmax
 						has-now
 						@change="${this._handleDateChange}"
+						class="vdiff-target"
 						@d2l-input-date-dropdown-toggle="${this._handleDropdownToggle}"
 						?disabled="${this.disabled}"
 						.forceInvalid=${this.invalid}

package/package.json

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