@brightspace-ui/core 2.131.5 → 2.131.7

package/components/filter/filter-tags.js

@@ -51,7 +51,7 @@ class FilterTags extends LocalizeCoreElement(LitElement) {
 				<d2l-tag-list-item
 					@d2l-tag-list-item-clear="${this._tagListItemDeleted}"
 					data-filter-id="${filter[0]}"
-					data-index="${index}"
+					key="${index}"
 					text="${value.text}">
 				</d2l-tag-list-item>
 			`;
@@ -88,8 +88,8 @@ class FilterTags extends LocalizeCoreElement(LitElement) {
 	}
 
 	_tagListItemDeleted(e) {
-		const filterId = e.target.getAttribute('data-filter-id');
-		const filterValueIndex = e.target.getAttribute('data-index');
+		const filterId = e.target.dataset.filterId;
+		const filterValueIndex = e.detail.key;
 		const filterValue = this._allActiveFilters.get(filterId)[filterValueIndex];
 		const filter = this._filters.registries.find(filter => filter.id === filterId);
 		filter.requestFilterValueClear(filterValue.keyObject);

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

@@ -129,7 +129,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				top: 0;
 			}
 			[slot="control-container"]::after {
-				bottom: -2px;
+				bottom: -1px;
 			}
 
 			:host(:first-of-type[_separators="between"]) [slot="control-container"]::before,
@@ -318,6 +318,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"] {
 				background-color: white;
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
+				margin-bottom: -1px;
 			}
 			:host([_hovering-primary-action]) [slot="outside-control-container"],
 			:host([_hovering-selection]) [slot="outside-control-container"] {
@@ -326,6 +327,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"] {
 				background-color: #f3fbff;
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
+				margin-bottom: -1px;
 			}
 
 			:host(:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"] {

package/components/list/list.js

@@ -57,7 +57,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 				display: block;
 			}
 			:host(:not([slot="nested"])) > .d2l-list-content {
-				padding-bottom: 2px;
+				padding-bottom: 1px;
 			}
 			:host([hidden]) {
 				display: none;

package/components/tag-list/README.md

@@ -37,8 +37,8 @@ The corresponding `*-clear` event must be listened to for whatever component (`d
   import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
 
   document.addEventListener('d2l-tag-list-item-clear', (e) => {
+    console.log(`d2l-tag-list-item-clear event dispatched. Key: ${e.detail.key}`);
     e.target.parentNode.removeChild(e.target);
-    console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}`);
   });
 
   document.addEventListener('d2l-tag-list-clear', (e) => {
@@ -50,10 +50,10 @@ The corresponding `*-clear` event must be listened to for whatever component (`d
   });
 </script>
 <d2l-tag-list description="Example Tags" clearable>
-  <d2l-tag-list-item text="Lorem ipsum dolor"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Reprehenderit in voluptate velit esse lorem ipsum dolor"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Sit amet"></d2l-tag-list-item>
-  <d2l-tag-list-item text="Duis aute irure"></d2l-tag-list-item>
+  <d2l-tag-list-item key="lorem-ipsum" text="Lorem ipsum dolor"></d2l-tag-list-item>
+  <d2l-tag-list-item key="reprehenderit" text="Reprehenderit in voluptate velit esse lorem ipsum dolor"></d2l-tag-list-item>
+  <d2l-tag-list-item key="sit-amet" text="Sit amet"></d2l-tag-list-item>
+  <d2l-tag-list-item key="duis-aute-irure" text="Duis aute irure"></d2l-tag-list-item>
 </d2l-tag-list>
 ```
 
@@ -67,8 +67,8 @@ The `d2l-tag-list-item` provides the appropriate semantics and styling for child
   import '@brightspace-ui/core/components/tag-list/tag-list-item.js';
 
   document.addEventListener('d2l-tag-list-item-clear', (e) => {
+    console.log(`d2l-tag-list-item-clear event dispatched. Key: ${e.detail.key}`);
     e.target.parentNode.removeChild(e.target);
-    console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}`);
   });
 
   document.addEventListener('d2l-tag-list-clear', (e) => {
@@ -81,7 +81,7 @@ The `d2l-tag-list-item` provides the appropriate semantics and styling for child
 </script>
 
 <d2l-tag-list description="Example Tags" clearable>
-  <d2l-tag-list-item text="Tag"></d2l-tag-list-item>
+  <d2l-tag-list-item key="tag" text="Tag"></d2l-tag-list-item>
 </d2l-tag-list>
 ```
 

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

@@ -57,22 +57,22 @@
 			<h2>Clearable Tag List</h2>
 			<d2l-demo-snippet full-width>
 				<d2l-tag-list description="A bunch of example tags" clearable>
-					<d2l-tag-list-item text="Example 1"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 2 - much much much much much much much much longer"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 3"></d2l-tag-list-item>
-					<d2l-tag-list-item-mixin-consumer name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
-					<d2l-tag-list-item text="Example 5"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 6" description="this is a description"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 7"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 8"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example 9"></d2l-tag-list-item>
+					<d2l-tag-list-item key="example-1" text="Example 1"></d2l-tag-list-item>
+					<d2l-tag-list-item key="example-2" text="Example 2 - much much much much much much much much longer"></d2l-tag-list-item>
+					<d2l-tag-list-item key="example-3" text="Example 3"></d2l-tag-list-item>
+					<d2l-tag-list-item-mixin-consumer key="custom" name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
+					<d2l-tag-list-item key="example-5" text="Example 5"></d2l-tag-list-item>
+					<d2l-tag-list-item key="example-6" text="Example 6" description="this is a description"></d2l-tag-list-item>
+					<d2l-tag-list-item key="example-7" text="Example 7"></d2l-tag-list-item>
+					<d2l-tag-list-item key="example-8" text="Example 8"></d2l-tag-list-item>
+					<d2l-tag-list-item key="example-9" text="Example 9"></d2l-tag-list-item>
 				</d2l-tag-list>
 				<script type="module">
 					import { getNextFocusable } from '../../../helpers/focus.js';
 
 					document.addEventListener('d2l-tag-list-item-clear', (e) => {
+						console.log(`d2l-tag-list-item-clear event dispatched. Key: ${e.target.key}; Value: ${e.target.text}`);
 						e.target.parentNode.removeChild(e.target);
-						console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}`);
 					});
 
 					document.addEventListener('d2l-tag-list-clear', (e) => {

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

@@ -27,6 +27,11 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			 * @type {boolean}
 			 */
 			clearable: { type: Boolean },
+			/**
+			 * REQUIRED if clearable. Acts as a unique identifier for the tag
+			 * @type {string}
+			 */
+			key: { type: String },
 			/**
 			 * @ignore
 			 */
@@ -130,6 +135,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		this.keyboardTooltipItem = false;
 		this.keyboardTooltipShown = false;
 		this._id = getUniqueId();
+		this._plainText = '';
 	}
 
 	firstUpdated(changedProperties) {
@@ -166,12 +172,12 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 	_handleClearItem() {
 		if (!this.clearable) return;
 
-		announce(this.localize('components.tag-list.cleared-item', { value: this.text }));
+		announce(this.localize('components.tag-list.cleared-item', { value: this._plainText }));
 
 		/** Dispatched when a user selects to delete an individual tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items. */
 		this.dispatchEvent(new CustomEvent(
 			'd2l-tag-list-item-clear',
-			{ bubbles: true, composed: true, detail: { value: this.text } }
+			{ bubbles: true, composed: true, detail: { key: this.key } }
 		));
 	}
 
@@ -209,12 +215,11 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		`;
 	}
 
-	_renderTag(tagContent, options) {
-		if (!options) options = {};
+	_renderTag(tagContent, options = {}) {
+		if (options.plainText?.constructor !== String) throw new TypeError('options.plainText must be a string');
+		this._plainText = options.plainText || '';
 
-		const buttonText = typeof tagContent === 'object'
-			? this.localize('components.tag-list.clear', { value: '' })
-			: this.localize('components.tag-list.clear', { value: tagContent });
+		const buttonText = this.localize('components.tag-list.clear', { value: this._plainText });
 
 		const hasDescription = !!options.description;
 

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

@@ -22,7 +22,8 @@ class TagListItem extends TagListItemMixin(LitElement) {
 	render() {
 		return this._renderTag(this.text, {
 			description: this.description,
-			hasTruncationTooltip: true
+			hasTruncationTooltip: true,
+			plainText: this.text
 		});
 	}
 }

package/custom-elements.json

@@ -12235,6 +12235,11 @@
           "description": "Optional: Text to display in tooltip.\nTooltip will also include text property value if truncated.",
           "type": "string"
         },
+        {
+          "name": "key",
+          "description": "REQUIRED if clearable. Acts as a unique identifier for the tag",
+          "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.",
@@ -12255,6 +12260,12 @@
           "description": "Optional: Text to display in tooltip.\nTooltip will also include text property value if truncated.",
           "type": "string"
         },
+        {
+          "name": "key",
+          "attribute": "key",
+          "description": "REQUIRED if clearable. Acts as a unique identifier for the tag",
+          "type": "string"
+        },
         {
           "name": "clearable",
           "attribute": "clearable",
@@ -12352,6 +12363,11 @@
           "name": "name",
           "type": "string"
         },
+        {
+          "name": "key",
+          "description": "REQUIRED if clearable. Acts as a unique identifier for the tag",
+          "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.",
@@ -12365,6 +12381,12 @@
           "attribute": "name",
           "type": "string"
         },
+        {
+          "name": "key",
+          "attribute": "key",
+          "description": "REQUIRED if clearable. Acts as a unique identifier for the tag",
+          "type": "string"
+        },
         {
           "name": "clearable",
           "attribute": "clearable",

package/package.json

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