@brightspace-ui/core 3.338.0 → 3.338.1

package/components/collapsible-panel/collapsible-panel-summary-item.js

@@ -1,10 +1,8 @@
 import '../colors/colors.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
-import { styleMap } from 'lit/directives/style-map.js';
 
 /**
  * A component for a "summary item" child component that describes the content in a collapsible panel.
@@ -35,9 +33,6 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 		.d2l-body-small {
 			line-height: 1.2rem;
 		}
-		p.truncate {
-			${getOverflowDeclarations({ lines: 1 })}
-		}
 	`];
 
 	constructor() {
@@ -47,13 +42,8 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 	}
 
 	render() {
-		const classes = {
-			'd2l-body-small': true,
-			'd2l-skeletize': true,
-			'truncate': this.lines > 0
-		};
-		const styles = (this.lines > 0) ? { '-webkit-line-clamp': this.lines } : {};
-		return html`<p class="${classMap(classes)}" style="${styleMap(styles)}">${this.text}</p>`;
+		const styles = this.lines ? getOverflowDeclarations({ lines: this.lines }) : null;
+		return html`<p class="d2l-body-small d2l-skeletize" style="${styles ?? nothing}">${this.text}</p>`;
 	}
 }
 

package/components/link/link.js

@@ -2,15 +2,14 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
-import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { _generateLinkStyles } from './link-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { styleMap } from 'lit/directives/style-map.js';
 
 export const linkStyles = _generateLinkStyles('.d2l-link', true);
 
@@ -90,12 +89,6 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			align-items: baseline;
 			display: flex;
 		}
-		a span.truncate {
-			${getOverflowDeclarations({ lines: 1 })}
-		}
-		a span.truncate-one {
-			${overflowEllipsisDeclarations}
-		}
 		#new-window {
 			line-height: 0;
 			white-space: nowrap;
@@ -157,12 +150,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 			'd2l-link-main': this.main,
 			'd2l-link-small': this.small
 		};
-		const spanClasses = {
-			'd2l-link-content': true,
-			'truncate': this.lines > 1,
-			'truncate-one': this.lines === 1
-		};
-		const styles = { webkitLineClamp: this.lines || null };
+		const styles = this.lines ? getOverflowDeclarations({ lines: this.lines }) : null;
 		const newWindowElements = (this.target === '_blank')
 			? 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;
@@ -186,8 +174,8 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 				tabindex="${ifDefined(this.disabled && this.disabledTooltip ? 0 : undefined)}"
 				target="${ifDefined(this.target)}"
 				><span
-					class="${classMap(spanClasses)}"
-					style="${styleMap(styles)}"><slot></slot></span>${newWindowElements}</a>${disabledTooltip}`;
+					class="d2l-link-content"
+					style="${styles ?? nothing}"><slot></slot></span>${newWindowElements}</a>${disabledTooltip}`;
 	}
 
 	#linkId = getUniqueId();

package/helpers/overflow.js

@@ -1,22 +1,22 @@
 import { set } from './template-tags.js';
 import { unsafeCSS } from 'lit';
 
-export const overflowHiddenDeclarations = getOverflowDeclarations({});
-export const overflowEllipsisDeclarations = getOverflowDeclarations({ textOverflow: 'ellipsis' });
+export const overflowHiddenDeclarations = getOverflowDeclarations({ lines: 0 });
+export const overflowEllipsisDeclarations = getOverflowDeclarations({ textOverflow: 'ellipsis', lines: 0 });
 
-export function getOverflowDeclarations({ textOverflow = '', lines = 0, lit = true } = {}) {
+export function getOverflowDeclarations({ textOverflow = '', lines = 1, lit = true } = {}) {
 	if (!arguments.length) return overflowHiddenDeclarations;
+	if (arguments[0].lines === 1) return overflowEllipsisDeclarations;
 
 	const declarations = set`
 		min-width: 0; /* clamps width of flex items */
 		overflow-x: clip;
-		${lines
+		${lines > 1 || lines.constructor === String
 			? set`
 			display: -webkit-box;
 			overflow-clip-margin: 0.2em;
 			overflow-wrap: anywhere;
 			overflow-y: clip;
-			text-overflow: ${textOverflow || 'ellipsis'};
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: ${lines};`
 			: set`

package/package.json

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