@brightspace-ui/core 3.261.0 → 3.262.1

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

@@ -1,9 +1,6 @@
 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;
@@ -144,11 +141,7 @@ 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);
-				if (ignoreNoopResizeEventsFlag) {
-					addResizeNoopEventListener(this.__onWindowResize);
-				} else {
-					window.addEventListener('resize', this.__onWindowResize);
-				}
+				addResizeNoopEventListener(this.__onWindowResize);
 			}
 		});
 	}
@@ -158,11 +151,7 @@ export const HierarchicalViewMixin = superclass => class extends superclass {
 
 		this.removeEventListener('focus', this.__focusCapture);
 		this.removeEventListener('focusout', this.__focusOutCapture);
-		if (ignoreNoopResizeEventsFlag) {
-			removeResizeNoopEventListener(this.__onWindowResize);
-		} else {
-			window.removeEventListener('resize', this.__onWindowResize);
-		}
+		removeResizeNoopEventListener(this.__onWindowResize);
 
 		if (this.__intersectionObserver) {
 			this.__intersectionObserver.disconnect();

package/components/inputs/input-radio-styles.js

@@ -1,6 +1,10 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { _isValidCssSelector } from '../../helpers/internal/css.js';
+import { getFlag } from '../../helpers/flags.js';
 import { registerSemanticVariableForSvgImageUrl } from '../colors/colors.js';
 
+export const useGeneratedStyles = getFlag('GAUD-8849-Use-input-radio-generated-styles', true);
+
 registerSemanticVariableForSvgImageUrl(
 	'--d2l-input-radio-check-image',
 	`<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
@@ -8,7 +12,169 @@ registerSemanticVariableForSvgImageUrl(
 	</svg>`
 );
 
-export const radioStyles = css`
+function _getRadioStyleSelectors(inputSelectors) {
+	const parseAndJoin = selectors => unsafeCSS(selectors.map(s => s.trim()).join(',\n'));
+	return {
+		simple: parseAndJoin(inputSelectors),
+		checked: parseAndJoin(inputSelectors.map(s => `
+			${s}[aria-checked="true"],
+			${s}:checked
+		`)),
+		checkedAfter: parseAndJoin(inputSelectors.map(s => `
+			${s}[aria-checked="true"]::after,
+			${s}:checked::after
+		`)),
+		hoverFocus: parseAndJoin(inputSelectors.map(s => `
+			${s}.d2l-hovering,
+			${s}:not(.d2l-input-radio-disabled-tooltip):not(:disabled):not(.d2l-disabled):hover,
+			${s}:not(.d2l-input-radio-disabled-tooltip):not(:disabled):not(.d2l-disabled):focus,
+			${s}.d2l-input-radio-disabled-tooltip:hover,
+			${s}.d2l-input-radio-disabled-tooltip:focus
+		`)),
+		invalid: parseAndJoin(inputSelectors.map(s => `
+			${s}[aria-invalid="true"]
+		`)),
+		disabled: parseAndJoin(inputSelectors.map(s => `
+			${s}:disabled,
+			${s}.d2l-disabled
+		`)),
+		disabledTooltip: parseAndJoin(inputSelectors.map(s => `
+			${s}.d2l-input-radio-disabled-tooltip.d2l-hovering,
+			${s}.d2l-input-radio-disabled-tooltip:hover,
+			${s}.d2l-input-radio-disabled-tooltip:focus
+		`))
+	};
+}
+
+/**
+ * A private helper method that should not be used by general consumers
+ */
+export function _generateRadioStyles(selector, containerSelector) {
+	if (!_isValidCssSelector(selector) || !_isValidCssSelector(containerSelector)) return '';
+	const inputSelectors = [selector];
+	if (containerSelector) {
+		inputSelectors.push(`${containerSelector} > input[type="radio"]`);
+		containerSelector = unsafeCSS(containerSelector);
+	}
+	const selectors = _getRadioStyleSelectors(inputSelectors);
+
+	return css`
+		${selectors.simple} {
+			-webkit-appearance: none;
+			-moz-appearance: none;
+			appearance: none;
+			background-color: var(--d2l-theme-background-color-interactive-faint-default);
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: 0.5rem 0.5rem;
+			border: 1px solid var(--d2l-theme-border-color-emphasized);
+			border-radius: 50%;
+			box-sizing: border-box;
+			display: inline-block;
+			height: 1.2rem;
+			margin: 0;
+			outline: none;
+			padding: 0;
+			vertical-align: middle;
+			width: 1.2rem;
+		}
+		${selectors.checked} {
+			background-image: var(--d2l-input-radio-check-image);
+		}
+		${selectors.hoverFocus} {
+			border: 2px solid var(--d2l-input-radio-border-color-hover-focus, var(--d2l-theme-border-color-focus));
+		}
+		${selectors.invalid} {
+			--d2l-input-radio-border-color-hover-focus: var(--d2l-theme-status-color-error);
+			border-color: var(--d2l-theme-status-color-error);
+		}
+		${selectors.disabled} {
+			opacity: var(--d2l-theme-opacity-disabled-control);
+		}
+
+		${selectors.disabledTooltip} {
+			background-blend-mode: lighten;
+			background-color: var(--d2l-theme-background-color-interactive-faint-disabled);
+			opacity: 1;
+		}
+
+		@media (prefers-contrast: more) {
+			${selectors.simple} {
+				background-color: Canvas;
+				border-color: ButtonText;
+				forced-color-adjust: none;
+			}
+			${selectors.checked} {
+				background-image: none;
+				position: relative;
+			}
+			${selectors.checkedAfter} {
+				background-color: FieldText;
+				content: "";
+				display: block;
+				height: 1.2rem;
+				left: 50%;
+				mask-image: var(--d2l-input-radio-check-image);
+				mask-position: center center;
+				mask-repeat: no-repeat;
+				mask-size: 0.5rem 0.5rem;
+				position: absolute;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				width: 1.2rem;
+			}
+
+			${selectors.invalid} {
+				--d2l-input-radio-border-color-hover-focus: var(--d2l-theme-status-color-error);
+				border-color: var(--d2l-theme-status-color-error);
+			}
+
+			${selectors.disabledTooltip} {
+				background-blend-mode: initial;
+				background-color: Canvas;
+			}
+		}
+
+		${containerSelector ? css`
+			${containerSelector} {
+				align-items: center;
+				color: var(--d2l-theme-text-color-static-standard);
+				display: flex;
+				font-size: 0.8rem;
+				font-weight: 400;
+				line-height: 1.2rem;
+				margin-bottom: 0.9rem;
+				overflow-wrap: anywhere;
+				padding-inline-end: 0;
+				padding-inline-start: 1.7rem;
+				vertical-align: middle;
+			}
+			${containerSelector}:last-of-type {
+				margin-bottom: 0;
+			}
+
+			${containerSelector}.d2l-input-radio-label-disabled {
+				color: var(--d2l-theme-text-color-static-disabled);
+			}
+			${containerSelector}.d2l-input-radio-label-disabled > * {
+				color: var(--d2l-theme-text-color-static-standard);
+				opacity: var(--d2l-theme-opacity-disabled-control);
+			}
+
+			${containerSelector} > .d2l-input-radio,
+			${containerSelector} > input[type="radio"] {
+				flex: 0 0 auto;
+				margin-inline-end: 0.5rem;
+				margin-inline-start: -1.7rem;
+			}
+		` : css``}
+	`;
+
+}
+
+export const radioStyles = useGeneratedStyles ? css`
+	${_generateRadioStyles('.d2l-input-radio', '.d2l-input-radio-label')}
+` : css`
 	.d2l-input-radio,
 	.d2l-input-radio-label > input[type="radio"] {
 		-webkit-appearance: none;

package/components/inputs/input-radio.js

@@ -1,13 +1,13 @@
 import '../expand-collapse/expand-collapse-content.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { radioStyles, useGeneratedStyles } from './input-radio-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { InputInlineHelpMixin } from './input-inline-help.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
-import { radioStyles } from './input-radio-styles.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -133,10 +133,11 @@ class InputRadio extends InputInlineHelpMixin(SkeletonMixin(FocusMixin(PropertyR
 		const labelClasses = {
 			'd2l-input-radio-label': true,
 			'd2l-input-radio-label-disabled': this.disabled && !this.skeleton,
-			'd2l-input-radio-label-disabled-tooltip': this.disabled && this.disabledTooltip
+			'd2l-input-radio-label-disabled-tooltip': !useGeneratedStyles && this.disabled && this.disabledTooltip
 		};
 		const radioClasses = {
 			'd2l-input-radio': true,
+			'd2l-input-radio-disabled-tooltip': useGeneratedStyles && this.disabled && this.disabledTooltip,
 			'd2l-disabled': this.focusDisabled && !this.skeleton,
 			'd2l-hovering': this._isHovered && !this.focusDisabled,
 			'd2l-skeletize': true

package/components/popover/popover-mixin.js

@@ -8,12 +8,9 @@ import { css, html, nothing } from 'lit';
 import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.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',
@@ -625,12 +622,7 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		this.#removeRepositionHandlers();
 		this.#ancestorMutations = new Map();
-
-		if (ignoreNoopResizeEventsFlag) {
-			addResizeNoopEventListener(this.#handleResizeBound);
-		} else {
-			window.addEventListener('resize', this.#handleResizeBound);
-		}
+		addResizeNoopEventListener(this.#handleResizeBound);
 
 		this._ancestorMutationObserver ??= new MutationObserver(this.#handleAncestorMutationBound);
 		const mutationConfig = { attributes: true, childList: true, subtree: true };
@@ -1204,11 +1196,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		});
 		this._scrollablesObserved = null;
 		this._ancestorMutationObserver?.disconnect();
-		if (ignoreNoopResizeEventsFlag) {
-			removeResizeNoopEventListener(this.#handleResizeBound);
-		} else {
-			window.removeEventListener('resize', this.#handleResizeBound);
-		}
+		removeResizeNoopEventListener(this.#handleResizeBound);
 	}
 
 	#reposition() {

package/package.json

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