@brightspace-ui/core 1.232.0 → 1.233.3

package/components/dialog/README.md

@@ -184,7 +184,7 @@ The `d2l-dialog-confirm` element is a simple confirmation dialog for prompting t
 
 | Property | Type | Description |
 |--|--|--|
-| `text` | String, required | The required text content for the confirmation dialog |
+| `text` | String, required | The text content for the confirmation dialog. Newline characters (`
` in HTML or `\n` in JavaScript) will render as multiple paragraphs. |
 | `opened` | Boolean | Whether or not the dialog is open |
 | `title-text` | String | The optional title for the confirmation dialog |
 

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

@@ -37,6 +37,26 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Confirm Dialog (Multi Paragraph)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openConfirmMultiParagraph">Show Confirm</d2l-button>
+					<d2l-dialog-confirm id="confirmMultiParagraph" title-text="Confirm Title" text="Are you sure you want more cookies?&#10;Are you sure you want more donuts?">
+						<d2l-button slot="footer" primary data-dialog-action="ok">Yes</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>No</d2l-button>
+					</d2l-dialog-confirm>
+					<script>
+						document.querySelector('#openConfirmMultiParagraph').addEventListener('click', () => {
+							document.querySelector('#confirmMultiParagraph').opened = true;
+						});
+						document.querySelector('#confirmMultiParagraph').addEventListener('d2l-dialog-close', (e) => {
+							console.log('confirm action:', e.detail.action);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Confirm Dialog (No Title)</h2>
 
 			<d2l-demo-snippet>

package/components/dialog/dialog-confirm.js

@@ -14,7 +14,7 @@ class DialogConfirm extends DialogMixin(LitElement) {
 	static get properties() {
 		return {
 			/**
-			 * REQUIRED: The text content for the confirmation dialog
+			 * REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\n` in JavaScript) will render as multiple paragraphs.
 			 * @type {string}
 			 */
 			text: { type: String }
@@ -36,6 +36,18 @@ class DialogConfirm extends DialogMixin(LitElement) {
 				padding-top: 0;
 			}
 
+			.d2l-dialog-content p {
+				margin: 1rem 0;
+			}
+
+			.d2l-dialog-content p:first-child {
+				margin-top: 0;
+			}
+
+			.d2l-dialog-content p:last-child {
+				margin-bottom: 0;
+			}
+
 			@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
 
 				dialog.d2l-dialog-outer,
@@ -65,7 +77,7 @@ class DialogConfirm extends DialogMixin(LitElement) {
 						<div><h2 id="${this._titleId}" class="d2l-heading-3">${this.titleText}</h2></div>
 					</div>` : null}
 				<div id="${this._textId}" class="d2l-dialog-content">
-					<div>${this.text}</div>
+					<div>${this.text ? this.text.split('\n').map(line => html`<p>${line}</p>`) : null}</div>
 				</div>
 				<div class="d2l-dialog-footer">
 					<slot name="footer" class="d2l-dialog-footer-slot"></slot>

package/components/dialog/dialog-mixin.js

@@ -197,7 +197,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		let preferredHeight = 0;
 
 		const header = this.shadowRoot.querySelector('.d2l-dialog-header');
-		if (header) preferredHeight += header.scrollHeight;
+		if (header) preferredHeight += Math.ceil(header.getBoundingClientRect().height);
 
 		const contentOuter = this.shadowRoot.querySelector('.d2l-dialog-content');
 		const content = this.shadowRoot.querySelector('.d2l-dialog-content > div');
@@ -210,7 +210,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		}
 
 		const footer = this.shadowRoot.querySelector('.d2l-dialog-footer');
-		if (footer) preferredHeight += footer.scrollHeight;
+		if (footer) preferredHeight += Math.ceil(footer.getBoundingClientRect().height);
 
 		const height = (preferredHeight < availableHeight ? preferredHeight : availableHeight);
 		return height;

package/components/list/list-item-mixin.js

@@ -73,6 +73,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			_breakpoint: { type: Number },
 			_displayKeyboardTooltip: { type: Boolean },
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
+			_fullscreenWithin: { type: Boolean, attribute: '_fullscreen-within', reflect: true },
 			_hoveringPrimaryAction: { type: Boolean },
 			_focusing: { type: Boolean },
 			_focusingPrimaryAction: { type: Boolean },
@@ -92,7 +93,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				display: none;
 			}
 			:host([_tooltip-showing]),
-			:host([_dropdown-open]) {
+			:host([_dropdown-open]),
+			:host([_fullscreen-within]) {
 				z-index: 10;
 			}
 			:host(:first-child) d2l-list-item-generic-layout[data-separators="between"] {
@@ -275,6 +277,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				width: 100%;
 				z-index: 5;
 			}
+			:host([_fullscreen-within]) .d2l-list-item-active-border,
+			:host([_fullscreen-within]) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
+				display: none;
+			}
 			d2l-tooltip > div {
 				font-weight: 700;
 			}
@@ -298,6 +304,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
+		this._fullscreenWithin = false;
+		this._fullscreenWithinCount = 0;
 	}
 
 	get breakpoints() {
@@ -421,6 +429,12 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		this._focusingPrimaryAction = false;
 	}
 
+	_onFullscreenWithin(e) {
+		if (e.detail.state) this._fullscreenWithinCount += 1;
+		else this._fullscreenWithinCount -= 1;
+		this._fullscreenWithin = (this._fullscreenWithinCount > 0);
+	}
+
 	_onMouseEnter() {
 		this._hovering = true;
 	}
@@ -460,6 +474,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			<d2l-list-item-generic-layout
 				@focusin="${this._onFocusIn}"
 				@focusout="${this._onFocusOut}"
+				@d2l-fullscreen-within="${this._onFullscreenWithin}"
 				class="${classMap(classes)}"
 				data-breakpoint="${this._breakpoint}"
 				data-separators="${ifDefined(this._separators)}"

package/custom-elements.json

@@ -1460,7 +1460,7 @@
       "attributes": [
         {
           "name": "text",
-          "description": "REQUIRED: The text content for the confirmation dialog",
+          "description": "REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\\n` in JavaScript) will render as multiple paragraphs.",
           "type": "string"
         },
         {
@@ -1479,7 +1479,7 @@
         {
           "name": "text",
           "attribute": "text",
-          "description": "REQUIRED: The text content for the confirmation dialog",
+          "description": "REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\\n` in JavaScript) will render as multiple paragraphs.",
           "type": "string"
         },
         {

package/package.json

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

package/templates/primary-secondary/demo/index.html

@@ -7,6 +7,8 @@
 		<script type="module">
 			import '../../../components/demo/demo-page.js';
 			import '../primary-secondary.js';
+			import '../../../components/button/button.js';
+			import '../../../components/dialog/dialog-fullscreen.js';
 		</script>
 	</head>
 	<body>
@@ -17,8 +19,28 @@
 				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt, velit quis vulputate condimentum, erat nibh accumsan augue, sed rutrum nibh elit et augue. Cras sed purus sit amet tellus gravida cursus eget ac nulla. Sed volutpat volutpat sodales. Mauris sed sodales odio. Aenean sem tortor, aliquam in leo eget, commodo condimentum odio. Pellentesque eu efficitur ante. Cras non diam vitae nibh condimentum egestas. Proin malesuada dapibus dapibus. Nam congue a risus id viverra. Phasellus hendrerit ex diam, eget semper nunc efficitur id. Nullam feugiat libero urna, quis bibendum urna dignissim ac. Donec convallis nulla eu nulla tempor, molestie elementum elit blandit. Ut eget ipsum eget odio elementum commodo.
 			</div>
 			<div slot="secondary">
+					<d2l-button id="open">Show Dialog</d2l-button>
+					<d2l-dialog-fullscreen id="dialogFullscreen" title-text="Fullscreen Title">
+						<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-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('#open').addEventListener('click', () => {
+							document.querySelector('#dialogFullscreen').opened = true;
+						});
+						document.querySelector('#dialogFullscreen').addEventListener('d2l-dialog-close', (e) => {
+							console.log('confirm action:', e.detail.action);
+						});
+					</script>
 				<p>I'm in the <b>secondary</b> slot of the <b>d2l-template-primary-secondary</b> component!</p>
-				Quisque justo risus, elementum quis condimentum vitae, venenatis sit amet nisl. Vivamus interdum pretium libero dictum eleifend. Donec eros tortor, facilisis eget maximus in, malesuada a magna. Nulla ac felis turpis. Donec pellentesque est in rhoncus tempus. Proin ac purus porttitor, interdum est a, venenatis mi. Maecenas nunc nulla, viverra ut ornare id, luctus eu nulla. Pellentesque massa turpis, porta ut tincidunt ut, ullamcorper vitae urna. Nam congue euismod placerat. Vestibulum aliquet, metus vitae viverra posuere, lacus urna hendrerit turpis, vel laoreet ligula odio et nisl. Mauris id lectus magna. Sed gravida tincidunt sapien quis dapibus.
+				Quisque justo risus, elementum quis condimentum vitae, venenatis sit amet nisl. Vivamus interdum pretium libero dictum eleifend. Donec eros tortor, facilisis eget maximus in, malesuada a magna. Nulla ac felis turpis. Donec pellentesque est in rhoncus tempus. Proin ac purus porttitor, interdum est a, venenatis mi. Maecenas nunc nulla, viverra ut ornare id, luctus eu nulla. Pellentesque massa turpis, porta ut tincidunt ut, ullamcorper vitae urna. Nam congue euismod placerat. Vestibulum aliquet, metus vitae viverra posuere, lacus urna hendrerit turpis, vel laoreet ligula odio et nisl. Mauris id lectus magna. Sed gravida tincidunt sapien quis dapibus.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 spankerDeadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spankerDeadlights 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
 			</div>
 			<div slot="footer">I'm in the <b>footer</b> slot of the <b>d2l-template-primary-secondary</b> component!</div>
 		</d2l-template-primary-secondary>

package/templates/primary-secondary/primary-secondary.js

@@ -542,7 +542,6 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 
 			main {
 				flex: 2 0 0;
-				-webkit-overflow-scrolling: touch;
 				overflow-x: hidden;
 				transition: none;
 			}
@@ -570,7 +569,6 @@ class TemplatePrimarySecondary extends FocusVisiblePolyfillMixin(RtlMixin(Locali
 			aside {
 				height: 100%;
 				min-width: ${desktopMinSize}px;
-				-webkit-overflow-scrolling: touch;
 				overflow-x: hidden;
 				overflow-y: scroll;
 			}