@brightspace-ui/core 3.103.1 → 3.105.0

package/components/dialog/demo/dialog.html

@@ -15,6 +15,7 @@
 			import '../../filter/filter.js';
 			import '../../filter/filter-dimension-set.js';
 			import '../../filter/filter-dimension-set-value.js';
+			import '../../inputs/input-checkbox.js';
 			import '../../list/demo/demo-list.js';
 			import '../dialog.js';
 			import './dialog-async-content.js';
@@ -296,6 +297,38 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Dialog (no content scrolling)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openNoScrollDialog">Show Dialog</d2l-button>
+					<d2l-dialog id="noScrollDialog" title-text="Dialog Title">
+						<d2l-input-checkbox id="noScroll">Show extra paragraphs</d2l-input-checkbox>
+						<div>
+							<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+							<p id="p2" style="display: none;">Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+							<p id="p3" style="display: none;">Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						</div>
+						<d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog>
+					<script>
+						document.querySelector('#noScroll').addEventListener('change', async(e) => {
+							const dialog = document.querySelector('#noScrollDialog');
+							dialog.noContentScroll = true;
+							const display = e.target.checked ? 'block' : 'none';
+							dialog.querySelector('#p2').style.display = display;
+							dialog.querySelector('#p3').style.display = display;
+							await dialog.resize();
+							dialog.noContentScroll = false;
+						});
+						document.querySelector('#openNoScrollDialog').addEventListener('click', () => {
+							document.querySelector('#noScrollDialog').opened = true;
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-mixin.js

@@ -41,7 +41,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			 * Whether or not the dialog is open
 			 */
 			opened: { type: Boolean, reflect: true },
-
+			/**
+			 * ADVANCED: Opt out of dialog content scrolling
+			 */
+			noContentScroll: { type: Boolean, attribute: 'no-content-scroll', reflect: true },
 			/**
 			 * The optional title for the dialog
 			 */
@@ -68,6 +71,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	constructor() {
 		super();
 		this.focusableContentElemPresent = false;
+		this.noContentScroll = false;
 		this.opened = false;
 		this._autoSize = true;
 		this._dialogId = getUniqueId();

package/components/dialog/dialog-styles.js

@@ -147,7 +147,7 @@ export const dialogStyles = css`
 		height: 100%;
 	}
 
-	.d2l-dialog-outer-scroll .d2l-dialog-content {
+	:host(:not([no-content-scroll])) .d2l-dialog-outer-scroll .d2l-dialog-content {
 		overflow: auto;
 	}
 

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

@@ -2072,6 +2072,12 @@
           "description": "The optional title for the dialog",
           "type": "string"
         },
+        {
+          "name": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether or not the dialog is open",
@@ -2104,6 +2110,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noContentScroll",
+          "attribute": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -2161,6 +2174,12 @@
           "description": "REQUIRED: the title for the dialog",
           "type": "string"
         },
+        {
+          "name": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether or not the dialog is open",
@@ -2210,6 +2229,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noContentScroll",
+          "attribute": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -2283,6 +2309,12 @@
           "description": "REQUIRED: the title for the dialog",
           "type": "string"
         },
+        {
+          "name": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether or not the dialog is open",
@@ -2346,6 +2378,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noContentScroll",
+          "attribute": "no-content-scroll",
+          "description": "ADVANCED: Opt out of dialog content scrolling",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
@@ -5184,6 +5223,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.105.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",