@brightspace-ui/core 3.94.3 → 3.95.1

package/components/button/button-icon.js

@@ -9,14 +9,13 @@ import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 
 /**
  * A button component that can be used just like the native button for instances where only an icon is displayed.
  * @slot icon - Optional slot for a custom icon
  */
-class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(LitElement))))) {
+class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -103,11 +102,7 @@ class ButtonIcon extends PropertyRequiredMixin(ThemeMixin(ButtonMixin(VisibleOnA
 				}
 
 				:host([h-align="text"]) button {
-					left: var(--d2l-button-icon-h-align);
-				}
-				:host([dir="rtl"][h-align="text"]) button {
-					left: 0;
-					right: var(--d2l-button-icon-h-align);
+					inset-inline-start: var(--d2l-button-icon-h-align);
 				}
 
 				/* Firefox includes a hidden border which messes up button dimensions */

package/components/overflow-group/overflow-group.js

@@ -13,7 +13,6 @@ import '../menu/menu-item-link.js';
 import { css, html, LitElement } from 'lit';
 import { OVERFLOW_CLASS, OVERFLOW_MINI_CLASS, OverflowGroupMixin } from './overflow-group-mixin.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const OPENER_STYLE = {
 	DEFAULT: 'default',
@@ -58,7 +57,7 @@ function createMenuItemSeparator() {
  * @attr {'default'|'icon'} [opener-type="default"] - Set the opener type to 'icon' for a `...` menu icon instead of `More actions` text
  * @attr {boolean} auto-show - Use predefined classes on slot elements to set min and max buttons to show
 */
-class OverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
+class OverflowGroup extends OverflowGroupMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -87,15 +86,7 @@ class OverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 			::slotted(span),
 			::slotted(d2l-dropdown:not(.d2l-overflow-dropdown)),
 			::slotted(d2l-dropdown-button) {
-				margin-right: 0.6rem;
-			}
-			:host([dir="rtl"]) ::slotted(d2l-button),
-			:host([dir="rtl"]) ::slotted(d2l-link),
-			:host([dir="rtl"]) ::slotted(span),
-			:host([dir="rtl"]) ::slotted(d2l-dropdown:not(.d2l-overflow-dropdown)),
-			:host([dir="rtl"]) ::slotted(d2l-dropdown-button) {
-				margin-left: 0.6rem;
-				margin-right: 0;
+				margin-inline-end: 0.6rem;
 			}
 			::slotted(d2l-button-subtle),
 			::slotted(d2l-button-icon),
@@ -104,17 +95,7 @@ class OverflowGroup extends OverflowGroupMixin(RtlMixin(LitElement)) {
 			::slotted(d2l-dropdown-context-menu),
 			::slotted(d2l-selection-action),
 			::slotted(d2l-selection-action-dropdown) {
-				margin-right: 0.2rem;
-			}
-			:host([dir="rtl"]) ::slotted(d2l-button-subtle),
-			:host([dir="rtl"]) ::slotted(d2l-button-icon),
-			:host([dir="rtl"]) ::slotted(d2l-dropdown-button-subtle),
-			:host([dir="rtl"]) ::slotted(d2l-dropdown-more),
-			:host([dir="rtl"]) ::slotted(d2l-dropdown-context-menu),
-			:host([dir="rtl"]) ::slotted(d2l-selection-action),
-			:host([dir="rtl"]) ::slotted(d2l-selection-action-dropdown) {
-				margin-left: 0.2rem;
-				margin-right: 0;
+				margin-inline-end: 0.2rem;
 			}
 		`];
 	}

package/components/selection/selection-controls.js

@@ -8,7 +8,6 @@ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { PageableSubscriberMixin } from '../paging/pageable-subscriber-mixin.js';
-import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SelectionObserverMixin } from './selection-observer-mixin.js';
 
 /**
@@ -16,7 +15,7 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
  * @slot - Responsive container using `d2l-overflow-group` for `d2l-selection-action` elements
  * @fires d2l-selection-observer-subscribe - Internal event
  */
-export class SelectionControls extends PageableSubscriberMixin(SelectionObserverMixin(RtlMixin(LocalizeCoreElement(LitElement)))) {
+export class SelectionControls extends PageableSubscriberMixin(SelectionObserverMixin(LocalizeCoreElement(LitElement))) {
 
 	static get properties() {
 		return {
@@ -95,27 +94,16 @@ export class SelectionControls extends PageableSubscriberMixin(SelectionObserver
 				flex: none;
 			}
 			d2l-selection-select-all + d2l-selection-summary {
-				margin-left: 0.9rem;
-			}
-			:host([dir="rtl"]) d2l-selection-select-all + d2l-selection-summary {
-				margin-left: 0;
-				margin-right: 0.9rem;
+				margin-inline-start: 0.9rem;
 			}
 			d2l-selection-select-all-pages {
 				flex: none;
-				margin-left: 0.45rem;
-			}
-			:host([dir="rtl"]) d2l-selection-select-all-pages {
-				margin-left: 0;
-				margin-right: 0.45rem;
+				margin-inline-start: 0.45rem;
 			}
 			.d2l-selection-controls-actions {
 				--d2l-overflow-group-justify-content: flex-end;
 				flex: auto;
-				text-align: right;
-			}
-			:host([dir="rtl"]) .d2l-selection-controls-actions {
-				text-align: left;
+				text-align: end;
 			}
 			.d2l-sticky-edge {
 				left: 0;

package/components/tabs/demo/tabs.html

@@ -193,6 +193,9 @@
 			document.addEventListener('d2l-tab-panel-text-changed', (e) => {
 				console.log('tab panel text changed', e);
 			});
+			document.addEventListener('d2l-tab-content-change', (e) => {
+				console.log('tab content changed', e);
+			});
 		</script>
 
 	</body>

package/components/tabs/tab-mixin.js

@@ -112,6 +112,16 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 		}
 	}
 
+	/**
+	 * IMPORTANT: Call this in any consumer when anything changes that could impact the tab's size
+	 * Notifies the parent d2l-tabs component of a change so that it can update virtual scrolling calculations
+	 * */
+	dispatchContentChangeEvent() {
+		this.dispatchEvent(new CustomEvent(
+			'd2l-tab-content-change', { bubbles: true, composed: true }
+		));
+	}
+
 	renderContent() {
 		console.warn('Subclasses to implement/override renderContent');
 		return html`<div>Default Tab Content</div>`;

package/components/tabs/tab.js

@@ -3,6 +3,9 @@ import { classMap } from 'lit/directives/class-map.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { TabMixin } from './tab-mixin.js';
 
+/**
+ * @fires d2l-tab-content-change - Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs.
+ */
 class Tab extends TabMixin(LitElement) {
 
 	static get properties() {
@@ -38,6 +41,14 @@ class Tab extends TabMixin(LitElement) {
 		return styles;
 	}
 
+	updated(changedProperties) {
+		super.updated(changedProperties);
+
+		if (changedProperties.has('text')) {
+			this.dispatchContentChangeEvent();
+		}
+	}
+
 	renderContent() {
 		const contentClasses = {
 			'd2l-tab-text': true,

package/components/tabs/tabs.js

@@ -343,6 +343,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 					</div>
 					${this.arrowKeysContainer(html`
 						<div class="d2l-tabs-container-list"
+							@d2l-tab-content-change="${this._handleTabContentChange}"
 							@d2l-tab-selected="${this._handleTabSelected}"
 							@focusout="${this._handleFocusOut}"
 							aria-label="${ifDefined(this.text)}"
@@ -718,6 +719,11 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 
 	}
 
+	async _handleTabContentChange() {
+		this._updateMeasures();
+		await this._updateScrollVisibility(this._getMeasures());
+	}
+
 	async _handleTabSelected(e) {
 		if (this._defaultSlotBehavior) {
 			this._handleTabSelectedDefaultSlotBehavior(e);

package/custom-elements.json

@@ -12892,6 +12892,10 @@
         }
       ],
       "events": [
+        {
+          "name": "d2l-tab-content-change",
+          "description": "Dispatched when the text attribute is changed. Triggers virtual scrolling calculations in parent d2l-tabs."
+        },
         {
           "name": "d2l-tab-selected"
         },

package/package.json

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