@brightspace-ui/core 2.75.4 → 2.75.5

package/components/demo/demo-passthrough-mixin.js

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+
+/**
+ * Creates a Lit component that mirrors properties of another, and passes its properties through to
+ * a specific rendered element.
+ *
+ * @param superclass The Lit class to mirror (will copy all its properties).
+ * @param { String } target The element name or other selector string of the element to pass properties to.
+ */
+export const DemoPassthroughMixin = (superclass, target) => class extends LitElement {
+	static get properties() {
+		return Object.fromEntries(superclass.elementProperties);
+	}
+
+	firstUpdated() {
+		this.target = this.shadowRoot.querySelector(target);
+	}
+
+	updated(changedProperties) {
+		const propertyDefinitions = superclass.elementProperties;
+		changedProperties.forEach((_value, key) => {
+			if (propertyDefinitions.get(key)?.attribute !== false) this.target[key] = this[key];
+		});
+	}
+};

package/components/table/README.md

@@ -29,7 +29,7 @@ Tables are used to display tabular data in rows and columns. They can allow user
 ## Responsive Behavior
 If the browser window is too narrow to display the table’s contents, a scroll button appears. This alerts users to overflowing content and provides a way for users to scroll horizontally. The scroll button sticks to the top of the screen so that it's available as long as the table is in the viewport.
 
-<!-- docs: demo name:d2l-test-table size:large -->
+<!-- docs: demo size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/table/demo/table-test.js';
@@ -45,7 +45,7 @@ If the viewport is very narrow — for example, on a mobile device — it may be
 
 The `d2l-table-wrapper` element can be combined with table styles to apply default/light styling, row selection styles, overflow scrolling and sticky headers to native `<table>` elements within your Lit components.
 
-<!-- docs: demo live name:d2l-test-table display:block -->
+<!-- docs: demo live name:d2l-table-wrapper display:block -->
 ```html
 <script type="module">
   import { html, LitElement } from 'lit';
@@ -63,15 +63,7 @@ The `d2l-table-wrapper` element can be combined with table styles to apply defau
     { name: 'Japan', fruit: { 'apples': 8534, 'oranges': 1325, 'bananas': 78382756 }, selected: false }
   ];
 
-  class TestTable extends LitElement {
-
-    static get properties() {
-      return {
-        noColumnBorder: { attribute: 'no-column-border', type: Boolean },
-        type: { type: String },
-        stickyHeaders: { attribute: 'sticky-headers', type: Boolean }
-      };
-    }
+  class SampleTable extends LitElement {
 
     static get styles() {
       return tableStyles;
@@ -81,7 +73,7 @@ The `d2l-table-wrapper` element can be combined with table styles to apply defau
       const type = this.type === 'light' ? 'light' : 'default';
 
       return html`
-        <d2l-table-wrapper ?no-column-border="${this.noColumnBorder}" ?sticky-headers="${this.stickyHeaders}" type="${type}">
+        <d2l-table-wrapper>
           <table class="d2l-table">
             <thead>
               <tr>
@@ -103,9 +95,9 @@ The `d2l-table-wrapper` element can be combined with table styles to apply defau
     }
 
   }
-  customElements.define('d2l-test-table', TestTable);
+  customElements.define('d2l-sample-table', SampleTable);
 </script>
-<d2l-test-table></d2l-test-table>
+<d2l-sample-table></d2l-sample-table>
 ```
 
 <!-- docs: start hidden content -->
@@ -304,7 +296,7 @@ If your table supports row selection, apply the `selected` attribute to `<tr>` r
 
 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 -->
+<!-- docs: demo live name:d2l-table-header display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/selection/selection-action.js';
@@ -314,7 +306,7 @@ The `d2l-table-header` component can be placed in the `d2l-table-wrapper`'s `hea
   import { html, LitElement } from 'lit';
   import { tableStyles } from '@brightspace-ui/core/components/table/table-wrapper.js';
 
-  class MyTableWithHeaderElem extends LitElement {
+  class SampleTableWithHeader extends LitElement {
 
     static get properties() {
       return {
@@ -369,9 +361,9 @@ The `d2l-table-header` component can be placed in the `d2l-table-wrapper`'s `hea
     }
 
   }
-  customElements.define('d2l-my-table-with-header-elem', MyTableWithHeaderElem);
+  customElements.define('d2l-sample-table-with-header', SampleTableWithHeader);
 </script>
-<d2l-my-table-with-header-elem></d2l-my-table-with-header-elem>
+<d2l-sample-table-with-header></d2l-sample-table-with-header>
 ```
 
 <!-- docs: start hidden content -->

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

@@ -9,9 +9,10 @@ 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 { css, html } from 'lit';
+import { tableStyles, TableWrapper } from '../table-wrapper.js';
+import { DemoPassthroughMixin } from '../../demo/demo-passthrough-mixin.js';
 import { RtlMixin } from '../../../mixins/rtl-mixin.js';
-import { tableStyles } from '../table-wrapper.js';
 
 const fruits = ['Apples', 'Oranges', 'Bananas'];
 
@@ -27,25 +28,10 @@ const data = () => [
 
 const formatter = new Intl.NumberFormat('en-US');
 
-class TestTable extends RtlMixin(LitElement) {
+class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')) {
 
 	static get properties() {
 		return {
-			/**
-			 * Hides the column borders on "default" table type
-			 * @type {boolean}
-			 */
-			noColumnBorder: { attribute: 'no-column-border', type: Boolean },
-			/**
-			 * Type of table style to apply
-			 * @type {'default'|'light'}
-			 */
-			type: { type: String },
-			/**
-			 * Whether header row is sticky
-			 * @type {boolean}
-			 */
-			stickyHeaders: { attribute: 'sticky-headers', type: Boolean },
 			_data: { state: true },
 			_sortField: { attribute: false, type: String },
 			_sortDesc: { attribute: false, type: Boolean }
@@ -62,15 +48,10 @@ class TestTable extends RtlMixin(LitElement) {
 
 	constructor() {
 		super();
-		this.noColumnBorder = false;
-		this.sortDesc = false;
-		this.stickyHeaders = false;
-		this.type = 'default';
 		this._data = data();
 	}
 
 	render() {
-		const type = this.type === 'light' ? 'light' : 'default';
 		const sorted = this._data.sort((a, b) => {
 			if (this._sortDesc) {
 				return b.fruit[this._sortField] - a.fruit[this._sortField];
@@ -78,7 +59,7 @@ class TestTable extends RtlMixin(LitElement) {
 			return a.fruit[this._sortField] - b.fruit[this._sortField];
 		});
 		return html`
-			<d2l-table-wrapper ?no-column-border="${this.noColumnBorder}" ?sticky-headers="${this.stickyHeaders}" type="${type}">
+			<d2l-table-wrapper>
 				<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>

package/components/table/table-header.js

@@ -7,6 +7,16 @@ import { SelectionHeader } from '../selection/selection-header.js';
  * A header for table components containing a selection summary and selection actions.
  */
 class TableHeader extends SelectionHeader {
+	static get properties() {
+		return {
+			/**
+			 * Whether to render the selection summary
+			 * @type {boolean}
+			 */
+			noSelection: { type: Boolean, attribute: 'no-selection' }
+		};
+	}
+
 	_renderSelection() {
 		return html`
 			<d2l-selection-summary

package/custom-elements.json

@@ -10601,15 +10601,32 @@
         },
         {
           "name": "sticky-headers",
-          "description": "Whether header row is sticky",
+          "description": "Whether the header row is sticky. Useful for long tables to \"stick\" the header row in place as the user scrolls.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "type",
-          "description": "Type of table style to apply",
+          "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": [
@@ -10620,24 +10637,49 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "sortDesc",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "stickyHeaders",
           "attribute": "sticky-headers",
-          "description": "Whether header row is sticky",
+          "description": "Whether the header row is sticky. Useful for long tables to \"stick\" the header row in place as the user scrolls.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "type",
           "attribute": "type",
-          "description": "Type of table style to apply",
+          "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"
         }
       ]
     },
@@ -10689,7 +10731,7 @@
       "attributes": [
         {
           "name": "no-selection",
-          "description": "Whether to render select-all and selection summary",
+          "description": "Whether to render the selection summary",
           "type": "boolean",
           "default": "false"
         },
@@ -10715,7 +10757,7 @@
         {
           "name": "noSelection",
           "attribute": "no-selection",
-          "description": "Whether to render select-all and selection summary",
+          "description": "Whether to render the selection summary",
           "type": "boolean",
           "default": "false"
         },

package/package.json

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