@brightspace-ui/core 2.89.0 → 2.90.0

package/components/dialog/dialog-fullscreen.js

@@ -127,10 +127,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					animation: d2l-dialog-fullscreen-open 400ms ease-out;
 				}
 
-				dialog::backdrop {
-					transition: opacity 200ms ease-out;
-				}
-
 				:host([_state="showing"]) dialog::backdrop {
 					transition-duration: 400ms;
 				}

package/components/dialog/dialog-mixin.js

@@ -27,7 +27,7 @@ if (window.D2L.DialogMixin.preferNative === undefined) {
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const abortAction = 'abort';
-const defaultMargin = { top: 100, right: 30, bottom: 30, left: 30 };
+const defaultMargin = { top: 75, right: 30, bottom: 30, left: 30 };
 
 export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
@@ -42,7 +42,8 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			 * The optional title for the dialog
 			 */
 			titleText: { type: String, attribute: 'title-text' },
-			_autoSize: { type: Boolean, attribute: false },
+			_autoSize: { type: Boolean, attribute: 'auto-size', reflect: true },
+			_fullHeight: { type: Boolean, attribute: 'full-height', reflect: true },
 			_fullscreenWithin: { type: Number },
 			_height: { type: Number },
 			_inIframe: { type: Boolean, attribute: 'in-iframe', reflect: true },
@@ -65,6 +66,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this.opened = false;
 		this._autoSize = true;
 		this._dialogId = getUniqueId();
+		this._fullHeight = false;
 		this._fullscreenWithin = 0;
 		this._handleMvcDialogOpen = this._handleMvcDialogOpen.bind(this);
 		this._inIframe = false;
@@ -259,7 +261,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		const footer = this.shadowRoot.querySelector('.d2l-dialog-footer');
 		if (footer) preferredHeight += Math.ceil(footer.getBoundingClientRect().height);
 
-		const height = (preferredHeight < availableHeight ? preferredHeight : availableHeight);
+		const exceedsHeight = preferredHeight > availableHeight;
+		this._fullHeight = !this._ifrauContextInfo && exceedsHeight;
+
+		const height = exceedsHeight ? availableHeight : preferredHeight;
 		return height;
 	}
 
@@ -437,7 +442,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			if (this._ifrauContextInfo) styles.top = `${this._top}px`;
 			if (this._ifrauContextInfo) styles.bottom = 'auto';
 			if (this._left) styles.left = `${this._left}px`;
-			if (this._height) styles.height = `${this._height}px`;
+			if (this._height && !this._fullHeight) styles.height = `${this._height}px`;
 			if (this._width) styles.width = `${this._width}px`;
 			else styles.width = 'auto';
 		} else if (iframeTopOverride && this._ifrauContextInfo) {

package/components/dialog/dialog-styles.js

@@ -21,19 +21,24 @@ export const dialogStyles = css`
 	}
 
 	.d2l-dialog-outer {
-		animation: d2l-dialog-close 200ms ease-in;
+		animation: d2l-dialog-close 200ms ease-out;
 		background-color: white;
 		border: 1px solid var(--d2l-color-mica);
 		border-radius: 8px;
 		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 		box-sizing: border-box;
 		position: fixed; /* also required for native to override position: absolute */
-		top: 100px;
+		top: 75px;
+	}
+
+	:host([auto-size][full-height]) > .d2l-dialog-outer {
+		bottom: 1.5rem;
+		top: 1.5rem;
 	}
 
 	:host([_state="showing"]) > .d2l-dialog-outer {
 		/* must target direct child to avoid ancestor from interfering with closing child dialogs in Legacy-Edge */
-		animation: d2l-dialog-open 200ms ease-in;
+		animation: d2l-dialog-open 200ms ease-out;
 	}
 
 	@keyframes d2l-dialog-close {
@@ -70,7 +75,7 @@ export const dialogStyles = css`
 		/* cannot use variables inside of ::backdrop : https://github.com/whatwg/fullscreen/issues/124 */
 		background-color: #f9fbff;
 		opacity: 0;
-		transition: opacity 200ms ease-in;
+		transition: opacity 200ms ease-out;
 	}
 
 	:host([_state="showing"]) dialog::backdrop {

package/package.json

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