@brightspace-ui/core 2.47.5 → 2.49.0

package/components/description-list/README.md

@@ -28,7 +28,7 @@ A Description List displays static pairs of terms and definitions in a vertical
 <!-- docs: end best practices -->
 
 ## Responsive Behavior
-When the component width is less than the `breakpoint` property, the side-by-side pairs will appear in a stacked layout.
+For very long values, or very small container sizes, the description list can use a vertically stacked layout. By default this happens at a container-width breakpoint of `240px`, but the `breakpoint` property provides flexibility so it can be adjusted to suit your content.
 
 <!-- docs: demo -->
 ```html

package/components/filter/README.md

@@ -371,6 +371,7 @@ The `d2l-filter-overflow-group` is a container for multiple filters that handles
 |---|---|---|
 | `min-to-show` | Number | The minimum number of elements to always show. Please consult the design team when using this attribute. |
 | `max-to-show` | Number | The maximum number of elements to show |
+| `tags` | Boolean, default: `false` | Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group. |
 <!-- docs: end hidden content -->
 
 ## Filter Dimension: Date [d2l-filter-dimension-date]

package/components/filter/demo/filter-overflow-group.html

@@ -94,6 +94,76 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Filter Overflow Group with Tags (built-in)</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter-overflow-group tags>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="skill" text="Skill">
+							<d2l-filter-dimension-set-value key="communication" text="Fall"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="leadership" text="Winter"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="management" text="Spring"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="planning" text="Summer"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter id="filter-2">
+						<d2l-filter-dimension-set key="type" text="Type" selection-single>
+							<d2l-filter-dimension-set-value key="certificate" text="Certificate"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="degree" text="Degree"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="diploma" text="Diploma"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="course" text="Course"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="provider" text="Semester3">
+							<d2l-filter-dimension-set-value key="mcmaster" text="McMaster"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="powered" text="PowerED"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="guelph" text="University of Guelph"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="manitoba" text="University of Manitoba"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="format" text="Format">
+							<d2l-filter-dimension-set-value key="selfpaced" text="Self-Paced"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="instructor" text="Instructor Lead" selected></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="language" text="Language" select-single>
+							<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="french" text="French"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="spanish" text="Spanish"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+					<d2l-filter>
+						<d2l-filter-dimension-set key="course" text="Course" select-all>
+							<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+						<d2l-filter-dimension-set key="duration" text="Duration">
+							<d2l-filter-dimension-set-value key="lessthanthree" text="< 3 months"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="threetosix" text="3-6 months"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="sixtotwelve" text="6-12 months"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+						<d2l-filter-dimension-set key="hoursperweek" text="SemesterNested" selection-single>
+							<d2l-filter-dimension-set-value key="lessthanfive" text="< 5 hrs/week"></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="fivetoten" text="5-10 hrs/week" selected></d2l-filter-dimension-set-value>
+							<d2l-filter-dimension-set-value key="tentotwenty" text="10-20 hrs/week"></d2l-filter-dimension-set-value>
+						</d2l-filter-dimension-set>
+					</d2l-filter>
+				</d2l-filter-overflow-group>
+			</template>
+		</d2l-demo-snippet>
+
 		<h2>Filter Overflow Group with Tags (external to d2l-filter-overflow-group)</h2>
 		<d2l-demo-snippet>
 			<template>

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

@@ -1,6 +1,8 @@
 import './filter.js';
+import './filter-tags.js';
 import { css, html, LitElement } from 'lit';
 import { OVERFLOW_CLASS, OverflowGroupMixin } from '../overflow-group/overflow-group-mixin.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 function createFilterItem(node) {
@@ -15,6 +17,17 @@ function createFilterItem(node) {
 */
 class FilterOverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 
+	static get properties() {
+		return {
+			/**
+			 * Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group.
+			 * @type {boolean}
+			 */
+			tags: { type: Boolean },
+			_filterIds: { state: true }
+		};
+	}
+
 	static get styles() {
 		return [super.styles, css`
 			::slotted(d2l-filter) {
@@ -27,16 +40,51 @@ class FilterOverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 		`];
 	}
 
+	constructor() {
+		super();
+
+		this._filterIds = '';
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+
+		if (!this.tags) return;
+
+		this._filterTags = document.createElement('d2l-filter-tags');
+		this._filterTags.setAttribute('slot', 'adjacent');
+		this.appendChild(this._filterTags);
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
 		this.addEventListener('d2l-filter-change', this._handleFilterChange);
 	}
 
+	updated(changedProperties) {
+		super.updated(changedProperties);
+
+		if (changedProperties.has('_filterIds') && this.tags) {
+			this._filterTags.setAttribute('filter-ids', this._filterIds.trim());
+		}
+	}
+
 	convertToOverflowItem(node) {
 		const tagName = node.tagName.toLowerCase();
-		if (tagName !== 'd2l-filter') console.warn(`d2l-filter-overflow-group: ${tagName} is invalid in this group. This group should only contain d2l-filter direct child elements.`);
-		else return createFilterItem(node);
+		if (tagName !== 'd2l-filter') {
+			console.warn(`d2l-filter-overflow-group: ${tagName} is invalid in this group. This group should only contain d2l-filter direct child elements.`);
+			return;
+		}
+
+		if (this.tags && !node.hasAttribute('data-filter-tags-subscribed')) {
+			const filterId = node.id || getUniqueId();
+			node.id = filterId;
+			this._filterIds += ` ${filterId}`;
+			node.setAttribute('data-filter-tags-subscribed', 'data-filter-tags-subscribed');
+		}
+
+		return createFilterItem(node);
 	}
 
 	getOverflowContainer(overflowItems) {

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

@@ -141,6 +141,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 				<slot @slotchange="${this._handleSlotChange}"></slot>
 				${overflowContainer}
 			</div>
+			<slot name="adjacent"></slot>	
 		`;
 	}
 
@@ -211,7 +212,6 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 		} else if (this._overflowContainer) {
 			this._overflowContainerWidth = this._overflowContainer.offsetWidth;
 		}
-		this._overflowContainerWidth = this._overflowContainerWidth || 0;
 
 		const showing = {
 			count: 0,
@@ -356,7 +356,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 
 		if (!this._hasResized) {
 			this._hasResized = true;
-			await this._handleSlotChange();
+			this._handleSlotChange();
 		} else {
 			this._chomp();
 		}
@@ -382,6 +382,7 @@ export const OverflowGroupMixin = superclass => class extends LocalizeCoreElemen
 			}
 
 			this._chomp();
+			this.requestUpdate();
 		});
 	}
 };

package/components/selection/selection-mixin.js

@@ -48,7 +48,12 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 			 * 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}
 			 */
-			selectionSingle: { type: Boolean, attribute: 'selection-single' }
+			selectionSingle: { type: Boolean, attribute: 'selection-single' },
+			/**
+			 * Number of selected items. Optional parameter used to override existing count.
+			 * @type {number}
+			 */
+			selectionCountOverride: { type: Number, attribute: 'selection-count-override' }
 		};
 	}
 

package/components/selection/selection-summary.js

@@ -37,11 +37,19 @@ 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', count));
+		let count;
+		let summary;
+		if (this._provider && this._provider.selectionCountOverride !== undefined) {
+			count = this._provider.selectionCountOverride;
+			summary = (this._provider.selectionCountOverride === 0 && this.noSelectionText ?
+				this.noSelectionText : this.localize('components.selection.selected', 'count', count));
+		} else {
+			count = (this.selectionInfo.state === SelectionInfo.states.allPages ?
+				this._provider.itemCount : this.selectionInfo.keys.length);
+
+			summary = (this.selectionInfo.state === SelectionInfo.states.none && this.noSelectionText ?
+				this.noSelectionText : this.localize('components.selection.selected', 'count', count));
+		}
 
 		return html`
 			<p class="d2l-body-compact">${summary}</p>

package/custom-elements.json

@@ -3420,6 +3420,11 @@
       "path": "./components/filter/filter-overflow-group.js",
       "description": "A component that can be used to display a group of filters that will be put into an overflow filter when they no longer fit on the first line of their container",
       "attributes": [
+        {
+          "name": "tags",
+          "description": "Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group.",
+          "type": "boolean"
+        },
         {
           "name": "max-to-show",
           "description": "maximum amount of slotted items to show",
@@ -3434,6 +3439,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "tags",
+          "attribute": "tags",
+          "description": "Show `d2l-filter-tags` beneath the filters. Tags will be shown for all filters in the group.",
+          "type": "boolean"
+        },
         {
           "name": "autoShow",
           "type": "boolean",
@@ -7880,6 +7891,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "item-count",
           "description": "Total number of items. Required when selecting all pages is allowed.",
@@ -7922,6 +7938,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "itemCount",
           "attribute": "item-count",
@@ -9093,6 +9115,11 @@
       "name": "d2l-demo-selection",
       "path": "./components/selection/demo/demo-selection.js",
       "attributes": [
+        {
+          "name": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "item-count",
           "description": "Total number of items. Required when selecting all pages is allowed.",
@@ -9107,6 +9134,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "itemCount",
           "attribute": "item-count",
@@ -9634,6 +9667,11 @@
       "name": "d2l-test-selection",
       "path": "./components/selection/test/selection-component.js",
       "attributes": [
+        {
+          "name": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "item-count",
           "description": "Total number of items. Required when selecting all pages is allowed.",
@@ -9648,6 +9686,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "selectionCountOverride",
+          "attribute": "selection-count-override",
+          "description": "Number of selected items. Optional parameter used to override existing count.",
+          "type": "number"
+        },
         {
           "name": "itemCount",
           "attribute": "item-count",

package/package.json

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