@brightspace-ui/core 3.36.3 → 3.36.5

package/components/dialog/demo/dialog.html

@@ -229,6 +229,24 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog (full-height with iframe)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openFullHeight">Show Dialog</d2l-button>
+					<d2l-dialog id="dialogFullHeight" full-height title-text="Dialog Title">
+						<iframe id="iframeFullHeight" style="box-sizing: border-box; display: block; height: 100%; width: 100%;"></iframe>
+						<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button><d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog>
+					<script>
+						document.querySelector('#iframeFullHeight').src = window.location.href.substring(0, window.location.href.indexOf('/components'));
+						document.querySelector('#openFullHeight').addEventListener('click', () => {
+							document.querySelector('#dialogFullHeight').opened = true;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-styles.js

@@ -152,7 +152,7 @@ export const dialogStyles = css`
 	.d2l-dialog-footer {
 		box-sizing: border-box;
 		flex: none;
-		padding: 30px 30px 12px 30px; /* 18px margin below footer children */
+		padding: 18px 30px 0 30px; /* 18px margin below footer children */
 		position: relative; /* stack footer overflow shadow on top of content */
 	}
 
@@ -183,6 +183,7 @@ export const dialogStyles = css`
 	}
 
 	@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
+
 		.d2l-dialog-header {
 			padding: 14px 20px 16px 20px;
 		}
@@ -198,18 +199,19 @@ export const dialogStyles = css`
 			padding: 0 20px;
 		}
 		.d2l-dialog-footer {
-			padding: 20px 20px 2px 20px;
+			padding: 18px 20px 0 20px;
 		}
 		.d2l-dialog-outer.d2l-dialog-fullscreen-mobile {
 			margin: 0 !important;
 			min-width: calc(var(--d2l-vw, 1vw) * 100);
-			top: 42px;
+			top: 5%;
 		}
 		: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);
+			height: calc(var(--d2l-vh, 1vh) * 95);
+			min-height: calc(var(--d2l-vh, 1vh) * 95);
 		}
+
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/components/dialog/dialog.js

@@ -83,6 +83,15 @@ 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-header,
+				:host([critical]) .d2l-dialog-header {
+					padding-bottom: 9px;
+				}
+
+			}
+
 		`];
 	}
 

package/package.json

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