@brightspace-ui/core 2.86.0 → 2.86.1

package/components/list/demo/list.html

@@ -84,16 +84,16 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid>
-						<d2l-list-item selectable key="1" label="Introductory Earth Sciences">
+						<d2l-list-item no-primary-action selectable key="1" label="Introductory Earth Sciences">
 							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
 							<div>
 								<d2l-list-item-content>
 									<div>Introductory Earth Sciences</div>
 								</d2l-list-item-content>
 								<d2l-tag-list description="Tags for this course">
-									<d2l-tag-list-item text="Science"></d2l-tag-list-item>
-									<d2l-tag-list-item text="Environment"></d2l-tag-list-item>
-									<d2l-tag-list-item text="Earth"></d2l-tag-list-item>
+									<d2l-tag-list-item text="Science" description="This is a description for the Science tag that is really really really long and will overflow onto the next line."></d2l-tag-list-item>
+									<d2l-tag-list-item text="Environment" description="This is a description for the Environment tag."></d2l-tag-list-item>
+									<d2l-tag-list-item text="Earth" description="This is a description for the Earth tag."></d2l-tag-list-item>
 								</d2l-tag-list>
 							</div>
 							<div slot="actions">
@@ -116,8 +116,8 @@
 									<div>Engineering Materials for Energy Systems</div>
 								</d2l-list-item-content>
 								<d2l-tag-list description="Tags for this course">
-									<d2l-tag-list-item text="Engineering"></d2l-tag-list-item>
-									<d2l-tag-list-item text="Energy Systems"></d2l-tag-list-item>
+									<d2l-tag-list-item text="Engineering" description="This is a description for the Engineering tag."></d2l-tag-list-item>
+									<d2l-tag-list-item text="Energy Systems" description="This is a description for the Energy Systems tag."></d2l-tag-list-item>
 								</d2l-tag-list>
 							</div>
 							<div slot="actions">
@@ -140,9 +140,9 @@
 									<div>Geomorphology and GIS</div>
 								</d2l-list-item-content>
 								<d2l-tag-list description="Tags for this course">
-									<d2l-tag-list-item text="Geology"></d2l-tag-list-item>
-									<d2l-tag-list-item text="GIS"></d2l-tag-list-item>
-									<d2l-tag-list-item text="Earth Sciences"></d2l-tag-list-item>
+									<d2l-tag-list-item text="Geology" description="This is a description for the Geology tag."></d2l-tag-list-item>
+									<d2l-tag-list-item text="GIS" description="This is a description for the GIS tag."></d2l-tag-list-item>
+									<d2l-tag-list-item text="Earth Sciences" description="This is a description for the Earth Sciences tag."></d2l-tag-list-item>
 								</d2l-tag-list>
 							</div>
 							<div slot="actions">

package/components/tooltip/demo/tooltip.html

@@ -71,9 +71,13 @@
 		<h2>Tooltip (info)</h2>
 		<d2l-demo-snippet>
 			<template>
-				<d2l-button id="tooltip-info">Hover for Info</d2l-button>
-				<d2l-tooltip for="tooltip-info">
-					Your info message will display here
+				<d2l-button id="tooltip-preview">Preview</d2l-button>
+				<d2l-tooltip for="tooltip-preview">
+					Tooltip for the Preview button.
+				</d2l-tooltip>
+				<d2l-button id="tooltip-settings">Settings</d2l-button>
+				<d2l-tooltip for="tooltip-settings">
+					Tooltip for the Settings button.
 				</d2l-tooltip>
 			</template>
 		</d2l-demo-snippet>
@@ -163,7 +167,6 @@
 					<d2l-tooltip for="link-long" show-truncated-only>
 						Very Very Very Very Long Text - this tooltip will show because the text is truncating.
 					</d2l-tooltip>
-
 				</div>
 			</template>
 		</d2l-demo-snippet>

package/components/tooltip/tooltip.js

@@ -430,6 +430,8 @@ class Tooltip extends RtlMixin(LitElement) {
 		this._onTargetTouchStart = this._onTargetTouchStart.bind(this);
 		this._onTargetTouchEnd = this._onTargetTouchEnd.bind(this);
 
+		this._onTooltipShowOther = this._onTooltipShowOther.bind(this);
+
 		this.announced = false;
 		this.closeOnClick = false;
 		this.delay = 300;
@@ -474,6 +476,7 @@ class Tooltip extends RtlMixin(LitElement) {
 		super.disconnectedCallback();
 		this._removeListeners();
 		window.removeEventListener('resize', this._onTargetResize);
+		document.body.removeEventListener('d2l-tooltip-show', this._onTooltipShowOther);
 		clearDismissible(this._dismissibleId);
 		delayTimeoutId = null;
 		this._dismissibleId = null;
@@ -859,6 +862,11 @@ class Tooltip extends RtlMixin(LitElement) {
 		}, 500);
 	}
 
+	_onTooltipShowOther() {
+		// only allow one tooltip showing at a time
+		this.hide();
+	}
+
 	_removeListeners() {
 		if (!this._target) {
 			return;
@@ -889,6 +897,9 @@ class Tooltip extends RtlMixin(LitElement) {
 			this.dispatchEvent(new CustomEvent(
 				'd2l-tooltip-show', { bubbles: true, composed: true }
 			));
+
+			document.body.addEventListener('d2l-tooltip-show', this._onTooltipShowOther, true);
+
 			if (this.announced && !this._isInteractive(this._target)) announce(this.innerText);
 		} else {
 			this.setAttribute('aria-hidden', 'true');
@@ -899,6 +910,8 @@ class Tooltip extends RtlMixin(LitElement) {
 			this.dispatchEvent(new CustomEvent(
 				'd2l-tooltip-hide', { bubbles: true, composed: true }
 			));
+
+			document.body.removeEventListener('d2l-tooltip-show', this._onTooltipShowOther, true);
 		}
 	}
 

package/package.json

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