@brightspace-ui/core 2.86.5 → 2.87.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

@@ -74,6 +74,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,6 +146,16 @@ 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-filter-dimension-info-message {
 				padding: 0.9rem 0;
 				text-align: center;
@@ -322,6 +336,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 +353,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 +382,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 +400,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		return html`
 			<div slot="header" @keydown="${this._handleDimensionHideKeyDown}">
 				${header}
+				${introductoryText}
 				${actions}
 			</div>
 		`;
@@ -654,6 +681,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/components/scroll-wrapper/scroll-wrapper.js

@@ -94,7 +94,7 @@ class ScrollWrapper extends FocusVisiblePolyfillMixin(RtlMixin(LitElement)) {
 			.d2l-scroll-wrapper-actions {
 				position: -webkit-sticky;
 				position: sticky;
-				top: 0;
+				top: var(--d2l-table-sticky-top, 0);
 				z-index: 4;
 			}
 

package/components/table/table-wrapper.js

@@ -140,11 +140,11 @@ export const tableStyles = css`
 	/* first column that's sticky: offset by size of border-radius so top/bottom border doesn't show through (default style only) */
 	d2l-table-wrapper[sticky-headers][type="default"]:not([dir="rtl"]) .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
 	d2l-table-wrapper[sticky-headers][type="default"]:not([dir="rtl"]) .d2l-table > * > tr > [sticky].d2l-table-cell-first {
-		left: var(--d2l-table-border-radius-sticky-offset);
+		left: var(--d2l-table-border-radius-sticky-offset, 0);
 	}
 	d2l-table-wrapper[sticky-headers][type="default"][dir="rtl"] .d2l-table > * > tr > .d2l-table-sticky-cell.d2l-table-cell-first,
 	d2l-table-wrapper[sticky-headers][type="default"][dir="rtl"] .d2l-table > * > tr > [sticky].d2l-table-cell-first {
-		right: var(--d2l-table-border-radius-sticky-offset);
+		right: var(--d2l-table-border-radius-sticky-offset, 0);
 	}
 
 	/* non-header sticky cells */
@@ -233,7 +233,7 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 			}
 			.d2l-sticky-headers-backdrop {
 				position: sticky;
-				top: calc(var(--d2l-table-sticky-top) + var(--d2l-table-border-radius));
+				top: calc(var(--d2l-table-sticky-top, 0px) + var(--d2l-table-border-radius));
 				width: 100%;
 				z-index: 2; /* Must sit under d2l-table sticky-headers but over sticky columns and regular cells */
 			}
@@ -418,15 +418,15 @@ export class TableWrapper extends RtlMixin(SelectionMixin(LitElement)) {
 	}
 
 	_updateStickyTops() {
-		if (!this._table || !this.stickyHeaders) return;
-
 		const hasStickyControls = this._controls && !this._controls.noSticky;
 		let rowTop = hasStickyControls ? this._controls.offsetHeight + 6 : 0; // +6 for the internal `margin-bottom`.
 		this.style.setProperty('--d2l-table-sticky-top', `${rowTop}px`);
 
+		if (!this._table || !this.stickyHeaders) return;
+
 		const stickyRows = Array.from(this._table.querySelectorAll('tr.d2l-table-header, tr[header], thead tr'));
 		stickyRows.forEach(r => {
-			const thTop = hasStickyControls ? `${rowTop}px` : `calc(${rowTop}px + var(--d2l-table-border-radius-sticky-offset))`;
+			const thTop = hasStickyControls ? `${rowTop}px` : `calc(${rowTop}px + var(--d2l-table-border-radius-sticky-offset, 0px))`;
 			const ths = Array.from(r.querySelectorAll('th'));
 			ths.forEach(th => th.style.top = thTop);
 

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.5",
+  "version": "2.87.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",