@brightspace-ui/core 3.36.2 → 3.36.4

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

@@ -136,6 +136,11 @@ export const dialogStyles = css`
 		position: relative; /* make this the positioned parent for absolute positioned elements like d2l-template-primary-secondary */
 	}
 
+	:host([full-height]) .d2l-dialog-content > div {
+		box-sizing: border-box;
+		height: 100%;
+	}
+
 	.d2l-dialog-outer-scroll .d2l-dialog-content {
 		overflow: auto;
 	}

package/package.json

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