@brightspace-ui/core 1.218.0 → 1.219.3

package/components/alert/README.md

@@ -116,11 +116,27 @@ a pop-up at the bottom of the screen that automatically dismisses itself by defa
 <!-- docs: demo live name:d2l-alert-toast autoSize:false -->
 ```html
 <script type="module">
-	import '@brightspace-ui/core/components/alert/alert-toast.js';
+  import '@brightspace-ui/core/components/alert/alert-toast.js';
+  import '@brightspace-ui/core/components/button/button.js';
 </script>
+<!-- docs: start hidden content -->
+<script type="module">
+  var alertToast = document.querySelector('d2l-alert-toast');
+  var button = document.querySelector('#open');
+
+  alertToast.addEventListener('d2l-alert-toast-close', function() {
+    button.style.display = 'block';
+  });
 
+  button.addEventListener('click', () => {
+    alertToast.open = true;
+    button.style.display = 'none';
+  });
+</script>
+<d2l-button id="open" style="align-self:center;display:none;">Show Alert</d2l-button>
+<!-- docs: end hidden content -->
 <d2l-alert-toast type="default" no-auto-close open>
-	A default toast alert.
+  A default toast alert.
 </d2l-alert-toast>
 ```
 

package/components/dropdown/dropdown-content-mixin.js

@@ -159,7 +159,8 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				attribute: 'no-pointer'
 			},
 			/**
-			 * @ignore
+			 * Whether the dropdown is open or not
+			 * @type {boolean}
 			 */
 			opened: {
 				type: Boolean,

package/components/form/form-element-mixin.js

@@ -88,7 +88,6 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 			 */
 			invalid: { type: Boolean, reflect: true },
 			/**
-			 * @ignore
 			 * Name of the form control. Submitted with the form as part of a name/value pair.
 			 * @type {string}
 			 */

package/components/html-block/html-block.js

@@ -225,14 +225,17 @@ class HtmlBlock extends LitElement {
 
 	async _processRenderers(elem) {
 		for (const renderer of getRenderers()) {
-			if (this.noDeferredRendering && !renderer.canRenderInline) continue;
-
 			if (this._contextObserverController && renderer.contextAttributes) {
 				const contextValues = new Map();
 				renderer.contextAttributes.forEach(attr => contextValues.set(attr, this._contextObserverController.values.get(attr)));
-				elem = await renderer.render(elem, contextValues);
+				elem = await renderer.render(elem, {
+					contextValues: contextValues,
+					noDeferredRendering: this.noDeferredRendering
+				});
 			} else {
-				elem = await renderer.render(elem);
+				elem = await renderer.render(elem, {
+					noDeferredRendering: this.noDeferredRendering
+				});
 			}
 		}
 

package/components/list/demo/list-item-custom.js

@@ -1,3 +1,4 @@
+import '../list.js';
 import '../list-item-content.js';
 import { html, LitElement } from 'lit-element/lit-element.js';
 import { ListItemMixin } from '../list-item-mixin.js';

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

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css, html } from 'lit-element/lit-element.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ListItemMixin } from './list-item-mixin.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
@@ -34,13 +35,18 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 		return styles;
 	}
 
+	constructor() {
+		super();
+		this._primaryActionId = getUniqueId();
+	}
+
 	_onButtonClick() {
 		/** Dispatched when the item's primary button action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));
 	}
 
 	_renderPrimaryAction(labelledBy) {
-		return html`<button aria-labelledby="${labelledBy}" @click="${this._onButtonClick}"></button>`;
+		return html`<button id="${this._primaryActionId}" aria-labelledby="${labelledBy}" @click="${this._onButtonClick}"></button>`;
 	}
 
 };

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

@@ -1,9 +1,11 @@
 import '../button/button-icon.js';
 import '../icons/icon.js';
+import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
@@ -36,6 +38,8 @@ export const dragActions = Object.freeze({
 	up: 'up'
 });
 
+let hasDisplayedKeyboardTooltip = false;
+
 /**
  * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
  */
@@ -58,6 +62,7 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			 * @type {string}
 			 */
 			text: { type: String },
+			_displayKeyboardTooltip: { type: Boolean },
 			_keyboardActive: { type: Boolean }
 		};
 	}
@@ -109,6 +114,15 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				cursor: default;
 				opacity: 0.5;
 			}
+			d2l-tooltip > div {
+				font-weight: 700;
+			}
+			d2l-tooltip > ul {
+				padding-inline-start: 1rem;
+			}
+			.d2l-list-item-drag-handle-tooltip-key {
+				font-weight: 700;
+			}
 		`];
 	}
 
@@ -117,6 +131,8 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 		this.disabled = false;
 
+		this._buttonId = getUniqueId();
+		this._displayKeyboardTooltip = false;
 		this._keyboardActive = false;
 		this._movingElement = false;
 	}
@@ -219,7 +235,14 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._movingElement = false;
 	}
 
-	_onFocusOut(e) {
+	_onFocusInKeyboardButton() {
+		if (hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
+	_onFocusOutKeyboardButton(e) {
+		this._displayKeyboardTooltip = false;
 		if (this._movingElement) {
 			this._movingElement = false;
 			e.stopPropagation();
@@ -266,17 +289,32 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	_renderKeyboardDragging() {
 		return html`
 			<button
+				aria-label="${this._defaultLabel}"
+				aria-live="assertive"
 				class="d2l-list-item-drag-handle-keyboard-button"
-				@focusout="${this._onFocusOut}"
-				@keyup="${this._onActiveKeyboard}"
+				@focusin="${this._onFocusInKeyboardButton}"
+				@focusout="${this._onFocusOutKeyboardButton}"
+				id="${this._buttonId}"
 				@keydown="${this._onPreventDefault}"
-				aria-live="assertive"
-				aria-label="${this._defaultLabel}">
+				@keyup="${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>
 			</button>
+			${this._displayKeyboardTooltip ? html`<d2l-tooltip align="start" for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 	}
+
+	_renderTooltipContent() {
+		return html`
+			<div>${this.localize('components.list-item-drag-handle-tooltip.title')}</div>
+			<ul>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.enter-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.enter-desc')}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.up-down-desc')}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.left-right-desc')}</li>
+			</ul>
+		`;
+	}
+
 }
 
 customElements.define('d2l-list-item-drag-handle', ListItemDragHandle);

package/components/list/list-item-generic-layout.js

@@ -31,6 +31,7 @@ const keyCodes = {
  * @slot content - Content of the list item, such as that in a list-item-content component.
  * @slot content-action - Action associated with the content, such as a navigation link
  * @slot actions - Other actions for the list item on the far right, such as a context menu
+ * @slot nested - Optional `d2l-list` for creating nested lists
  */
 class ListItemGenericLayout extends RtlMixin(LitElement) {
 

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

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css, html } from 'lit-element/lit-element.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ListItemMixin } from './list-item-mixin.js';
 
 export const ListItemLinkMixin = superclass => class extends ListItemMixin(superclass) {
@@ -42,6 +43,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 	constructor() {
 		super();
 		this.actionHref = null;
+		this._primaryActionId = getUniqueId();
 	}
 
 	_handleLinkClick() {
@@ -51,7 +53,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 
 	_renderPrimaryAction(labelledBy) {
 		if (!this.actionHref) return;
-		return html`<a aria-labelledby="${labelledBy}" href="${this.actionHref}" @click="${this._handleLinkClick}"></a>`;
+		return html`<a id="${this._primaryActionId}" aria-labelledby="${labelledBy}" href="${this.actionHref}" @click="${this._handleLinkClick}"></a>`;
 	}
 
 };

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

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import './list-item-generic-layout.js';
 import './list-item-placement-marker.js';
+import '../tooltip/tooltip.js';
 import { css, html } from 'lit-element/lit-element.js';
 import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
 import { classMap } from 'lit-html/directives/class-map.js';
@@ -10,10 +11,28 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { ListItemCheckboxMixin } from './list-item-checkbox-mixin.js';
 import { ListItemDragDropMixin } from './list-item-drag-drop-mixin.js';
 import { ListItemRoleMixin } from './list-item-role-mixin.js';
+import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { nothing } from 'lit-html';
 import ResizeObserver from 'resize-observer-polyfill';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
+let tabPressed = false;
+let tabListenerAdded = false;
+function addTabListener() {
+	if (tabListenerAdded) return;
+	tabListenerAdded = true;
+	document.addEventListener('keydown', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = true;
+	});
+	document.addEventListener('keyup', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = false;
+	});
+}
+
+let hasDisplayedKeyboardTooltip = false;
+
 const ro = new ResizeObserver(entries => {
 	entries.forEach(entry => {
 		if (!entry || !entry.target || !entry.target.resizedCallback) {
@@ -25,7 +44,7 @@ const ro = new ResizeObserver(entries => {
 
 const defaultBreakpoints = [842, 636, 580, 0];
 
-export const ListItemMixin = superclass => class extends ListItemDragDropMixin(ListItemCheckboxMixin(ListItemRoleMixin(RtlMixin(superclass)))) {
+export const ListItemMixin = superclass => class extends LocalizeCoreElement(ListItemDragDropMixin(ListItemCheckboxMixin(ListItemRoleMixin(RtlMixin(superclass))))) {
 
 	static get properties() {
 		return {
@@ -40,6 +59,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 			 */
 			slim: { type: Boolean },
 			_breakpoint: { type: Number },
+			_displayKeyboardTooltip: { type: Boolean },
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
 			_hoveringPrimaryAction: { type: Boolean },
 			_focusing: { type: Boolean },
@@ -237,6 +257,15 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 			:host([draggable][selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
 				transform: rotate(1deg);
 			}
+			d2l-tooltip > div {
+				font-weight: 700;
+			}
+			d2l-tooltip > ul {
+				padding-inline-start: 1rem;
+			}
+			.d2l-list-item-tooltip-key {
+				font-weight: 700;
+			}
 		`];
 
 		super.styles && styles.unshift(super.styles);
@@ -249,6 +278,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		this.slim = false;
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
+		this._displayKeyboardTooltip = false;
 	}
 
 	get breakpoints() {
@@ -265,6 +295,9 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 	connectedCallback() {
 		super.connectedCallback();
 		ro.observe(this);
+		if (this.role === 'rowgroup') {
+			addTabListener();
+		}
 	}
 
 	disconnectedCallback() {
@@ -351,6 +384,9 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 
 	_onFocusIn() {
 		this._focusing = true;
+		if (this.role !== 'rowgroup' || !tabPressed || hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
 	}
 
 	_onFocusInPrimaryAction() {
@@ -359,6 +395,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 
 	_onFocusOut() {
 		this._focusing = false;
+		this._displayKeyboardTooltip = false;
 	}
 
 	_onFocusOutPrimaryAction() {
@@ -398,6 +435,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		};
 
 		const primaryAction = this._renderPrimaryAction ? this._renderPrimaryAction(this._contentId) : null;
+		const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
 
 		return html`
 			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
@@ -413,11 +451,11 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 					${this._renderDragHandle(this._renderOutsideControl)}
 					${this._renderDragTarget(this._renderOutsideControlAction)}
 					${this.selectable ? html`
-					<div slot="control">${ this._renderCheckbox() }</div>
+					<div slot="control">${this._renderCheckbox()}</div>
 					<div slot="control-action"
 						@mouseenter="${this._onMouseEnter}"
 						@mouseleave="${this._onMouseLeave}">
-							${ this._renderCheckboxAction('') }
+							${this._renderCheckboxAction('')}
 					</div>` : nothing }
 					${primaryAction ? html`
 					<div slot="content-action"
@@ -446,6 +484,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 				<div class="d2l-list-item-active-border"></div>
 			</div>
 			${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._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 
 	}
@@ -458,4 +497,16 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		return html`<div slot="outside-control-action" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${dragTarget}</div>`;
 	}
 
+	_renderTooltipContent() {
+		return html`
+			<div>${this.localize('components.list-item-tooltip.title')}</div>
+			<ul>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.enter-key')}</span> - ${this.localize('components.list-item-tooltip.enter-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-tooltip.up-down-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-tooltip.left-right-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.page-up-down-key')}</span> - ${this.localize('components.list-item-tooltip.page-up-down-desc')}</li>
+			</ul>
+		`;
+	}
+
 };

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

@@ -19,8 +19,9 @@ export const ListItemRoleMixin = superclass => class extends superclass {
 
 		const separators = parent.getAttribute('separators');
 
-		this.role = parent.grid ? 'rowgroup' : 'listitem';
+		this.role = parent.hasAttribute('grid') ? 'rowgroup' : 'listitem';
 		this._separators = separators || undefined;
 		this._extendSeparators = parent.hasAttribute('extend-separators');
 	}
+
 };

package/components/menu/menu-item.js

@@ -6,6 +6,7 @@ import { menuItemStyles } from './menu-item-styles.js';
 /**
  * A menu item component used with JS handlers.
  * @slot - Default content placed inside of the component
+ * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
  */
 class MenuItem extends MenuItemMixin(LitElement) {