@brightspace-ui/core 3.163.0 → 3.164.1

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

@@ -28,7 +28,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			[slot="outside-control-container"] {
 				margin: 0 -12px;
 			}
-			:host([_list-item-interactive-enabled]) button {
+			button {
 				background-color: transparent;
 				border: none;
 				color: unset;
@@ -45,22 +45,6 @@ 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;
@@ -100,8 +84,6 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 			/** 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
@@ -121,11 +103,11 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 	}
 
 	_renderPrimaryAction(labelledBy, content) {
-		return html`<button 
-			id="${this._primaryActionId}" 
+		return html`<button
+			id="${this._primaryActionId}"
 			aria-current="${ifDefined(this._ariaCurrent)}"
-			aria-labelledby="${labelledBy}" 
-			@click="${this._onButtonClick}" 
+			aria-labelledby="${labelledBy}"
+			@click="${this._onButtonClick}"
 			@focusin="${this._onButtonFocus}"
 			?disabled="${this.buttonDisabled}">
 			${content || nothing}

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

@@ -343,8 +343,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				}
 				:host([selected]) d2l-list-item-drag-handle,
 				:host([current]) d2l-list-item-drag-handle,
-				:host([_focusing-elem]) d2l-list-item-drag-handle,
-				:host([_list-item-new-styles][_focusing]) d2l-list-item-drag-handle,
+				:host([_focusing]) d2l-list-item-drag-handle,
 				d2l-list-item-drag-handle:hover,
 				d2l-list-item-drag-handle.d2l-hovering,
 				d2l-list-item-drag-handle.d2l-focusing {

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

@@ -23,7 +23,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);
 			}
-			:host([_list-item-interactive-enabled]) a[href] {
+			a[href] {
 				color: unset;
 				display: block;
 				height: 100%;
@@ -31,19 +31,6 @@ 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;
@@ -77,8 +64,6 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 			/** 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

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

@@ -5,13 +5,12 @@ import './list-item-generic-layout.js';
 import './list-item-placement-marker.js';
 import '../tooltip/tooltip.js';
 import '../expand-collapse/expand-collapse-content.js';
-import { css, html, nothing, unsafeCSS } from 'lit';
+import { css, html, nothing } from 'lit';
 import { findComposedAncestor, getComposedChildren, 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 { 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';
@@ -41,13 +40,9 @@ function addTabListener() {
 	});
 }
 
-const listItemInteractiveFlag = getFlag('GAUD-7495-list-interactive-content', true);
-const useNewStylesFlag = getFlag('GAUD-7495-list-item-new-styles', true);
-
 let hasDisplayedKeyboardTooltip = false;
 
 export function isInteractiveInListItemComposedPath(e, isPrimaryAction) {
-	if (!listItemInteractiveFlag) return false;
 	const listInteractiveElems = {
 		...interactiveElements,
 		'd2l-button': true,
@@ -118,8 +113,6 @@ 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' },
-			_listItemNewStyles: { type: Boolean, reflect: true, attribute: '_list-item-new-styles' },
 			_showAddButton: { type: Boolean, attribute: '_show-add-button', reflect: true },
 			_siblingHasColor: { state: true },
 		};
@@ -151,15 +144,15 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 			:host(:first-of-type) [slot="control-container"]::before,
 			[slot="control-container"]::after,
-			:host([_list-item-new-styles]:not([_separators="none"])[expandable][expanded]:not(:last-of-type))::after,
-			:host([_list-item-new-styles]:not([_separators="none"])[_has-nested-list]:not([expandable]):not(:last-of-type))::after {
+			:host(:not([_separators="none"])[expandable][expanded]:not(:last-of-type))::after,
+			:host(:not([_separators="none"])[_has-nested-list]:not([expandable]):not(:last-of-type))::after {
 				border-top: 1px solid var(--d2l-color-mica);
 				content: "";
 				position: absolute;
 				width: 100%;
 			}
-			:host([_list-item-new-styles][draggable][expandable][expanded]:not(:last-of-type))::after,
-			:host([_list-item-new-styles][draggable][_has-nested-list]:not([expandable]):not(:last-of-type))::after {
+			:host([draggable][expandable][expanded]:not(:last-of-type))::after,
+			:host([draggable][_has-nested-list]:not([expandable]):not(:last-of-type))::after {
 				inset-inline-start: 1.5rem; /* left and right margins of 0.3rem + drag handle width of 0.9rem */
 				width: calc(100% - 1.5rem);
 			}
@@ -223,22 +216,22 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				outline-offset: -4px;
 			}
 			@supports selector(:has(a, b)) {
-				:host([_list-item-new-styles][_focusing-primary-action]) .d2l-list-item-content {
+				:host([_focusing-primary-action]) .d2l-list-item-content {
 					--d2l-list-item-content-text-border-radius: initial;
 					--d2l-list-item-content-text-outline: initial;
 					--d2l-list-item-content-text-outline-offset: initial;
 				}
-				:host([_list-item-new-styles][_focusing-primary-action]):has(:focus-visible) .d2l-list-item-content {
+				:host([_focusing-primary-action]):has(:focus-visible) .d2l-list-item-content {
 					--d2l-list-item-content-text-border-radius: 3px;
 					--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
 					--d2l-list-item-content-text-outline-offset: 1px;
 				}
-				:host([_list-item-new-styles][_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
+				:host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
 					border-radius: initial;
 					outline: initial;
 					outline-offset: initial;
 				}
-				:host([_list-item-new-styles][_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content-none {
+				:host([_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content-none {
 					border-radius: 8px;
 					outline: var(--d2l-list-item-content-text-outline);
 					outline-offset: -4px;
@@ -331,7 +324,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			.d2l-list-item-content-extend-separators [slot="outside-control-container"] {
 				margin: 0;
 			}
-			:host([_list-item-new-styles][draggable]) [slot="outside-control-container"] {
+			:host([draggable]) [slot="outside-control-container"] {
 				margin-inline-end: -12px;
 			}
 
@@ -354,27 +347,17 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			: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([_list-item-new-styles]):not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"],
-			:host([_list-item-new-styles]:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing]:not([current])) [slot="outside-control-container"] {
-				border-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
-				margin-bottom: -1px;
-			}
-			/* clean up with GAUD-7495-list-item-new-styles flag */
-			:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing-elem]:not([current])) [slot="outside-control-container"] {
+			:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing]:not([current])) [slot="outside-control-container"] {
 				border-color: var(--d2l-color-mica);
 				margin-bottom: -1px;
 			}
-			/* clean up with GAUD-7495-list-item-new-styles flag */
-			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border {
-				background-image: linear-gradient(#f3fbff, #f3fbff), linear-gradient(to right, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 20%, transparent 20%, transparent 80%, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 80%); /* stylelint-disable-line */
-			}
 			:host([_hovering-control]) d2l-button-add,
 			:host([_hovering-primary-action]) d2l-button-add,
 			:host([_hovering-selection]) d2l-button-add,
 			:host([_focusing-primary-action]) d2l-button-add,
 			:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) d2l-button-add,
 			:host(:not([selection-disabled]):not([skeleton])[selected]) d2l-button-add {
-				--d2l-button-add-line-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
+				--d2l-button-add-line-color: var(--d2l-color-mica);
 			}
 			:host([_hovering-control]) [slot="outside-control-container"],
 			:host([_hovering-primary-action]) [slot="outside-control-container"],
@@ -383,7 +366,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			}
 			:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"] {
 				background-color: #f3fbff;
-				border-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
+				border-color: var(--d2l-color-mica);
 				margin-bottom: -1px;
 			}
 
@@ -474,8 +457,6 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._hasColorSlot = false;
 		this._hasListItemContent = true;
 		this._hasNestedList = false;
-		this._listItemInteractiveEnabled = listItemInteractiveFlag;
-		this._listItemNewStyles = useNewStylesFlag;
 		this._siblingHasColor = false;
 	}
 
@@ -646,9 +627,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 	}
 
 	_onFocusIn(e) {
-		if (this._listItemNewStyles) {
-			e.stopPropagation(); // prevent _focusing from being set on the parent
-		}
+		e.stopPropagation(); // prevent _focusing from being set on the parent
 		this._focusing = true;
 		if (this.role !== 'row' || !tabPressed || hasDisplayedKeyboardTooltip) return;
 		this._displayKeyboardTooltip = true;
@@ -725,7 +704,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			'd2l-list-item-content-none': !this._hasListItemContent
 		};
 
-		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this._listItemInteractiveEnabled && this.expandable && !this.selectable)) ? '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="${classMap(contentClasses)}"
@@ -737,9 +716,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			</div>
 		`;
 
-		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;
+		const primaryAction = ((!this.noPrimaryAction && this._renderPrimaryAction) ? this._renderPrimaryAction(this._contentId, contentAreaContent) : null);
+		const renderExpandableActionContent = !primaryAction && !this.selectable && this.expandable && !this.noPrimaryAction;
+		const renderCheckboxActionContent = !primaryAction && this.selectable && !this.noPrimaryAction;
 
 		let tooltipForId = null;
 		if (this._showAddButton) {
@@ -804,7 +783,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					@mouseleave="${this._onMouseLeavePrimaryAction}">
 						${primaryAction}
 				</div>` : nothing}
-				${!this._listItemInteractiveEnabled || (!primaryAction && !renderExpandableActionContent && !renderCheckboxActionContent) ? contentAreaContent : nothing}
+				${(!primaryAction && !renderExpandableActionContent && !renderCheckboxActionContent) ? contentAreaContent : nothing}
 				<div slot="actions"
 					@mouseenter="${this._onMouseEnter}"
 					@mouseleave="${this._onMouseLeave}"

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

@@ -17,7 +17,6 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 			 */
 			preventNavigation: { type: Boolean, attribute: 'prevent-navigation' },
 			_childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
-			_focusingElem: { type: Boolean, reflect: true, attribute: '_focusing-elem' },
 			_hasCurrentParent: { type: Boolean, reflect: true, attribute: '_has-current-parent' },
 			_nextSiblingCurrent: { type: Boolean, reflect: true, attribute: '_next-sibling-current' },
 		};
@@ -66,21 +65,6 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 			:host([current]) .d2l-list-item-color-outer {
 				padding-block: 3px;
 			}
-
-			/* clean up with GAUD-7495-list-item-new-styles flag */
-			@supports selector(:has(a, b)) {
-				:host([_focusing-primary-action]) .d2l-list-item-content {
-					--d2l-list-item-content-text-border-radius: initial;
-					--d2l-list-item-content-text-outline: initial;
-					--d2l-list-item-content-text-outline-offset: initial;
-				}
-				:host([_focusing-primary-action]):has(:focus-visible) .d2l-list-item-content {
-					--d2l-list-item-content-text-border-radius: 3px;
-					--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
-					--d2l-list-item-content-text-outline-offset: 1px;
-				}
-			}
-
 		` ];
 
 		super.styles && styles.unshift(super.styles);
@@ -91,7 +75,6 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 		super();
 		this.current = false;
 		this._childCurrent = false;
-		this._focusingElem = false;
 		this._hasCurrentParent = false;
 		this._nextSiblingCurrent = false;
 	}
@@ -112,9 +95,6 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 		if (this.current) {
 			this.dispatchSetChildCurrentEvent(true);
 		}
-
-		this.addEventListener('focusin', this.#handleFocusIn);
-		this.addEventListener('focusout', this.#handleFocusOut);
 	}
 
 	updated(changedProperties) {
@@ -173,16 +153,6 @@ export const ListItemNavMixin = superclass => class extends ListItemLinkMixin(su
 		super._handleLinkClick(e);
 	}
 
-	/* clean up (including _focusingElem) with GAUD-7495-list-item-new-styles flag */
-	#handleFocusIn(e) {
-		e.stopPropagation(); // prevent _focusing from being set on the parent
-		this._focusingElem = true;
-	}
-
-	#handleFocusOut() {
-		this._focusingElem = false;
-	}
-
 	#setAriaCurrent(val) {
 		this._ariaCurrent = val;
 	}

package/package.json

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