@brightspace-ui/core 3.145.1 → 3.146.0

package/components/breadcrumbs/breadcrumbs.js

@@ -1,8 +1,12 @@
 import './breadcrumb.js';
 import { css, html, LitElement } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 /**
  * Help users understand where they are within the application, and provide useful clues about how the space is organized. They also provide a convenient navigation mechanism.
  * @slot - Breadcrumb items
@@ -21,12 +25,15 @@ class Breadcrumbs extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	static get styles() {
 		return css`
 			:host {
+				${overflowClipEnabled ? css`clip-path: rect(-1em 100% calc(100% + 1em) -1em);` : css``}
 				display: block;
 				font-size: 0.7rem;
 				line-height: 1.05rem;
-				overflow: hidden;
 				position: relative;
-				white-space: nowrap;
+				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
+					overflow: hidden;
+					white-space: nowrap;
+				`}
 			}
 			:host([hidden]) {
 				display: none;

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

@@ -2,9 +2,13 @@ import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
+import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 /**
  * A component for a "summary item" child component that describes the content in a collapsible panel.
  */
@@ -38,10 +42,12 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 				line-height: 1.2rem;
 			}
 			p.truncate {
-				-webkit-box-orient: vertical;
-				display: -webkit-box;
-				overflow: hidden;
-				overflow-wrap: anywhere;
+				${overflowClipEnabled ? getOverflowDeclarations({ lines: 1 }) : css`
+					-webkit-box-orient: vertical;
+					display: -webkit-box;
+					overflow: hidden;
+					overflow-wrap: anywhere;
+				`}
 			}
 		`];
 	}

package/components/filter/filter.js

@@ -23,10 +23,12 @@ import '../tooltip/tooltip.js';
 
 import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles } from '../typography/styles.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
+import { getFlag } from '../../helpers/flags.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
@@ -38,6 +40,8 @@ const ESCAPE_KEY_CODE = 27;
 const FILTER_CONTENT_CLASS = 'd2l-filter-dropdown-content';
 const SET_DIMENSION_ID_PREFIX = 'list-';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 let hasDisplayedKeyboardTooltip = false;
 
 export function resetHasDisplayedKeyboardTooltip() {
@@ -143,26 +147,24 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				flex-grow: 1;
 				padding-right: calc(2rem + 2px);
 				text-align: center;
-				text-overflow: ellipsis;
-				white-space: nowrap;
+				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				`}
 			}
 			:host([dir="rtl"]) .d2l-filter-dimension-header-text {
 				padding-left: calc(2rem + 2px);
 				padding-right: 0;
 			}
 
-			.d2l-filter-dimension-header-text,
-			.d2l-filter-dimension-set-value-text {
-				overflow: hidden;
-			}
-
 			.d2l-filter-dimension-set-value {
 				align-items: center;
 				color: var(--d2l-color-ferrite);
 				display: flex;
 				gap: 0.45rem;
 				line-height: unset;
-				overflow: hidden;
+				${overflowClipEnabled ? css`` : css`overflow: hidden;`}
 			}
 			.d2l-filter-dimension-set-value d2l-icon {
 				flex-shrink: 0;
@@ -176,11 +178,14 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			}
 
 			.d2l-filter-dimension-set-value-text {
-				-webkit-box-orient: vertical;
-				display: -webkit-box;
 				hyphens: auto;
-				-webkit-line-clamp: 2;
-				overflow-wrap: anywhere;
+				${overflowClipEnabled ? getOverflowDeclarations({ lines: 2 }) : css`
+					-webkit-box-orient: vertical;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					overflow: hidden;
+					overflow-wrap: anywhere;
+				`}
 			}
 
 			d2l-list-item[selection-disabled] .d2l-filter-dimension-set-value,
@@ -637,8 +642,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 						${item.additionalContent ? html`<d2l-icon icon="${item.selected ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small'}" aria-hidden="true"></d2l-icon>` : nothing}
 					</div>
 					${item.additionalContent ? html`
-						<d2l-expand-collapse-content 
-							?expanded="${item.selected}" 
+						<d2l-expand-collapse-content
+							?expanded="${item.selected}"
 							@d2l-expand-collapse-content-collapse="${this._handleExpandCollapse}"
 							@d2l-expand-collapse-content-expand="${this._handleExpandCollapse}">
 							${item.additionalContent()}

package/components/link/link.js

@@ -3,12 +3,16 @@ import '../icons/icon.js';
 import { css, html, LitElement, nothing } from 'lit';
 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';
 import { styleMap } from 'lit/directives/style-map.js';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 export const linkStyles = css`
 	.d2l-link, .d2l-link:visited, .d2l-link:active, .d2l-link:link {
 		--d2l-focus-ring-offset: 1px;
@@ -109,10 +113,12 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 					display: inherit;
 				}
 				a.truncate {
-					-webkit-box-orient: vertical;
-					display: -webkit-box;
-					overflow: hidden;
-					overflow-wrap: anywhere;
+					${overflowClipEnabled ? getOverflowDeclarations({ lines: 1 }) : css`
+						-webkit-box-orient: vertical;
+						display: -webkit-box;
+						overflow: hidden;
+						overflow-wrap: anywhere;
+					`}
 				}
 				d2l-icon {
 					color: var(--d2l-color-celestine);

package/components/list/list-item-content.js

@@ -1,6 +1,9 @@
 import '../colors/colors.js';
 import { bodyCompactStyles, bodySmallStyles } from '../typography/styles.js';
 import { css, html, LitElement } from 'lit';
+import { getFlag } from '../../helpers/flags.js';
+
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
 
 /**
  * A component for consistent layout of primary and secondary text in a list item.
@@ -33,14 +36,18 @@ class ListItemContent extends LitElement {
 
 			.d2l-list-item-content-text-secondary {
 				color: var(--d2l-list-item-content-text-secondary-color, var(--d2l-color-tungsten));
-				margin: 0;
-				overflow: hidden;
+				${overflowClipEnabled ? css`` : css`
+					margin: 0;
+					overflow: hidden;
+				`}
 			}
 
 			.d2l-list-item-content-text-supporting-info {
 				color: var(--d2l-color-ferrite);
-				margin: 0;
-				overflow: hidden;
+				${overflowClipEnabled ? css`` : css`
+					margin: 0;
+					overflow: hidden;
+				`}
 			}
 
 			.d2l-list-item-content-text-secondary ::slotted(*),

package/components/more-less/more-less.js

@@ -3,14 +3,17 @@ import { css, html, LitElement } from 'lit';
 import { getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { overflowHiddenDeclarations } from '../../helpers/overflow.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 const transitionDur = matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 400;
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
 /**
  * A component used to minimize the display of long content, while providing a way to reveal the full content.
@@ -51,11 +54,18 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 	static get styles() {
 		return css`
 			:host {
-				display: block;
+				${overflowClipEnabled ? css`display: flow-root;` : css`display: block;`}
 			}
 
 			.d2l-more-less-content {
-				overflow: hidden;
+				${overflowClipEnabled ? css`
+					display: flow-root;
+					margin: -1em -1em 0;
+					padding: 1em 1em 0;
+					${overflowHiddenDeclarations}
+				` : css`
+					overflow: hidden;
+				`}
 			}
 			.d2l-more-less-transition {
 				transition: max-height ${transitionDur}ms cubic-bezier(0, 0.7, 0.5, 1);
@@ -228,18 +238,27 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 		const target = e.composedPath()[0] || e.target;
 
-		if (isSafari) {
-			target.scrollIntoViewIfNeeded?.();
-			setTimeout(() => this.__content.scrollTo({ top: 0, behavior: 'instant' }), 1);
-		}
+		if (overflowClipEnabled) {
+			const em = parseInt(getComputedStyle(this.__content).getPropertyValue('font-size'));
+			const { y: contentY, height: contentHeight } = this.__content.getBoundingClientRect();
+			const { y: targetY, height: targetHeight } = target.getBoundingClientRect();
 
-		if (this.__content.scrollTop) {
-			this.__content.scrollTo({ top: 0, behavior: 'instant' });
-			this.__expand();
-			this.__autoExpanded = true;
-			await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
-			if (target.getRootNode().activeElement === target) {
-				target.scrollIntoView({ block: 'center', inline: 'center', behavior: 'instant' });
+			if (targetY + targetHeight > contentY + contentHeight - em) {
+				this.__expand();
+				this.__autoExpanded = true;
+				await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
+			}
+		} else {
+			if (isSafari) {
+				target.scrollIntoViewIfNeeded?.();
+				setTimeout(() => this.__content.scrollTo({ top: 0, behavior: 'instant' }), 1);
+			}
+
+			if (this.__content.scrollTop) {
+				this.__content.scrollTo({ top: 0, behavior: 'instant' });
+				this.__expand();
+				this.__autoExpanded = true;
+				await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
 			}
 		}
 	}

package/components/tabs/README.md

@@ -155,7 +155,7 @@ Promise.resolve(tabs.hideTab((tab))).then(() => {
 
 The `TabMixin` can be used to create custom tabs. It is IMPORTANT to call the `dispatchContentChangeEvent` function in `TabMixin` when content changes in the consumer in order to properly trigger calculations. Ensure that there is only one element in any custom tab to focus on, else the focus and keyboard navigation behaviors become confusing for users. Note that the parent `d2l-tabs` element handles `tabindex` focus management, and so consumers should not be rendering focusable elements within custom tabs.
 
-Before creating a custom tab, ensure that the case is not covered by using a standard `d2l-tab` with content in the `before` and/or `after` slot(s). 
+Before creating a custom tab, ensure that the case is not covered by using a standard `d2l-tab` with content in the `before` and/or `after` slot(s).
 
 <!-- docs: demo code sandboxTitle:'TabMixin' display:block-->
 ```html
@@ -170,7 +170,8 @@ Before creating a custom tab, ensure that the case is not covered by using a sta
       const styles = [ css`
         .d2l-tab-custom-content {
           margin: 0.5rem;
-          overflow: hidden;
+          overflow: clip;
+          overflow-clip-margin: 1em;
           padding: 0.1rem;
           white-space: nowrap;
         }
@@ -269,4 +270,4 @@ The `tabs` components were built following [W3C best practices for Tabs](https:/
 - Following recommended keyboard control patterns (with the exception of the "Optional" Home, End, and Delete key patterns)
 - Using the roles of `tablist` and `tab` appropriately in order to facilitate screen reader information (e.g., "tab, 2 of 7") and adding an `aria-label` to the `tablist`
 - Using `aria-selected` to indicate `tab` selection state
-- Using `aria-labelledby` and `aria-controls` in order to match the `tab` with the `tabpanel` for screen reader users
+- Using `aria-labelledby` and `aria-controls` in order to match the `tab` with the `tabpanel` for screen reader users

package/components/tabs/demo/tab-custom.js

@@ -9,7 +9,8 @@ class TabCustom extends TabMixin(LitElement) {
 			.d2l-tab-custom-content {
 				--d2l-focus-ring-offset: 0;
 				margin: 0.5rem;
-				overflow: hidden;
+				overflow: clip;
+				overflow-clip-margin: 1em;
 				padding: 0.1rem;
 				white-space: nowrap;
 			}

package/components/tabs/tab-internal.js

@@ -1,9 +1,13 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getFocusRingStyles } from '../../helpers/focus.js';
+import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 const keyCodes = {
 	ENTER: 13,
 	SPACE: 32
@@ -34,10 +38,12 @@ class Tab extends SkeletonMixin(LitElement) {
 			.d2l-tab-text {
 				--d2l-focus-ring-offset: 0;
 				margin: 0.5rem;
-				overflow: hidden;
 				padding: 0.1rem;
-				text-overflow: ellipsis;
-				white-space: nowrap;
+				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				`}
 			}
 			:host([skeleton]) .d2l-tab-text.d2l-skeletize::before {
 				bottom: 0.15rem;

package/components/tabs/tab.js

@@ -1,8 +1,12 @@
 import { css, html, LitElement, unsafeCSS } from 'lit';
 import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
+import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 import { TabMixin } from './tab-mixin.js';
 
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
+
 const focusRingStyles = getFocusRingStyles(
 	pseudoClass => `:host(:${pseudoClass}) .d2l-tab-text-inner-content`,
 	{ extraStyles: css`border-radius: 0.3rem; color: var(--d2l-color-celestine);` }
@@ -51,9 +55,11 @@ class Tab extends TabMixin(LitElement) {
 				color: var(--d2l-color-celestine);
 			}
 			span {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
+				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				`}
 			}
 			.d2l-tab-text-skeletize-override {
 				min-width: 50px;

package/components/tabs/tabs.js

@@ -8,6 +8,8 @@ import { getFocusPseudoClass, getFocusRingStyles } from '../../helpers/focus.js'
 import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getFlag } from '../../helpers/flags.js';
+import { getOverflowDeclarations } from '../../helpers/overflow.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -16,6 +18,7 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
 
 const scrollButtonWidth = 56;
 
@@ -87,13 +90,15 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 				box-sizing: border-box;
 				flex: auto;
 				margin-left: -3px;
-				overflow: hidden;
-				overflow-x: hidden;
 				padding-left: 3px;
 				position: relative;
 				-webkit-transition: max-width 200ms ease-in;
 				transition: max-width 200ms ease-in;
-				white-space: nowrap;
+				${overflowClipEnabled ? getOverflowDeclarations({ textOverflow: 'clip' }) : css`
+					overflow: hidden;
+					overflow-x: hidden;
+					white-space: nowrap;
+				`}
 			}
 			.d2l-tabs-container-ext {
 				flex: none;
@@ -110,6 +115,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 			.d2l-tabs-scroll-next-container {
 				background-color: var(--d2l-tabs-background-color);
 				box-shadow: 0 0 12px 18px var(--d2l-tabs-background-color);
+				${overflowClipEnabled ? css`clip-path: rect(0% 200% 100% -100%);` : css``}
 				display: none;
 				height: 100%;
 				position: absolute;

package/helpers/overflow.js

@@ -0,0 +1,34 @@
+import { set } from './template-tags.js';
+import { unsafeCSS } from 'lit';
+
+export const overflowHiddenDeclarations = getOverflowDeclarations({});
+export const overflowEllipsisDeclarations = getOverflowDeclarations({ textOverflow: 'ellipsis' });
+
+export function getOverflowDeclarations({ textOverflow = '', lines = 0, lit = true } = {}) {
+	if (!arguments.length) return overflowHiddenDeclarations;
+
+	const declarations = set`
+		min-width: 0; /* clamps width of flex items */
+		overflow-x: clip;
+		${lines
+			? 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`
+			overflow-clip-margin: 1em;
+			${textOverflow
+				? set`
+				overflow-y: visible;
+				text-overflow: ${textOverflow};
+				white-space: nowrap;`
+				:
+				'overflow-y: clip;'}
+		`}
+	`;
+	return lit ? unsafeCSS(declarations) : declarations;
+}

package/package.json

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