Update d2l-alert-toast to use popover

components/alert/alert-toast.js

@@ -1,9 +1,14 @@
 import './alert.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+const alertToastPopoverFlag = getFlag('GAUD-10337-use-alert-toast-popover', true);
+const isPopoverSupported = ('popover' in HTMLElement.prototype);
+const usePopover = alertToastPopoverFlag && isPopoverSupported;
+
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 let activeReduceMotion = reduceMotion;
 export function disableReducedMotionForTesting() {
@@ -88,15 +93,20 @@ class AlertToast extends LitElement {
 		}
 
 		.d2l-alert-toast-container {
+			background-color: transparent; /* override popover default */
+			border: none; /* override popover */
 			border-radius: 0.3rem;
 			box-shadow: 0 0.1rem 0.6rem 0 rgba(0, 0, 0, 0.1);
+			color: var(--d2l-theme-text-color-static-standard);  /* override popover default */
 			display: none;
-			left: 0;
+			inset: auto 0 0 0;  /* override popover default */
 			margin: 0 auto 1.5rem;
 			max-width: 600px;
+			padding: 0; /* override popover */
 			position: fixed;
-			right: 0;
 			width: 100%;
+		}
+		.d2l-alert-toast-container-not-popover {
 			z-index: 10000;
 		}
 
@@ -133,7 +143,7 @@ class AlertToast extends LitElement {
 		}
 
 		.d2l-alert-toast-container[data-state="sliding"] {
-			transition: bottom 600ms ease;
+			transition: inset-block-end 600ms ease;
 		}
 
 		d2l-alert {
@@ -215,9 +225,10 @@ class AlertToast extends LitElement {
 	render() {
 		const spaceBetweenAlerts = this._numAlertsBelow * (this._smallWidth ? TOAST_SPACING_SMALL : TOAST_SPACING);
 		const containerStyles = {
-			bottom: (this._totalSiblingHeightBelow || this._numAlertsBelow) ? `calc(${this._totalSiblingHeightBelow}px + ${spaceBetweenAlerts}rem)` : 0
+			insetBlockEnd: (this._totalSiblingHeightBelow || this._numAlertsBelow) ? `calc(${this._totalSiblingHeightBelow}px + ${spaceBetweenAlerts}rem)` : 0
 		};
 		const containerClasses = {
+			'd2l-alert-toast-container-not-popover': !usePopover,
 			'd2l-alert-toast-container': true,
 			'd2l-alert-toast-container-close-clicked': this._closeClicked,
 			'd2l-alert-toast-container-lowest': !this._totalSiblingHeightBelow,
@@ -228,18 +239,19 @@ class AlertToast extends LitElement {
 			<div
 				class="${classMap(containerClasses)}"
 				data-state="${this._state}"
+				popover="${ifDefined(usePopover ? 'manual' : undefined)}"
 				style="${styleMap(containerStyles)}"
-				@transitionend=${this._onTransitionEnd}>
+				@transitionend="${this._onTransitionEnd}">
 				<d2l-alert
-					@blur=${this._onBlur}
+					@blur="${this._onBlur}"
 					button-text="${ifDefined(this.buttonText)}"
-					@d2l-alert-button-press=${this._handleButtonPress}
-					@d2l-alert-close=${this._onCloseClicked}
-					@focus=${this._onFocus}
+					@d2l-alert-button-press="${this._handleButtonPress}"
+					@d2l-alert-close="${this._onCloseClicked}"
+					@focus="${this._onFocus}"
 					?has-close-button="${!this.hideCloseButton}"
 					?hidden="${this._state === states.CLOSED}"
-					@mouseenter=${this._onMouseEnter}
-					@mouseleave=${this._onMouseLeave}
+					@mouseenter="${this._onMouseEnter}"
+					@mouseleave="${this._onMouseLeave}"
 					role="${ifDefined(this._state !== states.CLOSED ? 'alert' : undefined)}"
 					subtext="${ifDefined(this.subtext)}"
 					type="${ifDefined(this.type)}">
@@ -395,8 +407,15 @@ class AlertToast extends LitElement {
 		}
 	}
 
-	_openChanged(newOpen) {
+	async _openChanged(newOpen) {
 		if (newOpen) {
+
+			// Clean-up when removing GAUD-10337-use-alert-toast-popover
+			if (alertToastPopoverFlag) {
+				await this.updateComplete; // wait for popover attribute before managing top-layer
+				if (this.isConnected) this.shadowRoot.querySelector('[popover="manual"]')?.showPopover();
+			}
+
 			if (this._state === states.CLOSING) {
 				this._state = states.OPENING;
 			} else if (this._state === states.CLOSED) {
@@ -415,6 +434,11 @@ class AlertToast extends LitElement {
 		} else {
 			if (!this._innerContainer) return;
 
+			// Clean-up when removing GAUD-10337-use-alert-toast-popover
+			if (alertToastPopoverFlag) {
+				this.shadowRoot.querySelector('[popover="manual"]')?.hidePopover();
+			}
+
 			if (activeReduceMotion || this._state === states.PREOPENING) {
 				cancelAnimationFrame(this._preopenFrame);
 			} else if (this._state === states.OPENING || this._state === states.OPEN || this._state === states.SLIDING) {

components/button/test/button-copy.vdiff.js

@@ -49,6 +49,7 @@ describe('button-copy', () => {
 			writeTextStub = stub(navigator.clipboard, 'writeText').resolves();
 			const elem = await fixture(template, { viewport: { width: 700, height: 200 } });
 			await clickAction(elem);
+			await elem.updateComplete;
 
 			clock.tick(4000);
 			await elem.updateComplete;

components/button/test/button-subtle-copy.vdiff.js

@@ -50,6 +50,7 @@ describe('button-subtle-copy', () => {
 			writeTextStub = stub(navigator.clipboard, 'writeText').resolves();
 			const elem = await fixture(template, { viewport: { width: 500, height: 200 } });
 			await clickAction(elem);
+			await elem.updateComplete;
 
 			clock.tick(4000);
 			await elem.updateComplete;