@brightspace-ui/core 2.43.5 → 2.44.0

package/components/tag-list/README.md

@@ -76,3 +76,10 @@ The `d2l-tag-list-item` provides the appropriate `listitem` semantics and stylin
   <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
 </d2l-tag-list>
 ```
+
+### `d2l-tag-list-item` properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | Text displayed on the tag item. Will truncate automatically if text exceeds a certain width and will display full `text` value in a tooltip. |
+| `description` | String, optional | Additional text to display in tag item tooltip. Setting this property will make tooltip available at all times when hovering. |

package/components/tag-list/demo/tag-list.html

@@ -86,6 +86,16 @@
 				</div>
 			</d2l-demo-snippet>
 
+			<h2>Tag List - Custom Tooltip Description</h2>
+			<d2l-demo-snippet fullscreen>
+				<d2l-tag-list description="A bunch of example tags">
+					<d2l-tag-list-item text="Longer Example Tag - much much much much much longer" description="display text and description value when truncated"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example Tag 5" description="custom tooltip text - display description only when not truncated"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Truncated list item without a custom tooltip description"></d2l-tag-list-item>
+					<d2l-tag-list-item text="No tooltip"></d2l-tag-list-item>
+				</d2l-tag-list>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

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

@@ -1,12 +1,12 @@
 import '../button/button-icon.js';
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
+import { heading4Styles, labelStyles } from '../typography/styles.js';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { labelStyles } from '../typography/styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
@@ -39,7 +39,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 	}
 
 	static get styles() {
-		return [labelStyles, css`
+		return [labelStyles, heading4Styles, css`
 			:host {
 				display: grid;
 				max-width: 100%;
@@ -120,6 +120,9 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			.d2l-tag-list-item-tooltip-title-key {
 				font-weight: 600;
 			}
+			.d2l-heading-4 {
+				margin: 0 0 0.5rem 0;
+			}
 		`];
 	}
 
@@ -200,13 +203,16 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		));
 	}
 
-	_renderTag(tagContent, hasTruncationTooltip) {
+	_renderTag(tagContent, hasTruncationTooltip, description) {
 		const buttonText = typeof tagContent === 'object'
 			? this.localize('components.tag-list.clear', { value: '' })
 			: this.localize('components.tag-list.clear', { value: tagContent });
+		const hasDescription = !!description;
+		const tooltipHeader = hasDescription ? html`<div class="d2l-heading-4">${tagContent}</div>` : tagContent;
 		const tooltipTagOverflow = hasTruncationTooltip ? html`
-				<d2l-tooltip for="${this._id}" show-truncated-only>
-					${tagContent}
+				<d2l-tooltip for="${this._id}" ?show-truncated-only="${!hasDescription}">
+					${tooltipHeader}
+					${hasDescription ? description : nothing}
 				</d2l-tooltip>
 			` : null;
 		const tooltipKeyboardInstructions = this._displayKeyboardTooltip ? html`

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

@@ -9,12 +9,18 @@ class TagListItem extends TagListItemMixin(LitElement) {
 			 * REQUIRED: Text to display
 			 * @type {string}
 			 */
-			text: { type: String }
+			text: { type: String },
+			/**
+			 * Optional: Text to display in tooltip.
+			 * Tooltip will also include text property value if truncated.
+			 * @type {string}
+			 */
+			description: { type: String }
 		};
 	}
 
 	render() {
-		return this._renderTag(this.text, true);
+		return this._renderTag(this.text, true, this.description);
 	}
 }
 

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

@@ -425,7 +425,6 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 			if (button) button.focus();
 		}
 	}
-
 }
 
 customElements.define('d2l-tag-list', TagList);

package/custom-elements.json

@@ -10326,6 +10326,11 @@
           "description": "REQUIRED: Text to display",
           "type": "string"
         },
+        {
+          "name": "description",
+          "description": "Optional: Text to display in tooltip.\nTooltip will also include text property value if truncated.",
+          "type": "string"
+        },
         {
           "name": "clearable",
           "description": "Enables the option to clear a tag list item. The `d2l-tag-list-item-clear` event will be dispatched when the user selects to delete the item. The consumer must handle the actual item deletion.",
@@ -10340,6 +10345,12 @@
           "description": "REQUIRED: Text to display",
           "type": "string"
         },
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "Optional: Text to display in tooltip.\nTooltip will also include text property value if truncated.",
+          "type": "string"
+        },
         {
           "name": "clearable",
           "attribute": "clearable",

package/package.json

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