@brightspace-ui/core 3.153.0 → 3.153.2

package/components/count-badge/count-badge-icon.js

@@ -26,8 +26,6 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 		return [super.styles, css`
 		${getFocusRingStyles(pseudoClass => `:host([focus-ring]) d2l-icon, d2l-icon:${pseudoClass}`)}
 		:host {
-			/* for long numbers, center the number on the icon */
-			--d2l-count-badge-icon-padding: calc(-50% + (var(--d2l-count-badge-icon-height) / 2) + 2px);
 			display: inline-block;
 			/* symmetrical padding to prevent overflows for most numbers */
 			padding-left: 0.5rem;
@@ -45,16 +43,6 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 			padding-top: var(--d2l-count-badge-icon-padding-top);
 		}
 
-		:host([icon*="tier1:"]) {
-			--d2l-count-badge-icon-height: 18px;
-		}
-		:host([icon*="tier2:"]) {
-			--d2l-count-badge-icon-height: 24px;
-		}
-		:host([icon*="tier3:"]) {
-			--d2l-count-badge-icon-height: 30px;
-		}
-
 		d2l-tooltip[_open-dir="top"] {
 			margin-top: calc(0px - var(--d2l-count-badge-icon-padding-top));
 		}
@@ -87,17 +75,16 @@ class CountBadgeIcon extends FocusMixin(CountBadgeMixin(LitElement)) {
 		const centerNumber = this.getNumberString().length >= 4;
 
 		if (centerNumber) {
-			const xPadding = 'var(--d2l-count-badge-icon-padding)';
+			// left 50% + translateX(-50%) will center for both LTR and RTL
 			numberStyles = {
 				... numberStyles,
-				transform: this.dir === 'rtl'
-					? `translateY(-50%) translateX(calc(0px - ${xPadding}))`
-					: `translateY(-50%) translateX(${xPadding})`
+				left: '50%',
+				transform: 'translate(-50%, -50%)'
 			};
 		} else {
 			numberStyles = {
 				... numberStyles,
-				[this.dir === 'rtl' ? 'left' : 'right'] : '-0.1rem',
+				insetInlineEnd: '-0.1rem',
 				transform: 'translateY(-50%)'
 			};
 		}

package/components/count-badge/count-badge-mixin.js

@@ -5,13 +5,12 @@ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const maxBadgeDigits = 5;
 
-export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(SkeletonMixin(RtlMixin(superclass))) {
+export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(SkeletonMixin(superclass)) {
 
 	static get properties() {
 		return {

package/components/paging/pager-load-more.js

@@ -10,7 +10,6 @@ import { labelStyles } from '../typography/styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { PageableSubscriberMixin } from './pageable-subscriber-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const nativeFocus = document.createElement('div').focus;
 
@@ -19,7 +18,7 @@ const nativeFocus = document.createElement('div').focus;
  * @fires d2l-pager-load-more - Dispatched when the user clicks the load-more button. Consumers must call the provided "complete" method once items have been loaded.
  * @fires d2l-pager-load-more-loaded - Dispatched after more items have been loaded.
  */
-class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))) {
+class LoadMore extends PageableSubscriberMixin(FocusMixin(LocalizeCoreElement(LitElement))) {
 
 	static get properties() {
 		return {

package/components/table/table-wrapper.js

@@ -3,11 +3,14 @@ import '../scroll-wrapper/scroll-wrapper.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { cssSizes } from '../inputs/input-checkbox.js';
 import { getComposedParent } from '../../helpers/dom.js';
+import { getFlag } from '../../helpers/flags.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
 
+const colSyncFix = getFlag('GAUD-8228-8186-improved-table-col-sync', true);
+
 export const tableStyles = css`
 	.d2l-table {
 		border-collapse: separate; /* needed to override reset stylesheets */
@@ -248,8 +251,22 @@ export const tableStyles = css`
 	}
 
 	/* sticky + scroll-wrapper */
-	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table {
-		display: block;
+	${colSyncFix ? css`
+		d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper]:not([_no-scroll-width]) .d2l-table {
+			display: flex;
+			flex-direction: column;
+		}
+
+		d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper][_no-scroll-width] .d2l-table > thead {
+			display: table-header-group;
+		}
+
+		d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper][_no-scroll-width] .d2l-table > tbody {
+			display: table-row-group;
+		}` : css`
+		d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table {
+			display: block;
+		}`
 	}
 
 	d2l-table-wrapper[sticky-headers][sticky-headers-scroll-wrapper] .d2l-table > thead {
@@ -318,7 +335,12 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 				reflect: true,
 				type: String
 			},
-			_controlsScrolled: { state: true }
+			_controlsScrolled: { state: true },
+			_noScrollWidth: {
+				attribute: '_no-scroll-width',
+				reflect: true,
+				type: Boolean,
+			},
 		};
 	}
 
@@ -383,6 +405,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 		this._controlsMutationObserver = null;
 		this._controlsScrolled = false;
 		this._controlsScrolledMutationObserver = null;
+		this._noScrollWidth = colSyncFix;
 		this._table = null;
 		this._tableIntersectionObserver = null;
 		this._tableMutationObserver = null;
@@ -582,13 +605,16 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 			this._tableIntersectionObserver.observe(this._table);
 		}
 
-		if (!this._tableResizeObserver) this._tableResizeObserver = new ResizeObserver(() => this._syncColumnWidths());
+		if (!this._tableResizeObserver) this._tableResizeObserver = new ResizeObserver(entries => this._syncColumnWidths(entries));
 		this._tableResizeObserver.observe(this._table);
+		colSyncFix && this.querySelectorAll('tr:first-child *').forEach(el => this._tableResizeObserver.observe(el));
 
 		this._handleTableChange();
 	}
 
 	async _handleTableChange(mutationRecords) {
+		const updateList = [];
+
 		const updates = { count: true, classNames: true, sticky: true, syncWidths: true };
 		if (mutationRecords) {
 			for (const key in updates) updates[key] = false;
@@ -601,6 +627,8 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 				updates.sticky ||= target.matches(SELECTORS.headers);
 				const affectedNodes = [...removedNodes, ...addedNodes];
 				for (const node of affectedNodes) {
+					updateList.push(target, ...addedNodes);
+
 					if (!(node instanceof Element)) continue;
 					updates.classNames ||= node.matches('tr, td, th');
 					updates.syncWidths ||= node.matches('tr');
@@ -614,6 +642,7 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 
 		if (updates.count) this._updateItemShowingCount();
 		if (updates.classNames) this._applyClassNames();
+		colSyncFix && await Promise.all([...updateList, ...this.querySelectorAll('d2l-table-col-sort-button')].map(n => n.updateComplete));
 		if (updates.syncWidths) this._syncColumnWidths();
 		if (updates.sticky) this._updateStickyTops();
 	}
@@ -628,11 +657,14 @@ export class TableWrapper extends RtlMixin(PageableMixin(SelectionMixin(LitEleme
 	}
 
 	_syncColumnWidths() {
-		if (!this._table || !this.stickyHeaders || !this.stickyHeadersScrollWrapper) return;
-
 		const head = this._table.querySelector('thead');
 		const body = this._table.querySelector('tbody');
-		if (!head || !body) return;
+
+		if (colSyncFix) {
+			const maxScrollWidth = Math.max(head?.scrollWidth, body?.scrollWidth);
+			this._noScrollWidth = this.clientWidth === maxScrollWidth;
+		}
+		if (!head || !body || !this._table || !this.stickyHeaders || !this.stickyHeadersScrollWrapper || this._noScrollWidth) return;
 
 		const candidateRowHeadCells = [];
 

package/package.json

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