@brightspace-ui/core 2.120.1 → 2.121.0

package/components/filter/README.md

@@ -189,6 +189,7 @@ The `d2l-filter-dimension-set` component is the main dimension type that will wo
 
 | Property | Type | Description |
 |---|---|---|
+| `header-text` | String | A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users. |
 | `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 |

package/components/filter/demo/filter.html

@@ -57,11 +57,30 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Single Set Dimension - Header Text</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-filter id="filter-single">
+					<d2l-filter-dimension-set key="course" introductory-text="Filter content by courses. Start typing any course name to explore." header-text="Skills Promoted at Your Company" 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>
+						<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="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>
+		</d2l-demo-snippet>
+
 		<h2>Multiple Dimensions</h2>
 		<d2l-demo-snippet>
 			<template>
 				<d2l-filter>
-					<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 key="course" introductory-text="Filter content by courses. Start typing any course name to explore." header-text="Skills Promoted at Your Company" 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

@@ -11,6 +11,11 @@ class FilterDimensionSet extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users.
+			 * @type {string}
+			 */
+			headerText: { type: String, attribute: 'header-text' },
 			/**
 			 * The introductory text to display at the top of the filter dropdown
 			 * @type {string}
@@ -56,6 +61,7 @@ class FilterDimensionSet extends LitElement {
 
 	constructor() {
 		super();
+		this.headerText = '';
 		this.introductoryText = '';
 		this.loading = false;
 		this.searchType = 'automatic';

package/components/filter/filter.js

@@ -18,7 +18,7 @@ import '../menu/menu-item.js';
 import '../selection/selection-select-all.js';
 import '../selection/selection-summary.js';
 
-import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles } from '../typography/styles.js';
+import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles } from '../typography/styles.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -69,7 +69,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	}
 
 	static get styles() {
-		return [bodyCompactStyles, bodySmallStyles, bodyStandardStyles, offscreenStyles, css`
+		return [bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles, offscreenStyles, css`
 			[slot="header"] {
 				padding: 0.9rem 0.3rem;
 			}
@@ -164,6 +164,13 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				padding: 0.9rem;
 			}
 
+			.list-header-text {
+				color: var(--d2l-color-ferrite);
+				margin: 0;
+				padding-bottom: 0.05rem;
+				padding-top: 0.65rem;
+			}
+
 			.d2l-filter-dimension-info-message {
 				color: var(--d2l-color-ferrite);
 				text-align: center;
@@ -487,6 +494,17 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			if (count === 0) return searchResults;
 		}
 
+		let listHeader = nothing;
+		let listLabel = undefined;
+		if (dimension.headerText && dimension.searchValue === '') {
+			listHeader = html`
+				<d2l-list-item>
+					<h4 class="d2l-heading-4 list-header-text" aria-hidden="true">${dimension.headerText}</h4>
+				</d2l-list-item>
+			`;
+			listLabel = dimension.headerText;
+		}
+
 		return html`
 			${searchResults}
 			<d2l-list
@@ -494,8 +512,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				@d2l-list-selection-change="${this._handleChangeSetDimension}"
 				extend-separators
 				grid
+				label="${ifDefined(listLabel)}"
 				?selection-single="${dimension.selectionSingle}"
 				separators="between">
+				${listHeader}
 				${dimension.values.map(item => html`
 					<d2l-list-item
 						?selection-disabled="${item.disabled}"
@@ -739,8 +759,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 
 			switch (type) {
 				case 'd2l-filter-dimension-set': {
+					info.headerText = dimension.headerText;
 					info.introductoryText = dimension.introductoryText;
 					info.searchType = dimension.searchType;
+					info.searchValue = '';
 					info.selectionSingle = dimension.selectionSingle;
 					if (dimension.selectAll && !dimension.selectionSingle) info.selectAllIdPrefix = SET_DIMENSION_ID_PREFIX;
 					info.searchEmptyState = dimension.getSearchEmptyState();

package/custom-elements.json

@@ -3766,6 +3766,12 @@
           "description": "REQUIRED: Unique key to represent this dimension in the filter",
           "type": "string"
         },
+        {
+          "name": "header-text",
+          "description": "A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "introductory-text",
           "description": "The introductory text to display at the top of the filter dropdown",
@@ -3816,6 +3822,13 @@
           "description": "REQUIRED: Unique key to represent this dimension in the filter",
           "type": "string"
         },
+        {
+          "name": "headerText",
+          "attribute": "header-text",
+          "description": "A heading displayed above the list items. This is usually unnecessary, but can be used to emphasize or promote something specific about the list of items to help orient users.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "introductoryText",
           "attribute": "introductory-text",

package/package.json

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