@brightspace-ui/core 3.104.0 → 3.105.0

package/components/dialog/demo/dialog.html

@@ -15,6 +15,7 @@
 			import '../../filter/filter.js';
 			import '../../filter/filter-dimension-set.js';
 			import '../../filter/filter-dimension-set-value.js';
+			import '../../inputs/input-checkbox.js';
 			import '../../list/demo/demo-list.js';
 			import '../dialog.js';
 			import './dialog-async-content.js';
@@ -296,6 +297,38 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog (no content scrolling)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openNoScrollDialog">Show Dialog</d2l-button>
+					<d2l-dialog id="noScrollDialog" title-text="Dialog Title">
+						<d2l-input-checkbox id="noScroll">Show extra paragraphs</d2l-input-checkbox>
+						<div>
+							<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+							<p id="p2" style="display: none;">Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+							<p id="p3" style="display: none;">Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						</div>
+						<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('#noScroll').addEventListener('change', async(e) => {
+							const dialog = document.querySelector('#noScrollDialog');
+							dialog.noContentScroll = true;
+							const display = e.target.checked ? 'block' : 'none';
+							dialog.querySelector('#p2').style.display = display;
+							dialog.querySelector('#p3').style.display = display;
+							await dialog.resize();
+							dialog.noContentScroll = false;
+						});
+						document.querySelector('#openNoScrollDialog').addEventListener('click', () => {
+							document.querySelector('#noScrollDialog').opened = true;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-mixin.js

@@ -41,7 +41,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			 * Whether or not the dialog is open
 			 */
 			opened: { type: Boolean, reflect: true },
-
+			/**
+			 * ADVANCED: Opt out of dialog content scrolling
+			 */
+			noContentScroll: { type: Boolean, attribute: 'no-content-scroll', reflect: true },
 			/**
 			 * The optional title for the dialog
 			 */
@@ -68,6 +71,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	constructor() {
 		super();
 		this.focusableContentElemPresent = false;
+		this.noContentScroll = false;
 		this.opened = false;
 		this._autoSize = true;
 		this._dialogId = getUniqueId();

package/components/dialog/dialog-styles.js

@@ -147,7 +147,7 @@ export const dialogStyles = css`
 		height: 100%;
 	}
 
-	.d2l-dialog-outer-scroll .d2l-dialog-content {
+	:host(:not([no-content-scroll])) .d2l-dialog-outer-scroll .d2l-dialog-content {
 		overflow: auto;
 	}
 

package/custom-elements.json

@@ -2072,6 +2072,12 @@
           "description": "The optional title for the dialog",
           "type": "string"
         },
+        {
+          "name": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether or not the dialog is open",
@@ -2104,6 +2110,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noContentScroll",
+          "attribute": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -2161,6 +2174,12 @@
           "description": "REQUIRED: the title for the dialog",
           "type": "string"
         },
+        {
+          "name": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether or not the dialog is open",
@@ -2210,6 +2229,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noContentScroll",
+          "attribute": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -2283,6 +2309,12 @@
           "description": "REQUIRED: the title for the dialog",
           "type": "string"
         },
+        {
+          "name": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether or not the dialog is open",
@@ -2346,6 +2378,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noContentScroll",
+          "attribute": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",

package/package.json

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