@brightspace-ui/core 2.190.0 → 3.0.1

package/components/dropdown/demo/dropdown.html

@@ -200,8 +200,20 @@
 				</d2l-dropdown>
 			</template>
 		</d2l-demo-snippet>
+
+		<h2>Generic Dropdown, wide opener with brief content, end align</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-dropdown>
+					<d2l-button class="d2l-dropdown-opener">Lorem ipsum dolor sit amet consectetur adipiscing elit</d2l-button>
+					<d2l-dropdown-content align="end">
+						<p>Content</p>
+					</d2l-dropdown-content>
+				</d2l-dropdown>
+			</template>
+		</d2l-demo-snippet>
 	</d2l-demo-page>
 
 </body>
 
-</html>
+</html>

package/components/dropdown/dropdown-content-mixin.js

@@ -10,6 +10,7 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
+import { visualReady } from '../../helpers/visualReady.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const minBackdropHeightMobile = 42;
@@ -320,6 +321,11 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this.addEventListener('d2l-dropdown-position', this.__toggleScrollStyles);
 	}
 
+	async getUpdateComplete() {
+		await super.getUpdateComplete();
+		await visualReady;
+	}
+
 	updated(changedProperties) {
 		changedProperties.forEach((_, propName) => {
 			if (propName === 'verticalOffset') {
@@ -682,8 +688,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				this.openedAbove = this._getOpenedAbove(spaceAround, spaceAroundScroll, spaceRequired);
 			}
 
-			const centerDelta = contentRect.width - targetRect.width;
-			const position = this._getPosition(spaceAround, centerDelta);
+			const position = this._getPosition(spaceAround, targetRect.width, contentRect.width);
 			if (position !== null) {
 				this._position = position;
 			}
@@ -973,13 +978,13 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		return false;
 	}
 
-	_getPosition(spaceAround, centerDelta) {
-
+	_getPosition(spaceAround, targetWidth, contentWidth) {
+		const centerDelta = contentWidth - targetWidth;
 		const contentXAdjustment = centerDelta / 2;
-		if (centerDelta <= 0) {
+		if (!this.align && centerDelta <= 0) {
 			return contentXAdjustment * -1;
 		}
-		if (spaceAround.left > contentXAdjustment && spaceAround.right > contentXAdjustment) {
+		if (!this.align && spaceAround.left > contentXAdjustment && spaceAround.right > contentXAdjustment) {
 			// center with target
 			return contentXAdjustment * -1;
 		}
@@ -1001,6 +1006,14 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 				return spaceAround.right * -1;
 			}
 		}
+		if (this.align === 'start' || this.align === 'end') {
+			const shift = Math.min((targetWidth / 2) - (20 + 16 / 2), 0); // 20 ~= 1rem, 16 = pointer size
+			if (this.align === 'start') {
+				return shift;
+			} else {
+				return targetWidth - contentWidth - shift;
+			}
+		}
 		return null;
 	}
 

package/components/dropdown/dropdown-content-styles.js

@@ -1,6 +1,9 @@
 import '../colors/colors.js';
 import { css } from 'lit';
 
+const pointerLength = 16;
+const pointerRotatedLength = Math.SQRT2 * parseFloat(pointerLength);
+
 export const dropdownContentStyles = css`
 
 	:host {
@@ -61,16 +64,26 @@ export const dropdownContentStyles = css`
 		top: -7px;
 		z-index: 1;
 	}
+	:host([align="start"]) .d2l-dropdown-content-pointer,
+	:host([align="end"][dir="rtl"]) .d2l-dropdown-content-pointer {
+		left: min(calc(1rem + ${(pointerRotatedLength - pointerLength) / 2}px), calc(50% - ${pointerLength / 2}px)); /* 1rem corresponds to .d2l-dropdown-content-container padding */
+		right: auto;
+	}
+	:host([align="end"]) .d2l-dropdown-content-pointer,
+	:host([align="start"][dir="rtl"]) .d2l-dropdown-content-pointer {
+		left: auto;
+		right: min(calc(1rem + ${(pointerRotatedLength - pointerLength) / 2}px), calc(50% - ${pointerLength / 2}px)); /* 1rem corresponds to .d2l-dropdown-content-container padding */
+	}
 
 	.d2l-dropdown-content-pointer > div {
 		background-color: var(--d2l-dropdown-background-color);
 		border: 1px solid var(--d2l-dropdown-border-color);
 		border-radius: 0.1rem;
 		box-shadow: -4px -4px 12px -5px rgba(32, 33, 34, 0.2); /* ferrite */
-		height: 16px;
+		height: ${pointerLength}px;
 		-webkit-transform: rotate(45deg);
 		transform: rotate(45deg);
-		width: 16px;
+		width: ${pointerLength}px;
 	}
 
 	:host([opened-above]) .d2l-dropdown-content-pointer {

package/helpers/README.md

@@ -280,3 +280,17 @@ import '@brightspace-ui/core/helpers/viewport-size.js';
     min-width: calc(var(--d2l-vw, 1vw) * 100);
 }
 ```
+
+## Visual Ready
+
+A helper for determining that the page is visually "ready" (i.e., necessary pieces are loaded) and calculations can be done. Currently it handles waiting for fonts to be ready, but going forward it can have other pieces added as needed. This is useful in places like the tooltip, where the fonts being loaded has an impact on the tooltip position calculation.
+
+Example usage within a component:
+```javascript
+import { visualReady } from '../../helpers/visualReady.js';
+
+async getUpdateComplete() {
+    await super.getUpdateComplete();
+    await visualReady;
+}
+```

package/helpers/visualReady.js

@@ -0,0 +1,3 @@
+[...document.fonts].forEach(font => font.load());
+
+export const visualReady = Promise.all([document.fonts.ready]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.190.0",
+  "version": "3.0.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -51,7 +51,7 @@
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",
     "@rollup/plugin-replace": "^5",
-    "@web/dev-server": "^0.2",
+    "@web/dev-server": "^0.4",
     "chalk": "^5",
     "eslint": "^8",
     "eslint-config-brightspace": "^1",
@@ -61,7 +61,7 @@
     "rollup": "^4",
     "rollup-plugin-copy": "^3",
     "rollup-plugin-delete": "^2",
-    "sinon": "^17",
+    "sinon": "^18",
     "stylelint": "^16",
     "web-component-analyzer": "^2"
   },
@@ -71,7 +71,7 @@
     "@open-wc/dedupe-mixin": "^1",
     "ifrau": "^0.41",
     "intl-messageformat": "^10",
-    "lit": "^2",
+    "lit": "^3",
     "prismjs": "^1",
     "resize-observer-polyfill": "^1"
   }