@brightspace-ui/core 3.135.1 → 3.135.3

package/components/inputs/input-time.js

@@ -369,10 +369,10 @@ class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMi
 					min-width="195"
 					?opened="${opened}">
 					<d2l-menu
-						aria-labelledby="${this._dropdownId}-label"
 						class="d2l-input-time-menu"
 						@d2l-menu-item-change="${this._handleDropdownChange}"
 						id="${this._dropdownId}"
+						label="${this.label}"
 						role="listbox"
 						root-view>
 						${menuItems}

package/components/loading-spinner/README.md

@@ -26,6 +26,14 @@ A loading spinner indicates that something is happening and we don't know how lo
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
+### When should I use the Skeleton Loader pattern vs. a Loading Spinner?
+The skeleton loader pattern has a feeling of "an existing structure coming into focus", whereas the spinner has a feeling of progression. Because of this, we say that Skeleton Loaders are for loading page chrome, whereas Spinners are for loading data.
+* If the page is loading for the first time and different parts of the page are coming in asynchronously, use Skeleton Loader pattern.
+* If your design is progressively disclosing new components (new form fields for example) because the user has expanded or opened a panel, use Skeleton Loader pattern.
+* If the data on a page changes as a result of a user action, ie: sorting or filtering a table, paginating, etc -- use a Loading Spinner.
+* If you need to communicate that part of the page is processing data, use a spinner.
+* If the whole page is about to refresh (ie: the user has pressed submit on a form), you do NOT need to show a loading spinner ... the browser's native "loading" affordances are enough.
+
 ## Loading Spinner [d2l-loading-spinner]
 
 <!-- docs: demo code properties name:d2l-loading-spinner sandboxTitle:'Loading Spinner' -->

package/components/menu/demo/custom-view.js

@@ -7,8 +7,7 @@ class CustomView extends HierarchicalViewMixin(LitElement) {
 		return [ super.styles,
 			css`
 				:host {
-					background-image: url("https://www.nasa.gov/sites/default/files/images/504349main_ngc6357_hst_big_full.jpg");
-					background-size: cover;
+					background-color: black;
 					border: 1px solid black;
 					border-radius: 0.3rem;
 					box-sizing: border-box;

package/components/menu/menu.js

@@ -262,7 +262,11 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 	}
 
 	_labelChanged() {
-		this.setAttribute('aria-label', this.label);
+		if (typeof this.label === 'string' && this.label.trim().length > 0) {
+			this.setAttribute('aria-label', this.label);
+		} else {
+			this.removeAttribute('aria-label');
+		}
 		const returnItem = this._getMenuItemReturn();
 		if (returnItem) returnItem.setAttribute('text', this.label);
 	}

package/components/table/table-col-sort-button.js

@@ -54,7 +54,8 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 				type: String
 			},
 			_hasDropdownItems: { state: true },
-			_selectedMenuItemText: { state: true }
+			_selectedMenuItemText: { state: true },
+			_label: { state: true },
 		};
 	}
 
@@ -142,6 +143,7 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 		this._describedById = getUniqueId();
 		this._describedBySortedId = getUniqueId();
 		this._hasDropdownItems = false;
+		this._label = '';
 	}
 
 	static get focusElementSelector() {
@@ -181,13 +183,13 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 				class="${classMap({ 'd2l-dropdown-opener': this._hasDropdownItems })}"
 				title="${ifDefined(buttonTitle)}"
 				type="button">
-				<slot></slot>${iconView}
+				<slot @slotchange="${this.#handleDefaultSlotChange}"></slot>${iconView}
 			</button><span id="${this._describedById}" hidden>${buttonDescription}</span>${sortedView}`;
 		if (this._hasDropdownItems) {
 			return html`<d2l-dropdown>
 					${button}
 					<d2l-dropdown-menu no-pointer align="start" vertical-offset="4">
-						<d2l-menu @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
+						<d2l-menu label="${ifDefined(this._label)}" @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
 							<slot name="items" @slotchange="${this._handleSlotChange}"></slot>
 						</d2l-menu>
 					</d2l-dropdown-menu>
@@ -219,6 +221,16 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 		this._selectedMenuItemText = e.target?.text;
 	}
 
+	#handleDefaultSlotChange(e) {
+		const labels = e.target?.assignedNodes({ flatten: false })
+			.map(node => {
+				if (node.nodeType === Node.TEXT_NODE) return node.textContent;
+				if (node.nodeType === Node.ELEMENT_NODE) return node.innerText;
+			}).filter(text => typeof(text) === 'string' && text.trim().length > 0)
+			.map(text => text.replace(/[\t\n\r]+/g, ' ').trim());
+		this._label = labels.join(' ');
+	}
+
 }
 
 customElements.define('d2l-table-col-sort-button', TableColSortButton);

package/package.json

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