@brightspace-ui/core 1.220.4 → 1.222.1

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/README.md

@@ -126,6 +126,7 @@ If the dropdown is initially empty when it's opened, the dropdown pointer will n
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener |
 | `no-auto-open` | Boolean, default: `false` | Prevents the dropdown from automatically on click or on key press |
 | `open-on-hover` | Boolean, default: `false` | Optionally open dropdown on click or hover action |
+| `h-align` | String | Possible values are undefined (default) or text. If text, aligns the button content to the leading edge of text |
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties

package/components/dropdown/dropdown-button-subtle.js

@@ -17,6 +17,13 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 			 * @type {string}
 			 */
 			description: { type: String },
+
+			/**
+			* Aligns the leading edge of text if value is set to "text"
+			* @type {'text'|''}
+			*/
+			hAlign: { type: String, reflect: true, attribute: 'h-align' },
+
 			/**
 			 * REQUIRED: Text for the button
 			 * @type {string}
@@ -31,7 +38,7 @@ class DropdownButtonSubtle extends DropdownOpenerMixin(LitElement) {
 
 	render() {
 		return html`
-			<d2l-button-subtle description="${ifDefined(this.description)}" text=${this.text} icon="tier1:chevron-down" icon-right ?disabled=${this.disabled}></d2l-button-subtle>
+			<d2l-button-subtle description="${ifDefined(this.description)}" h-align="${ifDefined(this.hAlign)}" text=${this.text} icon="tier1:chevron-down" icon-right ?disabled=${this.disabled}></d2l-button-subtle>
 			<slot></slot>
 		`;
 	}

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/custom-elements.json

@@ -1686,6 +1686,11 @@
           "description": "A description to be added to the opener button for accessibility when text on button does not provide enough context",
           "type": "string"
         },
+        {
+          "name": "h-align",
+          "description": "Aligns the leading edge of text if value is set to \"text\"",
+          "type": "'text'|''"
+        },
         {
           "name": "text",
           "description": "REQUIRED: Text for the button",
@@ -1717,6 +1722,12 @@
           "description": "A description to be added to the opener button for accessibility when text on button does not provide enough context",
           "type": "string"
         },
+        {
+          "name": "hAlign",
+          "attribute": "h-align",
+          "description": "Aligns the leading edge of text if value is set to \"text\"",
+          "type": "'text'|''"
+        },
         {
           "name": "text",
           "attribute": "text",

package/package.json

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