@brightspace-ui/core 2.86.6 → 2.88.0

package/components/filter/README.md

@@ -188,6 +188,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
 
 | Property | Type | Description |
 |---|---|---|
+| `introductory-text` | String | The introductory text to display at the top of the filter dropdown |
 | `key` | String, required | Unique identifier for the dimension |
 | `loading` | Boolean | Whether the values for this dimension are still loading and a loading spinner should be displayed |
 | `search-type` | String, default: `automatic` | `automatic` provides basic case-insensitive text comparison searching, `none` disables the search input, and `manual` fires an event for the consumer to handle the search and pass the keys of the values to be displayed |

package/components/filter/demo/filter.html

@@ -23,7 +23,7 @@
 		<d2l-demo-snippet>
 			<template>
 				<d2l-filter>
-					<d2l-filter-dimension-set key="course" text="Course" select-all>
+					<d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." text="Course" select-all>
 						<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>
@@ -58,7 +58,7 @@
 		<d2l-demo-snippet>
 			<template>
 				<d2l-filter>
-					<d2l-filter-dimension-set key="course" text="Course" select-all>
+					<d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." text="Course" select-all>
 						<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>

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

@@ -34,6 +34,11 @@ class FilterDimensionSet extends LitElement {
 			 * @type {boolean}
 			 */
 			selectionSingle: { type: Boolean, attribute: 'selection-single' },
+			/**
+			 * The introductory text to display at the top of the filter dropdown
+			 * @type {string}
+			 */
+			introductoryText: { type: String, attribute: 'introductory-text' },
 			/**
 			 * REQUIRED: The text that is displayed for the dimension title
 			 * @type {string}
@@ -49,6 +54,7 @@ class FilterDimensionSet extends LitElement {
 
 	constructor() {
 		super();
+		this.introductoryText = '';
 		this.loading = false;
 		this.searchType = 'automatic';
 		this.selectAll = false;

package/components/filter/filter.js

@@ -5,6 +5,7 @@ import '../button/button-subtle.js';
 import '../dropdown/dropdown-button-subtle.js';
 import '../dropdown/dropdown-content.js';
 import '../dropdown/dropdown-menu.js';
+import '../empty-state/empty-state-simple.js';
 import '../hierarchical-view/hierarchical-view.js';
 import '../inputs/input-search.js';
 import '../list/list.js';
@@ -74,6 +75,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				padding-bottom: 0.9rem;
 			}
 
+			.d2l-filter-dimension-header.with-intro {
+				padding-bottom: 0.6rem;
+			}
+
 			.d2l-filter-dimension-header,
 			.d2l-filter-dimension-header-actions {
 				align-items: center;
@@ -142,8 +147,22 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				color: var(--d2l-color-chromite);
 			}
 
+			.d2l-filter-dimension-intro-text {
+				margin: 0;
+				padding: 0.6rem 1.5rem 1.5rem;
+				text-align: center;
+			}
+
+			.d2l-filter-dimension-intro-text.multi-dimension {
+				padding: 0 1.5rem 1.5rem;
+			}
+
+			.d2l-empty-state-container {
+				padding: 0.9rem;
+			}
+
 			.d2l-filter-dimension-info-message {
-				padding: 0.9rem 0;
+				color: var(--d2l-color-ferrite);
 				text-align: center;
 			}
 
@@ -269,7 +288,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':
 				dimensionHTML = html`
-				<div aria-live="polite" class="d2l-filter-container">
+				<div class="d2l-filter-container">
 					${this._createSetDimension(dimension)}
 				</div>`;
 				break;
@@ -322,6 +341,14 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 		const dimension = this._getActiveDimension();
 
+		const introductoryTextClasses = {
+			'd2l-body-compact': true,
+			'd2l-filter-dimension-intro-text': true,
+			'multi-dimension': !singleDimension
+		};
+		const introductoryText = !dimension.introductoryText ? nothing : html`
+			<p class="${classMap(introductoryTextClasses)}">${dimension.introductoryText}</p>`;
+
 		const clear = html`
 			<d2l-button-subtle
 				@click="${this._handleClear}"
@@ -331,7 +358,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			</d2l-button-subtle>
 		`;
 
-		const search = dimension.searchType === 'none' ? null : html`
+		const search = dimension.searchType === 'none' ? nothing : html`
 			<d2l-input-search
 				@d2l-input-search-searched="${this._handleSearch}"
 				?disabled="${this._isDimensionEmpty(dimension)}"
@@ -360,8 +387,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			</div>
 		`;
 
-		const header = singleDimension ? null : html`
-			<div class="d2l-filter-dimension-header">
+		const headerClasses = {
+			'd2l-filter-dimension-header': true,
+			'with-intro': dimension.introductoryText
+		};
+		const header = singleDimension ? nothing : html`
+			<div class="${classMap(headerClasses)}">
 				<d2l-button-icon
 					@click="${this._handleDimensionHide}"
 					icon="tier1:chevron-left"
@@ -374,6 +405,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		return html`
 			<div slot="header" @keydown="${this._handleDimensionHideKeyDown}">
 				${header}
+				${introductoryText}
 				${actions}
 			</div>
 		`;
@@ -389,9 +421,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 		if (this._isDimensionEmpty(dimension)) {
 			return html`
-				<p class="d2l-filter-dimension-info-message d2l-body-small" role="alert">
-					${this.localize('components.filter.noFilters')}
-				</p>
+				<div class="d2l-empty-state-container" role="alert">
+					<d2l-empty-state-simple
+						class="d2l-filter-dimension-info-message"
+						description="${this.localize('components.filter.noFilters')}">
+					</d2l-empty-state-simple>
+				</div>
 			`;
 		}
 
@@ -399,15 +434,17 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		if (dimension.searchValue && dimension.searchValue !== '') {
 			const count = dimension.values.reduce((total, value) => { return !value.hidden ? total + 1 : total; }, 0);
 			const classes = {
-				'd2l-filter-dimension-info-message': true,
-				'd2l-body-small': true,
+				'd2l-empty-state-container': true,
 				'd2l-offscreen': count !== 0
 			};
 
 			searchResults = html`
-				<p class="${classMap(classes)}" role="alert">
-					${this.localize('components.filter.searchResults', { number: count })}
-				</p>
+				<div class="${classMap(classes)}" role="alert">
+					<d2l-empty-state-simple
+						class="d2l-filter-dimension-info-message"
+						description="${this.localize('components.filter.searchResults', { number: count })}">
+					</d2l-empty-state-simple>
+				</div>
 			`;
 
 			if (count === 0) return searchResults;
@@ -654,6 +691,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 			switch (type) {
 				case 'd2l-filter-dimension-set': {
+					info.introductoryText = dimension.introductoryText;
 					info.searchType = dimension.searchType;
 					info.selectionSingle = dimension.selectionSingle;
 					if (dimension.selectAll && !dimension.selectionSingle) info.selectAllIdPrefix = SET_DIMENSION_ID_PREFIX;

package/custom-elements.json

@@ -3573,6 +3573,12 @@
           "description": "REQUIRED: Unique key to represent this dimension in the filter",
           "type": "string"
         },
+        {
+          "name": "introductory-text",
+          "description": "The introductory text to display at the top of the filter dropdown",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "loading",
           "description": "Whether the values for this dimension are still loading and a loading spinner should be displayed",
@@ -3617,6 +3623,13 @@
           "description": "REQUIRED: Unique key to represent this dimension in the filter",
           "type": "string"
         },
+        {
+          "name": "introductoryText",
+          "attribute": "introductory-text",
+          "description": "The introductory text to display at the top of the filter dropdown",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "loading",
           "attribute": "loading",

package/package.json

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