@brightspace-ui/core 2.86.3 → 2.86.5

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

@@ -20,38 +20,12 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			:host(:not([button-disabled])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
-			:host([button-disabled][_hovering-primary-action]) .d2l-list-item-content,
-			:host([button-disabled][_focusing-primary-action]) .d2l-list-item-content {
-				--d2l-list-item-content-text-color: unset;
-				--d2l-list-item-content-text-decoration: none;
-			}
-			:host([button-disabled]) button {
-				cursor: default;
+			:host([button-disabled]) [slot="content-action"] {
+				pointer-events: none;
 			}
 			[slot="outside-control-container"] {
 				margin: 0 -12px;
 			}
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::before,
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::after,
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::before,
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::after,
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::before,
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="control-container"]::after,
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::before,
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_focusing]) [slot="control-container"]::after {
-				border-top-color: transparent;
-			}
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"],
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_focusing]) [slot="outside-control-container"] {
-				background-color: white;
-				border-color: #b6cbe8; /* celestine alpha 0.3 */
-			}
-			:host([selectable]:not([selection-disabled][button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"],
-			:host(:not([selectable]):not([button-disabled]):not([skeleton])[_hovering]) [slot="outside-control-container"] {
-				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-			}
 			button {
 				background-color: transparent;
 				border: none;
@@ -61,11 +35,6 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 				outline: none;
 				width: 100%;
 			}
-			/* simply hide the button action layer rather than disabling button so
-			 that the cursor pointer ins't displayed when hovering skeleton */
-			:host([skeleton]) button {
-				display: none;
-			}
 		` ];
 
 		super.styles && styles.unshift(super.styles);
@@ -78,6 +47,11 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 		this.buttonDisabled = false;
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('buttonDisabled') && this.buttonDisabled === true) this._hoveringPrimaryAction = false;
+	}
+
 	_onButtonClick() {
 		/** Dispatched when the item's primary button action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));

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

@@ -1,6 +1,5 @@
 import '../selection/selection-input.js';
 import { css, html, nothing } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { SelectionInfo } from '../selection/selection-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
@@ -33,7 +32,8 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			 * Private. The selection info (set by the selection component).
 			 * @ignore
 			 */
-			selectionInfo: { type: Object, attribute: false }
+			selectionInfo: { type: Object, attribute: false },
+			_hoveringSelection: { type: Boolean, attribute: '_hovering-selection', reflect: true }
 		};
 	}
 
@@ -44,7 +44,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				display: block;
 				height: 100%;
 			}
-			.d2l-checkbox-action.d2l-checkbox-action-disabled {
+			:host([selection-disabled]) .d2l-checkbox-action {
 				cursor: default;
 			}
 		` ];
@@ -95,6 +95,11 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 		if (!suppressEvent) this._dispatchSelected(selected);
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('selectionDisabled') && this.selectionDisabled === true) this._hoveringSelection = false;
+	}
+
 	async _dispatchSelected(value) {
 		/* wait for internal state to be updated in case of action-click case so that a consumer
 		 calling getSelectionInfo will get the correct state */
@@ -124,6 +129,20 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 		}
 	}
 
+	_onCheckboxKeyDown(e) {
+		// handle the enter key
+		if (e.keyCode !== 13) return;
+		this.selected = !this.selected;
+	}
+
+	_onMouseEnterSelection() {
+		this._hoveringSelection = !this.selectionDisabled;
+	}
+
+	_onMouseLeaveSelection() {
+		this._hoveringSelection = false;
+	}
+
 	_onNestedSlotChangeCheckboxMixin() {
 		this._updateNestedSelectionProvider();
 	}
@@ -137,26 +156,25 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 		return this.selectable ? html`
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
-				?selected="${this.selected}"
 				?disabled="${this.selectionDisabled}"
+				.hovering="${this._hoveringSelection}"
 				id="${this._checkboxId}"
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"
 				key="${this.key}"
+				@keydown="${this._onCheckboxKeyDown}"
 				label="${this.label}"
-				?skeleton="${this.skeleton}"
-				.hovering="${this._hovering}">
+				?selected="${this.selected}"
+				?skeleton="${this.skeleton}">
 			</d2l-selection-input>
 		` : nothing;
 	}
 
 	_renderCheckboxAction(inner) {
-		const classes = {
-			'd2l-checkbox-action': true,
-			'd2l-checkbox-action-disabled': this.selectionDisabled
-		};
 		return this.selectable ? html`
-			<div @click="${this._onCheckboxActionClick}"
-				class="${classMap(classes)}">
+			<div class="d2l-checkbox-action"
+				@click="${this._onCheckboxActionClick}"
+				@mouseenter="${this._onMouseEnterSelection}"
+				@mouseleave="${this._onMouseLeaveSelection}">
 				${inner}
 			</div>
 			` : nothing;

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

@@ -445,16 +445,10 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 
 	_onKeydown(event) {
 		if (!this.gridActive) return;
+
 		let node = null;
 		let preventDefault = true;
 		switch (event.keyCode) {
-			case keyCodes.ENTER:
-			case keyCodes.SPACE:
-				node = getComposedActiveElement();
-				node.click();
-				// mouseup event is necessary for components like d2l-dropdown-more that control state by listening to this event
-				node.dispatchEvent(new MouseEvent('mouseup', { composed: true }));
-				break;
 			case keyCodes.RIGHT:
 				node = getComposedActiveElement();
 				if (this.dir === 'rtl') {

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

@@ -21,29 +21,12 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			:host([action-href]:not([action-href=""])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
-			:host([action-href]:not([action-href=""])[_hovering]) [slot="control-container"]::before,
-			:host([action-href]:not([action-href=""])[_hovering]) [slot="control-container"]::after,
-			:host([action-href]:not([action-href=""])[_focusing]) [slot="control-container"]::before,
-			:host([action-href]:not([action-href=""])[_focusing]) [slot="control-container"]::after {
-				border-top-color: transparent;
-			}
-			:host(:not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"],
-			:host(:not([skeleton])[action-href]:not([action-href=""])[_focusing]) [slot="outside-control-container"] {
-				background-color: white;
-				border-color: #b6cbe8; /* celestine alpha 0.3 */
-			}
-			:host(:not([skeleton])[action-href]:not([action-href=""])[_hovering]) [slot="outside-control-container"] {
-				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-			}
 			a[href] {
 				display: block;
 				height: 100%;
 				outline: none;
 				width: 100%;
 			}
-			:host([skeleton]) a {
-				display: none;
-			}
 		` ];
 
 		super.styles && styles.unshift(super.styles);
@@ -56,14 +39,31 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 		this._primaryActionId = getUniqueId();
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('actionHref') && !this.actionHref) this._hoveringPrimaryAction = false;
+	}
+
 	_handleLinkClick() {
 		/** Dispatched when the item's primary link action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-link-click', { bubbles: true }));
 	}
 
+	_handleLinkKeyDown(e) {
+		if (e.keyCode !== 32) return;
+		// handle the space key
+		e.preventDefault();
+		e.stopPropagation();
+		this.shadowRoot.querySelector(`#${this._primaryActionId}`).click();
+	}
+
 	_renderPrimaryAction(labelledBy) {
 		if (!this.actionHref) return;
-		return html`<a id="${this._primaryActionId}" aria-labelledby="${labelledBy}" href="${this.actionHref}" @click="${this._handleLinkClick}"></a>`;
+		return html`<a aria-labelledby="${labelledBy}"
+			@click="${this._handleLinkClick}"
+			href="${this.actionHref}"
+			id="${this._primaryActionId}"
+			@keydown="${this._handleLinkKeyDown}"></a>`;
 	}
 
 };

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

@@ -147,12 +147,16 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			:host(:last-of-type[_separators="between"]) [slot="control-container"]::after,
 			:host([_separators="none"]) [slot="control-container"]::before,
 			:host([_separators="none"]) [slot="control-container"]::after,
-			:host([selectable][_hovering]:not([selection-disabled])) [slot="control-container"]::before,
-			:host([selectable][_hovering]:not([selection-disabled])) [slot="control-container"]::after,
+			:host([_hovering-selection]) [slot="control-container"]::before,
+			:host([_hovering-selection]) [slot="control-container"]::after,
+			:host([_hovering-primary-action]) [slot="control-container"]::before,
+			:host([_hovering-primary-action]) [slot="control-container"]::after,
 			:host([selectable][_focusing]) [slot="control-container"]::before,
 			:host([selectable][_focusing]) [slot="control-container"]::after,
-			:host([selected]) [slot="control-container"]::before,
-			:host([selected]) [slot="control-container"]::after,
+			:host([_focusing-primary-action]) [slot="control-container"]::before,
+			:host([_focusing-primary-action]) [slot="control-container"]::after,
+			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::before,
+			:host([selected]:not([selection-disabled]):not([skeleton])) [slot="control-container"]::after,
 			:host(:first-of-type[_nested]) [slot="control-container"]::before {
 				border-top-color: transparent;
 			}
@@ -317,17 +321,21 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin: 0;
 			}
 
-			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"],
-			:host(:not([selection-disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"],
+			:host([_hovering-primary-action]) [slot="outside-control-container"],
+			:host([_hovering-selection]) [slot="outside-control-container"],
+			:host([_focusing-primary-action]) [slot="outside-control-container"],
+			:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"],
 			:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"] {
 				background-color: white;
 				border-color: #b6cbe8; /* celestine alpha 0.3 */
 			}
-			:host(:not([selection-disabled]):not([skeleton])[selectable][_hovering]) [slot="outside-control-container"] {
+			:host([_hovering-primary-action]) [slot="outside-control-container"],
+			:host([_hovering-selection]) [slot="outside-control-container"] {
 				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 			}
 			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"] {
 				background-color: #f3fbff;
+				border-color: #b6cbe8; /* celestine alpha 0.3 */
 			}
 
 			:host(:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"] {
@@ -343,7 +351,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				transition: border-color 400ms linear;
 			}
 			:host([_highlighting]) [slot="outside-control-container"],
-			:host(:not([selection-disabled]):not([skeleton])[_hovering][_highlighting]) [slot="outside-control-container"],
+			:host([_hovering-selection][_highlighting]) [slot="outside-control-container"],
 			:host(:not([selection-disabled]):not([skeleton])[_focusing][_highlighting]) [slot="outside-control-container"],
 			:host(:not([selection-disabled]):not([skeleton])[selected][_highlighting]) [slot="outside-control-container"] {
 				background-color: var(--d2l-color-celestine-plus-2);
@@ -363,6 +371,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			.d2l-list-item-tooltip-key {
 				font-weight: 700;
 			}
+			:host([skeleton]) {
+				pointer-events: none;
+			}
 		`];
 
 		super.styles && styles.unshift(super.styles);
@@ -632,7 +643,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					${this._renderExpandCollapse()}
 				</div>
 				${this.selectable ? html`<div slot="control">${this._renderCheckbox()}</div>` : nothing}
-				${this.selectable || this.expandable ? html`<div slot="control-action"
+				${this.selectable || this.expandable ? html`
+				<div slot="control-action"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}">
 						${this._renderCheckboxAction('')}

package/custom-elements.json

@@ -8181,11 +8181,6 @@
           "default": "false"
         }
       ],
-      "events": [
-        {
-          "name": "mouseup"
-        }
-      ],
       "slots": [
         {
           "name": "outside-control",

package/package.json

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