@brightspace-ui/core 3.323.0 → 3.325.0

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

@@ -1,9 +1,10 @@
 import './list-item-drag-image.js';
 import { css, html, nothing } from 'lit';
-import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
+import { findComposedAncestor, getScrollableAncestor, 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';
@@ -24,6 +25,8 @@ export const dropLocation = moveLocations; // backwards compatibility
 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
+const scrollContainerSensitivity = 60; // pixels between top/bottom of scrollable container to scroll for mobile
+const scrollSpeed = 10; // pixels to scroll for mobile
 
 const createDragEvent = (name) => {
 	const event = new Event(name, { bubbles: true });
@@ -427,6 +430,14 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		if (this.shadowRoot) this.shadowRoot.querySelector(`#${this._itemDragId}`).activateKeyboardMode();
 	}
 
+	get _isListItemDragAndDropMixin() {
+		return true;
+	}
+
+	#scrollableContainer;
+	#touchAction = '';
+	#improvedMobileDragAndDropFlag = getFlag('GAUD-10642-improved-mobile-drag-and-drop', true);
+
 	_annoucePositionChange(dragTargetKey, dropTargetKey, dropLocation) {
 		/** Dispatched when a draggable list item's position changes in the list. See [Event Details: d2l-list-item-position-change](#event-details%3A-d2l-list-item-position-change). */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-position-change', {
@@ -557,7 +568,20 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 
 	_findListItemFromCoordinates(x, y) {
 		const listNode = findComposedAncestor(this.parentNode, (node) => node && node.tagName === 'D2L-LIST');
-		return listNode.shadowRoot.elementFromPoint(x, y);
+		// remove this if when cleaning 'GAUD-10642-improved-mobile-drag-and-drop'
+		if (!this.#improvedMobileDragAndDropFlag) {
+			return listNode.shadowRoot.elementFromPoint(x, y);
+		}
+
+		// This is to make sure that in Firefox it looks for the list item
+		// in the shadow DOM (if rendered as part of a template)
+		// or in the light DOM (when using the default slot of a parent element)
+		const node = listNode.getRootNode().elementFromPoint(x, y);
+		if (node?._isListItemDragAndDropMixin) {
+			return node;
+		}
+
+		return null;
 	}
 
 	_getKeyboardText() {
@@ -792,6 +816,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	_onTouchCancel() {
 		if (this._touchTimeoutId) clearTimeout(this._touchTimeoutId);
 		this._touchStarted = false;
+		if (this.#improvedMobileDragAndDropFlag) this.#resetScrollableContainer();
 	}
 
 	/**
@@ -800,14 +825,22 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 	_onTouchEnd(e) {
 		if (this._touchTimeoutId) clearTimeout(this._touchTimeoutId);
 		if (!this._touchStarted) return;
-		e.preventDefault();
+		if (e.cancelable) e.preventDefault();
 		this._touchStarted = false;
+		// leave the code inside the if when removing 'GAUD-10642-improved-mobile-drag-and-drop'
+		if (this.#improvedMobileDragAndDropFlag) this.#resetScrollableContainer();
 		this._currentTouchListItem = undefined;
 		// simulate drop if over a drop area
 		const touch = e.changedTouches[0];
 		const listItem = this._findListItemFromCoordinates(touch.clientX, touch.clientY);
-		const dropGrid = listItem.shadowRoot.querySelector('.d2l-list-item-drag-drop-grid');
-		if (dropGrid) dropGrid.dispatchEvent(createDragEvent('drop'));
+		// remove the if when cleaning 'GAUD-10642-improved-mobile-drag-and-drop' and leave the else code block
+		if (!this.#improvedMobileDragAndDropFlag) {
+			const dropGrid = listItem.shadowRoot.querySelector('.d2l-list-item-drag-drop-grid');
+			if (dropGrid) dropGrid.dispatchEvent(createDragEvent('drop'));
+		} else if (listItem) {
+			const dropGrid = listItem.shadowRoot.querySelector('.d2l-list-item-drag-drop-grid');
+			if (dropGrid) dropGrid.dispatchEvent(createDragEvent('drop'));
+		}
 		// simulate dragend
 		if (this.shadowRoot)
 			this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragend'));
@@ -823,6 +856,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			e.preventDefault();
 		}
 		const touch = e.changedTouches[0];
+		if (this.#improvedMobileDragAndDropFlag) this.#doTouchScroll(touch);
+
 		const listItem = this._findListItemFromCoordinates(touch.clientX, touch.clientY);
 		if (!listItem) return;
 		// simulate host dragenter
@@ -830,6 +865,7 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 			listItem.dispatchEvent(createDragEvent('dragenter'));
 			this._currentTouchListItem = listItem;
 		}
+
 		// get the drop area
 		const dropGrid = listItem.shadowRoot.querySelector('.d2l-list-item-drag-drop-grid');
 		if (!dropGrid) return;
@@ -845,6 +881,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 				this._currentTouchDropArea = movingOverElem;
 			}
 		}
+		// Delete all of the following code when removing 'GAUD-10642-improved-scroll-in-mobile'
+		if (this.#improvedMobileDragAndDropFlag) return;
 		// scroll the viewport if we've reached the end
 		if (touch.clientY > window.innerHeight / 2 && window.innerHeight - touch.clientY < scrollSensitivity) {
 			// scroll down
@@ -862,6 +900,17 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		// simulate dragstart for touch and hold
 		this._touchTimeoutId = setTimeout(() => {
 			this._touchStarted = true;
+			// leave the code inside the if when removing 'GAUD-10642-improved-mobile-drag-and-drop'
+			if (this.#improvedMobileDragAndDropFlag) {
+				// search for scrollable container
+				this.#scrollableContainer = getScrollableAncestor(this);
+				if (this.#scrollableContainer) {
+					// check if it has the touch-action style already
+					const touchAction = this.#scrollableContainer.style.getPropertyValue('touch-action');
+					if (touchAction && touchAction !== 'none') this.#touchAction = touchAction;
+					this.#scrollableContainer.style.setProperty('touch-action', 'none');
+				}
+			}
 			if (this.shadowRoot)
 				this.shadowRoot.querySelector('.d2l-list-item-drag-area').dispatchEvent(createDragEvent('dragstart'));
 		}, touchHoldDuration);
@@ -933,6 +982,38 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		return this._dropLocation === dropLocation.above ? html`<div class="d2l-list-item-drag-top-marker">${renderTemplate}</div>` : null;
 	}
 
+	#doTouchScroll(touch) {
+		if (!touch || !this.#scrollableContainer) return;
+		if (this.#scrollableContainer === document.body) {
+			this.#handleViewPortTouchScrolling(touch);
+		} else {
+			this.#handleContainerTouchScrolling(touch);
+		}
+	}
+
+	#handleContainerTouchScrolling(touch) {
+		// scroll the viewport if we've reached the end
+		const rect = this.#scrollableContainer.getBoundingClientRect();
+		if (rect.bottom - touch.clientY < scrollContainerSensitivity) {
+			// scroll down
+			this.#scrollableContainer.scrollBy(0, scrollSpeed);
+		} else if (touch.clientY - rect.top < scrollContainerSensitivity) {
+			// scroll up
+			this.#scrollableContainer.scrollBy(0, -scrollSpeed);
+		}
+	}
+
+	#handleViewPortTouchScrolling(touch) {
+		const height = window.innerHeight;
+		if (touch.clientY > height / 2 && height - touch.clientY < scrollSensitivity) {
+			// scroll down
+			window.scrollBy(0, scrollSpeed);
+		} else if (touch.clientY < height / 2 && touch.clientY < scrollSensitivity) {
+			// scroll up
+			window.scrollBy(0, -scrollSpeed);
+		}
+	}
+
 	#onDropEnterHelper(e, isTopHalf, isMiddle) {
 		if (this.dropDisabled) return;
 		e.dataTransfer.dropEffect = 'move';
@@ -954,4 +1035,16 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
 		const dragState = getDragState();
 		dragState.setActiveDropTarget(this, location);
 	}
+
+	#resetScrollableContainer() {
+		if (this.#scrollableContainer) {
+			if (this.#touchAction) {
+				this.#scrollableContainer.style.setProperty('touch-action', this.#touchAction);
+			} else {
+				this.#scrollableContainer.style.removeProperty('touch-action');
+			}
+			this.#touchAction = '';
+		}
+		this.#scrollableContainer = undefined;
+	}
 };

package/components/toolbar/toolbar-button-toggle.js

@@ -0,0 +1,111 @@
+import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
+import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
+import { toolbarButtonStyles } from './toolbar-item-styles.js';
+import { ToolbarItemMixin } from './toolbar-item-mixin.js';
+
+/**
+ * A toolbar toggle button that performs an action and supports pressed and expanded states
+ */
+class ToolbarButtonToggle extends SlottedIconMixin(FocusMixin(ToolbarItemMixin(ThemeMixin(PropertyRequiredMixin(LitElement))))) {
+
+	static properties = {
+		/**
+		 * Disables the toolbar button
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * Expandable state
+		 * @type {boolean}
+		 */
+		expandable: { type: Boolean },
+		/**
+		 * Expanded state
+		 * @type {boolean}
+		 */
+		expanded: { type: Boolean },
+		/**
+		 * Pressed state
+		 * @type {boolean}
+		 */
+		pressed: { type: Boolean },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Accessible text for the button
+		 * @type {string}
+		 */
+		text: { type: String, required: true }
+	};
+
+	static styles = [super.styles, toolbarButtonStyles, css`
+		button[aria-pressed="true"] > .background {
+			background-color: var(--d2l-color-celestine-plus-2);
+			transform: scale(1, 1);
+		}
+		button[aria-pressed="true"]:hover > .background {
+			background-color: #dbf5ff; /* not a daylight color */
+		}
+		button[aria-pressed="true"] ::slotted(d2l-icon-custom),
+		button[aria-pressed="true"] d2l-icon {
+			fill: var(--d2l-color-celestine);
+		}
+		:host([theme="dark"]) button[aria-pressed="true"] > .background,
+		:host([theme="dark"]) button[aria-pressed="true"]:hover > .background {
+			background-color: var(--d2l-color-tungsten);
+		}
+		:host([theme="dark"]) button[aria-pressed="true"] ::slotted(d2l-icon-custom),
+		:host([theme="dark"]) button[aria-pressed="true"] d2l-icon {
+			fill: var(--d2l-color-regolith);
+		}
+	`];
+
+	constructor() {
+		super();
+		this.disabled = false;
+		this.expandable = false;
+		this.expanded = false;
+		this.pressed = false;
+		this.text = '';
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	render() {
+		return html`
+			<button
+				aria-disabled="${this.disabled ? 'true' : 'false'}"
+				aria-expanded="${ifDefined(this.expandable ? (this.expanded ? 'true' : 'false') : undefined)}"
+				aria-label="${this.text}"
+				aria-pressed="${ifDefined(!this.expandable ? (this.pressed ? 'true' : 'false') : undefined)}"
+				@click="${this.#handleClick}"
+				tabindex="${this._activeFocusable ? 0 : -1}"
+				title="${this.text}"
+				type="button">
+				<div class="background"></div>
+				${this._renderIcon()}
+			</button>
+		`;
+	}
+
+	#handleClick(e) {
+		e.stopPropagation();
+		if (this.disabled) return;
+
+		if (this.expandable) {
+			this.expanded = !this.expanded;
+		} else {
+			this.pressed = !this.pressed;
+		}
+
+		/** Dispatched when the pressed state changes. */
+		this.dispatchEvent(new CustomEvent('d2l-toolbar-button-toggle-change'));
+	}
+
+}
+
+customElements.define('d2l-toolbar-button-toggle', ToolbarButtonToggle);

package/components/toolbar/toolbar-button.js

@@ -4,11 +4,12 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
 import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
 import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 import { toolbarButtonStyles } from './toolbar-item-styles.js';
+import { ToolbarItemMixin } from './toolbar-item-mixin.js';
 
 /**
  * A toolbar button that performs an action
  */
-class ToolbarButton extends SlottedIconMixin(FocusMixin(ThemeMixin(PropertyRequiredMixin(LitElement)))) {
+class ToolbarButton extends SlottedIconMixin(FocusMixin(ToolbarItemMixin(ThemeMixin(PropertyRequiredMixin(LitElement))))) {
 
 	static properties = {
 		/**
@@ -20,8 +21,7 @@ class ToolbarButton extends SlottedIconMixin(FocusMixin(ThemeMixin(PropertyRequi
 		 * ACCESSIBILITY: REQUIRED: Accessible text for the button
 		 * @type {string}
 		 */
-		text: { type: String, required: true },
-		_activeFocusable: { state: true }
+		text: { type: String, required: true }
 	};
 
 	static styles = [super.styles, toolbarButtonStyles];
@@ -30,7 +30,6 @@ class ToolbarButton extends SlottedIconMixin(FocusMixin(ThemeMixin(PropertyRequi
 		super();
 		this.disabled = false;
 		this.text = '';
-		this._activeFocusable = false;
 	}
 
 	static get focusElementSelector() {
@@ -53,7 +52,11 @@ class ToolbarButton extends SlottedIconMixin(FocusMixin(ThemeMixin(PropertyRequi
 	}
 
 	#handleClick(e) {
-		if (this.disabled) e.stopPropagation();
+		e.stopPropagation();
+		if (this.disabled) return;
+
+		/** Dispatched when the toggle is clicked. */
+		this.dispatchEvent(new CustomEvent('click'));
 	}
 
 }

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

@@ -0,0 +1,16 @@
+export const ToolbarItemMixin = superclass => class extends superclass {
+
+	static properties = {
+		_activeFocusable: { state: true }
+	};
+
+	constructor() {
+		super();
+		this._activeFocusable = false;
+	}
+
+	get isToolbarItem() {
+		return true;
+	}
+
+};

package/components/toolbar/toolbar.js

@@ -81,7 +81,7 @@ class Toolbar extends PropertyRequiredMixin(LitElement) {
 
 	#getFocusables() {
 		return this.#slotRef.value?.assignedElements({ flatten: true })
-			.filter(elem => elem.tagName === 'D2L-TOOLBAR-BUTTON') ?? [];
+			.filter(elem => elem.isToolbarItem) ?? [];
 	}
 
 	async #handleKeyDown(e) {

package/custom-elements.json

@@ -17365,6 +17365,106 @@
         }
       ]
     },
+    {
+      "name": "d2l-toolbar-button-toggle",
+      "path": "./components/toolbar/toolbar-button-toggle.js",
+      "description": "A toolbar toggle button that performs an action and supports pressed and expanded states",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the toolbar button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expandable",
+          "description": "Expandable state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expanded",
+          "description": "Expanded state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "pressed",
+          "description": "Pressed state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[[null],\"toolbarButtonStyles\",null]"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the toolbar button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expandable",
+          "attribute": "expandable",
+          "description": "Expandable state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expanded",
+          "attribute": "expanded",
+          "description": "Expanded state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "pressed",
+          "attribute": "pressed",
+          "description": "Pressed state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
+        {
+          "name": "isToolbarItem",
+          "type": "boolean"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-toolbar-button-toggle-change",
+          "description": "Dispatched when the pressed state changes."
+        }
+      ]
+    },
     {
       "name": "d2l-toolbar-button",
       "path": "./components/toolbar/toolbar-button.js",
@@ -17413,6 +17513,16 @@
           "attribute": "icon",
           "description": "Preset icon key (e.g. \"tier1:gear\")",
           "type": "string"
+        },
+        {
+          "name": "isToolbarItem",
+          "type": "boolean"
+        }
+      ],
+      "events": [
+        {
+          "name": "click",
+          "description": "Dispatched when the toggle is clicked."
         }
       ]
     },

package/helpers/dom.js

@@ -57,6 +57,19 @@ export function findComposedAncestor(node, predicate) {
 	return null;
 }
 
+export function getScrollableAncestor(node) {
+	return findComposedAncestor(node, (el) => {
+		if (el.nodeType !== Node.ELEMENT_NODE) return false;
+		if (el === document.body) return true;
+		const styles = getComputedStyle(el);
+		const overflowY = styles.getPropertyValue('overflow-y');
+		const overflowX = styles.getPropertyValue('overflow-x');
+		const overflow = styles.getPropertyValue('overflow');
+		const overflowValues = ['auto', 'scroll'];
+		return (overflowValues.includes(overflowY) || overflowValues.includes(overflowX) || overflowValues.includes(overflow));
+	});
+}
+
 export function getBoundingAncestor(node) {
 	return findComposedAncestor(node, (node) => {
 		if (node === document.body) return false;

package/package.json

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