@brightspace-ui/core 3.144.0 → 3.144.2

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

@@ -4,6 +4,7 @@ import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { dragActions } from './list-item-drag-handle.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { SelectionInfo } from '../selection/selection-mixin.js';
@@ -21,6 +22,8 @@ export const moveLocations = Object.freeze({
 
 export const dropLocation = moveLocations; // backwards compatibility
 
+const dragDropMultipleFlag = getFlag('GAUD-7495-list-item-drag-drop-multiple', true);
+
 const dropTargetLeaveDelay = 1000; // ms
 const touchHoldDuration = 400; // length of time user needs to hold down touch before dragging occurs
 const scrollSensitivity = 150; // pixels between top/bottom of viewport to scroll for mobile
@@ -368,6 +371,9 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		if (!this.key) {
 			this.draggable = false;
 		}
+
+		if (!dragDropMultipleFlag) return;
+		this._dragMultiple = this.getRootList()?.hasAttribute('drag-multiple');
 	}
 
 	firstUpdated(changedProperties) {
@@ -871,6 +877,12 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		`) : nothing;
 	}
 
+	_renderDragMultipleImage() {
+		if (!dragDropMultipleFlag) return nothing;
+
+		return this._dragMultiple && this.draggable && (this.selectable || this.expandable) ? html`<d2l-list-item-drag-image></d2l-list-item-drag-image>` : nothing;
+	}
+
 	_renderDragTarget(templateMethod) {
 		templateMethod = templateMethod || (dragTarget => dragTarget);
 		return this.draggable && !this._keyboardActive ? templateMethod.call(this, html`

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

@@ -1,5 +1,6 @@
 import '../button/button-add.js';
 import '../colors/colors.js';
+import './list-item-drag-image.js';
 import './list-item-generic-layout.js';
 import './list-item-placement-marker.js';
 import '../tooltip/tooltip.js';
@@ -143,12 +144,19 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			}
 
 			:host(:first-of-type) [slot="control-container"]::before,
-			[slot="control-container"]::after {
+			[slot="control-container"]::after,
+			:host([_list-item-new-styles][expandable][expanded]:not(:last-of-type))::after,
+			:host([_list-item-new-styles][_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 {
+				inset-inline-start: 1.5rem; /* left and right margins of 0.3rem + drag handle width of 0.9rem */
+				width: calc(100% - 1.5rem);
+			}
 			:host(:not([_white-background-add-button])[_has-nested-list-add-button]) [slot="before-content"] {
 				border-bottom: 1px solid var(--d2l-color-mica);
 				margin-bottom: -1px;
@@ -836,6 +844,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			${this.draggable ? html`<div class="d2l-list-item-drag-image">${innerView}</div>` : innerView}
 			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
 			${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this.localizeHTML('components.list.keyboard')}</d2l-tooltip>` : ''}
+			${this.draggable ? this._renderDragMultipleImage() : nothing}
 		`;
 
 	}

package/package.json

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