@brightspace-ui/core 3.225.0 → 3.226.0

package/components/backdrop/backdrop.js

@@ -2,10 +2,12 @@ import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { cssEscape, getComposedChildren, getComposedParent, isComposedAncestor, isVisible } from '../../helpers/dom.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
+import { getFlag } from '../../helpers/flags.js';
 
 const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
 const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
 const BACKDROP_TABINDEX = 'data-d2l-backdrop-tabindex';
+const BACKDROP_INERT = 'data-d2l-backdrop-inert';
 const TRANSITION_DURATION = 200;
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -180,6 +182,13 @@ function hideAccessible(target) {
 			}
 			child.setAttribute('tabindex', '-1');
 
+			if (getFlag('GAUD-9398-make-backdrop-inert', false)) {
+				if (child.hasAttribute('inert')) {
+					child.setAttribute(BACKDROP_INERT, '');
+				}
+				child.setAttribute('inert', '');
+			}
+
 			child.setAttribute(BACKDROP_HIDDEN, BACKDROP_HIDDEN);
 			hiddenElements.push(child);
 		}
@@ -213,6 +222,13 @@ function showAccessible(elems) {
 		} else {
 			elem.removeAttribute('tabindex');
 		}
+		if (getFlag('GAUD-9398-make-backdrop-inert', false)) {
+			if (elem.hasAttribute(BACKDROP_INERT)) {
+				elem.removeAttribute(BACKDROP_INERT);
+			} else {
+				elem.removeAttribute('inert');
+			}
+		}
 		elem.removeAttribute(BACKDROP_HIDDEN);
 	}
 }

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

@@ -176,6 +176,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}
@@ -254,6 +259,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;
@@ -267,7 +273,7 @@ class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(Ske
 		const tabindex = this.notTabbable ? -1 : undefined;
 		const supportingClasses = {
 			'd2l-input-checkbox-supporting': true,
-			'd2l-input-checkbox-supporting-visible': this._hasSupporting
+			'd2l-input-checkbox-supporting-visible': this._hasSupporting && (this.checked || !this.supportingHiddenWhenUnchecked)
 		};
 		const textClasses = {
 			'd2l-input-checkbox-text': true,

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