@brightspace-ui/core 2.152.0 → 2.153.0

package/README.md

@@ -123,29 +123,14 @@ npm run test:headless:watch
 
 Note: The axe tests require `prefers-reduced-motion` emulation to be turned on in the dev console if debugging in a local browser.
 
-### Visual Diff Testing
-
-This repo uses the [@brightspace-ui/visual-diff utility](https://github.com/BrightspaceUI/visual-diff/) to compare current snapshots against a set of golden snapshots stored in source control.
-
-The golden snapshots in source control must be updated by the [visual-diff GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/visual-diff).  If a pull request results in visual differences, a draft pull request with the new goldens will automatically be opened against its branch.
-
-To run the tests locally to help troubleshoot or develop new tests, first install these dependencies:
+This repo uses [@brightspace-ui/testing](https://github.com/BrightspaceUI/testing)'s vdiff command to perform visual regression testing:
 
 ```shell
-npm install @brightspace-ui/visual-diff@X  --no-save
-```
+# vdiff
+npm run test:vdiff
 
-Replace `X` with [the current version](https://github.com/BrightspaceUI/actions/tree/main/visual-diff#current-dependency-versions) the action is using.
-
-Then run the tests:
-
-```shell
-# run visual-diff tests
-npx mocha './**/*.visual-diff.js' -t 10000
-# subset of visual-diff tests:
-npx mocha './**/*.visual-diff.js' -t 10000 -g some-pattern
-# update visual-diff goldens
-npx mocha './**/*.visual-diff.js' -t 10000 --golden
+# re-generate goldens
+npm run test:vdiff golden
 ```
 
 ## Versioning & Releasing

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/components/loading-spinner/README.md

@@ -47,7 +47,7 @@ A loading spinner indicates that something is happening and we don't know how lo
 
 ## Future Improvements
 
-- Ability to "freeze" the spinner at a specified frame to make visual diff testing easier
+- Ability to "freeze" the spinner at a specified frame to make vdiff testing easier
 
 Looking for an enhancement not listed here? Create a GitHub issue!
 <!-- docs: end hidden content -->

package/package.json

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