@brightspace-ui/core 3.221.2 → 3.223.0

package/components/alert/README.md

@@ -37,7 +37,7 @@ Alerts communicate critical information relating to the state of the system and
 	Inline Alerts can be placed anywhere in the page content
 </d2l-alert>
 <d2l-alert-toast id="alert-toast" type="success" open no-auto-close>
-	Toast Alerts appear at the botttom of the viewport
+	Toast Alerts appear at the bottom of the viewport
 </d2l-alert-toast>
 ```
 

package/components/backdrop/backdrop.js

@@ -5,6 +5,7 @@ import { getComposedActiveElement } from '../../helpers/focus.js';
 
 const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
 const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
+const BACKDROP_TABINDEX = 'data-d2l-backdrop-tabindex';
 const TRANSITION_DURATION = 200;
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -174,6 +175,11 @@ function hideAccessible(target) {
 			}
 			child.setAttribute('aria-hidden', 'true');
 
+			if (child.hasAttribute('tabindex')) {
+				child.setAttribute(BACKDROP_TABINDEX, child.getAttribute('tabindex'));
+			}
+			child.setAttribute('tabindex', '-1');
+
 			child.setAttribute(BACKDROP_HIDDEN, BACKDROP_HIDDEN);
 			hiddenElements.push(child);
 		}
@@ -201,6 +207,12 @@ function showAccessible(elems) {
 		} else {
 			elem.removeAttribute('aria-hidden');
 		}
+		if (elem.hasAttribute(BACKDROP_TABINDEX)) {
+			elem.setAttribute('tabindex', elem.getAttribute(BACKDROP_TABINDEX));
+			elem.removeAttribute(BACKDROP_TABINDEX);
+		} else {
+			elem.removeAttribute('tabindex');
+		}
 		elem.removeAttribute(BACKDROP_HIDDEN);
 	}
 }

package/components/dialog/README.md

@@ -32,15 +32,15 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
 * Label primary actions with clear and predictable language. Use verbs like, “Add” or “Save” that indicate the outcome of a dialog rather than, “OK” or “Close”
 * Keep dialog titles concise
 * Maintain a language relationship between the action that triggered the dialog, dialog title, and dialog primary button.
-* When it is necessary to stack multiple dialogs, ensure the stacked dialog is nested within the DOM of the dialog containing the opener
+* When it is necessary to nest multiple dialogs, ensure the nested dialog is within the DOM of the dialog containing the opener
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
 * Don’t use a dialog when you could reasonably use an alternative that preserves user context, like expanding options inline
 * Don’t use a dialog to show error, success, or warning messages. Use an inline or toast alert instead.
-* Avoid creating large, complex dialogs
-* Avoid opening a dialog from within other dialogs (stacking dialogs)
-* Avoid a title length that could easily wrap to two lines
+* Avoid opening a dialog from another dialog (nesting) since this can increase cognitive load and disorient users
+  * Exception: confirmation dialogs that protect users from losing unsaved work
+* Avoid titles that are long enough to wrap onto multiple lines
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 

package/components/scroll-wrapper/scroll-wrapper.js

@@ -57,6 +57,14 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 				attribute: 'hide-actions',
 				type: Boolean
 			},
+			/**
+			 * The area in pixels to offset scroll width calculations
+			 * @type {number}
+			 */
+			scrollAreaOffset: {
+				attribute: 'scroll-area-offset',
+				type: Number
+			},
 			_hScrollbar: {
 				attribute: 'h-scrollbar',
 				reflect: true,
@@ -156,6 +164,7 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 		super();
 		this.customScrollers = {};
 		this.hideActions = false;
+		this.scrollAreaOffset = 0;
 		this._allScrollers = [];
 		this._baseContainer = null;
 		this._container = null;
@@ -258,16 +267,19 @@ class ScrollWrapper extends LocalizeCoreElement(LitElement) {
 			});
 		}
 	}
+	_getScrollDistance() {
+		return Math.max((this._container.clientWidth - this.scrollAreaOffset) * SCROLL_AMOUNT, 1); // guard against offset being larger than content
+	}
 
 	_scrollLeft() {
 		if (!this._container) return;
-		const scrollDistance = this._container.clientWidth * SCROLL_AMOUNT * -1;
+		const scrollDistance = this._getScrollDistance() * -1;
 		this.scrollDistance(scrollDistance, true);
 	}
 
 	_scrollRight() {
 		if (!this._container) return;
-		const scrollDistance = this._container.clientWidth * SCROLL_AMOUNT;
+		const scrollDistance = this._getScrollDistance();
 		this.scrollDistance(scrollDistance, true);
 	}
 

package/components/table/table-wrapper.js

@@ -4,6 +4,8 @@ import '../backdrop/backdrop-loading.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 { ifDefined } from 'lit/directives/if-defined.js';
 import { isPopoverSupported } from '../popover/popover-mixin.js';
 import { PageableMixin } from '../paging/pageable-mixin.js';
 import { SelectionMixin } from '../selection/selection-mixin.js';
@@ -296,6 +298,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 				reflect: true,
 				type: Boolean
 			},
+			_stickyWidth: { state: true },
 			/**
 			 * Type of table style to apply. The "light" style has fewer borders and tighter padding.
 			 * @type {'default'|'light'}
@@ -376,6 +379,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		this.noColumnBorder = false;
 		this.stickyHeaders = false;
 		this.stickyHeadersScrollWrapper = false;
+		this._stickyWidth = 0;
 		this.type = 'default';
 
 		this._controls = null;
@@ -388,6 +392,8 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		this._tableMutationObserver = null;
 		this._tableScrollers = {};
 		this.loading = false;
+
+		this._excludeStickyColumnsFromScrollCalculations = getFlag('GAUD-9530-exclude-sticky-columns-from-scroll-calculations', false);
 	}
 
 	connectedCallback() {
@@ -424,7 +430,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		return html`
 			<slot name="controls" @slotchange="${this._handleControlsSlotChange}"></slot>
 			${this.stickyHeaders && this._controlsScrolled ? html`<div class="d2l-sticky-headers-backdrop"></div>` : nothing}
-			${useScrollWrapper ? html`<d2l-scroll-wrapper .customScrollers="${this._tableScrollers}">${slot}</d2l-scroll-wrapper>` : slot}
+			${useScrollWrapper ? html`<d2l-scroll-wrapper scroll-area-offset=${ifDefined(this._excludeStickyColumnsFromScrollCalculations ? this._stickyWidth : undefined)} .customScrollers="${this._tableScrollers}">${slot}</d2l-scroll-wrapper>` : slot}
 			${this._renderPagerContainer()}
 		`;
 	}
@@ -722,21 +728,25 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 
 		if (candidateRowHeadCells.length !== candidateRowBodyLength) return;
 
+		let stickyWidth = 0;
 		for (let i = 0; i < candidateRowHeadCells.length; i++) {
 			const headCell = candidateRowHeadCells[i];
 			const headStyle = getComputedStyle(headCell);
 
 			const bodyCell = candidateRowBody.cells[i];
 			const bodyStyle = getComputedStyle(bodyCell);
-
+			let cellWidth = headCell.clientWidth + parseFloat(headStyle.borderLeft) + parseFloat(headStyle.borderRight);
 			if (headCell.clientWidth > bodyCell.clientWidth) {
 				const headOverallWidth = parseFloat(headStyle.width) + parseFloat(headStyle.paddingLeft) + parseFloat(headStyle.paddingRight);
 				bodyCell.style.minWidth = `${headOverallWidth - parseFloat(bodyStyle.paddingLeft) - parseFloat(bodyStyle.paddingRight)}px`;
 			} else if (headCell.clientWidth < bodyCell.clientWidth) {
 				const bodyOverallWidth = parseFloat(bodyStyle.width) + parseFloat(bodyStyle.paddingLeft) + parseFloat(bodyStyle.paddingRight);
 				headCell.style.minWidth = `${bodyOverallWidth - parseFloat(headStyle.paddingLeft) - parseFloat(headStyle.paddingRight)}px`;
+				cellWidth = bodyCell.clientWidth + parseFloat(bodyStyle.borderLeft) + parseFloat(bodyStyle.borderRight);
 			}
+			if (headCell.hasAttribute('sticky')) stickyWidth += cellWidth;
 		}
+		if (this._excludeStickyColumnsFromScrollCalculations) this._stickyWidth = stickyWidth;
 	}
 
 	_updateStickyAncestor(node, popoverOpened) {

package/custom-elements.json

@@ -12523,6 +12523,12 @@
           "description": "Whether to hide left/right scroll buttons",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "scroll-area-offset",
+          "description": "The area in pixels to offset scroll width calculations",
+          "type": "number",
+          "default": "0"
         }
       ],
       "properties": [
@@ -12538,6 +12544,13 @@
           "description": "Whether to hide left/right scroll buttons",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "scrollAreaOffset",
+          "attribute": "scroll-area-offset",
+          "description": "The area in pixels to offset scroll width calculations",
+          "type": "number",
+          "default": "0"
         }
       ],
       "slots": [

package/package.json

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