@brightspace-ui/core 2.101.3 → 2.103.0

package/README.md

@@ -71,7 +71,7 @@ npm install @brightspace-ui/core
   * [FormElementMixin](components/form/docs/form-element-mixin.md): allow components to participate in forms and validation
   * [InteractiveMixin](mixins/interactive-mixin.md): enables toggling interactive elements inside of nested grids
   * [LabelledMixin](mixins/labelled-mixin.md): label custom elements by referencing elements across DOM scopes
-  * [LocalizeMixin](mixins/localize-mixin.md): localize text in your components
+  * [LocalizeMixin](mixins/localize/): localize text in your components
   * [ProviderMixin](mixins/provider-mixin.md): provide and consume data across elements in a DI-like fashion
   * [RtlMixin](mixins/rtl-mixin.md): enable components to define RTL styles
   * [SkeletonMixin](components/skeleton/): make components skeleton-aware

package/components/button/button-icon.js

@@ -167,7 +167,6 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 				aria-haspopup="${ifDefined(this.ariaHaspopup)}"
 				aria-label="${this.ariaLabel ? this.ariaLabel : ifDefined(this.text)}"
 				?autofocus="${this.autofocus}"
-				class="d2l-label-text"
 				?disabled="${this.disabled && !this.disabledTooltip}"
 				form="${ifDefined(this.form)}"
 				formaction="${ifDefined(this.formaction)}"

package/components/button/button-move.js

@@ -0,0 +1,245 @@
+import '../colors/colors.js';
+import '../icons/icon.js';
+import '../tooltip/tooltip.js';
+import { css, html, LitElement } from 'lit';
+import { buttonStyles } from './button-styles.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { RtlMixin } from '../../mixins/rtl-mixin.js';
+
+const keyCodes = Object.freeze({
+	DOWN: 40,
+	END: 35,
+	HOME: 36,
+	LEFT: 37,
+	RIGHT: 39,
+	UP: 38
+});
+
+export const moveActions = Object.freeze({
+	up: 'up',
+	down: 'down',
+	left: 'left',
+	right: 'right',
+	rootHome: 'root-home',
+	home: 'home',
+	rootEnd: 'root-end',
+	end: 'end'
+});
+
+/**
+ * A button component that provides a move action via a single button.
+ */
+class ButtonMove extends FocusMixin(RtlMixin(LitElement)) {
+
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			autofocus: { type: Boolean, reflect: true },
+			/**
+			 * A description to be added to the button for accessibility when text on button does not provide enough context
+			 * @type {string}
+			 */
+			description: { type: String },
+			/**
+			 * Disables the button
+			 * @type {boolean}
+			 */
+			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Tooltip text when disabled
+			 * @type {string}
+			 */
+			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
+			/**
+			 * REQUIRED: Accessible text for the button
+			 * @type {string}
+			 */
+			text: { type: String, reflect: true }
+
+		};
+	}
+
+	static get styles() {
+		return [ buttonStyles,
+			css`
+				:host {
+					display: inline-block;
+					line-height: 0;
+				}
+				:host([hidden]) {
+					display: none;
+				}
+				button {
+					background-color: transparent;
+					display: flex;
+					flex-direction: column;
+					gap: 2px;
+					margin: 0;
+					min-height: 1.8rem;
+					padding: 0;
+					position: relative;
+					width: 0.9rem;
+				}
+				d2l-icon {
+					border-radius: 0.1rem;
+					height: 0.85rem;
+					width: 0.9rem;
+				}
+				button:focus {
+					background-color: #ffffff;
+				}
+				button:hover > d2l-icon,
+				button:focus > d2l-icon {
+					background-color: var(--d2l-color-mica);
+				}
+				.up-icon {
+					border-top-left-radius: 0.3rem;
+					border-top-right-radius: 0.3rem;
+				}
+				.down-icon {
+					border-bottom-left-radius: 0.3rem;
+					border-bottom-right-radius: 0.3rem;
+				}
+
+				.up-layer,
+				.down-layer {
+					height: 1.1rem;
+					left: -0.2rem;
+					position: absolute;
+					width: 1.3rem;
+				}
+				.up-layer {
+					top: -0.25rem;
+				}
+				.down-layer {
+					bottom: -0.25rem;
+				}
+				:host([dir="rtl"]) .up-layer,
+				:host([dir="rtl"]) .down-layer {
+					left: auto;
+					right: -0.2rem;
+				}
+
+
+				/* Firefox includes a hidden border which messes up button dimensions */
+				button::-moz-focus-inner {
+					border: 0;
+				}
+				:host([disabled]) button {
+					cursor: default;
+					opacity: 0.5;
+				}
+				button[disabled]:hover > d2l-icon {
+					background-color: transparent;
+				}
+			`
+		];
+	}
+
+	constructor() {
+		super();
+		this.disabled = false;
+		/** @ignore */
+		this.autofocus = false;
+		/** @internal */
+		this._buttonId = getUniqueId();
+		/** @internal */
+		this._describedById = getUniqueId();
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('click', this._handleClick, true);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('click', this._handleClick, true);
+	}
+
+	render() {
+		return html`
+			<button
+				aria-describedby="${ifDefined(this.description ? this._describedById : undefined)}"
+				aria-disabled="${ifDefined(this.disabled && this.disabledTooltip ? 'true' : undefined)}"
+				aria-label="${ifDefined(this.text)}"
+				?autofocus="${this.autofocus}"
+				?disabled="${this.disabled && !this.disabledTooltip}"
+				id="${this._buttonId}"
+				@keydown="${this._handleKeydown}"
+				title="${ifDefined(this.text)}"
+				type="button">
+				<d2l-icon icon="tier1:arrow-toggle-up" class="up-icon"></d2l-icon>
+				<d2l-icon icon="tier1:arrow-toggle-down" class="down-icon"></d2l-icon>
+				<div class="up-layer" @click="${this._handleUpClick}"></div>
+				<div class="down-layer" @click="${this._handleDownClick}"></div>
+		</button>
+		${this.description ? html`<span id="${this._describedById}" hidden>${this.description}</span>` : null}
+		${this.disabled && this.disabledTooltip ? html`<d2l-tooltip for="${this._buttonId}">${this.disabledTooltip}</d2l-tooltip>` : ''}
+		`;
+	}
+
+	_dispatchAction(action) {
+		if (!action) return;
+		this.dispatchEvent(new CustomEvent('d2l-button-move-action', {
+			detail: { action },
+			bubbles: false
+		}));
+	}
+
+	_handleClick(e) {
+		if (this.disabled) {
+			e.stopPropagation();
+		}
+	}
+
+	_handleDownClick() {
+		this._dispatchAction(moveActions.down);
+	}
+
+	_handleKeydown(e) {
+		let action;
+		switch (e.keyCode) {
+			case keyCodes.UP:
+				action = moveActions.up;
+				break;
+			case keyCodes.DOWN:
+				action = moveActions.down;
+				break;
+			case keyCodes.LEFT:
+				action = moveActions.left;
+				break;
+			case keyCodes.RIGHT:
+				action = moveActions.right;
+				break;
+			case keyCodes.HOME:
+				action = (e.ctrlKey ? moveActions.rootHome : moveActions.home);
+				break;
+			case keyCodes.END:
+				action = (e.ctrlKey ? moveActions.rootEnd : moveActions.end);
+				break;
+			default:
+				return;
+		}
+
+		this._dispatchAction(action);
+		e.preventDefault();
+		e.stopPropagation();
+
+	}
+
+	_handleUpClick() {
+		this._dispatchAction(moveActions.up);
+	}
+
+}
+
+customElements.define('d2l-button-move', ButtonMove);

package/components/button/demo/button-move.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+			import '../button-move.js';
+		</script>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="d2l-button-move">
+
+			<h2>Move Button</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-move id="move-button" text="Reorder Item"></d2l-button-move>
+					<script>
+						document.querySelector('#move-button').addEventListener('d2l-button-move-action', e => {
+							console.log('d2l-button-move-action', e.target, e.detail);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Move Button Disabled</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-move text="Reorder Item" disabled></d2l-button-move>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Move Button Disabled with Tooltip</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-move text="Reorder Item" disabled disabled-tooltip="Optional disabled tooltip"></d2l-button-move>
+				</template>
+			</d2l-demo-snippet>
+
+	</body>
+</html>

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

@@ -1,12 +1,12 @@
-import '../button/button-icon.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit';
 import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
-import { getFirstFocusableDescendant } from '../../helpers/focus.js';
+import { FocusMixin } from '../../mixins/focus-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { moveActions } from '../button/button-move.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 const keyCodes = Object.freeze({
@@ -43,7 +43,7 @@ let hasDisplayedKeyboardTooltip = false;
 /**
  * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
  */
-class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
+class ListItemDragHandle extends LocalizeCoreElement(FocusMixin(RtlMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -79,33 +79,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			.d2l-list-item-drag-handle-dragger-button {
 				background-color: unset;
 				display: block;
-			}
-			.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 {
 				margin: 0;
 				min-height: 1.8rem;
 				padding: 0;
@@ -119,20 +92,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				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 {
@@ -143,14 +102,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			.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] {
 				cursor: default;
 				opacity: 0.5;
@@ -178,6 +129,10 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._movingElement = false;
 	}
 
+	static get focusElementSelector() {
+		return '.d2l-list-item-drag-handle-button';
+	}
+
 	render() {
 		return this._keyboardActive && !this.disabled ? this._renderKeyboardDragging() : this._renderDragger();
 	}
@@ -192,11 +147,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._keyboardActive = true;
 	}
 
-	focus() {
-		const node = getFirstFocusableDescendant(this);
-		if (node) node.focus();
-	}
-
 	get _defaultLabel() {
 		const namespace = 'components.list-item-drag-handle';
 		const defaultLabel = this.localize(`${namespace}.${'default'}`, 'name', this.text);
@@ -212,37 +162,96 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		}));
 	}
 
-	_dispatchActionDown() {
-		this._dispatchAction(dragActions.down);
+	async _doAction(action) {
+		this._dispatchAction(action);
+		const cell = findComposedAncestor(this, (parent) =>  parent.hasAttribute && parent.hasAttribute('draggable'));
+		if (cell) await cell.updateComplete;
+		await this.updateComplete;
+		this.focus();
+		this._movingElement = false;
 	}
 
-	_dispatchActionUp() {
-		this._dispatchAction(dragActions.up);
+	_onDraggerButtonClick() {
+		this.activateKeyboardMode();
 	}
 
-	async _onActiveKeyboard(e) {
-		if (!this._keyboardActive) {
+	_onDraggerButtonKeydown(e) {
+		if (e.keyCode !== keyCodes.ENTER && e.keyCode !== keyCodes.SPACE) return;
+		e.preventDefault();
+		this.activateKeyboardMode();
+	}
+
+	_onKeyboardButtonFocusIn() {
+		if (hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
+	_onKeyboardButtonFocusOut(e) {
+		this._displayKeyboardTooltip = false;
+		if (this._movingElement) {
+			this._movingElement = false;
+			e.stopPropagation();
+			e.preventDefault();
 			return;
 		}
+		this._keyboardActive = false;
+		this._dispatchAction(dragActions.save);
+		e.stopPropagation();
+	}
+
+	async _onMoveButtonAction(e) {
+
 		let action = null;
-		switch (e.keyCode) {
-			case keyCodes.UP:
+		switch (e.detail.action) {
+			case moveActions.up:
 				this._movingElement = true;
 				action = dragActions.up;
 				this.updateComplete.then(() => this.blur()); // tell screenreaders to refocus
 				break;
-			case keyCodes.DOWN:
+			case moveActions.down:
 				this._movingElement = true;
 				action = dragActions.down;
 				break;
-			case keyCodes.HOME:
+			case moveActions.right:
+				this._movingElement = true;
+				action = (this.dir === 'rtl' ? dragActions.unnest : dragActions.nest);
+				break;
+			case moveActions.left:
+				this._movingElement = true;
+				action = (this.dir === 'rtl' ? dragActions.nest : dragActions.unnest) ;
+				break;
+			case moveActions.rootHome:
+				this._movingElement = true;
+				action = dragActions.rootFirst;
+				break;
+			case moveActions.home:
 				this._movingElement = true;
-				action = (e.ctrlKey ? dragActions.rootFirst : dragActions.first);
+				action = dragActions.first;
 				break;
-			case keyCodes.END:
+			case moveActions.rootEnd:
 				this._movingElement = true;
-				action = (e.ctrlKey ? dragActions.rootLast : dragActions.last);
+				action = dragActions.rootLast;
 				break;
+			case moveActions.end:
+				this._movingElement = true;
+				action = dragActions.last;
+				break;
+			default:
+				return;
+		}
+
+		this._doAction(action);
+
+	}
+
+	async _onMoveButtonKeydown(e) {
+		if (!this._keyboardActive) {
+			return;
+		}
+
+		let action = null;
+		switch (e.keyCode) {
 			case keyCodes.TAB:
 				action = e.shiftKey ? dragActions.previousElement : dragActions.nextElement;
 				break;
@@ -250,14 +259,6 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				action = dragActions.cancel;
 				this.updateComplete.then(() => this._keyboardActive = false);
 				break;
-			case keyCodes.RIGHT:
-				this._movingElement = true;
-				action = (this.dir === 'rtl' ? dragActions.unnest : dragActions.nest);
-				break;
-			case keyCodes.LEFT:
-				this._movingElement = true;
-				action = (this.dir === 'rtl' ? dragActions.nest : dragActions.unnest) ;
-				break;
 			case keyCodes.ENTER:
 			case keyCodes.SPACE:
 				action = dragActions.save;
@@ -266,49 +267,19 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			default:
 				return;
 		}
-		this._dispatchAction(action);
-		e.preventDefault();
-		e.stopPropagation();
-		const cell = findComposedAncestor(this, (parent) =>  parent.hasAttribute && parent.hasAttribute('draggable'));
-		if (cell) await cell.updateComplete;
-		await this.updateComplete;
-		this.focus();
-		this._movingElement = false;
-	}
 
-	_onFocusInKeyboardButton() {
-		if (hasDisplayedKeyboardTooltip) return;
-		this._displayKeyboardTooltip = true;
-		hasDisplayedKeyboardTooltip = true;
-	}
-
-	_onFocusOutKeyboardButton(e) {
-		this._displayKeyboardTooltip = false;
-		if (this._movingElement) {
-			this._movingElement = false;
-			e.stopPropagation();
-			e.preventDefault();
-			return;
-		}
-		this._keyboardActive = false;
-		this._dispatchAction(dragActions.save);
+		e.preventDefault();
 		e.stopPropagation();
-	}
+		this._doAction(action);
 
-	_onInactiveKeyboard(e) {
-		if (e.type === 'click' || e.keyCode === keyCodes.ENTER || e.keyCode === keyCodes.SPACE) {
-			this._dispatchAction(dragActions.active);
-			this._keyboardActive = true;
-			e.preventDefault();
-		}
 	}
 
 	_renderDragger() {
 		return html`
 			<button
-				class="d2l-list-item-drag-handle-dragger-button"
-				@click="${this._onInactiveKeyboard}"
-				@keydown="${this._onInactiveKeyboard}"
+				class="d2l-list-item-drag-handle-dragger-button d2l-list-item-drag-handle-button"
+				@click="${this._onDraggerButtonClick}"
+				@keydown="${this._onDraggerButtonKeydown}"
 				aria-label="${this._defaultLabel}"
 				?disabled="${this.disabled}">
 				<d2l-icon icon="tier1:dragger" class="d2l-button-dragger-icon"></d2l-icon>
@@ -318,19 +289,16 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 	_renderKeyboardDragging() {
 		return html`
-			<button
-				aria-label="${this._defaultLabel}"
-				class="d2l-list-item-drag-handle-keyboard-button"
-				@focusin="${this._onFocusInKeyboardButton}"
-				@focusout="${this._onFocusOutKeyboardButton}"
+			<d2l-button-move
+				class="d2l-list-item-drag-handle-button"
+				@d2l-button-move-action="${this._onMoveButtonAction}"
+				@focusin="${this._onKeyboardButtonFocusIn}"
+				@focusout="${this._onKeyboardButtonFocusOut}"
 				id="${this._buttonId}"
-				@keydown="${this._onActiveKeyboard}">
-				<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>` : ''}
+				@keydown="${this._onMoveButtonKeydown}"
+				text="${this._defaultLabel}">
+			</d2l-button-move>
+			${this._displayKeyboardTooltip ? html`<d2l-tooltip align="start" announced for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 	}
 

package/custom-elements.json

@@ -438,6 +438,66 @@
         }
       ]
     },
+    {
+      "name": "d2l-button-move",
+      "path": "./components/button/button-move.js",
+      "description": "A button component that provides a move action via a single button.",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "A description to be added to the button for accessibility when text on button does not provide enough context",
+          "type": "string"
+        },
+        {
+          "name": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "description": "REQUIRED: Accessible text for the button",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the button",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "A description to be added to the button for accessibility when text on button does not provide enough context",
+          "type": "string"
+        },
+        {
+          "name": "disabledTooltip",
+          "attribute": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Accessible text for the button",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the button",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-button-move-action"
+        }
+      ]
+    },
     {
       "name": "d2l-button-subtle",
       "path": "./components/button/button-subtle.js",