@brightspace-ui/core 2.120.1 → 2.122.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/components/list/list.js

@@ -70,7 +70,6 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
 		this.dragMultiple = false;
 		this.extendSeparators = false;
 		this.grid = false;
-		this.label = undefined;
 		this._listItemChanges = [];
 		this._childHasExpandCollapseToggle = false;
 

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",
@@ -8894,6 +8907,11 @@
       "path": "./components/list/list.js",
       "description": "A container for a styled list of items (\"d2l-list-item\"). It provides the appropriate \"list\" semantics as well as options for displaying separators, etc.",
       "attributes": [
+        {
+          "name": "label",
+          "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
+          "type": "string"
+        },
         {
           "name": "separators",
           "description": "Display separators. Valid values are \"all\" (default), \"between\", \"none\"",
@@ -8918,12 +8936,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "label",
-          "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
-          "type": "string",
-          "default": "\"undefined\""
-        },
         {
           "name": "item-count",
           "description": "Total number of items. If not specified, features like select-all-pages will be disabled.",
@@ -8942,6 +8954,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
+          "type": "string"
+        },
         {
           "name": "separators",
           "attribute": "separators",
@@ -8970,13 +8988,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "label",
-          "attribute": "label",
-          "description": "Sets an accessible label. For use when the list context is unclear. This property is only valid on top-level lists and will have no effect on nested lists.",
-          "type": "string",
-          "default": "\"undefined\""
-        },
         {
           "name": "itemCount",
           "attribute": "item-count",

package/helpers/mathjax.js

@@ -43,12 +43,36 @@ class HtmlBlockMathRenderer {
 
 		const context = JSON.parse(contextVal) || {};
 
-		await typesetMath(elem, {
+		if (!elem.querySelector('math') && !(context.renderLatex && /\$\$|\\\(|\\\[|\\begin{|\\ref{|\\eqref{/.test(elem.innerHTML))) return elem;
+
+		const mathJaxConfig = {
 			deferTypeset: true,
 			renderLatex: context.renderLatex,
 			outputScale: context.outputScale || 1,
 			window: window
+		};
+
+		await loadMathJax(mathJaxConfig);
+
+		// MathJax 3 does not support newlines, but it does persist styles, so add custom styles to mimic a linebreak
+		// This work-around should be removed when linebreaks are natively supported.
+		// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
+		// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
+		elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
+			elm.style.display = 'block';
+			elm.style.height = '0.5rem';
 		});
+
+		// If we're using deferred rendering, we need to create a document structure
+		// within the element so MathJax can appropriately process math.
+		if (!options.noDeferredRendering) elem.innerHTML = `<mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc>`;
+
+		await window.MathJax.startup.promise;
+		window.D2L = window.D2L || {};
+
+		if (!window.D2L.renderingPromise) window.D2L.renderingPromise = Promise.resolve();
+		window.D2L.renderingPromise = window.D2L.renderingPromise.then(() => window.MathJax.typesetShadow(elem.getRootNode(), elem));
+		await window.D2L.renderingPromise;
 	}
 
 }
@@ -214,38 +238,3 @@ export function loadMathJax(mathJaxConfig) {
 	return win.D2L.mathJaxLoaded;
 
 }
-
-export async function typesetMath(elem, options) {
-	if (!elem.querySelector('math') && !(options.renderLatex && /\$\$|\\\(|\\\[|\\begin{|\\ref{|\\eqref{/.test(elem.innerHTML))) return elem;
-
-	const win = options.window;
-
-	const mathJaxConfig = {
-		deferTypeset: options.deferTypeset,
-		renderLatex: options.renderLatex,
-		outputScale: options.outputScale || 1,
-		window: win
-	};
-
-	await loadMathJax(mathJaxConfig);
-
-	// MathJax 3 does not support newlines, but it does persist styles, so add custom styles to mimic a linebreak
-	// This work-around should be removed when linebreaks are natively supported.
-	// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
-	// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
-	elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
-		elm.style.display = 'block';
-		elm.style.height = '0.5rem';
-	});
-
-	// If we're using deferred rendering, we need to create a document structure
-	// within the element so MathJax can appropriately process math.
-	if (!options.noDeferredRendering) elem.innerHTML = `<mjx-doc><mjx-head></mjx-head><mjx-body>${elem.innerHTML}</mjx-body></mjx-doc>`;
-
-	await win.MathJax.startup.promise;
-	win.D2L = win.D2L || {};
-
-	if (!win.D2L.renderingPromise) win.D2L.renderingPromise = Promise.resolve();
-	win.D2L.renderingPromise = win.D2L.renderingPromise.then(() => win.MathJax.typesetShadow(elem.getRootNode(), elem));
-	await win.D2L.renderingPromise;
-}

package/package.json

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