@brightspace-ui/core 2.179.2 → 2.180.0

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

@@ -37,6 +37,26 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Confirm Dialog (critical)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openConfirmCritical">Show Confirm</d2l-button>
+					<d2l-dialog-confirm id="confirmCritical" title-text="Confirm Title" text="Are you sure you want more cookies?" critical>
+						<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('#openConfirmCritical').addEventListener('click', () => {
+							document.querySelector('#confirmCritical').opened = true;
+						});
+						document.querySelector('#confirmCritical').addEventListener('d2l-dialog-close', (e) => {
+							console.log('confirm action:', e.detail.action);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Confirm Dialog (Multi Paragraph)</h2>
 
 			<d2l-demo-snippet>

package/components/dialog/demo/dialog.html

@@ -184,6 +184,28 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog (critical)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openCritical">Show Dialog</d2l-button>
+					<d2l-dialog id="dialogCritical" title-text="Dialog Title" critical>
+						<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>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>
+						</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('#openCritical').addEventListener('click', () => {
+							document.querySelector('#dialogCritical').opened = true;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-confirm.js

@@ -1,18 +1,24 @@
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { heading3Styles } from '../typography/styles.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 
 /**
  * A simple confirmation dialog for prompting the user. Apply the "data-dialog-action" attribute to workflow buttons to automatically close the confirm dialog with the action value.
  * @fires d2l-dialog-before-close - Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing
  * @slot footer - Slot for footer content such as workflow buttons
  */
-class DialogConfirm extends DialogMixin(LitElement) {
+class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 
 	static get properties() {
 		return {
+			/**
+			 * Whether the dialog should indicate that its message is important to the user
+			 */
+			critical: { type: Boolean },
+
 			/**
 			 * REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\n` in JavaScript) will render as multiple paragraphs.
 			 * @type {string}
@@ -66,11 +72,17 @@ class DialogConfirm extends DialogMixin(LitElement) {
 		`];
 	}
 
-	render() {
-		if (!this._titleId) this._titleId = getUniqueId();
-		if (!this._textId) this._textId = getUniqueId();
+	constructor() {
+		super();
+		this.critical = false;
+		this._criticalLabelId = getUniqueId();
+		this._textId = getUniqueId();
+		this._titleId = getUniqueId();
+	}
 
+	render() {
 		const inner = html`
+			${this.critical ? html`<div id="${this._criticalLabelId}" hidden>${this.localize('components.dialog.critical')}</div>` : nothing}
 			<div class="d2l-dialog-inner">
 				${this.titleText ? html`
 					<div class="d2l-dialog-header">
@@ -85,13 +97,14 @@ class DialogConfirm extends DialogMixin(LitElement) {
 			</div>`;
 
 		const labelId = (this.titleText && this.text) ? this._titleId : this._textId;
+		const fullLabelId = this.critical ? `${this._criticalLabelId} ${labelId}` : labelId;
 		const descId = (this.titleText && this.text) ? this._textId : undefined;
 		return this._render(
 			inner,
 			{
 				descId: descId,
 				fullscreenMobile: false,
-				labelId: labelId,
+				labelId: fullLabelId,
 				role: 'alertdialog'
 			}
 		);

package/components/dialog/dialog-styles.js

@@ -94,6 +94,15 @@ export const dialogStyles = css`
 		height: 100%;
 	}
 
+	:host([critical]) .d2l-dialog-header {
+		border-block-start: 0.4rem solid var(--d2l-color-cinnabar);
+		border-start-end-radius: 0.4rem;
+		border-start-start-radius: 0.4rem;
+		margin-block: -1px 0;
+		margin-inline: -1px;
+		padding: 1rem 31px 23px 31px;
+	}
+
 	.d2l-dialog-header {
 		box-sizing: border-box;
 		flex: none;

package/components/dialog/dialog.js

@@ -1,7 +1,7 @@
 import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
 import { AsyncContainerMixin, asyncStates } from '../../mixins/async-container/async-container-mixin.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
@@ -28,6 +28,11 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 			 */
 			async: { type: Boolean },
 
+			/**
+			 * Whether the dialog should indicate that its message is important to the user
+			 */
+			critical: { type: Boolean },
+
 			/**
 			 * Whether to read the contents of the dialog on open
 			 */
@@ -49,7 +54,8 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 	static get styles() {
 		return [ dialogStyles, heading3Styles, css`
 
-			.d2l-dialog-header {
+			.d2l-dialog-header,
+			:host([critical]) .d2l-dialog-header {
 				padding-bottom: 15px;
 			}
 
@@ -83,10 +89,13 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 	constructor() {
 		super();
 		this.async = false;
+		this.critical = false;
 		this.describeContent = false;
 		this.fullHeight = false;
 		this.width = 600;
+		this._criticalLabelId = getUniqueId();
 		this._handleResize = this._handleResize.bind(this);
+		this._titleId = getUniqueId();
 	}
 
 	get asyncContainerCustom() {
@@ -146,8 +155,9 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 			<div id="${ifDefined(this._textId)}" style=${styleMap(slotStyles)}><slot></slot></div>
 		`;
 
-		if (!this._titleId) this._titleId = getUniqueId();
+		const labelId = this.critical ? `${this._criticalLabelId} ${this._titleId}` : this._titleId;
 		const inner = html`
+			${this.critical ? html`<div id="${this._criticalLabelId}" hidden>${this.localize('components.dialog.critical')}</div>` : nothing}
 			<div class="d2l-dialog-inner" style=${styleMap(heightOverride)}>
 				<div class="d2l-dialog-header">
 					<div>
@@ -168,7 +178,7 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 			{
 				descId: descId,
 				fullscreenMobile: true,
-				labelId: this._titleId,
+				labelId: labelId,
 				role: 'dialog'
 			},
 			topOverride

package/custom-elements.json

@@ -1993,6 +1993,12 @@
           "description": "REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\\n` in JavaScript) will render as multiple paragraphs.",
           "type": "string"
         },
+        {
+          "name": "critical",
+          "description": "Whether the dialog should indicate that its message is important to the user",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "title-text",
           "description": "The optional title for the dialog",
@@ -2012,6 +2018,17 @@
           "description": "REQUIRED: The text content for the confirmation dialog. Newline characters (`
` in HTML or `\\n` in JavaScript) will render as multiple paragraphs.",
           "type": "string"
         },
+        {
+          "name": "critical",
+          "attribute": "critical",
+          "description": "Whether the dialog should indicate that its message is important to the user",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        },
         {
           "name": "titleText",
           "attribute": "title-text",
@@ -2167,6 +2184,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "critical",
+          "description": "Whether the dialog should indicate that its message is important to the user",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "describe-content",
           "description": "Whether to read the contents of the dialog on open",
@@ -2205,6 +2228,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "critical",
+          "attribute": "critical",
+          "description": "Whether the dialog should indicate that its message is important to the user",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "describeContent",
           "attribute": "describe-content",

package/lang/ar.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "إظهار {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "إغلاق مربع الحوار هذا",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "إغلاق",
 	"components.filter.activeFilters": "عوامل تصفية نشطة:",
 	"components.filter.clear": "مسح",

package/lang/cy.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "Dangos {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Cau'r dialog hwn",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Cau",
 	"components.filter.activeFilters": "Dim Hidlwyr Gweithredol:",
 	"components.filter.clear": "Clirio",

package/lang/da.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "Vis {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Luk denne dialogboks",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Luk",
 	"components.filter.activeFilters": "Aktive filtre:",
 	"components.filter.clear": "Ryd",

package/lang/de.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "{month} anzeigen",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Dieses Dialogfeld schließen",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Schließen",
 	"components.filter.activeFilters": "Aktive Filter:",
 	"components.filter.clear": "Löschen",

package/lang/en-gb.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "Show {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Close this dialogue",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Close",
 	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Clear",

package/lang/en.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "Show {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Close this dialog",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Close",
 	"components.filter.activeFilters": "Active Filters:",
 	"components.filter.clear": "Clear",

package/lang/es-es.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "Mostrar {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Cerrar este cuadro de diálogo",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Cerrar",
 	"components.filter.activeFilters": "Filtros activos:",
 	"components.filter.clear": "Borrar",

package/lang/es.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "Mostrar {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Cerrar este cuadro de diálogo",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Cerrar",
 	"components.filter.activeFilters": "Filtros activos:",
 	"components.filter.clear": "Borrar",

package/lang/fr-fr.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "Afficher {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Fermer cette boîte de dialogue",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Fermer",
 	"components.filter.activeFilters": "Filtres actifs :",
 	"components.filter.clear": "Effacer",

package/lang/fr.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "Afficher {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Fermer cette boîte de dialogue",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Fermer",
 	"components.filter.activeFilters": "Filtres actifs :",
 	"components.filter.clear": "Effacer",

package/lang/hi.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "{month} दिखाएँ",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "यह संवाद बंद करें",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "बंद करें",
 	"components.filter.activeFilters": "सक्रिय फ़िल्टर्स:",
 	"components.filter.clear": "साफ़ करें",

package/lang/ja.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "{month} を表示",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "このダイアログを閉じる",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "閉じる",
 	"components.filter.activeFilters": "アクティブフィルタ:",
 	"components.filter.clear": "クリア",

package/lang/ko.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "{month} 표시",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "이 대화 상자 닫기",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "닫기",
 	"components.filter.activeFilters": "활성 필터:",
 	"components.filter.clear": "지우기",

package/lang/nl.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "{month} weergeven",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Dit dialoogvenster sluiten",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Sluiten",
 	"components.filter.activeFilters": "Actieve filters:",
 	"components.filter.clear": "Wissen",

package/lang/pt.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "Mostrar {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Fechar esta caixa de diálogo",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Fechar",
 	"components.filter.activeFilters": "Filtros ativos:",
 	"components.filter.clear": "Limpar",

package/lang/sv.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "Visa {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Stäng dialogrutan",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Stäng",
 	"components.filter.activeFilters": "Aktiva filter:",
 	"components.filter.clear": "Rensa",

package/lang/tr.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "{month} Göster",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Bu iletişim kutusunu kapat",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Kapat",
 	"components.filter.activeFilters": "Etkin Filtreler:",
 	"components.filter.clear": "Temizle",

package/lang/zh-cn.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "显示 {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "关闭此对话框",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "关闭",
 	"components.filter.activeFilters": "活动筛选器：",
 	"components.filter.clear": "清除",

package/lang/zh-tw.js

@@ -7,6 +7,7 @@ export default {
 	"components.calendar.show": "顯示{month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "關閉此對話方塊",
+	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "關閉",
 	"components.filter.activeFilters": "啟用中的篩選器：",
 	"components.filter.clear": "清除",

package/package.json

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