@brightspace-ui/core 1.226.0 → 1.229.0

package/components/list/README.md

@@ -311,7 +311,8 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 
 | Property | Type | Description |
 |---|---|---|
-| `slim` | Boolean | Whether to render a header with reduced whitespace |
+| `padding-type` | String | Header whitespace (`normal` (default), `slim`) |
+| `select-all-pages-allowed` | Boolean | Whether all pages can be selected |
 <!-- docs: end hidden content -->
 
 ## List Item [d2l-list-item]
@@ -354,16 +355,17 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 | `disabled` | Boolean | Disables the input |
 | `draggable` |  Boolean | Whether the item is draggable |
 | `drag-handle-text` | String | 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. |
+| `drag-target-handle-only` | Boolean | Make the drag target the drag handle only. |
 | `drop-nested` | Boolean | Whether nested items can be dropped on this item |
 | `drop-text` | String | Text to drag and drop |
 | `href` | String | Address of item link if navigable |
 | `key` | String | Value to identify item if selectable or draggable |
 | `label` | String | Explicitly defined label for the element |
 | `labelled-by` | String | The id of element that provides the label for this element |
+| `padding-type` | String | List item whitespace (`normal` (default), `slim`, `none`)|
 | `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
 | `selected` | Boolean | Whether the item is selected |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
-| `slim` | Boolean | Whether to render the list-item with reduced whitespace|
 
 ### Events
 

package/components/list/demo/list.html

@@ -64,11 +64,10 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-list>
-						<d2l-list-header slot="header">
-							<d2l-selection-action icon="tier1:tag-hollow" text="Tag" requires-selection></d2l-selection-action>
+					<d2l-list id="allFeatures" item-count="50">
+						<d2l-list-header slot="header" select-all-pages-allowed>
+							<d2l-selection-action icon="tier1:plus-default" text="Add"></d2l-selection-action>
 							<d2l-selection-action icon="tier1:share" text="Share" requires-selection></d2l-selection-action>
-							<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
 						</d2l-list-header>
@@ -130,6 +129,23 @@
 							</div>
 						</d2l-list-item>
 					</d2l-list>
+					<script>
+						let newItemCount = 0;
+						document.querySelector('d2l-selection-action[text="Add"]').addEventListener('d2l-selection-action-click', () => {
+							const item = document.createElement('d2l-list-item');
+							item.selectable = true;
+							item.key = `${++newItemCount}`;
+							item.label = 'New Item';
+							item.innerHTML = `
+								<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+								<d2l-list-item-content>
+									<div>New Item ${newItemCount}</div>
+									<div slot="supporting-info">Supporting Info</div>
+								</d2l-list-item-content>
+							`;
+							document.querySelector('#allFeatures').appendChild(item);
+						});
+					</script>
 				</template>
 			</d2l-demo-snippet>
 

package/components/list/list-header.js

@@ -1,5 +1,6 @@
 import '../overflow-group/overflow-group.js';
 import '../selection/selection-select-all.js';
+import '../selection/selection-select-all-pages.js';
 import '../selection/selection-summary.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
@@ -14,10 +15,22 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	static get properties() {
 		return {
 			/**
+			 * @ignore
 			 * Whether to render a header with reduced whitespace
+			 * TODO: Remove
 			 * @type {boolean}
 			 */
-			slim: { reflect: true, type: Boolean }
+			slim: { reflect: true, type: Boolean },
+			/**
+			 * How much padding to render list items with
+			 * @type {'normal'|'slim'}
+			 */
+			paddingType: { type: String, attribute: 'padding-type' },
+			/**
+			 * Whether all pages can be selected
+			 * @type {boolean}
+			 */
+			selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
 		};
 	}
 
@@ -36,7 +49,10 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				margin-top: 6px;
 				min-height: 58px;
 			}
-			:host([slim]) .d2l-list-header-container {
+			:host([slim]) .d2l-list-header-container { /* TODO: Remove */
+				min-height: 36px;
+			}
+			:host([padding-type="slim"]) .d2l-list-header-container {
 				min-height: 36px;
 			}
 			d2l-selection-select-all {
@@ -50,6 +66,14 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				margin-left: 0;
 				margin-right: 0.9rem;
 			}
+			d2l-selection-select-all-pages {
+				flex: none;
+				margin-left: 0.45rem;
+			}
+			:host([dir="rtl"]) d2l-selection-select-all-pages {
+				margin-left: 0;
+				margin-right: 0.45rem;
+			}
 			.d2l-list-header-actions {
 				--d2l-overflow-group-justify-content: flex-end;
 				flex: auto;
@@ -64,6 +88,8 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	constructor() {
 		super();
 		this.slim = false;
+		this.paddingType = 'normal';
+		this.selectAllPagesAllowed = false;
 	}
 
 	render() {
@@ -75,6 +101,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 					class="d2l-list-header-summary"
 					no-selection-text="${this.localize('components.selection.select-all')}">
 				</d2l-selection-summary>
+				${this.selectAllPagesAllowed ? html`<d2l-selection-select-all-pages></d2l-selection-select-all-pages>` : null}
 				<div class="d2l-list-header-actions">
 					<d2l-overflow-group opener-type="icon"><slot></slot></d2l-overflow-group>
 				</div>

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

@@ -54,7 +54,19 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			 */
 			breakpoints: { type: Array },
 			/**
+			 * Whether to allow the drag target to be the handle only rather than the entire cell
+			 * @type {boolean}
+			 */
+			dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
+			/**
+			 * How much padding to render list items with
+			 * @type {'normal'|'slim'|'none'}
+			 */
+			paddingType: { type: String, attribute: 'padding-type' },
+			/**
+			 * @ignore
 			 * Whether to render the list-item with reduced whitespace.
+			 * TODO: Remove in favor of padding-type="slim"
 			 * @type {boolean}
 			 */
 			slim: { type: Boolean },
@@ -106,6 +118,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				border-bottom: 1px solid var(--d2l-color-mica);
 				border-top: 1px solid var(--d2l-color-mica);
 			}
+			:host([padding-type="none"]) d2l-list-item-generic-layout {
+				border-bottom: 0;
+				border-top: 0;
+			}
 			d2l-list-item-generic-layout[data-separators="none"] {
 				border-bottom: 1px solid transparent;
 				border-top: 1px solid transparent;
@@ -143,10 +159,18 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				justify-content: stretch;
 				padding: 0.55rem 0;
 			}
-			:host([slim]) [slot="content"] {
+			:host([slim]) [slot="content"] { /* TODO, remove */
 				padding-bottom: 0.35rem;
 				padding-top: 0.4rem;
 			}
+			:host([padding-type="slim"]) [slot="content"] {
+				padding-bottom: 0.35rem;
+				padding-top: 0.4rem;
+			}
+			:host([padding-type="none"]) [slot="content"] {
+				padding-bottom: 0;
+				padding-top: 0;
+			}
 			[slot="content"] ::slotted([slot="illustration"]),
 			[slot="content"] .d2l-list-item-illustration * {
 				border-radius: 6px;
@@ -219,7 +243,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			.d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-left: 0.9rem;
 			}
-			:host([slim]) d2l-selection-input {
+			:host([slim]) d2l-selection-input { /* TODO, remove */
+				margin-bottom: 0.55rem;
+				margin-top: 0.55rem;
+			}
+			:host([padding-type="slim"]) d2l-selection-input {
 				margin-bottom: 0.55rem;
 				margin-top: 0.55rem;
 			}
@@ -276,6 +304,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		super();
 		this.breakpoints = defaultBreakpoints;
 		this.slim = false;
+		this.paddingType = 'normal';
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
@@ -449,7 +478,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 					?grid-active="${this.role === 'rowgroup'}">
 					${this._renderDropTarget()}
 					${this._renderDragHandle(this._renderOutsideControl)}
-					${this._renderDragTarget(this._renderOutsideControlAction)}
+					${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
 					${this.selectable ? html`
 					<div slot="control">${this._renderCheckbox()}</div>
 					<div slot="control-action"
@@ -497,6 +526,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		return html`<div slot="outside-control-action" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${dragTarget}</div>`;
 	}
 
+	_renderOutsideControlHandleOnly(dragHandle) {
+		return html`<div slot="outside-control" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${dragHandle}</div>`;
+	}
+
 	_renderTooltipContent() {
 		return html`
 			<div>${this.localize('components.list-item-tooltip.title')}</div>

package/components/selection/README.md

@@ -97,6 +97,7 @@ The `d2l-list` already extends `SelectionMixin` and should always be used for li
 
 | Property | Type | Description |
 |---|---|---|
+| `item-count` | Number | Total number of items. Required when selecting all pages is allowed. |
 | `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item. |
 <!-- docs: end hidden content -->
 

package/components/selection/selection-input.js

@@ -74,6 +74,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			});
 			this.dispatchEvent(evt);
 			this._provider = evt.detail.provider;
+			if (this._provider && this._provider._selectAllPages) this.selected = true;
 		});
 	}
 

package/components/selection/selection-mixin.js

@@ -28,7 +28,8 @@ export class SelectionInfo {
 		return {
 			none: 'none',
 			some: 'some',
-			all: 'all'
+			all: 'all',
+			allPages: 'all-pages'
 		};
 	}
 
@@ -38,6 +39,11 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 
 	static get properties() {
 		return {
+			/**
+			 * Total number of items. Required when selecting all pages is allowed.
+			 * @type {number}
+			 */
+			itemCount: { type: Number, attribute: 'item-count' },
 			/**
 			 * Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.
 			 * @type {boolean}
@@ -48,7 +54,9 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 
 	constructor() {
 		super();
+		this.itemCount = 0;
 		this.selectionSingle = false;
+		this._selectAllPages = false;
 		this._selectionObservers = new Map();
 		this._selectionSelectables = new Map();
 	}
@@ -80,22 +88,28 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 		let state = SelectionInfo.states.none;
 		const keys = [];
 
-		this._selectionSelectables.forEach(selectable => {
-			if (selectable.selected) keys.push(selectable.key);
-			if (selectable._indeterminate) state = SelectionInfo.states.some;
-		});
+		if (this._selectAllPages) {
+			state = SelectionInfo.states.allPages;
+		} else {
+			this._selectionSelectables.forEach(selectable => {
+				if (selectable.selected) keys.push(selectable.key);
+				if (selectable._indeterminate) state = SelectionInfo.states.some;
+			});
 
-		if (keys.length > 0) {
-			if (keys.length === this._selectionSelectables.size) state = SelectionInfo.states.all;
-			else state = SelectionInfo.states.some;
+			if (keys.length > 0) {
+				if (keys.length === this._selectionSelectables.size) state = SelectionInfo.states.all;
+				else state = SelectionInfo.states.some;
+			}
 		}
 
 		return new SelectionInfo(keys, state);
 	}
 
-	setSelectionForAll(selected) {
+	setSelectionForAll(selected, selectAllPages) {
 		if (this.selectionSingle && selected) return;
 
+		this._selectAllPages = (selected && selectAllPages);
+
 		this._selectionSelectables.forEach(selectable => {
 			if (!!selectable.selected !== selected) {
 				selectable.selected = selected;
@@ -154,6 +168,7 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 	}
 
 	_handleSelectionChange(e) {
+		if (!e.detail.selected) this._selectAllPages = false;
 		if (this.selectionSingle && e.detail.selected) {
 			const target = e.composedPath().find(elem => elem.tagName === 'D2L-SELECTION-INPUT');
 			this._selectionSelectables.forEach(selectable => {

package/components/selection/selection-select-all-pages.js

@@ -0,0 +1,48 @@
+import '../button/button-subtle.js';
+import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
+import { SelectionInfo } from './selection-mixin.js';
+import { SelectionObserverMixin } from './selection-observer-mixin.js';
+
+/**
+ * A subtle button that selects all items for all pages.
+ * @fires d2l-selection-observer-subscribe - Internal event
+ */
+class SelectAllPages extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
+
+	static get styles() {
+		return css`
+			:host {
+				display: inline-block;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+		`;
+	}
+
+	render() {
+		if (!this._provider) return;
+		if (!this._provider.itemCount) return;
+		if (this._provider.selectionSingle) return;
+		if (this.selectionInfo.state !== SelectionInfo.states.all) return;
+
+		return html`
+			<d2l-button-subtle
+				@click="${this._handleClick}"
+				text="${this.localize('components.selection.select-all-items', 'count', this._provider.itemCount)}">
+			</d2l-button-subtle>`;
+	}
+
+	focus() {
+		const elem = this.shadowRoot && this.shadowRoot.querySelector('d2l-button-subtle');
+		if (elem) elem.focus();
+	}
+
+	_handleClick() {
+		if (this._provider) this._provider.setSelectionForAll(true, true);
+	}
+
+}
+
+customElements.define('d2l-selection-select-all-pages', SelectAllPages);

package/components/selection/selection-select-all.js

@@ -48,7 +48,7 @@ class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement))
 			<d2l-input-checkbox
 				aria-label="${this.localize('components.selection.select-all')}"
 				@change="${this._handleCheckboxChange}"
-				?checked="${this.selectionInfo.state === SelectionInfo.states.all}"
+				?checked="${this.selectionInfo.state === SelectionInfo.states.all || this.selectionInfo.state === SelectionInfo.states.allPages}"
 				?disabled="${this.disabled}"
 				description="${ifDefined(this.selectionInfo.state !== SelectionInfo.states.none ? summary : undefined)}"
 				?indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}">
@@ -62,7 +62,7 @@ class SelectAll extends LocalizeCoreElement(SelectionObserverMixin(LitElement))
 	}
 
 	_handleCheckboxChange(e) {
-		if (this._provider) this._provider.setSelectionForAll(e.target.checked);
+		if (this._provider) this._provider.setSelectionForAll(e.target.checked, false);
 	}
 
 }

package/components/selection/selection-summary.js

@@ -37,8 +37,12 @@ class Summary extends LocalizeCoreElement(SelectionObserverMixin(LitElement)) {
 	render() {
 		if (this._provider && this._provider.selectionSingle) return;
 
+		const count = (this.selectionInfo.state === SelectionInfo.states.allPages ?
+			this._provider.itemCount : this.selectionInfo.keys.length);
+
 		const summary = (this.selectionInfo.state === SelectionInfo.states.none && this.noSelectionText ?
-			this.noSelectionText : this.localize('components.selection.selected', 'count', this.selectionInfo.keys.length));
+			this.noSelectionText : this.localize('components.selection.selected', 'count', count));
+
 		return html`
 			<p class="d2l-body-compact">${summary}</p>
 		`;