@brightspace-ui/core 2.86.0 → 2.86.2

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

@@ -11,6 +11,9 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 let logAccessibilityWarning = true;
 
+/* only one tooltip is to be shown at once - track the active tooltip so it can be hidden if necessary */
+let activeTooltip = null;
+
 const pointerLength = 16;
 const pointerOverhang = 7; /* how far the pointer extends outside the content */
 
@@ -472,6 +475,7 @@ class Tooltip extends RtlMixin(LitElement) {
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		if (activeTooltip === this) activeTooltip = null;
 		this._removeListeners();
 		window.removeEventListener('resize', this._onTargetResize);
 		clearDismissible(this._dismissibleId);
@@ -882,6 +886,11 @@ class Tooltip extends RtlMixin(LitElement) {
 		clearTimeout(this._hoverTimeout);
 		clearTimeout(this._longPressTimeout);
 		if (newValue) {
+			if (!this.forceShow) {
+				if (activeTooltip) activeTooltip.hide();
+				activeTooltip = this;
+			}
+
 			this._dismissibleId = setDismissible(() => this.hide());
 			this.setAttribute('aria-hidden', 'false');
 			await this.updateComplete;
@@ -889,8 +898,11 @@ class Tooltip extends RtlMixin(LitElement) {
 			this.dispatchEvent(new CustomEvent(
 				'd2l-tooltip-show', { bubbles: true, composed: true }
 			));
+
 			if (this.announced && !this._isInteractive(this._target)) announce(this.innerText);
 		} else {
+			if (activeTooltip === this) activeTooltip = null;
+
 			this.setAttribute('aria-hidden', 'true');
 			if (this._dismissibleId) {
 				clearDismissible(this._dismissibleId);

package/package.json

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