@brightspace-ui/core 3.198.0 → 3.199.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/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';
@@ -65,6 +66,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 +104,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`
@@ -151,6 +162,8 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 		if (elem) elem.focus();
 	}
 
+	#inputId = getUniqueId();
+
 	_handleCheckboxChange(e) {
 		e.stopPropagation();
 		this.selected = e.target.checked;
@@ -167,7 +180,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

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