@brightspace-ui/core 3.112.2 → 3.113.0

package/components/list/demo/list.html

@@ -209,7 +209,7 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid>
-						<d2l-list-item expandable key="expand-1" label="Expandable item #1" href=" ">
+						<d2l-list-item expandable key="expand-1" label="Expandable item #1">
 							<d2l-list-item-content>
 								<div>Week 1: Introduction</div>
 								<div slot="secondary" style="padding: 5px;"><d2l-tooltip-help text="Due: Jan 30, 2023">Available: Aug 11, 2023</d2l-tooltip-help></div>
@@ -217,12 +217,29 @@
 							</d2l-list-item-content>
 							<d2l-list grid slot="nested">
 								<d2l-list-item selectable key="nested-1" label="Nested 1">
-								  <d2l-list-item-content><div>Nested item #1</div></d2l-list-item-content>
+								  <d2l-list-item-content>
+									<div>Nested item #1</div>
+									<div slot="secondary"><d2l-button-subtle style="padding: 5px;" text="Bookmark" icon="tier1:bookmark-hollow"></d2l-button-subtle></div>
+								</d2l-list-item-content>
 								</d2l-list-item>
-								<d2l-list-item selectable key="nested-2" label="Nested 2">
-								  <d2l-list-item-content><div>Nested item #2</div></d2l-list-item-content>
+								<d2l-list-item selectable key="nested-2" label="Nested 2" expandable>
+								  <d2l-list-item-content>
+									<div>Nested item #2</div>
+									<div slot="secondary"><d2l-button-subtle style="padding: 5px;" text="Bookmark" icon="tier1:bookmark-hollow"></d2l-button-subtle></div>
+								</d2l-list-item-content>
+								  <d2l-list grid slot="nested">
+									<d2l-list-item selectable key="nested-1-1" label="Nested 1">
+									  <d2l-list-item-content>
+										<div>Nested item #1</div>
+										<div slot="secondary"><d2l-button-subtle style="padding: 5px;" text="Bookmark" icon="tier1:bookmark-hollow"></d2l-button-subtle></div>
+									</d2l-list-item-content>
+									</d2l-list-item>
+									<d2l-list-item selectable key="nested--1" label="Nested 2">
+									  <d2l-list-item-content><div>Nested item #2</div></d2l-list-item-content>
+									</d2l-list-item>
+								</d2l-list>
 								</d2l-list-item>
-							  </d2l-list>
+							</d2l-list>
 						</d2l-list-item>
 						<d2l-list-item href="http://www.d2l.com">
 							<d2l-list-item-content>
@@ -240,8 +257,10 @@
 				</template>
 				<script type="module">
 					requestAnimationFrame(() => {
-						document.querySelector('d2l-button-subtle').addEventListener('click', () => {
-							console.log('d2l-button: click event');
+						document.querySelectorAll('d2l-button-subtle').forEach((button) => {
+							button.addEventListener('click', () => {
+								console.log('d2l-button: click event');
+							});
 						});
 					});
 				</script>

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

@@ -1,8 +1,7 @@
 import '../colors/colors.js';
 import { css, html } from 'lit';
-import { listInteractiveElems, ListItemMixin } from './list-item-mixin.js';
+import { isInteractiveInListItemComposedPath, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { isInteractiveInComposedPath } from '../../helpers/interactive.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
 	static get properties() {
@@ -67,15 +66,24 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 
 	_getDescendantClicked(e) {
 		const isPrimaryAction = (elem) => elem === this.shadowRoot.querySelector(`#${this._primaryActionId}`);
-		return isInteractiveInComposedPath(e.composedPath(), isPrimaryAction, { elements: listInteractiveElems });
+		return isInteractiveInListItemComposedPath(e, isPrimaryAction);
 	}
 
 	_onButtonClick(e) {
 		if (this._getDescendantClicked(e)) {
 			e.preventDefault();
 		} else {
+			e.stopPropagation();
 			/** Dispatched when the item's primary button action is clicked */
 			this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));
+
+			// Dispatches click event from the list item to maintain existing functionality in consumers that listen for the click event
+			const listItemClickEvent = new e.constructor(e.type, e);
+			listItemClickEvent.preventDefault = () => {
+				e.preventDefault();
+			};
+			/** @ignore */
+			this.dispatchEvent(listItemClickEvent);
 		}
 	}
 

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

@@ -1,6 +1,7 @@
 import '../selection/selection-input.js';
 import { css, html, nothing } from 'lit';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { isInteractiveInListItemComposedPath } from './list-item-mixin.js';
 import { SelectionInfo } from '../selection/selection-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
@@ -119,6 +120,9 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 	_onCheckboxActionClick(event) {
 		event.preventDefault();
 		if (this.selectionDisabled) return;
+		const isPrimaryAction = (elem) => elem === this.shadowRoot.querySelector('div.d2l-checkbox-action');
+		if (isInteractiveInListItemComposedPath(event, isPrimaryAction)) return;
+
 		this.setSelected(!this.selected);
 		const checkbox = this.shadowRoot && this.shadowRoot.querySelector(`#${this._checkboxId}`);
 		if (checkbox) checkbox.focus();

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

@@ -2,6 +2,7 @@ import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
 import { css, html, nothing } from 'lit';
 import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
+import { isInteractiveInListItemComposedPath } from './list-item-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const dragIntervalDelay = 100;
@@ -136,12 +137,12 @@ export const ListItemExpandCollapseMixin = superclass => class extends SkeletonM
 				@click="${this._toggleExpandCollapse}"></d2l-button-icon>`;
 	}
 
-	_renderExpandCollapseAction() {
+	_renderExpandCollapseAction(content) {
 		if (this.selectable || !this.expandable || this.noPrimaryAction) {
 			return nothing;
 		}
 
-		return html`<div class="d2l-list-expand-collapse-action" @click="${this._toggleExpandCollapse}"></div>`;
+		return html`<div class="d2l-list-expand-collapse-action" @click="${this._toggleExpandCollapseAction}">${content || nothing}</div>`;
 	}
 
 	_renderNestedLoadingSpinner() {
@@ -168,4 +169,14 @@ export const ListItemExpandCollapseMixin = superclass => class extends SkeletonM
 			bubbles: true
 		}));
 	}
+
+	_toggleExpandCollapseAction(e = null) {
+		const isPrimaryAction = (elem) => elem === this.shadowRoot.querySelector('div.d2l-list-expand-collapse-action');
+		if (e && isInteractiveInListItemComposedPath(e, isPrimaryAction)) {
+			e.preventDefault();
+			return;
+		}
+
+		this._toggleExpandCollapse(e);
+	}
 };

package/components/list/list-item-generic-layout.js

@@ -165,10 +165,13 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-column-start: control-start;
 			}
 
-			:host(:not([no-primary-action])) ::slotted([slot="control-action"]),
 			:host(:not([no-primary-action])) ::slotted([slot="outside-control-action"]) {
 				grid-column-end: end;
 			}
+				
+			:host(:not([no-primary-action])) ::slotted([slot="control-action"]) {
+				grid-column-end: actions-start;
+			}
 
 			::slotted([slot="outside-control-container"]) {
 				grid-column: start / end;

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

@@ -1,8 +1,7 @@
 import '../colors/colors.js';
 import { css, html } from 'lit';
-import { listInteractiveElems, ListItemMixin } from './list-item-mixin.js';
+import { isInteractiveInListItemComposedPath, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
-import { isInteractiveInComposedPath } from '../../helpers/interactive.js';
 
 export const ListItemLinkMixin = superclass => class extends ListItemMixin(superclass) {
 
@@ -53,15 +52,24 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 
 	_getDescendantClicked(e) {
 		const isPrimaryAction = (elem) => elem === this.shadowRoot.querySelector(`#${this._primaryActionId}`);
-		return isInteractiveInComposedPath(e.composedPath(), isPrimaryAction, { elements: listInteractiveElems });
+		return isInteractiveInListItemComposedPath(e, isPrimaryAction);
 	}
 
 	_handleLinkClick(e) {
 		if (this._getDescendantClicked(e)) {
 			e.preventDefault();
 		} else {
+			e.stopPropagation();
 			/** Dispatched when the item's primary link action is clicked */
 			this.dispatchEvent(new CustomEvent('d2l-list-item-link-click', { bubbles: true }));
+
+			// Dispatches click event from the list item to maintain existing functionality in consumers that listen for the click event
+			const listItemClickEvent = new e.constructor(e.type, e);
+			listItemClickEvent.preventDefault = () => {
+				e.preventDefault();
+			};
+			/** @ignore */
+			this.dispatchEvent(listItemClickEvent);
 		}
 	}
 

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

@@ -6,13 +6,13 @@ import '../tooltip/tooltip.js';
 import '../expand-collapse/expand-collapse-content.js';
 import { css, html, nothing } from 'lit';
 import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
+import { interactiveElements, isInteractiveInComposedPath } from '../../helpers/interactive.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { composeMixins } from '../../helpers/composeMixins.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { getValidHexColor } from '../../helpers/color.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { interactiveElements } from '../../helpers/interactive.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { ListItemCheckboxMixin } from './list-item-checkbox-mixin.js';
 import { ListItemDragDropMixin } from './list-item-drag-drop-mixin.js';
@@ -40,11 +40,14 @@ function addTabListener() {
 
 let hasDisplayedKeyboardTooltip = false;
 
-export const listInteractiveElems = {
-	...interactiveElements,
-	'd2l-button': true,
-	'd2l-tooltip-help': true
-};
+export function isInteractiveInListItemComposedPath(e, isPrimaryAction) {
+	const listInteractiveElems = {
+		...interactiveElements,
+		'd2l-button': true,
+		'd2l-tooltip-help': true
+	};
+	return isInteractiveInComposedPath(e.composedPath(), isPrimaryAction, { elements: listInteractiveElems });
+}
 
 /**
  * @property label - The hidden label for the checkbox and expand collapse control
@@ -177,17 +180,14 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] {
 				width: 3rem;
 			}
-			:host(:not([_has-color-slot])) .d2l-list-item-content-extend-separators > [slot="content"],
-			:host(:not([_has-color-slot])[dir="rtl"]) .d2l-list-item-content-extend-separators > [slot="content"] {
-				padding-left: 0.9rem;
-				padding-right: 0.9rem;
+			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] ~ [slot="control-action"] [slot="content"] {
+				padding-inline-start: 3rem;
 			}
-			:host([selectable]) .d2l-list-item-content-extend-separators > [slot="content"] {
-				padding-left: 0;
+			:host(:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
+				padding-inline: 0.9rem;
 			}
-			:host([dir="rtl"][selectable]) .d2l-list-item-content-extend-separators > [slot="content"] {
-				padding-left: 0.9rem;
-				padding-right: 0;
+			:host([selectable]) .d2l-list-item-content-extend-separators > [slot="content"] {
+				padding-inline-start: 0;
 			}
 
 			:host([_hovering-primary-action]) .d2l-list-item-content,
@@ -220,6 +220,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				padding-top: 0;
 			}
 
+			[slot="control"] ~ [slot="control-action"] [slot="content"] {
+				padding-inline-start: 2.2rem; /* width of "control" slot set in generic-layout */
+			}
+
 			[slot="content"] ::slotted([slot="illustration"]),
 			[slot="content"] .d2l-list-item-illustration > * {
 				border-radius: 6px;
@@ -685,7 +689,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			'hide-bottom-border': this._showAddButton && (!this._hasNestedList || this._hasNestedListAddButton)
 		};
 
-		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color)) ? 'control' : undefined;
+		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this.expandable && !this.selectable)) ? 'control' : undefined;
 		const contentAreaContent = html`
 			<div slot="content"
 				class="d2l-list-item-content"
@@ -696,7 +700,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				<slot>${content}</slot>
 			</div>
 		`;
+
 		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId, contentAreaContent) : null);
+		const renderExpandableAction = !primaryAction && !this.selectable && this.expandable && !this.noPrimaryAction;
+		const renderCheckboxAction = !primaryAction && this.selectable && !this.noPrimaryAction;
+
 		let tooltipForId = null;
 		if (this._showAddButton) {
 			tooltipForId = this._addButtonTopId;
@@ -748,8 +756,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				<div slot="control-action"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}">
-						${this._renderCheckboxAction('')}
-						${this._renderExpandCollapseAction()}
+						${this._renderCheckboxAction(renderCheckboxAction ? contentAreaContent : '')}
+						${this._renderExpandCollapseAction(renderExpandableAction ? contentAreaContent : null)}
 				</div>` : nothing }
 				${primaryAction ? html`
 				<div slot="content-action"
@@ -758,7 +766,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					@mouseenter="${this._onMouseEnterPrimaryAction}"
 					@mouseleave="${this._onMouseLeavePrimaryAction}">
 						${primaryAction}
-				</div>` : contentAreaContent}
+				</div>` : nothing}
+				${!primaryAction && !renderExpandableAction && !renderCheckboxAction ? contentAreaContent : nothing}
 				<div slot="actions"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}"

package/package.json

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