@brightspace-ui/core 2.80.6 → 2.80.7

package/components/list/README.md

@@ -476,6 +476,7 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
 | Property | Type | Description |
 |---|---|---|
 | `breakpoints` | Array | Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used. |
+| `button-disabled` | Boolean | Disables the primary action button |
 | `disabled` | Boolean | Disables the input |
 | `draggable` |  Boolean | Whether the item is draggable |
 | `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |

package/components/list/list-item-button-mixin.js

@@ -4,13 +4,30 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ListItemMixin } from './list-item-mixin.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
+	static get properties() {
+		return {
+			/**
+			 * Disables the primary action button
+			 * @type {boolean}
+			 */
+			buttonDisabled : { type: Boolean, attribute: 'button-disabled' }
+		};
+	}
 
 	static get styles() {
 
 		const styles = [ css`
-			:host {
+			:host(:not([button-disabled])) {
 				--d2l-list-item-content-text-color: var(--d2l-color-celestine);
 			}
+			:host([button-disabled][_hovering-primary-action]) .d2l-list-item-content,
+			:host([button-disabled][_focusing-primary-action]) .d2l-list-item-content {
+				--d2l-list-item-content-text-color: unset;
+				--d2l-list-item-content-text-decoration: none;
+			}
+			:host([button-disabled]) button {
+				cursor: default;
+			}
 			[slot="outside-control-container"] {
 				margin: 0 -12px;
 			}
@@ -51,6 +68,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 	constructor() {
 		super();
 		this._primaryActionId = getUniqueId();
+		this.buttonDisabled = false;
 	}
 
 	_onButtonClick() {
@@ -59,7 +77,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 	}
 
 	_renderPrimaryAction(labelledBy) {
-		return html`<button id="${this._primaryActionId}" aria-labelledby="${labelledBy}" @click="${this._onButtonClick}"></button>`;
+		return html`<button id="${this._primaryActionId}" aria-labelledby="${labelledBy}" @click="${this._onButtonClick}" ?disabled="${this.buttonDisabled}"></button>`;
 	}
 
 };

package/custom-elements.json

@@ -7742,6 +7742,12 @@
       "path": "./components/list/list-item-button.js",
       "description": "A component for a \"listitem\" child within a list. It provides semantics, basic layout, breakpoints for responsiveness, a link for navigation, and selection.",
       "attributes": [
+        {
+          "name": "button-disabled",
+          "description": "Disables the primary action button",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "drag-target-handle-only",
           "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
@@ -7838,6 +7844,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "buttonDisabled",
+          "attribute": "button-disabled",
+          "description": "Disables the primary action button",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "dragTargetHandleOnly",
           "attribute": "drag-target-handle-only",

package/package.json

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