@brightspace-ui/core 2.52.1 → 2.53.0

package/components/filter/README.md

@@ -159,7 +159,7 @@ The filter will announce changes to filter selections, search results, and when
 
 <!-- docs: end hidden content -->
 
-## Filter Dimension: Set [d2l-filter-dimension-set]
+## Dimension Set [d2l-filter-dimension-set]
 
 The `d2l-filter-dimension-set` component is the main dimension type that will work for most use cases.  Used alongside the [d2l-filter-dimension-set-value](#d2l-filter-dimension-set-value), this will give you a selectable list of filter values.
 
@@ -197,7 +197,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
 | `value-only-active-filter-text` | Boolean | Whether to hide the dimension in the text sent to active filter subscribers |
 <!-- docs: end hidden content -->
 
-## Filter Dimension: Set Value [d2l-filter-dimension-set-value]
+## Dimension Set Value [d2l-filter-dimension-set-value]
 
 This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component, this will give you a selectable list of filter values.
 
@@ -210,8 +210,9 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#d2l
 </script>
 <d2l-filter>
   <d2l-filter-dimension-set key="course" text="Course" >
-    <d2l-filter-dimension-set-value key="art" text="Art" 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="art" text="Art" count="1" selected></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="3" disabled></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="biology" text="Biology" count="5"></d2l-filter-dimension-set-value>
   </d2l-filter-dimension-set>
 </d2l-filter>
 ```
@@ -220,12 +221,43 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#d2l
 
 | Property | Type | Description |
 |---|---|---|
+| `count` | Number | Count for the value in the list. If no count is provided, no count will be displayed |
 | `disabled` | Boolean, default: `false` | Whether the value in the filter is disabled or not |
 | `key` | String, required | Unique identifier within a dimension for the value |
 | `text` | String, required | Text for the value in the list |
 | `selected` | Boolean, default: `false` | Whether the value in the filter is selected or not |
 <!-- docs: end hidden content -->
 
+## Counts [d2l-filter-dimension-set-value]
+
+The `count` property displays a count next to each filter value to indicate the number of results a value will yield. This helps users more effectively explore data and make selections, so it’s a good idea to provide these counts if it can be done performantly.
+
+Note that when using multiple filter dimensions, the counts should be updated when selections are made across dimensions so that they always reflect the number of results a filter will yield.
+
+<!-- docs: demo code align:start autoOpen:true autoSize:false size:large -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/filter/filter.js';
+  import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
+  import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
+</script>
+<d2l-filter>
+  <d2l-filter-dimension-set key="course" text="Course" >
+    <d2l-filter-dimension-set-value key="art" text="Art" count="0"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="1" selected></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="biology" text="Biology" count="1024"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="chemistry" text="Chemistry" count="25" disabled></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="drama" text="Drama" count="362"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="english" text="English" count="881"></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" count="212"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="math" text="Math" count="22365"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="physics" text="Physics" count="27"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="stats" text="Statistics" count="2"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft" count="96"></d2l-filter-dimension-set-value>
+  </d2l-filter-dimension-set>
+</d2l-filter>
+```
+
 ## Tags for Applied Filters [d2l-filter-tags]
 
 A tag-list allowing the user to see (and remove) the currently applied filters. Works with the `d2l-filter`. It supports hooking up to multiple filters.
@@ -374,13 +406,10 @@ The `d2l-filter-overflow-group` is a container for multiple filters that handles
 | `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]
-
-**Coming Soon!**
-
 <!-- docs: start hidden content -->
 ## Future Improvements
 
+* Date Dimension - Ability to filter by dates
 * ability to delay change events until the user has pressed an apply button (see [#341](https://github.com/BrightspaceUI/core/issues/341))
 
 Looking for an enhancement not listed here? Create a GitHub issue!

package/components/filter/demo/filter.html

@@ -24,17 +24,17 @@
 			<template>
 				<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" disabled></d2l-filter-dimension-set-value>
-						<d2l-filter-dimension-set-value key="drama" text="Drama" disabled></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-value key="art" text="Art" count="12"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="2" selected></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="biology" text="Biology" count="15"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="chemistry" text="Chemistry" count="1"disabled></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="drama" text="Drama" count="23" disabled></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="english" text="English" count="100"></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" count="100"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="math" text="Math" count="50"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="physics" text="Physics" count="23"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="stats" text="Statistics" count="333"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft" count="2211"></d2l-filter-dimension-set-value>
 					</d2l-filter-dimension-set>
 				</d2l-filter>
 			</template>
@@ -59,22 +59,22 @@
 			<template>
 				<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="art" text="Art" count="0"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" count="1" selected></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="biology" text="Biology" count="-12"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="chemistry" text="Chemistry" count="12.35"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="drama" text="Drama" count="xxx"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="english" text="English" count="881"></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" count="100"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="math" text="Math" count="23909"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="physics" text="Physics" count="1012"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="stats" text="Statistics" count="2"></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="role" text="Role">
-						<d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
-						<d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
-						<d2l-filter-dimension-set-value key="student" text="Student"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="admin" text="Admin" count="0"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="instructor" text="Instructor" count="22"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="student" text="Student" count="50"></d2l-filter-dimension-set-value>
 					</d2l-filter-dimension-set>
 					<d2l-filter-dimension-set key="semester" text="Semester" selection-single>
 						<d2l-filter-dimension-set-value key="fall" text="Fall"></d2l-filter-dimension-set-value>

package/components/filter/filter-dimension-set-value.js

@@ -8,6 +8,11 @@ class FilterDimensionSetValue extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * Count for the value in the list. If no count is provided, no count will be displayed
+			 * @type {number}
+			 */
+			count: { type: Number },
 			/**
 			 * Whether this value in the filter is disabled or not
 			 * @type {boolean}
@@ -38,6 +43,21 @@ class FilterDimensionSetValue extends LitElement {
 		this.text = '';
 	}
 
+	get count() {
+		return this._count;
+	}
+
+	set count(val) {
+		if (val < 0) val = 0;
+		if (!Number.isInteger(val)) val = Math.floor(val);
+		if (Number.isNaN(val)) val = undefined;
+		const oldVal = this._count;
+		if (oldVal !== val) {
+			this._count = val;
+			this.requestUpdate('count', oldVal);
+		}
+	}
+
 	updated(changedProperties) {
 		super.updated(changedProperties);
 
@@ -45,11 +65,10 @@ class FilterDimensionSetValue extends LitElement {
 		changedProperties.forEach((oldValue, prop) => {
 			if (oldValue === undefined) return;
 
-			if (prop === 'disabled' || prop === 'selected' || prop === 'text') {
+			if (prop === 'count' || prop === 'disabled' || prop === 'selected' || prop === 'text') {
 				changes.set(prop, this[prop]);
 			}
 		});
-
 		if (changes.size > 0) {
 			/** @ignore */
 			this.dispatchEvent(new CustomEvent('d2l-filter-dimension-set-value-data-change', {
@@ -59,7 +78,6 @@ class FilterDimensionSetValue extends LitElement {
 			}));
 		}
 	}
-
 }
 
 customElements.define('d2l-filter-dimension-set-value', FilterDimensionSetValue);

package/components/filter/filter-dimension-set.js

@@ -103,6 +103,7 @@ class FilterDimensionSet extends LitElement {
 		const valueNodes = this._getSlottedNodes();
 		const values = valueNodes.map(value => {
 			return {
+				count: value.count,
 				disabled: value.disabled,
 				key: value.key,
 				selected: value.selected,

package/components/filter/filter.js

@@ -16,10 +16,11 @@ import '../selection/selection-select-all.js';
 import '../selection/selection-summary.js';
 
 import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles } from '../typography/styles.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
@@ -120,12 +121,16 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				white-space: nowrap;
 			}
 
-			.d2l-filter-dimension-set-value-text {
+			.d2l-filter-dimension-set-value {
 				color: var(--d2l-color-ferrite);
+				display: flex;
+				gap: 0.45rem;
 				line-height: unset;
+				overflow: hidden;
 			}
 
-			d2l-list-item[disabled] .d2l-filter-dimension-set-value-text {
+			d2l-list-item[disabled] .d2l-filter-dimension-set-value,
+			d2l-list-item[disabled] .d2l-body-small {
 				color: var(--d2l-color-chromite);
 			}
 
@@ -417,7 +422,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 						label="${item.text}"
 						selectable
 						?selected="${item.selected}">
-						<div class="d2l-filter-dimension-set-value-text d2l-body-compact">${item.text}</div>
+						<div class="d2l-filter-dimension-set-value d2l-body-compact">
+							<div class="d2l-filter-dimension-set-value-text">${item.text}</div>
+							${item.count !== undefined ? html`<div class="d2l-body-small">(${formatNumber(item.count)})</div>` : nothing}
+						</div>
 					</d2l-list-item>
 				`)}
 			</d2l-list>

package/custom-elements.json

@@ -3262,6 +3262,11 @@
           "description": "REQUIRED: Unique key to represent this value in the dimension",
           "type": "string"
         },
+        {
+          "name": "count",
+          "description": "Count for the value in the list. If no count is provided, no count will be displayed",
+          "type": "number"
+        },
         {
           "name": "disabled",
           "description": "Whether this value in the filter is disabled or not",
@@ -3288,6 +3293,12 @@
           "description": "REQUIRED: Unique key to represent this value in the dimension",
           "type": "string"
         },
+        {
+          "name": "count",
+          "attribute": "count",
+          "description": "Count for the value in the list. If no count is provided, no count will be displayed",
+          "type": "number"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",

package/package.json

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