@brightspace-ui/core 1.220.5 → 1.222.2

package/components/card/card-footer-link.js

@@ -76,19 +76,11 @@ class CardFooterLink extends RtlMixin(LitElement) {
 		return [offscreenStyles, css`
 			:host {
 				display: inline-block;
-				left: 0.15rem;
-				margin-right: 0.3rem;
 				position: relative;
 			}
 			:host[hidden] {
 				display: none;
 			}
-			:host([dir="rtl"]) {
-				left: auto;
-				margin-left: 0.3rem;
-				margin-right: 0;
-				right: 0.15rem;
-			}
 			a {
 				box-sizing: border-box;
 				display: inline-block;
@@ -99,13 +91,6 @@ class CardFooterLink extends RtlMixin(LitElement) {
 			d2l-count-badge-icon {
 				text-align: initial;
 			}
-			::slotted(d2l-tooltip) {
-				left: calc(-50% + 11px) !important;
-			}
-			:host([dir="rtl"]) ::slotted(d2l-tooltip) {
-				left: 0;
-				right: calc(-50% + 11px) !important;
-			}
 		`];
 	}
 

package/components/count-badge/count-badge-icon.js

@@ -29,27 +29,24 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 			outline: none;
 		}
 
-		.d2l-count-badge-wrapper {
-			display: inline-block;
-		}
-
 		:host {
-			padding-right: var(--d2l-count-badge-icon-padding);
-		}
-
-		:host([dir="rtl"]) {
-			padding-left: var(--d2l-count-badge-icon-padding);
-			padding-right: 0;
+			/* for long numbers, center the number on the icon */
+			--d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
+			display: inline-block;
+			/* symmetrical padding to prevent overflows for most numbers */
+			padding-left: 0.5rem;
+			padding-right: 0.5rem;
+			position: relative;
 		}
 
 		:host([size="large"]) {
-			--d2l-count-badge-icon-padding: calc(var(--d2l-count-badge-icon-height) - 0.7rem);
-			margin-top: -0.7rem;
+			--d2l-count-badge-icon-padding-top: 0.7rem;
+			padding-top: var(--d2l-count-badge-icon-padding-top);
 		}
 
 		:host([size="small"]) {
-			--d2l-count-badge-icon-padding: calc(var(--d2l-count-badge-icon-height) - 0.55rem);
-			margin-top: -0.55rem;
+			--d2l-count-badge-icon-padding-top: 0.55rem;
+			padding-top: var(--d2l-count-badge-icon-padding-top);
 		}
 
 		:host([icon*="tier1:"]) {
@@ -63,7 +60,7 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 		}
 
 		d2l-tooltip[_open-dir="top"] {
-			margin-top: -0.6rem;
+			margin-top: calc(0px - var(--d2l-count-badge-icon-padding-top));
 		}
 
 		d2l-icon {
@@ -79,15 +76,30 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 	}
 
 	render() {
-		const numberPadding = this.size === 'small' ? '0.55rem' : '0.7rem';
-		const numberStyles = {
+		let numberStyles = {
 			border: '2px solid white',
-			position: 'relative',
-			left: this.dir === 'rtl' ? 0 : 'var(--d2l-count-badge-icon-padding)',
-			right: this.dir === 'rtl' ? 'var(--d2l-count-badge-icon-padding)' : 0,
-			top: numberPadding,
-			visibility: this.skeleton ? 'hidden' : undefined
+			position: 'absolute',
+			visibility: this.skeleton ? 'hidden' : undefined,
 		};
+
+		// center long number strings to prevent overflow
+		const centerNumber = this.getNumberString().length >= 4;
+
+		if (centerNumber) {
+			const xPadding = 'var(--d2l-count-badge-icon-padding)';
+			numberStyles = {
+				... numberStyles,
+				transform: this.dir === 'rtl'
+					? `translateY(-50%) translateX(calc(0px - ${xPadding}))`
+					: `translateY(-50%) translateX(${xPadding})`
+			};
+		} else {
+			numberStyles = {
+				... numberStyles,
+				[this.dir === 'rtl' ? 'left' : 'right'] : '-0.1rem',
+				transform: 'translateY(-50%)'
+			};
+		}
 		const tabbable = (this.tabStop || this.hasTooltip) && !this.skeleton;
 		const innerHtml = html`
 			${this.renderCount(numberStyles)}

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

@@ -14,6 +14,8 @@ import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.j
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const minBackdropHeightMobile = 42;
 const minBackdropWidthMobile = 30;
+const outerMarginTopBottom = 18;
+const defaultVerticalOffset = 16;
 
 export const DropdownContentMixin = superclass => class extends LocalizeCoreElement(RtlMixin(superclass)) {
 
@@ -264,6 +266,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		this._hasHeader = false;
 		this._hasFooter = false;
 		this._showBackdrop = false;
+		this._verticalOffset = defaultVerticalOffset;
 
 		this.__onResize = this.__onResize.bind(this);
 		this.__onAutoCloseFocus = this.__onAutoCloseFocus.bind(this);
@@ -324,9 +327,10 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			if (propName === 'verticalOffset') {
 				let newVerticalOffset = parseInt(this.verticalOffset);
 				if (isNaN(newVerticalOffset)) {
-					newVerticalOffset = 20;
+					newVerticalOffset = defaultVerticalOffset;
 				}
 				this.style.setProperty('--d2l-dropdown-verticaloffset', `${newVerticalOffset}px`);
+				this._verticalOffset = newVerticalOffset;
 			}
 		});
 	}
@@ -616,9 +620,9 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			if (bounded) {
 				spaceAround = this._constrainSpaceAround({
 					// allow for target offset + outer margin
-					above: targetRect.top - boundingContainerRect.top - 40,
+					above: targetRect.top - boundingContainerRect.top - this._verticalOffset - outerMarginTopBottom,
 					// allow for target offset + outer margin
-					below: boundingContainerRect.bottom - targetRect.bottom - 40,
+					below: boundingContainerRect.bottom - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
 					// allow for outer margin
 					left: targetRect.left - boundingContainerRect.left - 20,
 					// allow for outer margin
@@ -631,9 +635,9 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			} else {
 				spaceAround = this._constrainSpaceAround({
 					// allow for target offset + outer margin
-					above: targetRect.top - 50,
+					above: targetRect.top - this._verticalOffset - outerMarginTopBottom,
 					// allow for target offset + outer margin
-					below: window.innerHeight - targetRect.bottom - 80,
+					below: window.innerHeight - targetRect.bottom - this._verticalOffset - outerMarginTopBottom,
 					// allow for outer margin
 					left: targetRect.left - 20,
 					// allow for outer margin

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

@@ -16,7 +16,7 @@ export const dropdownContentStyles = css`
 		left: 0;
 		position: absolute;
 		text-align: left;
-		top: calc(100% + var(--d2l-dropdown-verticaloffset, 20px));
+		top: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
 		width: 100%;
 		z-index: 1000; /* position on top of floating buttons */
 	}
@@ -38,7 +38,7 @@ export const dropdownContentStyles = css`
 
 	:host([opened-above]) {
 		animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
-		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 20px));
+		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
 		top: auto;
 	}
 
@@ -49,7 +49,7 @@ export const dropdownContentStyles = css`
 
 	:host([data-mobile][opened-above]:not([mobile-tray])) {
 		animation: var(--d2l-dropdown-above-animation-name) 300ms ease;
-		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 20px));
+		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
 		top: auto;
 	}
 

package/components/meter/README.md

@@ -56,12 +56,11 @@ Linear meters show a horizontal progress bar.
 * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
 * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
 * `percent` Boolean: Shows a percentage instead of `value/max`.
-* `text-inline` Boolean: Keeps the meter to a single line.
-* `text` String: Context information about what the meter is about.
-	* `\{\%\}` in the string will be replaced with percentage value
-	* `{x/y}` in the string will be replaced with fraction with the proper language support
-	* **DEPRECATED** `{x}` in the string will be replaced with `value`
-	* **DEPRECATED** `{y}` in the string will be replaced with `max`
+* `text-inline` Boolean: Keeps the meter to a single line. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
+	* `%` in the string will be replaced with percentage value
+	* `x/y` in the string will be replaced with fraction with the proper language support
+	* **DEPRECATED** `x` in the string will be replaced with `value`
+	* **DEPRECATED** `y` in the string will be replaced with `max`
 <!-- docs: end hidden content -->
 
 ## Radial meter [d2l-meter-radial]
@@ -89,9 +88,9 @@ Radial meters appear as a half circle. They have more visual weight than a line
 * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
 * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
 * `percent` (Boolean): Shows a percentage instead of `value/max`.
-* `text` (String): Context information about what the meter is about.
-	* `{%}` in the string will be replaced with percentage value
-	* `{x/y}` in the string will be replaced with fraction with the proper language support
+* `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
+	* `%` in the string will be replaced with percentage value
+	* `x/y` in the string will be replaced with fraction with the proper language support
 <!-- docs: end hidden content -->
 
 
@@ -134,7 +133,7 @@ All `meter` components have a `foreground-light` style that ensures accessibl
 * `value` (required, Number): Current number of completed units. A positive, non-zero number that is less than or equal to `max`.
 * `max` (Number, default: `100`): Max number of units that are being measured by this meter. A positive, non-zero number.
 * `percent` (Boolean): Shows a percentage instead of `value/max`.
-* `text` (String): Context information about what the meter is about.
-	* `\{\%\}` in the string will be replaced with percentage value
-	* `{x/y}` in the string will be replaced with fraction with the proper language support
+* `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
+	* `%` in the string will be replaced with percentage value
+	* `x/y` in the string will be replaced with fraction with the proper language support
 <!-- docs: end hidden content -->

package/package.json

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