@brightspace-ui/core 3.103.1 → 3.104.0

package/components/inputs/demo/input-checkbox.html

@@ -55,9 +55,16 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Checkbox with label and secondary content</h2>
+			<h2>Checkbox with label and supporting content</h2>
 			<d2l-demo-snippet>
 				<template>
+					<d2l-input-checkbox>
+						Label for checkbox
+						<div slot="supporting" style="color: #999999;">
+							Additional content can go here and will<br>
+							also line up nicely with the checkbox.
+						</div>
+					</d2l-input-checkbox>
 					<d2l-input-checkbox>Label for checkbox</d2l-input-checkbox>
 					<d2l-input-checkbox-spacer style="color: #999999;">
 						Additional content can go here and will<br>

package/components/inputs/docs/input-checkbox.md

@@ -77,6 +77,7 @@ checkbox.addEventListener('change', (e) => {
 
 * `default`: Primary text that will appear next to the input box and function as the label for the checkbox.
 * `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
+* `supporting`: Supporting information which will appear below and be aligned with the checkbox.
 <!-- docs: end hidden content -->
 
 ### Methods
@@ -85,6 +86,9 @@ checkbox.addEventListener('change', (e) => {
 
 ## Checkbox Spacer [d2l-input-checkbox-spacer]
 
+> [!NOTE]  
+> Spacer is obsolete. Use the `supporting` slot instead.
+
 To align related content below checkboxes, the `d2l-input-checkbox-spacer` element can be used:
 
 <!-- docs: demo code display:block -->

package/components/inputs/input-checkbox.js

@@ -63,6 +63,7 @@ export const checkboxStyles = css`
  * A component that can be used to show a checkbox and optional visible label.
  * @slot - Checkbox information (e.g., text)
  * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
+ * @slot supporting - Supporting information which will appear below and be aligned with the checkbox.
  * @fires change - Dispatched when the checkbox's state changes
  */
 class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitElement))) {
@@ -114,6 +115,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 			 * @type {string}
 			 */
 			value: { type: String },
+			_hasSupporting: { state: true },
 			_isHovered: { state: true },
 		};
 	}
@@ -123,7 +125,6 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 			css`
 				:host {
 					display: block;
-					line-height: ${cssSizes.inputBoxSize}rem;
 					margin-bottom: 0.9rem;
 				}
 				:host([hidden]) {
@@ -135,6 +136,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 				}
 				label {
 					display: flex;
+					line-height: ${cssSizes.inputBoxSize}rem;
 					overflow-wrap: anywhere;
 				}
 				.d2l-input-checkbox-wrapper {
@@ -156,7 +158,8 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 					bottom: 0.3rem;
 					top: 0.3rem;
 				}
-				.d2l-input-inline-help {
+				.d2l-input-inline-help,
+				.d2l-input-checkbox-supporting {
 					margin-inline-start: ${cssSizes.inputBoxSize + cssSizes.checkboxMargin}rem;
 				}
 				.d2l-input-checkbox-text-disabled {
@@ -168,6 +171,13 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 				input[type="checkbox"].d2l-input-checkbox {
 					vertical-align: top;
 				}
+				.d2l-input-checkbox-supporting {
+					display: none;
+					margin-block: 0.9rem;
+				}
+				.d2l-input-checkbox-supporting-visible {
+					display: block;
+				}
 			`
 		];
 	}
@@ -180,6 +190,7 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 		this.name = '';
 		this.notTabbable = false;
 		this.value = 'on';
+		this._hasSupporting = false;
 		this._isHovered = false;
 	}
 
@@ -189,6 +200,10 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 
 	render() {
 		const tabindex = this.notTabbable ? -1 : undefined;
+		const supportingClasses = {
+			'd2l-input-checkbox-supporting': true,
+			'd2l-input-checkbox-supporting-visible': this._hasSupporting
+		};
 		const textClasses = {
 			'd2l-input-checkbox-text': true,
 			'd2l-skeletize': true,
@@ -221,8 +236,9 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 					.value="${this.value}"></span><span class="${classMap(textClasses)}"><slot></slot></span>
 			</label>
 			${this._renderInlineHelp(this.#inlineHelpId)}
-		  	${offscreenContainer}
+			${offscreenContainer}
 			${disabledTooltip}
+			<div class="${classMap(supportingClasses)}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
 		`;
 	}
 
@@ -260,5 +276,10 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 		this._isHovered = false;
 	}
 
+	#handleSupportingSlotChange(e) {
+		const content = e.target.assignedNodes({ flatten: true });
+		this._hasSupporting = content?.length > 0;
+	}
+
 }
 customElements.define('d2l-input-checkbox', InputCheckbox);

package/custom-elements.json

@@ -5184,6 +5184,10 @@
         {
           "name": "inline-help",
           "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
+        },
+        {
+          "name": "supporting",
+          "description": "Supporting information which will appear below and be aligned with the checkbox."
         }
       ]
     },

package/package.json

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