@brightspace-ui/core 3.225.1 → 3.227.0

package/components/button/README.md

@@ -360,7 +360,7 @@ Use the Copy button to enable users to copy a text value to the clipboard. The `
 |--|--|--|
 | `disabled` | Boolean | Disables the button |
 | `description` | String | A description to be added to the button for accessibility when text on button does not provide enough context |
-| `silm` | Boolean | Makes the button slimmer |
+| `slim` | Boolean | Makes the button slimmer |
 | `text` | String | Label text for the button |
 <!-- docs: end hidden content -->
 

package/components/hierarchical-view/hierarchical-view-mixin.js

@@ -1,6 +1,9 @@
-import { findComposedAncestor, getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
+import { addResizeNoopEventListener, findComposedAncestor, getComposedParent, isComposedAncestor, removeResizeNoopEventListener } from '../../helpers/dom.js';
 import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { css } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
+
+const ignoreNoopResizeEventsFlag = getFlag('GAUD-9520-ignore-no-op-resize-events', true);
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const __nativeFocus = document.createElement('div').focus;
@@ -141,7 +144,11 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 				this.addEventListener('focus', this.__focusCapture, true);
 				this.addEventListener('focusout', this.__focusOutCapture, true);
 				this.__onWindowResize = this.__onWindowResize.bind(this);
-				window.addEventListener('resize', this.__onWindowResize);
+				if (ignoreNoopResizeEventsFlag) {
+					addResizeNoopEventListener(this.__onWindowResize);
+				} else {
+					window.addEventListener('resize', this.__onWindowResize);
+				}
 			}
 		});
 	}
@@ -151,7 +158,12 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 
 		this.removeEventListener('focus', this.__focusCapture);
 		this.removeEventListener('focusout', this.__focusOutCapture);
-		window.removeEventListener('resize', this.__onWindowResize);
+		if (ignoreNoopResizeEventsFlag) {
+			removeResizeNoopEventListener(this.__onWindowResize);
+		} else {
+			window.removeEventListener('resize', this.__onWindowResize);
+		}
+
 		if (this.__intersectionObserver) {
 			this.__intersectionObserver.disconnect();
 			this.__isAutoSized = false;

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

@@ -58,7 +58,19 @@
 			<d2l-demo-snippet>
 				<template>
 					<d2l-input-checkbox label="Label for checkbox">
-						<div slot="supporting" style="color: #999999;">
+						<div slot="supporting">
+							Additional content can go here and will<br>
+							also line up nicely with the checkbox.
+						</div>
+					</d2l-input-checkbox>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Checkbox with label and supporting content with progressive disclosure</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-checkbox label="Toggle content with checkbox" supporting-hidden-when-unchecked>
+						<div slot="supporting">
 							Additional content can go here and will<br>
 							also line up nicely with the checkbox.
 						</div>

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

@@ -88,6 +88,7 @@ When provided with a `name`, the checkbox will participate in forms if it is `ch
 | `label-hidden` | Boolean | Hides the label visually (moves it to the input's `aria-label` attribute) |
 | `name` | String | Name of the form control. Submitted with the form as part of a name/value pair. |
 | `not-tabbable` | Boolean | Sets `tabindex="-1"` on the checkbox. Note that an alternative method of focusing is necessary to implement if using this property. |
+| `supporting-hidden-when-unchecked` | Boolean | Hides the supporting slot when unchecked. |
 | `value` | String | Value of the input |
 
 ### Events

package/components/inputs/input-checkbox.js

@@ -1,4 +1,5 @@
 import '../colors/colors.js';
+import '../expand-collapse/expand-collapse-content.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
@@ -176,6 +177,11 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 			 * @type {boolean}
 			 */
 			notTabbable: { type: Boolean, attribute: 'not-tabbable' },
+			/**
+			 * Hides the supporting slot when unchecked
+			 * @type {boolean}
+			 */
+			supportingHiddenWhenUnchecked: { type: Boolean, attribute: 'supporting-hidden-when-unchecked', reflect: true },
 			/**
 			 * Value of the input
 			 * @type {string}
@@ -235,12 +241,8 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 					vertical-align: top;
 				}
 				.d2l-input-checkbox-supporting {
-					display: none;
 					margin-block-start: 0.6rem;
 				}
-				.d2l-input-checkbox-supporting-visible {
-					display: block;
-				}
 			`
 		];
 	}
@@ -254,6 +256,7 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 		this.labelHidden = false;
 		this.name = '';
 		this.notTabbable = false;
+		this.supportingHiddenWhenUnchecked = false;
 		this.value = 'on';
 		this._hasSupporting = false;
 		this._isHovered = false;
@@ -265,10 +268,7 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 
 	render() {
 		const tabindex = this.notTabbable ? -1 : undefined;
-		const supportingClasses = {
-			'd2l-input-checkbox-supporting': true,
-			'd2l-input-checkbox-supporting-visible': this._hasSupporting
-		};
+		const supportingContentVisible = this._hasSupporting && (this.checked || !this.supportingHiddenWhenUnchecked);
 		const textClasses = {
 			'd2l-input-checkbox-text': true,
 			'd2l-skeletize': true,
@@ -305,7 +305,9 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 			${this._renderInlineHelp(this.#inlineHelpId)}
 			${offscreenContainer}
 			${disabledTooltip}
-			<div class="${classMap(supportingClasses)}" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
+			<d2l-expand-collapse-content ?expanded="${supportingContentVisible}">
+				<div class="d2l-input-checkbox-supporting" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
+			</d2l-expand-collapse-content>
 		`;
 	}
 

package/components/inputs/input-radio.js

@@ -1,3 +1,4 @@
+import '../expand-collapse/expand-collapse-content.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
@@ -80,12 +81,8 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 				margin-inline-start: 1.7rem;
 			}
 			.d2l-input-radio-supporting {
-				display: none;
 				margin-block-start: 0.6rem;
 			}
-			.d2l-input-radio-supporting-visible {
-				display: block;
-			}
 		`];
 	}
 
@@ -129,6 +126,7 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 
 	render() {
 		const allowFocus = !this.focusDisabled && this._focusable;
+		const supportingContentVisible = this._hasSupporting && (!this.supportingHiddenWhenUnchecked || this._checked);
 		const labelStyles = {
 			alignItems: this._horizontal ? 'flex-start' : undefined
 		};
@@ -143,10 +141,6 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 			'd2l-hovering': this._isHovered && !this.focusDisabled,
 			'd2l-skeletize': true
 		};
-		const supportingClasses = {
-			'd2l-input-radio-supporting': true,
-			'd2l-input-radio-supporting-visible': this._hasSupporting && (!this.supportingHiddenWhenUnchecked || this._checked),
-		};
 		const description = this.description ? html`<div id="${this.#descriptionId}" hidden>${this.description}</div>` : nothing;
 		const ariaDescribedByIds = `${this.description ? this.#descriptionId : ''} ${this._hasInlineHelp ? this.#inlineHelpId : ''}`.trim();
 		const disabledTooltip = this.disabled && this.disabledTooltip ?
@@ -169,7 +163,9 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 			${this._renderInlineHelp(this.#inlineHelpId)}
 			${description}
 			${disabledTooltip}
-			<div class="${classMap(supportingClasses)}" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
+			<d2l-expand-collapse-content ?expanded="${supportingContentVisible}">
+				<div class="d2l-input-radio-supporting" @change="${this.#handleSupportingChange}"><slot name="supporting" @slotchange="${this.#handleSupportingSlotChange}"></slot></div>
+			</d2l-expand-collapse-content>
 		`;
 	}
 

package/components/popover/popover-mixin.js

@@ -1,15 +1,18 @@
 import '../backdrop/backdrop.js';
 import '../colors/colors.js';
 import '../focus-trap/focus-trap.js';
+import { addResizeNoopEventListener, getComposedParent, isComposedAncestor, removeResizeNoopEventListener } from '../../helpers/dom.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html, nothing } from 'lit';
 import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.js';
-import { getComposedParent, isComposedAncestor } from '../../helpers/dom.js';
 import { _offscreenStyleDeclarations } from '../offscreen/offscreen.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
 
+const ignoreNoopResizeEventsFlag = getFlag('GAUD-9520-ignore-no-op-resize-events', true);
+
 export const positionLocations = Object.freeze({
 	blockEnd: 'block-end',
 	blockStart: 'block-start',
@@ -612,7 +615,11 @@ export const PopoverMixin = superclass => class extends superclass {
 		this.#removeRepositionHandlers();
 		this.#ancestorMutations = new Map();
 
-		window.addEventListener('resize', this.#handleResizeBound);
+		if (ignoreNoopResizeEventsFlag) {
+			addResizeNoopEventListener(this.#handleResizeBound);
+		} else {
+			window.addEventListener('resize', this.#handleResizeBound);
+		}
 
 		this._ancestorMutationObserver ??= new MutationObserver(this.#handleAncestorMutationBound);
 		const mutationConfig = { attributes: true, childList: true, subtree: true };
@@ -1186,7 +1193,11 @@ export const PopoverMixin = superclass => class extends superclass {
 		});
 		this._scrollablesObserved = null;
 		this._ancestorMutationObserver?.disconnect();
-		window.removeEventListener('resize', this.#handleResizeBound);
+		if (ignoreNoopResizeEventsFlag) {
+			removeResizeNoopEventListener(this.#handleResizeBound);
+		} else {
+			window.removeEventListener('resize', this.#handleResizeBound);
+		}
 	}
 
 	#reposition() {

package/custom-elements.json

@@ -5407,6 +5407,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "supporting-hidden-when-unchecked",
+          "description": "Hides the supporting slot when unchecked",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "value",
           "description": "Value of the input",
@@ -5480,6 +5486,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "supportingHiddenWhenUnchecked",
+          "attribute": "supporting-hidden-when-unchecked",
+          "description": "Hides the supporting slot when unchecked",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "value",
           "attribute": "value",

package/helpers/dom.js

@@ -263,3 +263,41 @@ export function querySelectorComposed(node, selector) {
 
 	return null;
 }
+
+const resizeNoopEventListener = new Set();
+const resizeNoopRect = {};
+
+if (globalThis.addEventListener) {
+	globalThis.addEventListener('resize', e => {
+		if (resizeNoopEventListener.size === 0) return;
+
+		const frameElement = e.target.frameElement;
+		if (frameElement?.classList.contains('d2l-iframe-fit-user-content')) {
+			// ignore if the iframe is spamming no-op resize events
+			if (resizeNoopRect.height === frameElement.scrollHeight && resizeNoopRect.width === frameElement.scrollWidth) {
+				return;
+			}
+			resizeNoopRect.height = frameElement.scrollHeight;
+			resizeNoopRect.width = frameElement.scrollWidth;
+		}
+
+		resizeNoopEventListener.forEach(listener => {
+			listener(e);
+		});
+	});
+}
+
+export function addResizeNoopEventListener(listener) {
+	resizeNoopEventListener.add(listener);
+	resizeNoopRect.height = null;
+	resizeNoopRect.width = null;
+}
+
+export function removeResizeNoopEventListener(listener) {
+	resizeNoopEventListener.delete(listener);
+}
+
+// testing only
+export function clearResizeNoopEventListeners() {
+	resizeNoopEventListener.clear();
+}

package/package.json

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