@brightspace-ui/core 3.148.7 → 3.148.8

package/components/link/link.js

@@ -1,11 +1,11 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getFlag } from '../../helpers/flags.js';
 import { getFocusRingStyles } from '../../helpers/focus.js';
-import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
@@ -112,7 +112,11 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 				a {
 					display: inherit;
 				}
-				a.truncate {
+				:host([lines]) a {
+					align-items: baseline;
+					display: flex;
+				}
+				a span.truncate {
 					${overflowClipEnabled ? getOverflowDeclarations({ lines: 1 }) : css`
 						-webkit-box-orient: vertical;
 						display: -webkit-box;
@@ -120,12 +124,20 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 						overflow-wrap: anywhere;
 					`}
 				}
+				a span.truncate-one {
+					${overflowEllipsisDeclarations}
+				}
+				#new-window {
+					line-height: 0;
+					white-space: nowrap;
+				}
 				d2l-icon {
 					color: var(--d2l-color-celestine);
-					height: 0.95em;
+					height: calc(1em - 1px);
 					margin-inline-start: 0.315em;
+					transform: translateY(0.1em);
 					vertical-align: inherit;
-					width: 0.95em;
+					width: calc(1em - 1px);
 				}
 
 				a:hover d2l-icon {
@@ -157,22 +169,31 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 		const linkClasses = {
 			'd2l-link': true,
 			'd2l-link-main': this.main,
-			'd2l-link-small': this.small,
-			'truncate': this.lines > 0
+			'd2l-link-small': this.small
+		};
+		const spanClasses = {
+			'truncate': this.lines > 1,
+			'truncate-one': this.lines === 1
 		};
 		const styles = { webkitLineClamp: this.lines || null };
 		const newWindowElements = (this.target === '_blank')
-			? html`<span style="white-space: nowrap; line-height: 0;"><span style="font-size: 0;">&nbsp;</span><d2l-icon icon="tier1:new-window"></d2l-icon></span><span class="d2l-offscreen">${this.localize('components.link.open-in-new-window')}</span>`
+			? html`<span id="new-window"><span style="font-size: 0;">&nbsp;</span><d2l-icon icon="tier1:new-window"></d2l-icon></span><span class="d2l-offscreen">${this.localize('components.link.open-in-new-window')}</span>`
 			: nothing;
 
+		/*
+		* NOTICE:
+		* All html template whitespace within this component is critical to proper rendering and wrapping.
+		* Do not modify for readability!
+		*/
 		return html`<a
 				aria-label="${ifDefined(this.ariaLabel)}"
 				class="${classMap(linkClasses)}"
-				style="${styleMap(styles)}"
 				?download="${this.download}"
 				href="${ifDefined(this.href)}"
 				target="${ifDefined(this.target)}"
-			><slot></slot>${newWindowElements}</a>`;
+				><span
+					class="${classMap(spanClasses)}"
+					style="${styleMap(styles)}"><slot></slot></span>${newWindowElements}</a>`;
 	}
 
 }

package/package.json

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