@brightspace-ui/core 1.232.0 → 1.233.0

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/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.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",