@brightspace-ui/core 3.299.0 → 3.300.0

package/components/alert/alert-toast.js

@@ -1,9 +1,21 @@
 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';
 
+let mockedPopoverSupported = null;
+export function mockPopoverSupported(value) { mockedPopoverSupported = value; }
+export function resetPopoverSupported() { mockedPopoverSupported = null; }
+function isPopoverSupported() {
+	return mockedPopoverSupported ?? ('popover' in HTMLElement.prototype);
+}
+
+function usePopover() {
+	return getFlag('GAUD-10337-use-alert-toast-popover', true) && isPopoverSupported();
+}
+
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 let activeReduceMotion = reduceMotion;
 export function disableReducedMotionForTesting() {
@@ -88,15 +100,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 +150,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 +232,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 +246,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)}">
@@ -397,6 +416,14 @@ class AlertToast extends LitElement {
 
 	_openChanged(newOpen) {
 		if (newOpen) {
+
+			if (usePopover()) {
+				// wait for popover attribute before managing top-layer (needed for case where toast is open immediately)
+				requestAnimationFrame(() => {
+					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 +442,10 @@ class AlertToast extends LitElement {
 		} else {
 			if (!this._innerContainer) return;
 
+			if (usePopover()) {
+				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) {

package/components/inputs/docs/input-text.md

@@ -70,7 +70,7 @@ The `<d2l-input-text>` element is a simple wrapper around the native `<input typ
 | `required` | Boolean | Indicates that a value is required |
 | `size` | Number | Size of the input |
 | `step` | String | For number inputs, sets the step size |
-| `type` | String, default: `text` | Can be one of `text`, `email`, `password`, `tel`, `url`. Type `number` is deprecated, use [d2l-input-number](./input-number.md) instead. |
+| `type` | String, default: `text` | Can be one of `text`, `email`, `password`, `tel`, `url`. Type `number` is deprecated, use [d2l-input-number](./input-numeric.md) instead. |
 | `unit` | String | Unit associated with the input value, displayed next to input and announced as part of the label |
 | `value` | String, default: `''` | Value of the input |
 

package/components/page/page-panel-mixin.js

@@ -23,6 +23,7 @@ export const pagePanelStyles = css`
 
 	.header-start,
 	.header-end {
+		align-items: center;
 		display: flex;
 		gap: 6px;
 	}

package/custom-elements.json

@@ -63,7 +63,7 @@
         },
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container {\\n\\t\\t\\tborder-radius: 0.3rem;\\n\\t\\t\\tbox-shadow: 0 0.1rem 0.6rem 0 rgba(0, 0, 0, 0.1);\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\tmargin: 0 auto 1.5rem;\\n\\t\\t\\tmax-width: 600px;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tright: 0;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\tz-index: 10000;\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container:not([data-state=\\\"closed\\\"]) {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"opening\\\"],\\n\\t\\t.d2l-alert-toast-container.d2l-alert-toast-container-lowest[data-state=\\\"closing\\\"] {\\n\\t\\t\\ttransition-duration: 600ms;\\n\\t\\t\\ttransition-property: opacity, transform;\\n\\t\\t\\ttransition-timing-function: ease;\\n\\t\\t}\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"closing\\\"] {\\n\\t\\t\\ttransition: opacity 200ms ease;\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container.d2l-alert-toast-container-close-clicked[data-state=\\\"closing\\\"] {\\n\\t\\t\\ttransition-duration: 200ms;\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"preopening\\\"],\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"closing\\\"] {\\n\\t\\t\\topacity: 0;\\n\\t\\t}\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"preopening\\\"],\\n\\t\\t.d2l-alert-toast-container.d2l-alert-toast-container-lowest[data-state=\\\"closing\\\"] {\\n\\t\\t\\ttransform: translateY(calc(100% + 1.5rem));\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"opening\\\"] {\\n\\t\\t\\topacity: 1;\\n\\t\\t\\ttransform: translateY(0);\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"sliding\\\"] {\\n\\t\\t\\ttransition: bottom 600ms ease;\\n\\t\\t}\\n\\n\\t\\td2l-alert {\\n\\t\\t\\tanimation: none;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 615px) {\\n\\t\\t\\t.d2l-alert-toast-container {\\n\\t\\t\\t\\tmargin-bottom: 12px;\\n\\t\\t\\t\\twidth: calc(100% - 16px);\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container {\\n\\t\\t\\tbackground-color: transparent; /* override popover default */\\n\\t\\t\\tborder: none; /* override popover */\\n\\t\\t\\tborder-radius: 0.3rem;\\n\\t\\t\\tbox-shadow: 0 0.1rem 0.6rem 0 rgba(0, 0, 0, 0.1);\\n\\t\\t\\tcolor: var(--d2l-theme-text-color-static-standard);  /* override popover default */\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\tinset: auto 0 0 0;  /* override popover default */\\n\\t\\t\\tmargin: 0 auto 1.5rem;\\n\\t\\t\\tmax-width: 600px;\\n\\t\\t\\tpadding: 0; /* override popover */\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\t\\t.d2l-alert-toast-container-not-popover {\\n\\t\\t\\tz-index: 10000;\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container:not([data-state=\\\"closed\\\"]) {\\n\\t\\t\\tdisplay: block;\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"opening\\\"],\\n\\t\\t.d2l-alert-toast-container.d2l-alert-toast-container-lowest[data-state=\\\"closing\\\"] {\\n\\t\\t\\ttransition-duration: 600ms;\\n\\t\\t\\ttransition-property: opacity, transform;\\n\\t\\t\\ttransition-timing-function: ease;\\n\\t\\t}\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"closing\\\"] {\\n\\t\\t\\ttransition: opacity 200ms ease;\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container.d2l-alert-toast-container-close-clicked[data-state=\\\"closing\\\"] {\\n\\t\\t\\ttransition-duration: 200ms;\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"preopening\\\"],\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"closing\\\"] {\\n\\t\\t\\topacity: 0;\\n\\t\\t}\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"preopening\\\"],\\n\\t\\t.d2l-alert-toast-container.d2l-alert-toast-container-lowest[data-state=\\\"closing\\\"] {\\n\\t\\t\\ttransform: translateY(calc(100% + 1.5rem));\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"opening\\\"] {\\n\\t\\t\\topacity: 1;\\n\\t\\t\\ttransform: translateY(0);\\n\\t\\t}\\n\\n\\t\\t.d2l-alert-toast-container[data-state=\\\"sliding\\\"] {\\n\\t\\t\\ttransition: inset-block-end 600ms ease;\\n\\t\\t}\\n\\n\\t\\td2l-alert {\\n\\t\\t\\tanimation: none;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 615px) {\\n\\t\\t\\t.d2l-alert-toast-container {\\n\\t\\t\\t\\tmargin-bottom: 12px;\\n\\t\\t\\t\\twidth: calc(100% - 16px);\\n\\t\\t\\t}\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "hideCloseButton",

package/package.json

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