@brightspace-ui/core 2.21.5 → 2.22.0

package/components/breadcrumbs/README.md

@@ -146,7 +146,7 @@ To make your usage of `d2l-breadcrumb` (child) accessible, use the following att
 
 ## Current Page [d2l-breadcrumb-current-page]
 
-Older pages or tools include the current page name at the end of the breadcrumb, even though this is not best practice going forward. Use the d2l-breadcrumb-current-page if you need to replicate this in a legacy page:
+Only include the current page in the breadcrumb if your page or view does not have a visible heading. You will notice that some older pages or tools in Brightspace still display the current page as the last breadcrumb despite having a visible page heading, but this is now a legacy pattern.
 
 <!-- docs: demo live name:d2l-breadcrumb-current-page display:block -->
 ```html

package/components/filter/README.md

@@ -219,6 +219,7 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#fil
 
 | Property | Type | Description |
 |---|---|---|
+| `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 |

package/components/filter/demo/filter.html

@@ -27,8 +27,8 @@
 						<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="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>
@@ -47,7 +47,7 @@
 					<d2l-filter-dimension-set key="semester" text="Semester" selection-single>
 						<d2l-filter-dimension-set-value key="fall" text="Fall"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="winter" text="Winter" selected></d2l-filter-dimension-set-value>
-						<d2l-filter-dimension-set-value key="spring" text="Spring"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="spring" text="Spring" disabled></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="summer" text="Summer"></d2l-filter-dimension-set-value>
 					</d2l-filter-dimension-set>
 				</d2l-filter>

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

@@ -8,6 +8,11 @@ class FilterDimensionSetValue extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * Whether this value in the filter is disabled or not
+			 * @type {boolean}
+			 */
+			disabled: { type: Boolean, reflect: true },
 			/**
 			 * REQUIRED: Unique key to represent this value in the dimension
 			 * @type {string}
@@ -28,6 +33,7 @@ class FilterDimensionSetValue extends LitElement {
 
 	constructor() {
 		super();
+		this.disabled = false;
 		this.selected = false;
 		this.text = '';
 	}
@@ -39,7 +45,7 @@ class FilterDimensionSetValue extends LitElement {
 		changedProperties.forEach((oldValue, prop) => {
 			if (oldValue === undefined) return;
 
-			if (prop === 'selected' || prop === 'text') {
+			if (prop === 'disabled' || prop === 'selected' || prop === 'text') {
 				changes.set(prop, this[prop]);
 			}
 		});

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 {
+				disabled: value.disabled,
 				key: value.key,
 				selected: value.selected,
 				text: value.text

package/components/filter/filter.js

@@ -125,6 +125,10 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				line-height: unset;
 			}
 
+			d2l-list-item[disabled] .d2l-filter-dimension-set-value-text {
+				color: var(--d2l-color-chromite);
+			}
+
 			.d2l-filter-dimension-info-message {
 				padding: 0.9rem 0;
 				text-align: center;
@@ -407,6 +411,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				separators="between">
 				${dimension.values.map(item => html`
 					<d2l-list-item
+						?disabled="${item.disabled}"
 						?hidden="${item.hidden}"
 						key="${item.key}"
 						label="${item.text}"

package/custom-elements.json

@@ -3001,6 +3001,12 @@
           "description": "REQUIRED: Unique key to represent this value in the dimension",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "description": "Whether this value in the filter is disabled or not",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selected",
           "description": "Whether this value in the filter is selected or not",
@@ -3021,6 +3027,13 @@
           "description": "REQUIRED: Unique key to represent this value in the dimension",
           "type": "string"
         },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Whether this value in the filter is disabled or not",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "selected",
           "attribute": "selected",

package/lang/en.js

@@ -18,10 +18,10 @@ export default {
 	"components.filter.clearAnnounce": "Clearing filters for: {filterName}",
 	"components.filter.clearDescription": "Clear filters for: {filterName}",
 	"components.filter.loading": "Loading filters",
-	"components.filter.filterCountDescription": "{number, plural, =0 {No filters applied.} one {1 filter applied.} other {{number} filters applied.}}",
+	"components.filter.filterCountDescription": "{number, plural, =0 {No filters applied.} one {{number} filter applied.} other {{number} filters applied.}}",
 	"components.filter.filters": "Filters",
 	"components.filter.noFilters": "No available filters",
-	"components.filter.searchResults": "{number, plural, =0 {No search results} one {1 search result} other {{number} search results}}",
+	"components.filter.searchResults": "{number, plural, =0 {No search results} one {{number} search result} other {{number} search results}}",
 	"components.filter.singleDimensionDescription": "Filter by: {filterName}",
 	"components.form-element.defaultError": "{label} is invalid.",
 	"components.form-element.defaultFieldLabel": "Field",
@@ -32,7 +32,7 @@ export default {
 	"components.form-element.input.text.tooShort": "{label} must be at least {minlength} characters",
 	"components.form-element.input.url.typeMismatch": "URL is not valid",
 	"components.form-element.valueMissing": "{label} is required.",
-	"components.form-error-summary.errorSummary": "{count, plural, one {There was 1 error found in the information you submitted} other {There were {count} errors found in the information you submitted}}",
+	"components.form-error-summary.errorSummary": "{count, plural, one {There was {count} error found in the information you submitted} other {There were {count} errors found in the information you submitted}}",
 	"components.input-date-range.endDate": "End Date",
 	"components.input-date-range.errorBadInput": "{startLabel} must be before {endLabel}",
 	"components.input-date-range.startDate": "Start Date",

package/package.json

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