@brightspace-ui/core 2.81.1 → 2.82.0

package/components/dialog/demo/dialog-fullscreen.html

@@ -180,6 +180,64 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Fullscreen Dialog using width property</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openWidth">Show Dialog</d2l-button>
+					<d2l-dropdown-more text="Open!">
+						<d2l-dropdown-menu>
+							<d2l-menu label="Dialog">
+								<d2l-menu-item id="dropdownWidth" text="See dialog"></d2l-menu-item>
+							</d2l-menu>
+						</d2l-dropdown-menu>
+					</d2l-dropdown-more>
+					<d2l-dialog-fullscreen id="dialogWidth" title-text="Fullscreen Title" width="1800">
+						<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>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>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>
+						<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>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>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>
+						<d2l-dropdown-button-subtle text="More">
+							<d2l-dropdown-content mobile-tray="bottom">
+								<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>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>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>
+							</d2l-dropdown-content>
+						</d2l-dropdown-button-subtle>
+						<d2l-filter>
+							<d2l-filter-dimension-set key="course" text="Course" select-all>
+								<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+							</d2l-filter-dimension-set>
+						</d2l-filter>
+						<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog-fullscreen>
+					<script>
+						document.querySelector('#openWidth').addEventListener('click', () => {
+							document.querySelector('#dialogWidth').opened = true;
+						});
+						document.querySelector('#dropdownWidth').addEventListener('click', () => {
+							document.querySelector('#dialogWidth').opened = true;
+						});
+						document.querySelector('#dialogWidth').addEventListener('d2l-dialog-close', (e) => {
+							console.log('confirm action:', e.detail.action);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-fullscreen.js

@@ -27,9 +27,14 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 			 * @type {boolean}
 			 */
 			async: { type: Boolean },
+
+			/**
+			 * The preferred width (unit-less) for the dialog. Maximum 1170.
+			 */
+			width: { type: Number },
 			_hasFooterContent: { type: Boolean, attribute: false },
 			_icon: { type: String, attribute: false },
-			_headerStyle: { type: String, attribute: false }
+			_headerStyle: { type: String, attribute: false },
 		};
 	}
 
@@ -44,6 +49,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 				text-align: center;
 			}
 
+			.d2l-dialog-outer {
+				max-width: calc(100% - 3rem);
+			}
+
 			@media (min-width: 616px) {
 
 				.d2l-dialog-header {
@@ -78,7 +87,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					animation: d2l-dialog-fullscreen-close 200ms ease-out;
 					border-radius: 8px;
 					margin: 1.5rem;
-					max-width: 1170px;
 					top: 0;
 					width: auto;
 				}
@@ -179,6 +187,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 		this._headerStyle = 'd2l-heading-2';
 		this._handleResize = this._handleResize.bind(this);
 		this._handleResize();
+		this.width = 1170;
 	}
 
 	get asyncContainerCustom() {
@@ -196,7 +205,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 	}
 
 	render() {
-
+		this._width = Math.max(1170, this.width);
 		const heightOverride = {} ;
 		let topOverride = null;
 		if (this._ifrauContextInfo) {

package/components/dialog/dialog-mixin.js

@@ -432,6 +432,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	_render(inner, info, iframeTopOverride) {
 
 		const styles = {};
+		if (this._width) styles.width = `${this._width}px`;
 		if (this._autoSize) {
 			if (this._ifrauContextInfo) styles.top = `${this._top}px`;
 			if (this._ifrauContextInfo) styles.bottom = 'auto';

package/custom-elements.json

@@ -1816,6 +1816,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "width",
+          "description": "The preferred width (unit-less) for the dialog. Maximum 1170.",
+          "type": "number",
+          "default": "1170"
+        },
         {
           "name": "title-text",
           "description": "The optional title for the dialog",
@@ -1836,6 +1842,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "width",
+          "attribute": "width",
+          "description": "The preferred width (unit-less) for the dialog. Maximum 1170.",
+          "type": "number",
+          "default": "1170"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""

package/package.json

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