@brightspace-ui/core 3.204.8 → 3.205.0

package/components/popover/popover-mixin.js

@@ -27,8 +27,11 @@ const defaultPreferredPosition = {
 	span: positionSpans.all,
 	allowFlip: true
 };
+const defaultMinWidth = 70;
+const inlineMargin = 20;
 const minBackdropHeightMobile = 42;
 const minBackdropWidthMobile = 30;
+const minOpenerSizeNoShift = 52;
 const pointerLength = 16;
 const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
 const isSupported = ('popover' in HTMLElement.prototype);
@@ -165,6 +168,7 @@ export const PopoverMixin = superclass => class extends superclass {
 				border-radius: 0.1rem;
 				box-shadow: -4px -4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
 				height: ${pointerLength}px;
+				outline: var(--d2l-popover-outline-width, 0) solid var(--d2l-popover-outline-color, transparent);
 				transform: rotate(45deg);
 				width: ${pointerLength}px;
 			}
@@ -392,6 +396,13 @@ export const PopoverMixin = superclass => class extends superclass {
 
 		await this.updateComplete;
 
+		const getSpaceRequired = (height, contentRect) => {
+			return {
+				height: height + 10,
+				width: contentRect.width
+			};
+		};
+
 		const adjustPosition = async() => {
 
 			const scrollHeight = document.documentElement.scrollHeight;
@@ -399,11 +410,7 @@ export const PopoverMixin = superclass => class extends superclass {
 			contentRect = contentRect ?? content.getBoundingClientRect();
 
 			const height = this._minHeight ?? Math.min(this._maxHeight ?? Number.MAX_VALUE, contentRect.height);
-
-			const spaceRequired = {
-				height: height + 10,
-				width: contentRect.width
-			};
+			let spaceRequired = getSpaceRequired(height, contentRect);
 
 			// space in viewport
 			const prefersInline = this._preferredPosition.location === positionLocations.inlineStart || this._preferredPosition.location === positionLocations.inlineEnd;
@@ -424,6 +431,34 @@ export const PopoverMixin = superclass => class extends superclass {
 				below: scrollHeight - openerRect.bottom - document.documentElement.scrollTop
 			}, spaceRequired, openerRect);
 
+			if (prefersInline) {
+				const minWidth = this.minWidth || defaultMinWidth;
+				if (!this._rtl) {
+					if (this._preferredPosition.location === positionLocations.inlineStart && (spaceAround.left - inlineMargin) > minWidth) {
+						this._width = spaceAround.left - inlineMargin;
+					} else if (this._preferredPosition.location === positionLocations.inlineStart && (spaceAround.right - inlineMargin) > minWidth) {
+						this._width = spaceAround.right - inlineMargin;
+					} else if (this._preferredPosition.location === positionLocations.inlineEnd && (spaceAround.right - inlineMargin) > minWidth) {
+						this._width = spaceAround.right - inlineMargin;
+					} else if (this._preferredPosition.location === positionLocations.inlineEnd && (spaceAround.left - inlineMargin) > minWidth) {
+						this._width = spaceAround.left - inlineMargin;
+					}
+				} else {
+					if (this._preferredPosition.location === positionLocations.inlineStart && (spaceAround.right - inlineMargin) > minWidth) {
+						this._width = spaceAround.right - inlineMargin;
+					} else if (this._preferredPosition.location === positionLocations.inlineStart && (spaceAround.left - inlineMargin) > minWidth) {
+						this._width = spaceAround.left - inlineMargin;
+					} else if (this._preferredPosition.location === positionLocations.inlineEnd && (spaceAround.left - inlineMargin) > minWidth) {
+						this._width = spaceAround.left - inlineMargin;
+					} else if (this._preferredPosition.location === positionLocations.inlineEnd && (spaceAround.right - inlineMargin) > minWidth) {
+						this._width = spaceAround.right - inlineMargin;
+					}
+				}
+				await this.updateComplete;
+				contentRect = content.getBoundingClientRect();
+				spaceRequired = getSpaceRequired(height, contentRect);
+			}
+
 			if (options.updateLocation) {
 				this._location = this.#getLocation(spaceAround, spaceAroundScroll, spaceRequired);
 			}
@@ -969,21 +1004,24 @@ export const PopoverMixin = superclass => class extends superclass {
 			return (contentXAdjustment + 1.5) * -1; // 1.5px to account for extra 3px that is being applied to width
 		}
 
+		// extra offset for small openers (so pointer does not look broken from content)
+		const extraOffset = (!this._noPointer && this._preferredPosition.span !== positionSpans.all && openerRect.width < minOpenerSizeNoShift ? ((minOpenerSizeNoShift / 2) - (openerRect.width / 2)) : 0);
+
 		if (!this._rtl) {
 			if (spaceAround.left < contentXAdjustment) {
 				// slide content right (not enough space to center)
-				return spaceAround.left * -1;
+				return (spaceAround.left * -1) - extraOffset;
 			} else if (spaceAround.right < contentXAdjustment) {
 				// slide content left (not enough space to center)
-				return (centerDelta * -1) + spaceAround.right;
+				return (centerDelta * -1) + spaceAround.right + extraOffset;
 			}
 		} else {
 			if (spaceAround.left < contentXAdjustment) {
 				// slide content right (not enough space to center)
-				return (centerDelta * -1) + spaceAround.left;
+				return (centerDelta * -1) + spaceAround.left + extraOffset;
 			} else if (spaceAround.right < contentXAdjustment) {
 				// slide content left (not enough space to center)
-				return spaceAround.right * -1;
+				return (spaceAround.right * -1) - extraOffset;
 			}
 		}
 

package/components/tooltip/tooltip.js

@@ -13,7 +13,7 @@ import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-const usePopoverMixin = getFlag('GAUD-7355-tooltip-popover', false);
+const usePopoverMixin = getFlag('GAUD-7355-tooltip-popover', true);
 
 const contentBorderSize = 1;
 const contentHorizontalPadding = 15;
@@ -144,8 +144,10 @@ if (usePopoverMixin) {
 					--d2l-tooltip-border-color: var(--d2l-color-ferrite); /* Deprecated, use state attribute instead */
 					--d2l-tooltip-outline-color: rgba(255, 255, 255, 0.32);
 					--d2l-popover-background-color: var(--d2l-tooltip-background-color);
-					--d2l-popover-border-color: var(--d2l-tooltip-outline-color);
+					--d2l-popover-border-color: var(--d2l-tooltip-border-color);
 					--d2l-popover-border-radius: 0.3rem;
+					--d2l-popover-outline-color: var(--d2l-tooltip-outline-color);
+					--d2l-popover-outline-width: 1px;
 				}
 				:host([state="error"]) {
 					--d2l-tooltip-background-color: var(--d2l-color-cinnabar);
@@ -155,12 +157,13 @@ if (usePopoverMixin) {
 					box-sizing: border-box;
 					color: white;
 					max-width: 17.5rem;
-					min-height: 1.95rem;
+					min-height: 1.85rem;
 					min-width: 2.1rem;
 					overflow: hidden;
 					overflow-wrap: anywhere;
 					padding-block: ${10 - contentBorderSize}px ${11 - contentBorderSize}px;
 					padding-inline: ${contentHorizontalPadding - contentBorderSize}px;
+					white-space: normal;
 				}
 				::slotted(ul),
 				::slotted(ol) {
@@ -226,9 +229,7 @@ if (usePopoverMixin) {
 			this.#removeListeners();
 			window.removeEventListener('resize', this.#handleTargetResizeBound);
 
-			clearDismissible(this.#dismissibleId);
 			delayTimeoutId = null;
-			this.#dismissibleId = null;
 
 			if (this.#target) {
 				elemIdListRemove(this.#target, 'aria-labelledby', this.id);
@@ -257,6 +258,8 @@ if (usePopoverMixin) {
 
 			if (changedProperties.has('align') || changedProperties.has('forceShow') || changedProperties.has('offset') || changedProperties.has('positionLocation')) {
 				super.configure({
+					maxWidth: '350',
+					minWidth: '48',
 					noAutoClose: this.forceShow,
 					offset: (this.offset !== undefined ? Number.parseInt(this.offset) : undefined),
 					position: { location: this.#adaptPositionLocation(this.positionLocation), span: this.#adaptPositionSpan(this.align) },
@@ -283,7 +286,6 @@ if (usePopoverMixin) {
 			return super.position();
 		}
 
-		#dismissibleId = null;
 		#handleTargetBlurBound;
 		#handleTargetClickBound;
 		#handleTargetFocusBound;
@@ -307,6 +309,11 @@ if (usePopoverMixin) {
 		#targetSizeObserver;
 		#targetMutationObserver;
 
+		// for testing only!
+		_getTarget() {
+			return this.#target;
+		}
+
 		#adaptPositionLocation(val) {
 			switch (val) {
 				case 'bottom': return 'block-end';
@@ -326,6 +333,8 @@ if (usePopoverMixin) {
 		}
 
 		#addListeners() {
+			this.addEventListener('d2l-popover-close', this.hide);
+
 			if (!this.#target) return;
 
 			this.#target.addEventListener('mouseenter', this.#handleTargetMouseEnterBound);
@@ -416,7 +425,7 @@ if (usePopoverMixin) {
 		#handleTargetMutation([m]) {
 			if (!this.#target.isConnected || (m.target === this.#target && m.attributeName === 'id')) {
 				this.#targetMutationObserver.disconnect();
-				this._updateTarget();
+				this.#updateTarget();
 			}
 		}
 
@@ -456,6 +465,8 @@ if (usePopoverMixin) {
 		}
 
 		#removeListeners() {
+			this.removeEventListener('d2l-popover-close', this.hide);
+
 			if (!this.#target) return;
 
 			this.#target.removeEventListener('mouseenter', this.#handleTargetMouseEnterBound);
@@ -488,11 +499,11 @@ if (usePopoverMixin) {
 					activeTooltip = this;
 				}
 
-				this.#dismissibleId = setDismissible(() => this.hide());
 				this.setAttribute('aria-hidden', 'false');
 				await this.updateComplete;
 
-				super.open(this.#target, false);
+				// wait for popover before dispatching (ex. otherwise visual-diff won't capture complete target area)
+				await super.open(this.#target, false);
 
 				if (dispatch) {
 					this.dispatchEvent(new CustomEvent('d2l-tooltip-show', { bubbles: true, composed: true }));
@@ -503,10 +514,6 @@ if (usePopoverMixin) {
 				if (activeTooltip === this) activeTooltip = null;
 
 				this.setAttribute('aria-hidden', 'true');
-				if (this.#dismissibleId) {
-					clearDismissible(this.#dismissibleId);
-					this.#dismissibleId = null;
-				}
 
 				super.close();
 
@@ -1353,6 +1360,11 @@ if (usePopoverMixin) {
 			return this.shadowRoot && this.shadowRoot.querySelector('.d2l-tooltip-content');
 		}
 
+		// for testing only!
+		_getTarget() {
+			return this._target;
+		}
+
 		_isAboveOrBelow() {
 			return this._openDir === 'bottom' || this._openDir === 'top';
 		}

package/package.json

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