@brightspace-ui/core 2.13.0 → 2.13.3

package/components/dialog/dialog-confirm.js

@@ -7,6 +7,7 @@ import { heading3Styles } from '../typography/styles.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) {

package/components/dialog/dialog-fullscreen.js

@@ -14,6 +14,7 @@ const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px
 
 /**
  * A generic fullscreen dialog that provides a slot for arbitrary content and a "footer" slot for workflow buttons. Apply the "data-dialog-action" attribute to workflow buttons to automatically close the 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 - Default slot for content inside dialog
  * @slot footer - Slot for footer content such as workflow buttons
  */

package/components/dialog/dialog-mixin.js

@@ -304,8 +304,6 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	}
 
 	_isCloseAborted() {
-
-		/** Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing */
 		const abortEvent = new CustomEvent('d2l-dialog-before-close', {
 			cancelable: true,
 			detail: {

package/components/dialog/dialog.js

@@ -16,6 +16,7 @@ const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px
 
 /**
  * A generic dialog that provides a slot for arbitrary content and a "footer" slot for workflow buttons. Apply the "data-dialog-action" attribute to workflow buttons to automatically close the 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 - Default slot for content inside dialog
  * @slot footer - Slot for footer content such as workflow buttons
  */

package/components/html-block/demo/html-block.html

@@ -110,6 +110,38 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (large font)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-html-block>
+						<div style="font-size: 42px;">
+							Just a text node...
+							<h1>heading 1</h1>
+							<h2>heading 2</h2>
+							<h3>heading 3</h3>
+							<h4>heading 4</h4>
+							<h5>heading 5</h5>
+							<h6>heading 6</h6>
+							<div><strong>strong</strong></div>
+							<div><b>bold</b></div>
+							<div>text</div>
+							<pre>preformatted</pre>
+							<p>paragraph</p>
+							<ul>
+								<li>unordered item 1</li>
+								<li>unordered item 2</li>
+							</ul>
+							<ol>
+								<li>ordered item 1</li>
+								<li>ordered item 2</li>
+							</ol>
+							<div><a href="https://d2l.com">anchor</a></div>
+						</div>
+					</d2l-html-block>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (math)</h2>
 
 			<d2l-demo-snippet>

package/components/html-block/html-block.js

@@ -9,7 +9,10 @@ export const htmlBlockContentStyles = css`
 	.d2l-html-block-compact {
 		font-size: 0.8rem;
 		font-weight: 400;
-		line-height: 1.2rem;
+		line-height: 1.5; /* 1.2rem / 0.8rem */
+	}
+	.d2l-html-block-rendered {
+		line-height: 1.47; /* 1.4rem / 0.95rem */
 	}
 	.d2l-html-block-rendered > :first-child {
 		margin-top: 0;
@@ -22,33 +25,33 @@ export const htmlBlockContentStyles = css`
 	}
 	h1 {
 		font-size: 2em;
-		line-height: 37px;
-		margin: 21.43px 0;
+		line-height: 1;
+		margin: 21px 0;
 	}
 	h2 {
 		font-size: 1.5em;
-		line-height: 27px;
-		margin: 19.92px 0;
+		line-height: 1;
+		margin: 20px 0;
 	}
 	h3 {
 		font-size: 1.2em;
-		line-height: 23px;
-		margin: 18.72px 0;
+		line-height: 1;
+		margin: 19px 0;
 	}
 	h4 {
 		font-size: 1em;
-		line-height: 20px;
-		margin: 21.28px 0;
+		line-height: 1.05;
+		margin: 21px 0;
 	}
 	h5 {
 		font-size: 0.83em;
-		line-height: 16px;
-		margin: 22.13px 0;
+		line-height: 1;
+		margin: 22px 0;
 	}
 	h6 {
 		font-size: 0.67em;
-		line-height: 13px;
-		margin: 24.97px 0;
+		line-height: 1;
+		margin: 25px 0;
 	}
 	pre {
 		font-family: Monospace;

package/components/tag-list/tag-list.js

@@ -41,6 +41,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 			 */
 			description: { type: String },
 			_chompIndex: { type: Number },
+			_contentReady: { type: Boolean },
 			_lines: { type: Number },
 			_showHiddenTags: { type: Boolean }
 		};
@@ -68,11 +69,16 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 				visibility: hidden;
 			}
 			.d2l-tag-list-clear-button {
+				position: absolute;
 				visibility: hidden;
 			}
 			.d2l-tag-list-clear-button.d2l-tag-list-clear-button-visible {
+				position: static;
 				visibility: visible;
 			}
+			.tag-list-hidden {
+				visibility: hidden;
+			}
 		`;
 	}
 
@@ -82,8 +88,11 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		this.arrowKeysDirection = 'leftrightupdown';
 		this.clearable = false;
 		this._chompIndex = 10000;
+		this._clearButtonHeight = 0;
 		this._clearButtonWidth = 0;
+		this._contentReady = false;
 		this._hasResized = false;
+		this._itemHeight = 0;
 		this._resizeObserver = null;
 		this._showHiddenTags = false;
 	}
@@ -111,6 +120,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		const clearButton = this.shadowRoot.querySelector('d2l-button-subtle.d2l-tag-list-clear-button');
 		this._clearButtonResizeObserver = new ResizeObserver(() => {
 			this._clearButtonWidth = Math.ceil(parseFloat(getComputedStyle(clearButton).getPropertyValue('width')));
+			this._clearButtonHeight = Math.ceil(parseFloat(getComputedStyle(clearButton).getPropertyValue('height')));
 		});
 		this._clearButtonResizeObserver.observe(clearButton);
 	}
@@ -154,8 +164,13 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 			'd2l-tag-list-clear-button-visible': this.clearable && this._items && this._items.length > 0
 		};
 
+		const containerClasses = {
+			'tag-list-container': true,
+			'tag-list-hidden': !this._contentReady
+		};
+
 		const list = html`
-			<div role="list" class="tag-list-container" aria-label="${this.description}" @d2l-tag-list-item-clear="${this._handleItemDeleted}">
+			<div role="list" class="${classMap(containerClasses)}" aria-label="${this.description}" @d2l-tag-list-item-clear="${this._handleItemDeleted}">
 				<slot @slotchange="${this._handleSlotChange}"></slot>
 				${overflowButton}
 				<d2l-button-subtle
@@ -169,7 +184,8 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		`;
 
 		const outerContainerStyles = {
-			maxHeight: (this._showHiddenTags || !this._lines) ? undefined : `${(this._itemHeight + MARGIN_TOP_RIGHT) * this._lines}px`
+			maxHeight: (this._showHiddenTags || !this._lines) ? undefined : `${(this._itemHeight + MARGIN_TOP_RIGHT) * this._lines}px`,
+			minHeight: `${Math.max(this._clearButtonHeight, this._itemHeight)}px`
 		};
 
 		return html`
@@ -314,37 +330,37 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		}
 	}
 
-	_handleResize(entries) {
+	async _handleResize(entries) {
 		this._availableWidth = Math.floor(entries[0].contentRect.width);
 		if (this._availableWidth >= PAGE_SIZE.large) this._lines = PAGE_SIZE_LINES.large;
 		else if (this._availableWidth < PAGE_SIZE.large && this._availableWidth >= PAGE_SIZE.medium) this._lines = PAGE_SIZE_LINES.medium;
 		else this._lines = PAGE_SIZE_LINES.small;
 		if (!this._hasResized) {
 			this._hasResized = true;
-			this._handleSlotChange();
+			await this._handleSlotChange();
 		} else {
 			this._chomp();
 		}
 	}
 
-	_handleSlotChange() {
+	async _handleSlotChange() {
 		if (!this._hasResized) return;
+		this._contentReady = false;
+		await this.updateComplete;
 
-		setTimeout(async() => {
-			this._items = await this._getTagListItems();
-			if (!this._items || this._items.length === 0) {
-				this._chompIndex = 10000;
-				return;
-			}
+		this._items = await this._getTagListItems();
+		if (!this._items || this._items.length === 0) {
+			this._chompIndex = 10000;
+			return;
+		}
 
-			this._itemLayouts = this._getItemLayouts(this._items);
-			this._itemHeight = this._items[0].offsetHeight;
-			this._items.forEach((item, index) => {
-				item.setAttribute('tabIndex', index === 0 ? 0 : -1);
-			});
-			this._chomp();
-			this.requestUpdate();
-		}, 40);
+		this._itemLayouts = this._getItemLayouts(this._items);
+		this._itemHeight = this._items[0].offsetHeight;
+		this._items.forEach((item, index) => {
+			item.setAttribute('tabIndex', index === 0 ? 0 : -1);
+		});
+		this._chomp();
+		this._contentReady = true;
 	}
 
 	async _toggleHiddenTagVisibility(e) {

package/custom-elements.json

@@ -1522,11 +1522,12 @@
       ],
       "events": [
         {
-          "name": "d2l-dialog-close",
-          "description": "Dispatched with the action value when the dialog is closed for any reason"
+          "name": "d2l-dialog-before-close",
+          "description": "Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing"
         },
         {
-          "name": "d2l-dialog-before-close"
+          "name": "d2l-dialog-close",
+          "description": "Dispatched with the action value when the dialog is closed for any reason"
         },
         {
           "name": "d2l-dialog-open",
@@ -1596,11 +1597,12 @@
       ],
       "events": [
         {
-          "name": "d2l-dialog-close",
-          "description": "Dispatched with the action value when the dialog is closed for any reason"
+          "name": "d2l-dialog-before-close",
+          "description": "Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing"
         },
         {
-          "name": "d2l-dialog-before-close"
+          "name": "d2l-dialog-close",
+          "description": "Dispatched with the action value when the dialog is closed for any reason"
         },
         {
           "name": "d2l-dialog-open",
@@ -1700,11 +1702,12 @@
       ],
       "events": [
         {
-          "name": "d2l-dialog-close",
-          "description": "Dispatched with the action value when the dialog is closed for any reason"
+          "name": "d2l-dialog-before-close",
+          "description": "Dispatched with the action value before the dialog is closed for any reason, providing an opportunity to prevent the dialog from closing"
         },
         {
-          "name": "d2l-dialog-before-close"
+          "name": "d2l-dialog-close",
+          "description": "Dispatched with the action value when the dialog is closed for any reason"
         },
         {
           "name": "d2l-dialog-open",

package/package.json

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