@brightspace-ui/core 2.100.0 → 2.100.2

package/components/demo/demo-snippet.js

@@ -50,6 +50,7 @@ class DemoSnippet extends LitElement {
 			}
 			.d2l-demo-snippet-demo {
 				flex: 1 1 auto;
+				min-width: 0;
 				position: relative;
 			}
 			:host([full-width]) .d2l-demo-snippet-demo-wrapper.fullscreen .d2l-demo-snippet-demo {

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

@@ -105,6 +105,7 @@ class DragState {
 
 	_cleanUpOnLeave() {
 		if (!this._activeDropTarget) return;
+		this._activeDropTarget._draggingOver = false;
 		this._activeDropTarget._dropLocation = dropLocation.void;
 		this._activeDropTarget._inTopArea = false;
 		this._activeDropTarget._inBottomArea = false;
@@ -363,7 +364,6 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 
 	firstUpdated(changedProperties) {
 		this.addEventListener('dragenter', this._onHostDragEnter.bind(this));
-		this.addEventListener('dragleave', this._onHostDragLeave.bind(this));
 		super.firstUpdated(changedProperties);
 	}
 
@@ -738,14 +738,16 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 
 	_onHostDragEnter(e) {
 		const dragState = getDragState();
-		if (this === dragState.dragTarget) return;
 
 		// check if any of the drag targets are ancestors of the drop target
 		const invalidDropTarget = dragState.dragTargets.find(dragTarget => {
 			return isComposedAncestor(dragTarget, this);
 		});
 
-		if (invalidDropTarget) return;
+		if (invalidDropTarget) {
+			dragState.clear();
+			return;
+		}
 
 		// assert that both the source and target are from the same list - may allow this in the future
 		const targetRoot = dragState.dragTargets[0] && dragState.dragTargets[0]._getRootList();
@@ -756,10 +758,6 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		e.dataTransfer.dropEffect = 'move';
 	}
 
-	_onHostDragLeave() {
-		this._draggingOver = false;
-	}
-
 	_onTouchCancel() {
 		if (this._touchTimeoutId) clearTimeout(this._touchTimeoutId);
 		this._touchStarted = false;
@@ -798,7 +796,6 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		if (!listItem) return;
 		// simulate host dragenter
 		if (listItem !== this && this._currentTouchListItem !== listItem) {
-			this._currentTouchListItem.dispatchEvent(createDragEvent('dragleave'));
 			listItem.dispatchEvent(createDragEvent('dragenter'));
 			this._currentTouchListItem = listItem;
 		}

package/components/list/list-item-drag-handle.js

@@ -70,7 +70,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	static get styles() {
 		return [ buttonStyles, css`
 			:host {
-				align-items: center;
 				display: flex;
 				margin: 0.25rem;
 			}
@@ -83,7 +82,27 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			}
 			.d2l-list-item-drag-handle-keyboard-button {
 				display: grid;
+				gap: 2px;
 				grid-auto-rows: 1fr 1fr;
+				position: relative;
+			}
+			.d2l-list-item-drag-handle-keyboard-button-up,
+			.d2l-list-item-drag-handle-keyboard-button-down {
+				height: 1.1rem;
+				left: -0.2rem;
+				position: absolute;
+				width: 1.3rem;
+			}
+			.d2l-list-item-drag-handle-keyboard-button-up {
+				top: -0.25rem;
+			}
+			.d2l-list-item-drag-handle-keyboard-button-down {
+				bottom: -0.25rem;
+			}
+			:host([dir="rtl"]) .d2l-list-item-drag-handle-keyboard-button-up,
+			:host([dir="rtl"]) .d2l-list-item-drag-handle-keyboard-button-down {
+				left: auto;
+				right: -0.2rem;
 			}
 			.d2l-list-item-drag-handle-dragger-button,
 			.d2l-list-item-drag-handle-keyboard-button {
@@ -96,18 +115,40 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			button::-moz-focus-inner {
 				border: 0;
 			}
-			.d2l-button-icon {
+			.d2l-button-dragger-icon {
 				height: 0.9rem;
 				width: 0.9rem;
 			}
+			.d2l-button-up-icon,
+			.d2l-button-down-icon {
+				border-radius: 0.1rem;
+				height: 0.85rem;
+				width: 0.9rem;
+			}
+			.d2l-button-up-icon {
+				border-top-left-radius: 0.3rem;
+				border-top-right-radius: 0.3rem;
+			}
+			.d2l-button-down-icon {
+				border-bottom-left-radius: 0.3rem;
+				border-bottom-right-radius: 0.3rem;
+			}
 			button,
 			button[disabled]:hover,
 			button[disabled]:focus {
 				background-color: var(--d2l-color-gypsum);
 				color: var(--d2l-color-ferrite);
 			}
-			button:hover,
-			button:focus {
+			.d2l-list-item-drag-handle-dragger-button:hover,
+			.d2l-list-item-drag-handle-dragger-button:focus {
+				background-color: var(--d2l-color-mica);
+			}
+			.d2l-list-item-drag-handle-keyboard-button:hover,
+			.d2l-list-item-drag-handle-keyboard-button:focus {
+				background-color: transparent;
+			}
+			.d2l-list-item-drag-handle-keyboard-button:hover > d2l-icon,
+			.d2l-list-item-drag-handle-keyboard-button:focus > d2l-icon {
 				background-color: var(--d2l-color-mica);
 			}
 			button[disabled] {
@@ -270,7 +311,7 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				@keydown="${this._onInactiveKeyboard}"
 				aria-label="${this._defaultLabel}"
 				?disabled="${this.disabled}">
-				<d2l-icon icon="tier1:dragger" class="d2l-button-icon"></d2l-icon>
+				<d2l-icon icon="tier1:dragger" class="d2l-button-dragger-icon"></d2l-icon>
 			</button>
 		`;
 	}
@@ -284,8 +325,10 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				@focusout="${this._onFocusOutKeyboardButton}"
 				id="${this._buttonId}"
 				@keydown="${this._onActiveKeyboard}">
-				<d2l-icon icon="tier1:arrow-toggle-up" @click="${this._dispatchActionUp}" class="d2l-button-icon"></d2l-icon>
-				<d2l-icon icon="tier1:arrow-toggle-down" @click="${this._dispatchActionDown}" class="d2l-button-icon"></d2l-icon>
+				<d2l-icon icon="tier1:arrow-toggle-up" class="d2l-button-up-icon"></d2l-icon>
+				<d2l-icon icon="tier1:arrow-toggle-down" class="d2l-button-down-icon"></d2l-icon>
+				<div class="d2l-list-item-drag-handle-keyboard-button-up" @click="${this._dispatchActionUp}"></div>
+				<div class="d2l-list-item-drag-handle-keyboard-button-down" @click="${this._dispatchActionDown}"></div>
 			</button>
 			${this._displayKeyboardTooltip ? html`<d2l-tooltip align="start" for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;

package/package.json

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