@brightspace-ui/core 3.338.0 → 3.338.2

package/components/button/button-iterator.js

@@ -3,7 +3,6 @@ import '../icons/icon.js';
 import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { buttonStyles } from './button-styles.js';
-import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { labelStyles } from '../typography/styles.js';
@@ -13,7 +12,7 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
 /**
  * A navigation control for moving sequentially through a set of items.
  */
-class ButtonIterator extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElement(LitElement))) {
+class ButtonIterator extends PropertyRequiredMixin(LocalizeCoreElement(LitElement)) {
 
 	static properties = {
 		/**
@@ -84,11 +83,11 @@ class ButtonIterator extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElemen
 			min-width: calc(2rem + 2px);
 			padding: 0;
 		}
-		button:not([disabled]):hover,
-		button:not([disabled]):focus {
+		button:not([aria-disabled]):hover,
+		button:not([aria-disabled]):focus {
 			background-color: var(--d2l-theme-background-color-interactive-secondary-hover);
 		}
-		button[disabled] {
+		button[aria-disabled] {
 			cursor: default;
 			opacity: var(--d2l-theme-opacity-disabled-control);
 		}
@@ -104,10 +103,6 @@ class ButtonIterator extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElemen
 		this.previousText = '';
 	}
 
-	static get focusElementSelector() {
-		return 'button:not([disabled])';
-	}
-
 	render() {
 		const nextText = this.nextText ? this.nextText : this.localizeCommon('navigation:next:title');
 		if (this.nextOnly) {
@@ -129,13 +124,21 @@ class ButtonIterator extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElemen
 		`;
 	}
 
+	focus() {
+		if (!this.previousDisabled || this.nextDisabled) {
+			this.shadowRoot.querySelector('button.previous').focus();
+		} else {
+			this.shadowRoot.querySelector('button.next').focus();
+		}
+	}
+
 	#descriptionId = getUniqueId();
 	#previousId = getUniqueId();
 	#nextId = getUniqueId();
 
 	#handleButtonClick(e) {
 		const button = e.currentTarget;
-		if (button.disabled) {
+		if (button.hasAttribute('aria-disabled')) {
 			return;
 		}
 		e.stopPropagation();
@@ -149,25 +152,21 @@ class ButtonIterator extends FocusMixin(PropertyRequiredMixin(LocalizeCoreElemen
 	}
 
 	#renderButton(id, className, icon, text, descriptionId, disabled) {
-		const ariaLabel = disabled ? text : undefined;
-		const tooltip = !disabled ? html`
-			<d2l-tooltip
-				class="vdiff-target"
-				for="${id}"
-				for-type="label"
-				position="bottom">${text}</d2l-tooltip>` : nothing;
 		return html`
 			<button
 				aria-describedby="${ifDefined(descriptionId)}"
-				aria-label="${ifDefined(ariaLabel)}"
+				aria-disabled="${ifDefined(disabled ? 'true' : undefined)}"
 				class="${className}"
 				@click="${this.#handleButtonClick}"
-				?disabled="${disabled}"
 				id="${id}"
 				type="button">
 				<d2l-icon icon="${icon}"></d2l-icon>
 			</button>
-			${tooltip}
+			<d2l-tooltip
+				class="vdiff-target"
+				for="${id}"
+				for-type="label"
+				position="bottom">${text}</d2l-tooltip>
 		`;
 	}
 }

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.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",