@brightspace-ui/core 2.116.0 → 2.117.1

package/components/collapsible-panel/README.md

@@ -115,6 +115,7 @@ The `d2l-collapsible-panel` element is a container that provides specific layout
 
 | Slot | Type | Description |
 |--|--|--|
+| `before` | optional | Slot for content to be placed at the left side of the header, aligned with the title and header slot |
 | `header` | optional | Supporting header content |
 | `actions` | optional | Buttons and dropdown openers to be placed in top right corner of header |
 | `summary` | optional | Summary of the expanded content. Only accepts `d2l-collapsible-panel-summary-item` |
@@ -132,6 +133,7 @@ The `d2l-collapsible-panel` element is a container that provides specific layout
 | `no-sticky` | Boolean | Disables sticky positioning for the header |
 | `padding-type` | String | Optionally set horizontal padding of inline panels |
 | `panel-title` | String | The title of the panel |
+| `skeleton` | Boolean | Renders the panel title and the expand/collapse icon as skeleton loaders |
 | `type` | String | The type of collapsible panel |
 <!-- docs: end hidden content -->
 

package/components/collapsible-panel/collapsible-panel.js

@@ -20,6 +20,7 @@ const defaultHeading = 3;
 
 /**
  * A container with a title that can be expanded/collapsed to show/hide content.
+ * @slot before - Slot for content to be placed at the left side of the header, aligned with the title and header slot
  * @slot header - Slot for supporting header content
  * @slot summary - Slot for the summary of the expanded content. Only accepts `d2l-collapsible-panel-summary-item`
  * @slot default - Slot for the expanded content
@@ -77,6 +78,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			 */
 			noSticky: { attribute: 'no-sticky', type: Boolean },
 			_focused: { state: true },
+			_hasBefore: { state: true },
 			_hasSummary: { state: true },
 			_scrolled: { state: true },
 		};
@@ -122,8 +124,19 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			:host([heading-style="4"]) {
 				--d2l-collapsible-panel-header-spacing: 0.3rem;
 			}
+			.d2l-collapsible-panel-before {
+				grid-row: 1/-1;
+			}
+			.d2l-collapsible-panel.has-before .d2l-collapsible-panel-before {
+				margin: 0.3rem 0;
+				margin-inline-start: var(--d2l-collapsible-panel-spacing-inline);
+			}
 			.d2l-collapsible-panel-header {
 				border-radius: 0.4rem;
+				cursor: pointer;
+				display: grid;
+				grid-template-columns: auto 1fr;
+				grid-template-rows: auto auto;
 				padding: var(--d2l-collapsible-panel-header-spacing) 0;
 			}
 			:host(:not([skeleton])) .d2l-collapsible-panel-header {
@@ -155,6 +168,9 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 				overflow-y: hidden;
 				user-select: none;
 			}
+			.d2l-collapsible-panel.has-before .d2l-collapsible-panel-title {
+				margin-inline-start: 0.75rem;
+			}
 
 			.d2l-collapsible-panel.focused {
 				outline: var(--d2l-collapsible-panel-focus-outline);
@@ -172,8 +188,12 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			}
 			.d2l-collapsible-panel-header-secondary {
 				display: flex;
+				margin-inline-end: var(--d2l-collapsible-panel-spacing-inline);
 				margin-inline-start: var(--d2l-collapsible-panel-spacing-inline);
 			}
+			.d2l-collapsible-panel.has-before .d2l-collapsible-panel-header-secondary {
+				margin-inline-start: 0.75rem;
+			}
 			.d2l-collapsible-panel-header-secondary ::slotted(*) {
 				cursor: default;
 			}
@@ -289,6 +309,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			'd2l-collapsible-panel': true,
 			'focused': this._focused,
 			'has-summary': this._hasSummary,
+			'has-before': this._hasBefore,
 			'scrolled': this._scrolled,
 		};
 		const expandCollapseLabel = this.expandCollapseLabel || this.panelTitle;
@@ -344,6 +365,12 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 		}
 	}
 
+	_handleBeforeSlotChange(e) {
+		const content = e.target.assignedNodes({ flatten: true });
+
+		this._hasBefore = content?.length > 0;
+	}
+
 	_handleExpandCollapse(e) {
 		const eventPromise = this.expanded ? e.detail.expandComplete : e.detail.collapseComplete;
 		const event = `d2l-collapsible-panel-${this.expanded ? 'expand' : 'collapse' }`;
@@ -390,6 +417,9 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 	_renderHeader() {
 		return html`
 			<div class="d2l-collapsible-panel-header" @click="${this._handleHeaderClick}">
+				<div class="d2l-collapsible-panel-before">
+					<slot name="before" @slotchange="${this._handleBeforeSlotChange}"></slot>
+				</div>
 				<div class="d2l-collapsible-panel-header-primary">
 					${this._renderPanelTitle()}
 					<div class="d2l-collapsible-panel-header-actions" @click="${this._handleActionsClick}">

package/components/collapsible-panel/demo/collapsible-panel.html

@@ -106,9 +106,10 @@
 				</d2l-collapsible-panel>
 			</d2l-demo-snippet>
 
-			<h2>With custom action and header content</h2>
+			<h2>With custom action, before and header content</h2>
 			<d2l-demo-snippet>
 					<d2l-collapsible-panel panel-title="Session: January 1, 2021: 10:00 AM" expand-collapse-label="Session on January 1">
+						<d2l-icon icon="tier3:assignments" slot="before"></d2l-icon>
 						<d2l-button-icon slot="actions" icon="tier1:fullscreen"></d2l-button-icon><d2l-button-icon slot="actions" icon="tier1:download"></d2l-button-icon><d2l-dropdown-more slot="actions">
 							<d2l-dropdown-menu>
 								<d2l-menu>

package/components/tabs/demo/tabs.html

@@ -24,6 +24,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-tabs>
+						<d2l-tab-panel text="All">Tab content for All</d2l-tab-panel>
 						<d2l-tab-panel text="Biology">Tab content for Biology</d2l-tab-panel>
 						<d2l-tab-panel text="Chemistry">Tab content for Chemistry</d2l-tab-panel>
 						<d2l-tab-panel text="Earth &amp; Planetary Sciences">Tab content for Earth &amp; Planetary Sciences</d2l-tab-panel>
@@ -39,6 +40,7 @@
 				<d2l-button-subtle id="add" text="Add"></d2l-button-subtle>
 				<d2l-button-subtle id="add-selected" text="Add Selected"></d2l-button-subtle>
 				<d2l-button-subtle id="remove" text="Remove"></d2l-button-subtle>
+				<d2l-button-subtle id="remove-multiple" text="Remove Multiple"></d2l-button-subtle>
 			</div>
 			<script>
 				let newPanelId = 0;
@@ -58,10 +60,20 @@
 					if (panels.length === 1) tabs.removeChild(panels[0]);
 					else tabs.removeChild(panels[1]);
 				};
+				const removePanels = (tabs) => {
+					const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
+					if (panels.length === 0) return;
+					if (panels.length === 1) tabs.removeChild(panels[0]);
+					else {
+						tabs.removeChild(panels[1]);
+						tabs.removeChild(panels[0]);
+					}
+				};
 
 				document.querySelector('#add').addEventListener('click', () => addPanel(false, document.querySelector('#withSlot').querySelector('d2l-tabs')));
 				document.querySelector('#add-selected').addEventListener('click', () => addPanel(true, document.querySelector('#withSlot').querySelector('d2l-tabs')));
 				document.querySelector('#remove').addEventListener('click', () => removePanel(document.querySelector('#withSlot').querySelector('d2l-tabs')));
+				document.querySelector('#remove-multiple').addEventListener('click', () => removePanels(document.querySelector('#withSlot').querySelector('d2l-tabs')));
 			</script>
 
 			<d2l-demo-snippet id="withSlot">

package/components/tabs/tabs.js

@@ -611,6 +611,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 				// if a tab was removed, include old info to animate it away
 				if (newTabInfos.findIndex(newInfo => newInfo.id === info.id) === -1) {
 					info.state = 'removing';
+					info.selected = false;
 					newTabInfos.splice(index, 0, info);
 				}
 			});
@@ -618,9 +619,11 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(RtlMixin(Lit
 		this._tabInfos = newTabInfos;
 
 		if (this._tabInfos.length > 0 && !selectedTabInfo) {
-			this._tabInfos[0].activeFocusable = true;
-			this._tabInfos[0].selected = true;
-			selectedTabInfo = this._tabInfos[0];
+			selectedTabInfo = this._tabInfos.find(tabInfo => tabInfo.state !== 'removing');
+			if (selectedTabInfo) {
+				selectedTabInfo.activeFocusable = true;
+				selectedTabInfo.selected = true;
+			}
 		}
 
 		await this.updateComplete;

package/custom-elements.json

@@ -1313,6 +1313,10 @@
         }
       ],
       "slots": [
+        {
+          "name": "before",
+          "description": "Slot for content to be placed at the left side of the header, aligned with the title and header slot"
+        },
         {
           "name": "header",
           "description": "Slot for supporting header content"

package/package.json

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