@brightspace-ui/core 1.227.0 → 1.230.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 |
 |---|---|---|
-| `padding-type` | String | Header whitespace (`normal` (default), `slim`)|
+| `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]

package/components/list/demo/list.html

@@ -7,11 +7,13 @@
 		<script type="module">
 			import '../../button/button-icon.js';
 			import '../../demo/demo-page.js';
+			import '../../dropdown/dropdown-button-subtle.js';
 			import '../../dropdown/dropdown-menu.js';
 			import '../../dropdown/dropdown-more.js';
 			import '../../menu/menu.js';
 			import '../../menu/menu-item.js';
 			import '../../selection/selection-action.js';
+			import '../../selection/selection-action-menu-item.js';
 			import '../../tooltip/tooltip.js';
 			import '../list-header.js';
 			import '../list-item-button.js';
@@ -64,12 +66,18 @@
 
 			<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-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-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:delete" text="Delete" requires-selection></d2l-selection-action>
+							<d2l-dropdown-button-subtle text="Actions">
+								<d2l-dropdown-menu>
+									<d2l-menu label="Actions">
+										<d2l-selection-action-menu-item text="Bookmark (requires selection)" requires-selection></d2l-selection-action-menu-item>
+										<d2l-selection-action-menu-item text="Advanced"></d2l-selection-action-menu-item>
+									</d2l-menu>
+								</d2l-dropdown-menu>
+							</d2l-dropdown-button-subtle>
 							<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
 						</d2l-list-header>
 						<d2l-list-item href="http://www.d2l.com" selectable key="1" label="Introductory Earth Sciences">
@@ -130,6 +138,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,6 +15,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	static get properties() {
 		return {
 			/**
+			 * @ignore
 			 * Whether to render a header with reduced whitespace
 			 * TODO: Remove
 			 * @type {boolean}
@@ -21,10 +23,14 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 			slim: { reflect: true, type: Boolean },
 			/**
 			 * How much padding to render list items with
-			 * One of 'normal'|'slim', defaults to 'normal'
-			 * @type {string}
+			 * @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' },
 		};
 	}
 
@@ -60,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;
@@ -75,6 +89,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 		super();
 		this.slim = false;
 		this.paddingType = 'normal';
+		this.selectAllPagesAllowed = false;
 	}
 
 	render() {
@@ -86,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

@@ -60,11 +60,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
 			/**
 			 * How much padding to render list items with
-			 * One of 'normal'|'slim'|'none', defaults to 'normal'
-			 * @type {string}
+			 * @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}

package/components/overflow-group/overflow-group.js

@@ -98,6 +98,7 @@ function convertToDropdownItem(node) {
 		case 'd2l-dropdown-more':
 			return createMenuItemMenu(node);
 		case 'd2l-menu-item':
+		case 'd2l-selection-action-menu-item':
 			// if the menu item has children treat it as a menu item menu
 			if (node.children.length > 0) {
 				return createMenuItemMenu(node);

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 -->
 
@@ -147,6 +148,44 @@ The `d2l-selection-action` is an optional component that provides a button for a
 | `d2l-selection-action-click` | Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected. |
 <!-- docs: end hidden content -->
 
+## Selection Action Menu Item [d2l-selection-action-menu-item]
+
+The `d2l-selection-action-menu-item` is an optional component that is a menu item for actions associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the button should be non-interactive if nothing is selected.
+
+<!-- docs: demo live name:d2l-selection-action-menu-item -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/dropdown/dropdown-button-subtle.js';
+  import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
+  import '@brightspace-ui/core/components/menu/menu.js';
+  import '@brightspace-ui/core/components/selection/selection-action-menu-item.js';
+</script>
+<d2l-dropdown-button-subtle text="Actions">
+	<d2l-dropdown-menu>
+		<d2l-menu label="Actions">
+			<d2l-selection-action-menu-item text="Action 1" requires-selection></d2l-selection-action-menu-item>
+			<d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
+		</d2l-menu>
+	</d2l-dropdown-menu>
+</d2l-dropdown-button-subtle>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `requires-selection` | Boolean | Whether the action menu-item requires one or more selected items. |
+| `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
+| `text` | String, required | Text to be shown for the action menu-item. |
+
+### Events
+
+| Event | Description |
+|---|---|
+| `d2l-selection-action-click` | Dispatched when the user clicks the action menu-item. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected. |
+<!-- docs: end hidden content -->
+
 ## Selection Input [d2l-selection-input]
 
 The `d2l-selection-input` is a required component in selection controls - without it, there wouldn't be anything for the user to select! Note: `d2l-list-item` already provides a selection input for selectable list items. If `d2l-selection-input` is placed within a selection control that specifies `selection-single`, then radios will be rendered instead of checkboxes.

package/components/selection/demo/selection.html

@@ -6,7 +6,11 @@
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 		<script type="module">
 			import '../../demo/demo-page.js';
+			import '../../dropdown/dropdown-button-subtle.js';
+			import '../../dropdown/dropdown-menu.js';
+			import '../../menu/menu.js';
 			import '../selection-action.js';
+			import '../selection-action-menu-item.js';
 			import '../selection-input.js';
 			import '../selection-select-all.js';
 			import '../selection-summary.js';
@@ -57,6 +61,14 @@
 								<d2l-selection-select-all></d2l-selection-select-all>
 								<d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
 								<d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
+								<d2l-dropdown-button-subtle text="Actions">
+									<d2l-dropdown-menu>
+										<d2l-menu label="Actions">
+											<d2l-selection-action-menu-item text="Action 1 (requires selection)" requires-selection></d2l-selection-action-menu-item>
+											<d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
+										</d2l-menu>
+									</d2l-dropdown-menu>
+								</d2l-dropdown-button-subtle>
 							</div>
 							<d2l-selection-summary style="flex: none;"></d2l-selection-summary>
 						</div>

package/components/selection/selection-action-menu-item.js

@@ -0,0 +1,61 @@
+import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { MenuItemMixin } from '../menu/menu-item-mixin.js';
+import { menuItemStyles } from '../menu/menu-item-styles.js';
+import { SelectionActionMixin } from './selection-action-mixin.js';
+import { SelectionInfo } from './selection-mixin.js';
+
+/**
+ * An action menu-item component used within selection controls such as d2l-list and d2l-list-header.
+ * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
+ * @fires d2l-selection-action-click - Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected.
+ * @fires d2l-selection-observer-subscribe - Internal event
+ */
+class MenuItem extends SelectionActionMixin(MenuItemMixin(LitElement)) {
+
+	static get styles() {
+		return [ menuItemStyles,
+			css`
+				:host {
+					align-items: center;
+					display: flex;
+					padding: 0.75rem 1rem;
+				}
+				:host([dir="rtl"]) d2l-icon {
+					margin-left: 0;
+					margin-right: 6px;
+				}
+			`
+		];
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('d2l-menu-item-select', this._handleMenuItemSelect);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('d2l-menu-item-select', this._handleMenuItemSelect);
+	}
+
+	render() {
+		return html`
+			<div class="d2l-menu-item-text">${this.text}</div>
+			<div class="d2l-menu-item-supporting"><slot name="supporting"></slot></div>
+		`;
+	}
+
+	_handleMenuItemSelect(e) {
+		e.stopPropagation();
+
+		if (this.requiresSelection && this.selectionInfo.state === SelectionInfo.states.none) return;
+
+		this.dispatchEvent(new CustomEvent('d2l-selection-action-click', {
+			bubbles: true,
+			detail: this.selectionInfo
+		}));
+	}
+
+}
+
+customElements.define('d2l-selection-action-menu-item', MenuItem);

package/components/selection/selection-action-mixin.js

@@ -0,0 +1,30 @@
+import { SelectionInfo } from './selection-mixin.js';
+import { SelectionObserverMixin } from './selection-observer-mixin.js';
+
+export const SelectionActionMixin = superclass => class extends SelectionObserverMixin(superclass) {
+
+	static get properties() {
+		return {
+			/**
+			 * Whether the action requires one or more selected items
+			 * @type {boolean}
+			 */
+			requiresSelection: { type: Boolean, attribute: 'requires-selection', reflect: true }
+		};
+	}
+
+	constructor() {
+		super();
+		this.requiresSelection = false;
+	}
+
+	get selectionInfo() {
+		return super.selectionInfo;
+	}
+
+	set selectionInfo(value) {
+		super.selectionInfo = value;
+		this.disabled = (this.requiresSelection && this.selectionInfo.state === SelectionInfo.states.none);
+	}
+
+};

package/components/selection/selection-action.js

@@ -6,15 +6,15 @@ import { ButtonMixin } from '../button/button-mixin.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { SelectionActionMixin } from './selection-action-mixin.js';
 import { SelectionInfo } from './selection-mixin.js';
-import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
 /**
  * An action associated with a selection component.
  * @fires d2l-selection-action-click - Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected.
  * @fires d2l-selection-observer-subscribe - Internal event
  */
-class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlMixin(LitElement)))) {
+class Action extends LocalizeCoreElement(SelectionActionMixin(ButtonMixin(RtlMixin(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -23,11 +23,6 @@ class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlM
 			 * @type {string}
 			 */
 			icon: { type: String, reflect: true },
-			/**
-			 * Whether the action requires one or more selected items
-			 * @type {boolean}
-			 */
-			requiresSelection: { type: Boolean, attribute: 'requires-selection', reflect: true },
 			/**
 			 * REQUIRED: The text for the action
 			 * @type {string}
@@ -47,15 +42,6 @@ class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlM
 		`;
 	}
 
-	get selectionInfo() {
-		return super.selectionInfo;
-	}
-
-	set selectionInfo(value) {
-		super.selectionInfo = value;
-		this.disabled = (this.requiresSelection && this.selectionInfo.state === SelectionInfo.states.none);
-	}
-
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener('d2l-button-ghost-click', this._handleActionClick);

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>
 		`;