@brightspace-ui/core 3.206.3 → 3.207.0

package/components/list/demo/demo-list-nested.js

@@ -34,6 +34,7 @@ class ListDemoNested extends LitElement {
 			showLoadMore: { type: Boolean, attribute: 'show-load-more' },
 			noPrimaryAction: { type: Boolean, attribute: 'no-primary-action' },
 			disableListGrid: { type: Boolean, attribute: 'disable-list-grid' },
+			dragHandleShowAlways: { type: Boolean, attribute: 'drag-handle-show-always' },
 			_items: { state: true },
 			_loadedItems: { state: true },
 			_remainingItemCount: { state: true },
@@ -176,6 +177,7 @@ class ListDemoNested extends LitElement {
 			<d2l-list
 				?grid="${!this.disableListGrid}"
 				drag-multiple
+				?drag-handle-show-always="${this.dragHandleShowAlways}"
 				?drop-nested-only="${this.dropNestedOnly}"
 				slot="${ifDefined(nested ? 'nested' : undefined)}"
 				item-count="${this._items.length}"

package/components/list/demo/list-drag-and-drop.html

@@ -62,6 +62,13 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Always Show Handle</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested demo-item-key="imgPrimaryAndSupporting" is-draggable selectable drag-handle-show-always></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
 
 	</d2l-demo-page>
 

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

@@ -268,23 +268,24 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			/**
 			 * **Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.
 			 * @type {string}
-			 */
+			*/
 			dragHandleText: { type: String, attribute: 'drag-handle-text' },
 			/**
 			 * **Drag & drop:** Whether nested items can be dropped on this item
 			 * @type {boolean}
-			 */
+			*/
 			dropNested: { type: Boolean, attribute: 'drop-nested' },
 			/**
 			 * **Drag & drop:** Text to drag and drop
 			 * @type {string}
-			 */
+			*/
 			dropText: { type: String, attribute: 'drop-text' },
 			/**
 			 * Value to identify item if selectable
 			 * @type {string}
-			 */
+			*/
 			key: { type: String, reflect: true },
+			_dragHandleShowAlways: { type: Boolean, attribute: '_drag-handle-show-always', reflect: true },
 			_draggingOver: { type: Boolean },
 			_dropLocation: { type: Number, reflect: true, attribute: '_drop-location' },
 			_focusingDragHandle: { type: Boolean },
@@ -345,6 +346,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				}
 				:host([selected]) d2l-list-item-drag-handle,
 				:host([current]) d2l-list-item-drag-handle,
+				:host([_drag-handle-show-always]) 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,
@@ -379,6 +381,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		const list = this.getRootList();
 		this._dragMultiple = list?.hasAttribute('drag-multiple');
 		this._dropNestedOnly = list?.hasAttribute('drop-nested-only');
+		this._dragHandleShowAlways = list?.dragHandleShowAlways;
 	}
 
 	firstUpdated(changedProperties) {

package/components/list/list.js

@@ -53,6 +53,11 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 			 * @type {array}
 			 */
 			breakpoints: { type: Array },
+			/**
+			 * Always show drag handle
+			 * @type {boolean}
+			 */
+			dragHandleShowAlways: { type: Boolean, attribute: 'drag-handle-show-always' },
 			/**
 			 * Whether the user can drag multiple items
 			 * @type {boolean}
@@ -264,6 +269,9 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		if (changedProperties.has('layout') && changedProperties.get('layout') !== undefined && this.layout) {
 			this._updateItemLayouts();
 		}
+		if (changedProperties.has('dragHandleShowAlways')) {
+			this._updateItemDragHandleShowAlways();
+		}
 	}
 
 	getItems(slot) {
@@ -500,6 +508,7 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		});
 
 		this._updateItemLayouts(items);
+		this._updateItemDragHandleShowAlways(items);
 
 		/** @ignore */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-showing-count-change', {
@@ -522,11 +531,15 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		});
 	}
 
+	_updateItemDragHandleShowAlways(items) {
+		if (!items) items = this.getItems();
+		items.forEach(item => item._dragHandleShowAlways = this.dragHandleShowAlways);
+	}
+
 	_updateItemLayouts(items) {
 		if (!items) items = this.getItems();
 		items.forEach(item => item.layout = (this.layout === listLayouts.tiles ? 'tile' : 'normal'));
 	}
-
 }
 
 customElements.define('d2l-list', List);

package/custom-elements.json

@@ -8759,6 +8759,10 @@
         {
           "name": "disable-list-grid",
           "type": "boolean"
+        },
+        {
+          "name": "drag-handle-show-always",
+          "type": "boolean"
         }
       ],
       "properties": [
@@ -8836,6 +8840,11 @@
           "name": "disableListGrid",
           "attribute": "disable-list-grid",
           "type": "boolean"
+        },
+        {
+          "name": "dragHandleShowAlways",
+          "attribute": "drag-handle-show-always",
+          "type": "boolean"
         }
       ]
     },
@@ -10589,6 +10598,11 @@
           "description": "Text to show in label tooltip on inline add button. Defaults to \"Add Item\".",
           "type": "string"
         },
+        {
+          "name": "drag-handle-show-always",
+          "description": "Always show drag handle",
+          "type": "boolean"
+        },
         {
           "name": "drop-nested-only",
           "description": "Disable ability to drop items above or below this item",
@@ -10660,6 +10674,12 @@
           "description": "Text to show in label tooltip on inline add button. Defaults to \"Add Item\".",
           "type": "string"
         },
+        {
+          "name": "dragHandleShowAlways",
+          "attribute": "drag-handle-show-always",
+          "description": "Always show drag handle",
+          "type": "boolean"
+        },
         {
           "name": "dropNestedOnly",
           "attribute": "drop-nested-only",

package/package.json

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