@brightspace-ui/core 3.191.0 → 3.192.0

package/components/breadcrumbs/breadcrumbs.js

@@ -1,11 +1,8 @@
 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';
 
-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
@@ -25,15 +22,12 @@ class Breadcrumbs extends LocalizeCoreElement(LitElement) {
 	static get styles() {
 		return css`
 			:host {
-				${overflowClipEnabled ? css`clip-path: rect(-1em 100% calc(100% + 1em) -1em);` : css``}
+				clip-path: rect(-1em 100% calc(100% + 1em) -1em);
 				display: block;
 				font-size: 0.7rem;
 				line-height: 1.05rem;
 				position: relative;
-				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
-					overflow: hidden;
-					white-space: nowrap;
-				`}
+				${overflowEllipsisDeclarations}
 			}
 			:host([hidden]) {
 				display: none;

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

@@ -2,13 +2,10 @@ 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.
  */
@@ -42,12 +39,7 @@ class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 				line-height: 1.2rem;
 			}
 			p.truncate {
-				${overflowClipEnabled ? getOverflowDeclarations({ lines: 1 }) : css`
-					-webkit-box-orient: vertical;
-					display: -webkit-box;
-					overflow: hidden;
-					overflow-wrap: anywhere;
-				`}
+				${getOverflowDeclarations({ lines: 1 })}
 			}
 		`];
 	}

package/components/filter/filter.js

@@ -28,7 +28,6 @@ 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';
@@ -39,8 +38,6 @@ 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() {
@@ -141,11 +138,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 				flex-grow: 1;
 				padding-inline-end: calc(2rem + 2px);
 				text-align: center;
-				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				`}
+				${overflowEllipsisDeclarations}
 			}
 
 			.d2l-filter-dimension-set-value {
@@ -154,7 +147,6 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 				display: flex;
 				gap: 0.45rem;
 				line-height: unset;
-				${overflowClipEnabled ? css`` : css`overflow: hidden;`}
 			}
 			.d2l-filter-dimension-set-value d2l-icon {
 				flex-shrink: 0;
@@ -169,13 +161,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(LitElement)) {
 
 			.d2l-filter-dimension-set-value-text {
 				hyphens: auto;
-				${overflowClipEnabled ? getOverflowDeclarations({ lines: 2 }) : css`
-					-webkit-box-orient: vertical;
-					display: -webkit-box;
-					-webkit-line-clamp: 2;
-					overflow: hidden;
-					overflow-wrap: anywhere;
-				`}
+				${getOverflowDeclarations({ lines: 2 })}
 			}
 
 			d2l-list-item[selection-disabled] .d2l-filter-dimension-set-value,

package/components/link/link.js

@@ -6,15 +6,12 @@ import { getOverflowDeclarations, overflowEllipsisDeclarations } from '../../hel
 import { _generateLinkStyles } from './link-styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.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 { 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 = _generateLinkStyles('.d2l-link', true);
 
 /**
@@ -98,12 +95,7 @@ class Link extends LocalizeCoreElement(FocusMixin(LitElement)) {
 					display: flex;
 				}
 				a span.truncate {
-					${overflowClipEnabled ? getOverflowDeclarations({ lines: 1 }) : css`
-						-webkit-box-orient: vertical;
-						display: -webkit-box;
-						overflow: hidden;
-						overflow-wrap: anywhere;
-					`}
+					${getOverflowDeclarations({ lines: 1 })}
 				}
 				a span.truncate-one {
 					${overflowEllipsisDeclarations}

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

@@ -1,9 +1,6 @@
 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.
@@ -36,18 +33,10 @@ class ListItemContent extends LitElement {
 
 			.d2l-list-item-content-text-secondary {
 				color: var(--d2l-list-item-content-text-secondary-color, var(--d2l-color-tungsten));
-				${overflowClipEnabled ? css`` : css`
-					margin: 0;
-					overflow: hidden;
-				`}
 			}
 
 			.d2l-list-item-content-text-supporting-info {
 				color: var(--d2l-color-ferrite);
-				${overflowClipEnabled ? css`` : css`
-					margin: 0;
-					overflow: hidden;
-				`}
 			}
 
 			.d2l-list-item-content-text-secondary ::slotted(*),

package/components/menu/menu-item-return.js

@@ -1,13 +1,10 @@
 import '../icons/icon.js';
 import { css, html, LitElement } from 'lit';
-import { getFlag } from '../../helpers/flags.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { MenuItemMixin } from './menu-item-mixin.js';
 import { menuItemStyles } from './menu-item-styles.js';
 import { overflowEllipsisDeclarations } from '../../helpers/overflow.js';
 
-const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
-
 class MenuItemReturn extends LocalizeCoreElement(MenuItemMixin(LitElement)) {
 
 	static get styles() {
@@ -21,13 +18,7 @@ class MenuItemReturn extends LocalizeCoreElement(MenuItemMixin(LitElement)) {
 				span {
 					flex: auto;
 					line-height: 1rem;
-					${overflowClipEnabled ? overflowEllipsisDeclarations : css`
-						overflow-x: hidden;
-						overflow-y: hidden;
-						text-decoration: none;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					`}
+					${overflowEllipsisDeclarations}
 				}
 
 				d2l-icon {

package/components/menu/menu-item-styles.js

@@ -1,11 +1,8 @@
 import '../colors/colors.js';
 import { css, unsafeCSS } from 'lit';
-import { getFlag } from '../../helpers/flags.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getOverflowDeclarations } from '../../helpers/overflow.js';
 
-const overflowClipEnabled = getFlag('GAUD-7887-core-components-overflow-clipping', true);
-
 export const menuItemStyles = css`
 	:host {
 		--d2l-menu-item-lines: 2;
@@ -57,15 +54,7 @@ export const menuItemStyles = css`
 	.d2l-menu-item-text {
 		flex: auto;
 		line-height: 1rem;
-		${overflowClipEnabled ? getOverflowDeclarations({ lines: 'var(--d2l-menu-item-lines, 2)' }) : css`
-			-webkit-box-orient: vertical;
-			display: -webkit-box;
-			-webkit-line-clamp: var(--d2l-menu-item-lines, 2);
-			overflow-wrap: anywhere;
-			overflow-x: hidden;
-			overflow-y: hidden;
-			white-space: normal;
-		`}
+		${getOverflowDeclarations({ lines: 'var(--d2l-menu-item-lines, 2)' })}
 	}
 
 	.d2l-menu-item-supporting {

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

@@ -12,8 +12,6 @@ import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 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.
@@ -54,18 +52,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 	static get styles() {
 		return css`
 			:host {
-				${overflowClipEnabled ? css`display: flow-root;` : css`display: block;`}
+				display: flow-root;
 			}
 
 			.d2l-more-less-content {
-				${overflowClipEnabled ? css`
-					display: flow-root;
-					margin: -1em -1em 0;
-					padding: 1em 1em 0;
-					${overflowHiddenDeclarations}
-				` : css`
-					overflow: hidden;
-				`}
+				display: flow-root;
+				margin: -1em -1em 0;
+				padding: 1em 1em 0;
+				${overflowHiddenDeclarations}
 			}
 			.d2l-more-less-transition {
 				transition: max-height ${transitionDur}ms cubic-bezier(0, 0.7, 0.5, 1);
@@ -244,28 +238,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 		const target = e.composedPath()[0] || e.target;
 
-		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();
+		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 (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)));
-			}
+		if (targetY + targetHeight > contentY + contentHeight - em) {
+			this.__expand();
+			this.__autoExpanded = true;
+			await (transitionDur && new Promise(r => setTimeout(r, transitionDur)));
 		}
 	}
 

package/components/tabs/tab-internal.js

@@ -1,13 +1,10 @@
 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
@@ -39,11 +36,7 @@ class Tab extends SkeletonMixin(LitElement) {
 				--d2l-focus-ring-offset: 0;
 				margin: 0.5rem;
 				padding: 0.1rem;
-				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				`}
+				${overflowEllipsisDeclarations}
 			}
 			:host([skeleton]) .d2l-tab-text.d2l-skeletize::before {
 				bottom: 0.15rem;

package/components/tabs/tab.js

@@ -1,12 +1,9 @@
 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);` }
@@ -56,11 +53,7 @@ class Tab extends TabMixin(LitElement) {
 				color: var(--d2l-color-celestine);
 			}
 			span {
-				${overflowClipEnabled ? overflowEllipsisDeclarations : css`
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				`}
+				${overflowEllipsisDeclarations}
 			}
 			.d2l-tab-text-skeletize-override {
 				min-width: 50px;

package/components/tabs/tabs.js

@@ -8,7 +8,6 @@ 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';
@@ -18,7 +17,6 @@ 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;
 
@@ -94,11 +92,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 				position: relative;
 				-webkit-transition: max-width 200ms ease-in;
 				transition: max-width 200ms ease-in;
-				${overflowClipEnabled ? getOverflowDeclarations({ textOverflow: 'clip' }) : css`
-					overflow: hidden;
-					overflow-x: hidden;
-					white-space: nowrap;
-				`}
+				${getOverflowDeclarations({ textOverflow: 'clip' })}
 			}
 			.d2l-tabs-container-ext {
 				flex: none;
@@ -115,7 +109,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``}
+				clip-path: rect(0% 200% 100% -100%);
 				display: none;
 				height: 100%;
 				position: absolute;

package/components/typography/styles.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import { css, unsafeCSS } from 'lit';
 import { _isValidCssSelector } from '../../helpers/internal/css.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { svgToCSS } from '../../helpers/svg-to-css.js';
 
 /**
@@ -160,12 +161,20 @@ export const _generateBodySmallStyles = (selector, includeSkeleton = true) => {
 
 export const bodySmallStyles = _generateBodySmallStyles('.d2l-body-small', true);
 
+const getHeadingFocusStyles = (selector) => {
+	return getFocusRingStyles(
+		selector,
+		{ extraStyles: css`border-radius: 0.3rem;` }
+	);
+};
+
 /**
  * A private helper method that should not be used by general consumers
  */
 export const _generateHeading1Styles = (selector) => {
 	if (!_isValidCssSelector(selector)) return;
 
+	const focusStyles = getHeadingFocusStyles(selector);
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -174,6 +183,7 @@ export const _generateHeading1Styles = (selector) => {
 			line-height: 2.4rem;
 			margin: 1.5rem 0 1.5rem 0;
 		}
+		${focusStyles}
 		@media (max-width: 615px) {
 			${selector} {
 				font-size: 1.5rem;
@@ -210,6 +220,7 @@ export const heading1Styles = css`
 export const _generateHeading2Styles = (selector) => {
 	if (!_isValidCssSelector(selector)) return;
 
+	const focusStyles = getHeadingFocusStyles(selector);
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -218,6 +229,7 @@ export const _generateHeading2Styles = (selector) => {
 			line-height: 1.8rem;
 			margin: 1.5rem 0 1.5rem 0;
 		}
+		${focusStyles}
 		@media (max-width: 615px) {
 			${selector} {
 				font-size: 1rem;
@@ -255,6 +267,7 @@ export const heading2Styles = css`
 export const _generateHeading3Styles = (selector) => {
 	if (!_isValidCssSelector(selector)) return;
 
+	const focusStyles = getHeadingFocusStyles(selector);
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -263,6 +276,7 @@ export const _generateHeading3Styles = (selector) => {
 			line-height: 1.5rem;
 			margin: 1.5rem 0 1.5rem 0;
 		}
+		${focusStyles}
 		@media (max-width: 615px) {
 			${selector} {
 				font-size: 0.8rem;
@@ -299,6 +313,7 @@ export const heading3Styles = css`
 export const _generateHeading4Styles = (selector) => {
 	if (!_isValidCssSelector(selector)) return;
 
+	const focusStyles = getHeadingFocusStyles(selector);
 	selector = unsafeCSS(selector);
 	return css`
 		${selector} {
@@ -307,6 +322,7 @@ export const _generateHeading4Styles = (selector) => {
 			line-height: 1.2rem;
 			margin: 1.5rem 0 1.5rem 0;
 		}
+		${focusStyles}
 	`;
 };
 export const heading4Styles = css`

package/package.json

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