@brightspace-ui/core 2.16.0 → 2.16.1

package/components/dialog/dialog-confirm.js

@@ -89,7 +89,12 @@ class DialogConfirm extends DialogMixin(LitElement) {
 		const descId = (this.titleText && this.text) ? this._textId : undefined;
 		return this._render(
 			inner,
-			{ labelId: labelId, descId: descId, role: 'alertdialog' }
+			{
+				descId: descId,
+				fullscreenMobile: false,
+				labelId: labelId,
+				role: 'alertdialog'
+			}
 		);
 	}
 

package/components/dialog/dialog-fullscreen.js

@@ -154,11 +154,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					padding-bottom: 15px;
 				}
 
-				.d2l-dialog-header > div > d2l-button-icon {
-					flex: none;
-					margin: -8px -13px 0 15px;
-				}
-
 				.d2l-dialog-footer.d2l-footer-no-content {
 					padding: 0 0 5px 0;
 				}
@@ -171,17 +166,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					height: calc(100% - 1px);
 				}
 
-				:host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
-					margin-left: -13px;
-					margin-right: 15px;
-				}
-
-				dialog.d2l-dialog-outer,
-				div.d2l-dialog-outer {
-					margin: 0 !important;
-					min-width: calc(var(--d2l-vw, 1vw) * 100);
-					top: 42px;
-				}
 			}
 		`];
 	}
@@ -226,9 +210,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 				: 0;
 			const startTop = mediaQueryList.matches ? 42 : 0;
 			topOverride = iframeTop + startTop;
-		} else if (window.innerWidth <= 615 || (window.innerWidth <= 900 && window.innerHeight <= 420)) {
-			heightOverride.height = `${window.innerHeight - 42 - 2}px`; // render full window height - 42px top padding - 2px border
-			heightOverride.minHeight = heightOverride.height;
 		}
 
 		let loading = null;
@@ -269,7 +250,11 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 		`;
 		return this._render(
 			inner,
-			{ labelId: this._titleId, role: 'dialog' },
+			{
+				fullscreenMobile: true,
+				labelId: this._titleId,
+				role: 'dialog'
+			},
 			topOverride
 		);
 	}

package/components/dialog/dialog-mixin.js

@@ -1,4 +1,5 @@
 import '../focus-trap/focus-trap.js';
+import '../../helpers/viewport-size.js';
 import { allowBodyScroll, preventBodyScroll } from '../backdrop/backdrop.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
@@ -420,6 +421,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			'd2l-dialog-outer-nested': !this._useNative && this._parentDialog,
 			'd2l-dialog-outer-nested-showing': !this._useNative && this._nestedShowing,
 			'd2l-dialog-outer-scroll': this._scroll,
+			'd2l-dialog-fullscreen-mobile': info.fullscreenMobile,
 			'd2l-dialog-fullscreen-within': this._fullscreenWithin !== 0
 		};
 

package/components/dialog/dialog-styles.js

@@ -154,12 +154,29 @@ export const dialogStyles = css`
 		.d2l-dialog-header {
 			padding: 14px 20px 16px 20px;
 		}
+		.d2l-dialog-fullscreen-mobile .d2l-dialog-header > div > d2l-button-icon {
+			margin: -8px -13px 0 15px;
+		}
+		:host([dir="rtl"]) .d2l-dialog-fullscreen-mobile .d2l-dialog-header > div > d2l-button-icon {
+			margin-left: -13px;
+			margin-right: 15px;
+		}
 		.d2l-dialog-content {
 			padding: 0 20px;
 		}
 		.d2l-dialog-footer {
 			padding: 20px 20px 2px 20px;
 		}
+		.d2l-dialog-outer.d2l-dialog-fullscreen-mobile {
+			margin: 0 !important;
+			min-width: calc(var(--d2l-vw, 1vw) * 100);
+			top: 42px;
+		}
+		:host(:not([in-iframe])) dialog.d2l-dialog-outer.d2l-dialog-fullscreen-mobile,
+		:host(:not([in-iframe])) div.d2l-dialog-outer.d2l-dialog-fullscreen-mobile {
+			height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
+			min-height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
+		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/components/dialog/dialog.js

@@ -1,6 +1,5 @@
 import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
-import '../../helpers/viewport-size.js';
 import { AsyncContainerMixin, asyncStates } from '../../mixins/async-container/async-container-mixin.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
@@ -73,30 +72,6 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 				padding: 0 0 5px 0;
 			}
 
-			@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
-
-				.d2l-dialog-outer {
-					margin: 0 !important;
-					min-width: calc(var(--d2l-vw, 1vw) * 100);
-					top: 42px;
-				}
-
-				.d2l-dialog-header > div > d2l-button-icon {
-					margin: -8px -13px 0 15px;
-				}
-
-				:host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
-					margin-left: -13px;
-					margin-right: 15px;
-				}
-
-				:host(:not([in-iframe])) dialog.d2l-dialog-outer,
-				:host(:not([in-iframe])) div.d2l-dialog-outer {
-					height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
-					min-height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
-				}
-			}
-
 		`];
 	}
 
@@ -167,7 +142,7 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 
 		if (!this._titleId) this._titleId = getUniqueId();
 		const inner = html`
-			<div class="d2l-dialog-inner"  style=${styleMap(heightOverride)}>
+			<div class="d2l-dialog-inner" style=${styleMap(heightOverride)}>
 				<div class="d2l-dialog-header">
 					<div>
 						<h2 id="${this._titleId}" class="d2l-heading-3">${this.titleText}</h2>
@@ -184,7 +159,12 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 		const descId = (this.describeContent) ? this._textId : undefined;
 		return this._render(
 			inner,
-			{ labelId: this._titleId, descId: descId, role: 'dialog' },
+			{
+				descId: descId,
+				fullscreenMobile: true,
+				labelId: this._titleId,
+				role: 'dialog'
+			},
 			topOverride
 		);
 	}

package/package.json

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