@brightspace-ui/core 2.21.7 → 2.22.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.21.7",
+  "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",