@brightspace-ui/core 3.198.0 → 3.200.0

package/components/inputs/input-radio-styles.js

@@ -78,6 +78,9 @@ export const radioStyles = css`
 	.d2l-input-radio-label-disabled:not(.d2l-input-radio-label-disabled-tooltip) > input[type="radio"] {
 		opacity: 1;
 	}
+	.d2l-input-radio.d2l-input-radio-disabled-tooltip.d2l-hovering,
+	.d2l-input-radio.d2l-input-radio-disabled-tooltip:hover,
+	.d2l-input-radio.d2l-input-radio-disabled-tooltip:focus,
 	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio.d2l-hovering,
 	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio:hover,
 	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio:focus,
@@ -85,7 +88,10 @@ export const radioStyles = css`
 	.d2l-input-radio-label-disabled-tooltip .d2l-input-radio-label > input[type="radio"]:focus {
 		background-blend-mode: lighten;
 		background-color: color-mix(in srgb, var(--d2l-color-regolith) 50%, transparent); /* mock background opacity */
+		border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-color-celestine));
+		border-width: 2px;
 		opacity: 1;
+		outline: none;
 	}
 
 	.d2l-input-radio-label:last-of-type {

package/components/list/demo/list-item-actions.html

@@ -157,9 +157,12 @@
 						<d2l-list-item selectable key="2" selected label="Engineering Materials for Energy Systems">
 							<d2l-list-item-content>Engineering Materials for Energy Systems</d2l-list-item-content>
 						</d2l-list-item>
-						<d2l-list-item selectable key="3" label="Geomorphology and GIS">
+						<d2l-list-item selectable selection-disabled key="3" label="Geomorphology and GIS">
 							<d2l-list-item-content>Geomorphology and GIS</d2l-list-item-content>
 						</d2l-list-item>
+						<d2l-list-item selectable selection-disabled selection-disabled-tooltip="This option is not currently available"  key="5" label="Fermentation Biology">
+							<d2l-list-item-content>Fermentation Biology</d2l-list-item-content>
+						</d2l-list-item>
 					</d2l-list>
 				</template>
 			</d2l-demo-snippet>
@@ -185,7 +188,7 @@
 						<d2l-list-item selectable key="4" label="Introductory Differential Equations">
 							<d2l-list-item-content>Introductory Differential Equations</d2l-list-item-content>
 						</d2l-list-item>
-						<d2l-list-item selectable key="5" label="Fermentation Biology">
+						<d2l-list-item selectable selection-disabled selection-disabled-tooltip="This option is not currently available"  key="5" label="Fermentation Biology">
 							<d2l-list-item-content>Fermentation Biology</d2l-list-item-content>
 						</d2l-list-item>
 					</d2l-list>

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

@@ -169,7 +169,7 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 			<d2l-selection-input
 				@d2l-selection-change="${this._onCheckboxChange}"
 				?disabled="${this.selectionDisabled}"
-				._disabledTooltip=${this.selectionDisabledTooltip}
+				disabled-tooltip=${this.selectionDisabledTooltip}
 				.hovering="${this._hoveringSelection}"
 				id="${this._checkboxId}"
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"

package/components/selection/README.md

@@ -247,6 +247,7 @@ Note: `d2l-list-item` already provides a selection input for selectable list ite
 | `label` | String | Accessible hidden label for the input. |
 | `labelled-by` | String | Id reference to the accessible label for the input. **Note:** if specified, it must reference an element in the same DOM context. |
 | `disabled` | Boolean | Disables the input element(checkbox/radio btn). |
+| `disabled-tooltip` | String | Tooltip text when disabled. |
 | `selected` | Boolean | State of the input. |
 
 ### Events

package/components/selection/selection-input.js

@@ -1,6 +1,7 @@
 import '../inputs/input-checkbox.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { radioStyles } from '../inputs/input-radio-styles.js';
@@ -29,6 +30,11 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			 * @type {boolean}
 			 */
 			disabled: { type: Boolean, reflect: true },
+			/**
+			 * Tooltip text when disabled
+			 * @type {string}
+			 */
+			disabledTooltip: { type: String, attribute: 'disabled-tooltip' },
 			/**
 			 * Private. Force hovering state of input
 			 * @ignore
@@ -40,8 +46,6 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 			 * @type {string}
 			 */
 			key: { type: String },
-			/* passthrough for list-item */
-			_disabledTooltip: { state: true },
 			_indeterminate: { type: Boolean },
 			_provider: { type: Object }
 		};
@@ -65,6 +69,10 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 		this._indeterminate = false;
 	}
 
+	get focusDisabled() {
+		return this.disabled && !this.disabledTooltip;
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
 		// delay subscription otherwise import/upgrade order can cause selection mixin to miss event
@@ -99,19 +107,25 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 				'd2l-selection-input-radio': true,
 				'd2l-skeletize': true,
 				'd2l-hovering': this.hovering,
-				'd2l-disabled': this.disabled
+				'd2l-disabled': this.disabled,
+				'd2l-input-radio-disabled-tooltip': this.disabled && this.disabledTooltip
 			};
+			const disabledTooltip = this.disabled && this.disabledTooltip ?
+				html`<d2l-tooltip align="start" class="vdiff-include" for="${this.#inputId}" ?force-show="${this.hovering}" position="top">${this.disabledTooltip}</d2l-tooltip>` :
+				nothing;
 			return html`
 				<div
 					aria-disabled="${ifDefined(this.disabled)}"
 					aria-label="${this.label}"
 					aria-checked="${this.selected ? 'true' : 'false'}"
 					class="${classMap(radioClasses)}"
+					id="${this.#inputId}"
 					@click="${this._handleRadioClick}"
 					@keydown="${this._handleRadioKeyDown}"
 					@keyup="${this._handleRadioKeyUp}"
 					role="radio"
-					tabindex="${ifDefined(this.disabled ? undefined : 0)}"></div>
+					tabindex="${ifDefined(this.focusDisabled ? undefined : 0)}"></div>
+					${disabledTooltip}
 			`;
 		} else {
 			return html`
@@ -122,7 +136,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 					?checked="${this.selected}"
 					class="${ifDefined(this.hovering ? 'd2l-hovering' : undefined)}"
 					?disabled="${this.disabled}"
-					disabled-tooltip="${ifDefined(this._disabledTooltip)}"
+					disabled-tooltip="${ifDefined(this.disabledTooltip)}"
 					?indeterminate="${this._indeterminate}"
 					?skeleton="${this.skeleton}">
 				</d2l-input-checkbox>
@@ -151,6 +165,8 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 		if (elem) elem.focus();
 	}
 
+	#inputId = getUniqueId();
+
 	_handleCheckboxChange(e) {
 		e.stopPropagation();
 		this.selected = e.target.checked;
@@ -167,7 +183,8 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 	}
 
 	_handleRadioKeyUp(e) {
-		if (e.keyCode === keyCodes.SPACE) this.selected = !this.selected;
+		if (e.keyCode !== keyCodes.SPACE || this.disabled) return;
+		this.selected = !this.selected;
 	}
 
 }

package/components/selection/selection-mixin.js

@@ -183,7 +183,7 @@ export const SelectionMixin = superclass => class extends CollectionMixin(superc
 			while (focusable) {
 				if (focusable.classList.contains('d2l-selection-input-radio')) {
 					const selectionInput = focusable.getRootNode().host;
-					if (!selectionInput.disabled && this._selectionSelectables.has(selectionInput)) return selectionInput;
+					if (!selectionInput.focusDisabled && this._selectionSelectables.has(selectionInput)) return selectionInput;
 				}
 
 				if (!isComposedAncestor(this, focusable)) return null;
@@ -206,7 +206,7 @@ export const SelectionMixin = superclass => class extends CollectionMixin(superc
 		}
 
 		if (selectionInput) {
-			selectionInput.selected = true;
+			if (!selectionInput.disabled) selectionInput.selected = true;
 			selectionInput.focus();
 		}
 

package/custom-elements.json

@@ -12939,6 +12939,11 @@
           "description": "Disables the input",
           "type": "boolean"
         },
+        {
+          "name": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
         {
           "name": "key",
           "description": "REQUIRED: Key for the selectable",
@@ -12973,12 +12978,21 @@
           "description": "Disables the input",
           "type": "boolean"
         },
+        {
+          "name": "disabledTooltip",
+          "attribute": "disabled-tooltip",
+          "description": "Tooltip text when disabled",
+          "type": "string"
+        },
         {
           "name": "key",
           "attribute": "key",
           "description": "REQUIRED: Key for the selectable",
           "type": "string"
         },
+        {
+          "name": "focusDisabled"
+        },
         {
           "name": "selected",
           "attribute": "selected",

package/package.json

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