@brightspace-ui/core 2.73.1 → 2.75.0

package/components/expand-collapse/expand-collapse-content.js

@@ -35,6 +35,8 @@ class ExpandCollapseContent extends LitElement {
 	static get styles() {
 		return css`
 			:host {
+				--d2l-expand-collapse-content-transition-duration: 0.2s;
+				--d2l-expand-collapse-content-transition-function: cubic-bezier(0.4, 0.4, 0.25, 1);
 				display: block;
 			}
 
@@ -43,19 +45,28 @@ class ExpandCollapseContent extends LitElement {
 			}
 
 			.d2l-expand-collapse-content-container {
-				display: none;
+				display: block;
+				opacity: 0;
 				overflow: hidden;
-				transition: height 400ms cubic-bezier(0, 0.7, 0.5, 1);
+				transition:
+					height var(--d2l-expand-collapse-content-transition-duration) var(--d2l-expand-collapse-content-transition-function),
+					opacity var(--d2l-expand-collapse-content-transition-duration) var(--d2l-expand-collapse-content-transition-function);
 			}
 
-			.d2l-expand-collapse-content-container:not([data-state="collapsed"]) {
-				display: block;
+			.d2l-expand-collapse-content-container[data-state="collapsed"] {
+				display: none;
 			}
 
 			.d2l-expand-collapse-content-container[data-state="expanded"] {
 				overflow: visible;
 			}
 
+
+			.d2l-expand-collapse-content-container[data-state="expanded"],
+			.d2l-expand-collapse-content-container[data-state="expanding"] {
+				opacity: 1;
+			}
+
 			/* prevent margin colapse on slotted children */
 			.d2l-expand-collapse-content-inner::before,
 			.d2l-expand-collapse-content-inner::after {

package/components/list/list-header.js

@@ -4,7 +4,6 @@ import { SelectionHeader } from '../selection/selection-header.js';
 
 /**
  * A header for list components containing select-all, etc.
- * @slot - Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements
  */
 class ListHeader extends SelectionHeader {
 	static get properties() {

package/components/selection/selection-header.js

@@ -2,7 +2,7 @@ import '../overflow-group/overflow-group.js';
 import './selection-select-all.js';
 import './selection-select-all-pages.js';
 import './selection-summary.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -77,14 +77,13 @@ export class SelectionHeader extends SelectionObserverMixin(RtlMixin(LocalizeCor
 			.d2l-selection-header-container-slim {
 				min-height: 36px;
 			}
-			d2l-selection-select-all {
+			d2l-selection-select-all, d2l-selection-summary {
 				flex: none;
 			}
-			d2l-selection-summary {
-				flex: none;
+			d2l-selection-select-all + d2l-selection-summary {
 				margin-left: 0.9rem;
 			}
-			:host([dir="rtl"]) d2l-selection-summary {
+			:host([dir="rtl"]) d2l-selection-select-all + d2l-selection-summary {
 				margin-left: 0;
 				margin-right: 0.9rem;
 			}
@@ -132,20 +131,12 @@ export class SelectionHeader extends SelectionObserverMixin(RtlMixin(LocalizeCor
 		return html`
 			<div class="d2l-sticky-edge"></div>
 			<section class="${classMap(classes)}" aria-label="${ifDefined(label)}">
-				${this.noSelection ? null : html`
-					<d2l-selection-select-all></d2l-selection-select-all>
-					<d2l-selection-summary
-						aria-hidden="true"
-						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}
-				`}
+				${this.noSelection ? nothing : this._renderSelection()}
 				<div class="d2l-selection-header-actions">
 					<d2l-overflow-group opener-type="icon"><slot @slotchange="${this._handleSlotChange}"></slot></d2l-overflow-group>
 				</div>
 			</section>
-			${!this.noSticky ? html`<div class="d2l-selection-header-shadow"></div>` : null}
+			${!this.noSticky ? html`<div class="d2l-selection-header-shadow"></div>` : nothing}
 		`;
 	}
 
@@ -172,6 +163,18 @@ export class SelectionHeader extends SelectionObserverMixin(RtlMixin(LocalizeCor
 		this._hasActions = (e.target.assignedNodes({ flatten: true }).filter(node => node.nodeType === Node.ELEMENT_NODE).length > 0);
 	}
 
+	_renderSelection() {
+		return html`
+			<d2l-selection-select-all></d2l-selection-select-all>
+			<d2l-selection-summary
+				aria-hidden="true"
+				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>` : nothing}
+		`;
+	}
+
 	_stickyObserverDisconnect() {
 		if (this._stickyIntersectionObserver) {
 			this._stickyIntersectionObserver.disconnect();

package/components/table/README.md

@@ -299,3 +299,87 @@ If your table supports row selection, apply the `selected` attribute to `<tr>` r
   <td>this row is selected</td>
 </tr>
 ```
+
+## Table Header [d2l-table-header]
+
+The `d2l-table-header` component can be placed in the `d2l-table-wrapper`'s `header` slot to provide a selection summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
+
+<!-- docs: demo live name:d2l-table-header -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/selection/selection-action.js';
+  import '@brightspace-ui/core/components/selection/selection-input.js';
+  import '@brightspace-ui/core/components/selection/selection-select-all.js';
+  import '@brightspace-ui/core/components/table/table-header.js';
+  import { html, LitElement } from 'lit';
+  import { tableStyles } from '@brightspace-ui/core/components/table/table-wrapper.js';
+
+  class MyTableWithHeaderElem extends LitElement {
+
+    static get properties() {
+      return {
+        _data: { state: true }
+      }
+    }
+
+    static get styles() {
+      return tableStyles;
+    }
+
+    constructor() {
+      super();
+      this._data = {
+        a: { checked: true },
+        b: { checked: false },
+      };
+    }
+
+    render() {
+      return html`
+        <d2l-table-wrapper>
+          <d2l-table-header slot="header" no-sticky>
+            <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-table-header>
+          <table class="d2l-table">
+            <thead>
+              <tr>
+                <th><d2l-selection-select-all></d2l-selection-select-all></th>
+                <th>Column B</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${Object.keys(this._data).map((key, i) => html`
+                <tr ?selected="${i === 0}">
+                  <td>
+                    <d2l-selection-input selected key="${key}" label="${key}" ?checked="${this._data[key].checked}" @d2l-selection-change="${this._selectRow}"></d2l-selection-input>
+                  </td>
+                  <td>this row is ${!this._data[key].checked ? 'not' : ''} selected</td>
+                </tr>
+              `)}
+            </tbody>
+          </table>
+        </d2l-table-wrapper>
+      `;
+    }
+
+    _selectRow(e) {
+      const key = e.target.key;
+      this._data[key].checked = !this._data[key].checked;
+    }
+
+  }
+  customElements.define('d2l-my-table-with-header-elem', MyTableWithHeaderElem);
+</script>
+<d2l-my-table-with-header-elem></d2l-my-table-with-header-elem>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|---|---|---|
+| `no-selection` | Boolean | Whether to render the selection summary |
+| `no-sticky` | Boolean | Disables sticky positioning for the header |
+| `select-all-pages-allowed` | Boolean | Whether all pages can be selected |
+<!-- docs: end hidden content -->

package/components/table/demo/table-test.js

@@ -1,13 +1,23 @@
 import '../table-col-sort-button.js';
+import '../table-header.js';
+import '../../dropdown/dropdown-button-subtle.js';
+import '../../dropdown/dropdown-menu.js';
+import '../../menu/menu.js';
+import '../../menu/menu-item.js';
+import '../../selection/selection-action.js';
+import '../../selection/selection-action-dropdown.js';
+import '../../selection/selection-action-menu-item.js';
+import '../../selection/selection-input.js';
+
 import { css, html, LitElement } from 'lit';
 import { RtlMixin } from '../../../mixins/rtl-mixin.js';
 import { tableStyles } from '../table-wrapper.js';
 
 const fruits = ['Apples', 'Oranges', 'Bananas'];
 
-const data = [
-	{ name: 'Canada', fruit: { 'apples': 356863, 'oranges': 0, 'bananas': 0 }, selected: false },
-	{ name: 'Australia', fruit: { 'apples': 308298, 'oranges': 398610, 'bananas': 354241 }, selected: false },
+const data = () => [
+	{ name: 'Canada', fruit: { 'apples': 356863, 'oranges': 0, 'bananas': 0 }, selected: true },
+	{ name: 'Australia', fruit: { 'apples': 308298, 'oranges': 398610, 'bananas': 354241 }, selected: true },
 	{ name: 'Mexico', fruit: { 'apples': 716931, 'oranges': 4603253, 'bananas': 2384778 }, selected: false },
 	{ name: 'Brazil', fruit: { 'apples': 1300000, 'oranges': 50000, 'bananas': 6429875 }, selected: false },
 	{ name: 'England', fruit: { 'apples': 345782, 'oranges': 4, 'bananas': 1249875 }, selected: false },
@@ -36,6 +46,7 @@ class TestTable extends RtlMixin(LitElement) {
 			 * @type {boolean}
 			 */
 			stickyHeaders: { attribute: 'sticky-headers', type: Boolean },
+			_data: { state: true },
 			_sortField: { attribute: false, type: String },
 			_sortDesc: { attribute: false, type: Boolean }
 		};
@@ -55,11 +66,12 @@ class TestTable extends RtlMixin(LitElement) {
 		this.sortDesc = false;
 		this.stickyHeaders = false;
 		this.type = 'default';
+		this._data = data();
 	}
 
 	render() {
 		const type = this.type === 'light' ? 'light' : 'default';
-		const sorted = data.sort((a, b) => {
+		const sorted = this._data.sort((a, b) => {
 			if (this._sortDesc) {
 				return b.fruit[this._sortField] - a.fruit[this._sortField];
 			}
@@ -67,18 +79,53 @@ class TestTable extends RtlMixin(LitElement) {
 		});
 		return html`
 			<d2l-table-wrapper ?no-column-border="${this.noColumnBorder}" ?sticky-headers="${this.stickyHeaders}" type="${type}">
+				<d2l-table-header slot="header" no-sticky>
+					<d2l-selection-action icon="tier1:plus-default" text="Add" @d2l-selection-action-click="${this._handleAddItem}"></d2l-selection-action>
+					<d2l-selection-action-dropdown text="Move To" requires-selection>
+						<d2l-dropdown-menu>
+							<d2l-menu label="Move To Options">
+								<d2l-menu-item text="Top of Quiz"></d2l-menu-item>
+								<d2l-menu-item text="Bottom of Quiz"></d2l-menu-item>
+								<d2l-menu-item text="Section">
+									<d2l-menu>
+										<d2l-menu-item text="Option 1"></d2l-menu-item>
+										<d2l-menu-item text="Option 2"></d2l-menu-item>
+									</d2l-menu>
+								</d2l-menu-item>
+							</d2l-menu>
+						</d2l-dropdown-menu>
+					</d2l-selection-action-dropdown>
+					<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" requires-selection></d2l-selection-action>
+				</d2l-table-header>
+
 				<table class="d2l-table">
 					<thead>
 						<tr>
-							<th colspan="2">Country</th>
+							<th scope="col"><d2l-selection-select-all></d2l-selection-select-all></th>
+							<th scope="col">Country</th>
 							${fruits.map(fruit => this._renderSortButton(fruit))}
 						</tr>
 					</thead>
 					<tbody>
 						${sorted.map((row) => html`
-							<tr ?selected="${row.selected}">
-								<th><input type="checkbox" .checked="${row.selected}" @click="${this._selectRow}"></th>
-								<th>${row.name}</th>
+							<tr ?selected="${row.selected}" data-name="${row.name}">
+								<th scope="row">
+									<d2l-selection-input
+										@d2l-selection-change="${this._selectRow}"
+										?selected="${row.selected}"
+										key="${row.name}"
+										label="${row.name}">
+									</d2l-selection-input>
+								</th>
+								<th scope="row">${row.name}</th>
 								${fruits.map((fruit) => html`<td>${formatter.format(row.fruit[fruit.toLowerCase()])}</td>`)}
 							</tr>
 						`)}
@@ -98,7 +145,7 @@ class TestTable extends RtlMixin(LitElement) {
 	_renderSortButton(fruit) {
 		const noSort = this._sortField !== fruit.toLowerCase();
 		return html`
-			<th>
+			<th scope="col">
 				<d2l-table-col-sort-button
 					@click="${this._handleSort}"
 					?desc="${this._sortDesc}"
@@ -108,13 +155,10 @@ class TestTable extends RtlMixin(LitElement) {
 	}
 
 	_selectRow(e) {
-		const country = e.target.parentNode.nextElementSibling.innerText;
-		data.forEach((row) => {
-			if (row.name === country) {
-				row.selected = e.target.checked;
-				this.requestUpdate();
-			}
-		});
+		const country = e.target.parentNode.parentNode.dataset.name;
+		const row = this._data.find(row => row.name === country);
+		row.selected = e.target.selected;
+		this.requestUpdate();
 	}
 
 }

package/components/table/table-header.js

@@ -0,0 +1,22 @@
+import '../selection/selection-select-all-pages.js';
+import '../selection/selection-summary.js';
+import { html, nothing } from 'lit';
+import { SelectionHeader } from '../selection/selection-header.js';
+
+/**
+ * A header for table components containing a selection summary and selection actions.
+ */
+class TableHeader extends SelectionHeader {
+	_renderSelection() {
+		return html`
+			<d2l-selection-summary
+				aria-hidden="true"
+				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>` : nothing}
+		`;
+	}
+}
+
+customElements.define('d2l-table-header', TableHeader);

package/components/table/table-wrapper.js

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import '../scroll-wrapper/scroll-wrapper.js';
 import { css, html, LitElement } from 'lit';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
+import { SelectionMixin } from '../selection/selection-mixin.js';
 
 export const tableStyles = css`
 	.d2l-table {
@@ -170,8 +171,9 @@ export const tableStyles = css`
 /**
  * Wraps a native <table> element, providing styling and scroll buttons for overflow.
  * @slot - Content to wrap
+ * @slot header - Slot for `d2l-table-header` to be rendered above the table
  */
-export class TableWrapper extends RtlMixin(LitElement) {
+export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 
 	static get properties() {
 		return {
@@ -250,11 +252,10 @@ export class TableWrapper extends RtlMixin(LitElement) {
 
 	render() {
 		const slot = html`<slot @slotchange="${this._handleSlotChange}"></slot>`;
-		if (this.stickyHeaders) {
-			return slot;
-		} else {
-			return html`<d2l-scroll-wrapper>${slot}</d2l-scroll-wrapper>`;
-		}
+		return html`
+			<slot name="header"></slot>
+			${this.stickyHeaders ? slot : html`<d2l-scroll-wrapper>${slot}</d2l-scroll-wrapper>`}
+		`;
 	}
 
 	updated(changedProperties) {

package/custom-elements.json

@@ -10682,6 +10682,83 @@
         }
       ]
     },
+    {
+      "name": "d2l-table-header",
+      "path": "./components/table/table-header.js",
+      "description": "A header for table components containing a selection summary and selection actions.",
+      "attributes": [
+        {
+          "name": "no-selection",
+          "description": "Whether to render select-all and selection summary",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "no-sticky",
+          "description": "Disables sticky positioning for the header",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "select-all-pages-allowed",
+          "description": "Whether all pages can be selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "noSelection",
+          "attribute": "no-selection",
+          "description": "Whether to render select-all and selection summary",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "noSticky",
+          "attribute": "no-sticky",
+          "description": "Disables sticky positioning for the header",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectAllPagesAllowed",
+          "attribute": "select-all-pages-allowed",
+          "description": "Whether all pages can be selected",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "selectionFor",
+          "attribute": "selection-for",
+          "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
+          "type": "string"
+        },
+        {
+          "name": "selectionInfo"
+        },
+        {
+          "name": "documentLocaleSettings",
+          "default": "\"getDocumentLocaleSettings()\""
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-selection-observer-subscribe"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements"
+        }
+      ]
+    },
     {
       "name": "d2l-table-wrapper",
       "path": "./components/table/table-wrapper.js",
@@ -10704,6 +10781,23 @@
           "description": "Type of table style to apply. The \"light\" style has fewer borders and tighter padding.",
           "type": "'default'|'light'",
           "default": "\"default\""
+        },
+        {
+          "name": "selection-count-override",
+          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "type": "number"
+        },
+        {
+          "name": "item-count",
+          "description": "Total number of items. Required when selecting all pages is allowed.",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "selection-single",
+          "description": "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",
+          "default": "false"
         }
       ],
       "properties": [
@@ -10727,15 +10821,43 @@
           "description": "Type of table style to apply. The \"light\" style has fewer borders and tighter padding.",
           "type": "'default'|'light'",
           "default": "\"default\""
+        },
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "ADVANCED: Temporary optional parameter used to override existing count. Will be removed soon, use with caution.",
+          "type": "number"
+        },
+        {
+          "name": "itemCount",
+          "attribute": "item-count",
+          "description": "Total number of items. Required when selecting all pages is allowed.",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "selectionSingle",
+          "attribute": "selection-single",
+          "description": "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",
+          "default": "false"
         }
       ],
       "slots": [
         {
           "name": "",
           "description": "Content to wrap"
+        },
+        {
+          "name": "header",
+          "description": "Slot for `d2l-table-header` to be rendered above the table"
         }
       ]
     },
+    {
+      "name": "d2l-test-table-header-visual-diff",
+      "path": "./components/table/test/table-test-header-visual-diff.js"
+    },
     {
       "name": "d2l-test-table-sticky-visual-diff",
       "path": "./components/table/test/table-test-sticky-visual-diff.js"

package/package.json

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