@brightspace-ui/core 3.167.1 → 3.168.0

package/components/tabs/demo/tabs.html

@@ -216,6 +216,49 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h3>Tabs (with hidden)</h3>
+
+			<d2l-demo-snippet>
+				<template>
+					<div style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem;">
+						<d2l-button-subtle text="Hide Next Tab" primary aria-label="Hide next visible tab" title="Hide next visible tab" id="hide-next-tab-btn"></d2l-button-subtle>
+						<d2l-button-subtle text="Show Next Hidden Tab" primary aria-label="Show next hidden tab" title="Show next hidden tab" id="show-next-hidden-tab-btn"></d2l-button-subtle>
+					</div>
+					<d2l-tabs text="Courses">
+						<d2l-tab id="all" text="All" slot="tabs" ></d2l-tab>
+						<d2l-tab id="biology" text="Biology" slot="tabs"></d2l-tab>
+						<d2l-tab id="chemistry" text="Chemistry" slot="tabs" ></d2l-tab>
+						<d2l-tab id="physics" text="Physics" slot="tabs" hidden></d2l-tab>
+						<d2l-tab id="math" text="Math" slot="tabs" hidden></d2l-tab>
+						<d2l-tab id="earth-sciences" text="Earth Sciences" slot="tabs" hidden></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-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="physics" slot="panels">Tab content for Physics</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="math" slot="panels">Tab content for Math</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="earth-sciences" slot="panels">Tab content for Earth Sciences</d2l-tab-panel>
+					</d2l-tabs>
+					<script>
+						const templateRoot = document.currentScript.parentNode;
+						const hideBtn = templateRoot.querySelector('#hide-next-tab-btn');
+						const showBtn = templateRoot.querySelector('#show-next-hidden-tab-btn');
+						const tabsEl = templateRoot.querySelector('d2l-tabs');
+
+						hideBtn.addEventListener('click', () => {
+							const visibleTabs = [...tabsEl.querySelectorAll('d2l-tab:not([hidden])')];
+							if (visibleTabs.length === 0) return;
+							visibleTabs[0].setAttribute('hidden', '');
+						});
+
+						showBtn.addEventListener('click', () => {
+							const hiddenTabs = [...tabsEl.querySelectorAll('d2l-tab[hidden]')];
+							if (hiddenTabs.length === 0) return;
+							hiddenTabs[0].removeAttribute('hidden');
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h3>Tabs (responsive)</h3>
 
 			<d2l-demo-snippet>

package/components/tabs/tab-mixin.js

@@ -12,6 +12,10 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 
 	static get properties() {
 		return {
+			/**
+			 * @ignore
+			 */
+			hidden: { type: Boolean, reflect: true },
 			/**
 			 * Use to select the tab. Only one tab can be selected at a time.
 			 * @type {boolean}
@@ -40,6 +44,9 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 				position: relative;
 				vertical-align: middle;
 			}
+			:host([hidden]) {
+				display: none;
+			}
 			.d2l-tab-content {
 				margin: 0.5rem;
 			}
@@ -90,6 +97,7 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 
 	constructor() {
 		super();
+		this.hidden = false;
 		this.role = 'tab';
 		this.selected = false;
 		this.tabIndex = -1;
@@ -134,6 +142,12 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 				));
 			}
 		}
+		if (changedProperties.has('hidden') && changedProperties.get('hidden') !== undefined) {
+			/** @ignore */
+			this.dispatchEvent(new CustomEvent(
+				'd2l-tab-hidden-change', { bubbles: true }
+			));
+		}
 	}
 
 	/**

package/components/tabs/tabs.js

@@ -370,6 +370,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 					${this.arrowKeysContainer(html`
 						<div class="d2l-tabs-container-list"
 							@d2l-tab-content-change="${this._handleTabContentChange}"
+							@d2l-tab-hidden-change="${this.#handleTabHiddenChange}"
 							@d2l-tab-selected="${this._handleTabSelected}"
 							@d2l-tab-deselected="${this.#handleTabDeselected}"
 							@focusout="${this._handleFocusOut}"
@@ -1056,31 +1057,15 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return this.updateComplete;
 	}
 
+	// Legacy structure clean up: if possible base this on visible tabs going forward
 	_updateTabListVisibility(panels) {
 		if (this._state === 'shown' && panels.length < 2) {
-			// don't animate the tabs list visibility if it's the inital render
-			if (reduceMotion || !this._initialized) {
-				this._state = 'hidden';
-			} else if (this.shadowRoot) {
-				const layout = this.shadowRoot.querySelector('.d2l-tabs-layout');
-				const handleTransitionEnd = (e) => {
-					if (e.propertyName !== 'max-height') return;
-					layout.removeEventListener('transitionend', handleTransitionEnd);
-					this._state = 'hidden';
-				};
-				layout.addEventListener('transitionend', handleTransitionEnd);
-				this._state = 'anim';
-			}
+			this.#hideTabsList();
 		} else if (this._state === 'hidden' && panels.length > 1) {
-			// don't animate the tabs list visibility if it's the inital render
-			if (reduceMotion || !this._initialized) {
-				this._state = 'shown';
-			} else {
-				this._state = 'anim';
-				requestAnimationFrame(() => {
-					this._state = 'shown';
-				});
-			}
+			this.#showTabsList();
+		} else if (this._state === 'shown' && panels.length > 1) {
+			// check if there are hidden tabs and tab list container should actually be hidden
+			this.#handleTabHiddenChange();
 		}
 	}
 
@@ -1201,6 +1186,34 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		if (panel) panel.selected = false;
 	}
 
+	#handleTabHiddenChange() {
+		if (!this._tabs || this._tabs.length <= 1) return;
+
+		let visibleTabCount = 0;
+		this._tabs.forEach((tab) => {
+			if (!tab.hidden) visibleTabCount++;
+		});
+
+		if (visibleTabCount > 1 && this._state === 'hidden') this.#showTabsList();
+		else if (visibleTabCount <= 1 && this._state === 'shown') this.#hideTabsList();
+	}
+
+	#hideTabsList() {
+		// don't animate the tabs list visibility if it's the inital render
+		if (reduceMotion || !this._initialized) {
+			this._state = 'hidden';
+		} else if (this.shadowRoot) {
+			const layout = this.shadowRoot.querySelector('.d2l-tabs-layout');
+			const handleTransitionEnd = (e) => {
+				if (e.propertyName !== 'max-height') return;
+				layout.removeEventListener('transitionend', handleTransitionEnd);
+				this._state = 'hidden';
+			};
+			layout.addEventListener('transitionend', handleTransitionEnd);
+			this._state = 'anim';
+		}
+	}
+
 	#isRTL() {
 		return document.documentElement.getAttribute('dir') === 'rtl';
 	}
@@ -1223,6 +1236,18 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		}, 0);
 	}
 
+	#showTabsList() {
+		// don't animate the tabs list visibility if it's the inital render
+		if (reduceMotion || !this._initialized) {
+			this._state = 'shown';
+		} else {
+			this._state = 'anim';
+			requestAnimationFrame(() => {
+				this._state = 'shown';
+			});
+		}
+	}
+
 	#updateScrollPositionLogic(measures, newTranslationValue) {
 		const scrollToPromise = this._scrollToPosition(newTranslationValue);
 		const scrollVisibilityPromise = this._updateScrollVisibility(measures);

package/custom-elements.json

@@ -14010,6 +14010,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "hidden",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "role",
           "type": "string",
@@ -14226,6 +14231,11 @@
           "description": "ACCESSIBILITY: REQUIRED: The text used for the tab and for labelling the corresponding panel",
           "type": "string"
         },
+        {
+          "name": "hidden",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "role",
           "type": "string",

package/package.json

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