@brightspace-ui/core 3.148.9 → 3.149.0

package/components/list/demo/demo-list-nested-iterations-helper.js

@@ -8,7 +8,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 class ListNestedIterationsHelper extends LitElement {
 	static get properties() {
 		return {
-			isDraggable: { attribute: 'is-draggable', type: Boolean }
+			isDraggable: { attribute: 'is-draggable', type: Boolean },
+			separators: { type: String }
 		};
 	}
 
@@ -109,7 +110,7 @@ class ListNestedIterationsHelper extends LitElement {
 
 	_createList(parentOptions, childrenOptions) {
 		return html`
-			<d2l-list>
+			<d2l-list separators=${ifDefined(this.separators)}>
 				${this._getParentItems(parentOptions, this._getChildItems(childrenOptions))}
 			</d2l-list>
 		`;
@@ -133,7 +134,7 @@ class ListNestedIterationsHelper extends LitElement {
 				<d2l-list-item key="${childKey}" label="${childL2Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.isDraggable}" ?expandable="${childOptions[1] && i !== 1}" color="${ifDefined((childOptions[2] && i === 0) || childOptions[3] ? '#ff0000' : undefined)}">
 					<d2l-list-item-content>${childL2Text}</d2l-list-item-content>
 					${i === 1 || !childOptions[1] ? nothing : html`
-						<d2l-list slot="nested">
+						<d2l-list slot="nested" separators=${ifDefined(this.separators)}>
 							<d2l-list-item key="${`${childKey}-child`}" label="${childL3Text}" ?selectable="${!!childOptions[0]}" ?draggable="${this.isDraggable}" color="${ifDefined(childOptions[3] ? '#00ff00' : undefined)}">
 								<d2l-list-item-content>${childL3Text}</d2l-list-item-content>
 							</d2l-list-item>
@@ -155,7 +156,7 @@ class ListNestedIterationsHelper extends LitElement {
 				<d2l-list-item key="${parentKey}" label="${parentText}" ?selectable="${!!parentOptions[0]}" ?draggable="${this.isDraggable}" ?expandable="${parentOptions[1] && i !== 1}" ?expanded="${parentOptions[1] && i === 0}" color="${ifDefined((parentOptions[2] && i === 0) || parentOptions[3] ? '#ff0000' : undefined)}">
 					<d2l-list-item-content>${parentText}</d2l-list-item-content>
 					${i === 1 || (i === 2 && !parentOptions[1]) ? nothing : html`
-						<d2l-list slot="nested">${nested}</d2l-list>
+						<d2l-list slot="nested" separators=${ifDefined(this.separators)}>${nested}</d2l-list>
 					`}
 				</d2l-list-item>
 			`);

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

@@ -151,8 +151,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 			:host(:first-of-type) [slot="control-container"]::before,
 			[slot="control-container"]::after,
-			:host([_list-item-new-styles][expandable][expanded]:not(:last-of-type))::after,
-			:host([_list-item-new-styles][_has-nested-list]:not([expandable]):not(:last-of-type))::after {
+			:host([_list-item-new-styles]:not([_separators="none"])[expandable][expanded]:not(:last-of-type))::after,
+			:host([_list-item-new-styles]:not([_separators="none"])[_has-nested-list]:not([expandable]):not(:last-of-type))::after {
 				border-top: 1px solid var(--d2l-color-mica);
 				content: "";
 				position: absolute;

package/components/tabs/demo/tabs.html

@@ -293,6 +293,50 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Tabs (before selected)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-tabs text="Courses" id="courses-before-selection">
+						<d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
+						<d2l-tab id="biology" text="Biology" slot="tabs" selected></d2l-tab>
+						<d2l-tab-panel labelled-by="all" slot="panels" id="all-panel">Tab content for All</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="biology" slot="panels" id="biology-panel">Tab content for Biology</d2l-tab-panel>
+					</d2l-tabs>
+
+					<script>
+						document.querySelector('#courses-before-selection').addEventListener('d2l-tab-before-selected', e => {
+							e.preventDefault();
+							setTimeout(() => {
+								e.detail.select();
+							}, 2000);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Tabs (before selected, don't select)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-tabs text="Courses" id="courses-before-selection-reset">
+						<d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
+						<d2l-tab id="biology" text="Biology" slot="tabs" selected></d2l-tab>
+						<d2l-tab-panel labelled-by="all" slot="panels" id="all-panel">Tab content for All</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="biology" slot="panels" id="biology-panel">Tab content for Biology</d2l-tab-panel>
+					</d2l-tabs>
+
+					<script>
+						document.querySelector('#courses-before-selection-reset').addEventListener('d2l-tab-before-selected', e => {
+							e.preventDefault();
+							setTimeout(() => {
+								e.detail.reset();
+							}, 2000);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Tabs (deprecated structure)</h2>
 
 			<d2l-demo-snippet>

package/components/tabs/tab-mixin.js

@@ -24,7 +24,8 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 			/**
 			 * @ignore
 			 */
-			tabIndex: { type: Number, reflect: true, attribute: 'tabindex' }
+			tabIndex: { type: Number, reflect: true, attribute: 'tabindex' },
+			_clicked: { type: Boolean, reflect: true },
 		};
 	}
 
@@ -66,6 +67,9 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 				color: var(--d2l-color-celestine);
 				cursor: pointer;
 			}
+			:host([_clicked]) {
+				color: var(--d2l-color-celestine);
+			}
 			:host([selected]:hover) {
 				color: inherit;
 				cursor: default;
@@ -88,6 +92,8 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 		this.role = 'tab';
 		this.selected = false;
 		this.tabIndex = -1;
+
+		this._clicked = false;
 	}
 
 	firstUpdated(changedProperties) {
@@ -135,7 +141,21 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 	}
 
 	#handleClick() {
+		this._clicked = true;
+		const beforeSelectedEvent = new CustomEvent('d2l-tab-before-selected', {
+			detail: {
+				select: () => { this.selected = true; this._clicked = false; },
+				reset: () => this._clicked = false
+			},
+			cancelable: true,
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(beforeSelectedEvent);
+		if (beforeSelectedEvent.defaultPrevented) return;
+
 		this.selected = true;
+		this._clicked = false;
 	};
 
 	#handleKeydown(e) {

package/components/tabs/tab.js

@@ -15,6 +15,7 @@ const focusRingStyles = getFocusRingStyles(
 /**
  * @attr {string} id - REQUIRED: Unique identifier for the tab
  * @fires d2l-tab-content-change - Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs.
+ * @fires d2l-tab-before-selected - Dispatched before selected state is updated. Can be canceled to allow the consumer to handle when selected is set. This is useful if something needs to happen prior to selection.
  * @slot before - Slot for content to be displayed before the tab text. Supports `d2l-icon`, `d2l-icon-custom`, and `d2l-count-badge`. Only the *first* item assigned to this slot will be shown.
  * @slot after - Slot for content to be displayed after the tab text. Supports `d2l-icon`, `d2l-icon-custom`, and `d2l-count-badge`. Only the *last* item assigned to this slot will be shown.
  */

package/custom-elements.json

@@ -8421,6 +8421,10 @@
       "name": "d2l-demo-list-nested-iterations-helper",
       "path": "./components/list/demo/demo-list-nested-iterations-helper.js",
       "attributes": [
+        {
+          "name": "separators",
+          "type": "string"
+        },
         {
           "name": "is-draggable",
           "type": "boolean",
@@ -8428,6 +8432,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "separators",
+          "attribute": "separators",
+          "type": "string"
+        },
         {
           "name": "isDraggable",
           "attribute": "is-draggable",
@@ -13740,6 +13749,9 @@
         },
         {
           "name": "d2l-tab-content-change"
+        },
+        {
+          "name": "d2l-tab-before-selected"
         }
       ]
     },
@@ -13947,6 +13959,10 @@
           "name": "d2l-tab-content-change",
           "description": "Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs."
         },
+        {
+          "name": "d2l-tab-before-selected",
+          "description": "Dispatched before selected state is updated. Can be canceled to allow the consumer to handle when selected is set. This is useful if something needs to happen prior to selection."
+        },
         {
           "name": "d2l-tab-selected",
           "description": "Dispatched when a tab is selected"

package/package.json

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