@brightspace-ui/core 3.114.1 → 3.115.1

package/components/inputs/input-checkbox.js

@@ -1,14 +1,17 @@
 import '../colors/colors.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement, nothing } from 'lit';
+import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputInlineHelpMixin } from './input-inline-help.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
+const inputStyleTweaksEnabled = getFlag('input-style-tweaks', true);
+
 export const cssSizes = {
 	inputBoxSize: 1.2,
 	checkboxMargin: 0.5,
@@ -133,14 +136,14 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 			css`
 				:host {
 					display: block;
-					margin-bottom: 0.9rem;
+					margin-block-end: ${unsafeCSS(inputStyleTweaksEnabled ? '0.6rem' : '0.9rem')}; /* stylelint-disable-line */
 				}
 				:host([hidden]) {
 					display: none;
 				}
 				:host([label-hidden]) {
 					display: inline-block;
-					margin-bottom: 0;
+					margin-block-end: 0;
 				}
 				label {
 					display: flex;
@@ -181,7 +184,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 				}
 				.d2l-input-checkbox-supporting {
 					display: none;
-					margin-block: 0.9rem;
+					margin-block-start: ${unsafeCSS(inputStyleTweaksEnabled ? '0.6rem' : '0.9rem')}; /* stylelint-disable-line */
 				}
 				.d2l-input-checkbox-supporting-visible {
 					display: block;

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

@@ -1,5 +1,5 @@
 import '../colors/colors.js';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { isInteractiveInListItemComposedPath, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 
@@ -26,7 +26,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			[slot="outside-control-container"] {
 				margin: 0 -12px;
 			}
-			button {
+			:host([_list-item-interactive-enabled]) button {
 				background-color: transparent;
 				border: none;
 				color: unset;
@@ -43,6 +43,22 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 				text-align: start;
 				width: 100%;
 			}
+			/** clean up with flag GAUD-7495-list-interactive-content */
+			:host(:not([_list-item-interactive-enabled])) button {
+				background-color: transparent;
+				border: none;
+				cursor: pointer;
+				display: block;
+				height: 100%;
+				outline: none;
+				width: 100%;
+			}
+			/** clean up with flag GAUD-7495-list-interactive-content */
+			:host(:not([_list-item-interactive-enabled]):not([button-disabled]):not([no-primary-action])) [slot="content"],
+			:host(:not([_list-item-interactive-enabled]):not([no-primary-action])) [slot="control-action"] ~ [slot="content"],
+			:host(:not([_list-item-interactive-enabled]):not([no-primary-action])) [slot="outside-control-action"] ~ [slot="content"] {
+				pointer-events: none;
+			}
 			:host(:not([button-disabled])) [slot="control-action"],
 			:host(:not([button-disabled])) [slot="outside-control-action"] {
 				grid-column-end: control-end;
@@ -73,10 +89,13 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 		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 }));
 
+			if (!this._listItemInteractiveEnabled) return; // clean up with flag GAUD-7495-list-interactive-content
+
+			e.stopPropagation();
+
 			// 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 = () => {
@@ -100,7 +119,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			@click="${this._onButtonClick}" 
 			@focusin="${this._onButtonFocus}"
 			?disabled="${this.buttonDisabled}">
-			${content}
+			${content || nothing}
 		</button>`;
 	}
 

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

@@ -1,5 +1,5 @@
 import '../colors/colors.js';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { isInteractiveInListItemComposedPath, ListItemMixin } from './list-item-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 
@@ -21,7 +21,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			:host([action-href]:not([action-href=""])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
-			a[href] {
+			:host([_list-item-interactive-enabled]) a[href] {
 				color: unset;
 				display: block;
 				height: 100%;
@@ -29,6 +29,19 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 				text-decoration: none;
 				width: 100%;
 			}
+			/** clean up with flag GAUD-7495-list-interactive-content */
+			:host(:not([_list-item-interactive-enabled])) a[href] {
+				display: block;
+				height: 100%;
+				outline: none;
+				width: 100%;
+			}
+			/** clean up with flag GAUD-7495-list-interactive-content */
+			:host(:not([_list-item-interactive-enabled])[action-href]:not([action-href=""])) [slot="content"],
+			:host(:not([_list-item-interactive-enabled]):not([no-primary-action])) [slot="control-action"] ~ [slot="content"],
+			:host(:not([_list-item-interactive-enabled]):not([no-primary-action])) [slot="outside-control-action"] ~ [slot="content"] {
+				pointer-events: none;
+			}
 			:host([action-href]:not([action-href=""])) [slot="control-action"],
 			:host([action-href]:not([action-href=""])) [slot="outside-control-action"] {
 				grid-column-end: control-end;
@@ -59,10 +72,13 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 		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 }));
 
+			if (!this._listItemInteractiveEnabled) return; // clean up with flag GAUD-7495-list-interactive-content
+
+			e.stopPropagation();
+
 			// 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 = () => {
@@ -94,7 +110,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			@focusin="${this._handleLinkFocus}"
 			href="${this.actionHref}"
 			id="${this._primaryActionId}"
-			@keydown="${this._handleLinkKeyDown}">${content}</a>`;
+			@keydown="${this._handleLinkKeyDown}">${content || nothing}</a>`;
 	}
 
 };

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

@@ -10,6 +10,7 @@ import { interactiveElements, isInteractiveInComposedPath } from '../../helpers/
 import { classMap } from 'lit/directives/class-map.js';
 import { composeMixins } from '../../helpers/composeMixins.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { getValidHexColor } from '../../helpers/color.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -38,9 +39,12 @@ function addTabListener() {
 	});
 }
 
+const listItemInteractiveFlag = getFlag('GAUD-7495-list-interactive-content', true);
+
 let hasDisplayedKeyboardTooltip = false;
 
 export function isInteractiveInListItemComposedPath(e, isPrimaryAction) {
+	if (!listItemInteractiveFlag) return false;
 	const listInteractiveElems = {
 		...interactiveElements,
 		'd2l-button': true,
@@ -101,6 +105,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_focusingPrimaryAction: { type: Boolean, attribute: '_focusing-primary-action', reflect: true },
 			_highlight: { type: Boolean, reflect: true },
 			_highlighting: { type: Boolean, reflect: true },
+			_listItemInteractiveEnabled: { type: Boolean, reflect: true, attribute: '_list-item-interactive-enabled' },
 			_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
 			_siblingHasColor: { state: true },
 		};
@@ -454,6 +459,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._displayKeyboardTooltip = false;
 		this._hasColorSlot = false;
 		this._hasNestedList = false;
+		this._listItemInteractiveEnabled = listItemInteractiveFlag;
 		this._siblingHasColor = false;
 	}
 
@@ -689,7 +695,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) || (this.expandable && !this.selectable)) ? 'control' : undefined;
+		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this._listItemInteractiveEnabled && this.expandable && !this.selectable)) ? 'control' : undefined;
 		const contentAreaContent = html`
 			<div slot="content"
 				class="d2l-list-item-content"
@@ -701,9 +707,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			</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;
+		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId, this._listItemInteractiveEnabled ? contentAreaContent : nothing) : null);
+		const renderExpandableActionContent = this._listItemInteractiveEnabled && !primaryAction && !this.selectable && this.expandable && !this.noPrimaryAction;
+		const renderCheckboxActionContent = this._listItemInteractiveEnabled && !primaryAction && this.selectable && !this.noPrimaryAction;
 
 		let tooltipForId = null;
 		if (this._showAddButton) {
@@ -756,8 +762,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				<div slot="control-action"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}">
-						${this._renderCheckboxAction(renderCheckboxAction ? contentAreaContent : '')}
-						${this._renderExpandCollapseAction(renderExpandableAction ? contentAreaContent : null)}
+						${this._renderCheckboxAction(renderCheckboxActionContent ? contentAreaContent : '')}
+						${this._renderExpandCollapseAction(renderExpandableActionContent ? contentAreaContent : null)}
 				</div>` : nothing }
 				${primaryAction ? html`
 				<div slot="content-action"
@@ -767,7 +773,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					@mouseleave="${this._onMouseLeavePrimaryAction}">
 						${primaryAction}
 				</div>` : nothing}
-				${!primaryAction && !renderExpandableAction && !renderCheckboxAction ? contentAreaContent : nothing}
+				${!this._listItemInteractiveEnabled || (!primaryAction && !renderExpandableActionContent && !renderCheckboxActionContent) ? contentAreaContent : nothing}
 				<div slot="actions"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}"

package/package.json

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