@brightspace-ui/core 3.135.0 → 3.135.2

package/components/form/form.js

@@ -5,10 +5,13 @@ import { css, html, LitElement } from 'lit';
 import { findFormElements, flattenMap, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
+import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { localizeFormElement } from './form-element-localize-helper.js';
 
+const formElementMixinWithNestedFormsParticipates = getFlag('form-element-mixin-nested-forms', true);
+
 /**
  * A component that can be used to build sections containing interactive controls that are validated and submitted as a group.
  * Values of these interactive controls are aggregated but the user is responsible for handling submission via the @d2l-form-submit event.
@@ -165,7 +168,13 @@ class Form extends LocalizeCoreElement(LitElement) {
 						}
 					}
 				}
-			} else {
+			} else if (!formElementMixinWithNestedFormsParticipates) {
+				const eleErrors = await this._validateFormElement(ele, true);
+				if (eleErrors.length > 0) {
+					errorMap.set(ele, eleErrors);
+				}
+			}
+			if (formElementMixinWithNestedFormsParticipates) {
 				const eleErrors = await this._validateFormElement(ele, true);
 				if (eleErrors.length > 0) {
 					errorMap.set(ele, eleErrors);
@@ -354,13 +363,16 @@ class Form extends LocalizeCoreElement(LitElement) {
 	}
 
 	async _validateFormElement(ele, showNewErrors) {
+		const isCustom = isCustomFormElement(ele);
+		const isNative = isNativeFormElement(ele);
+		if (!isCustom && !isNative) return [];
 		// if validation occurs before we've rendered,
 		// localization may not have loaded yet
 		await this._firstUpdatePromise;
 		ele.id = ele.id || getUniqueId();
-		if (isCustomFormElement(ele)) {
+		if (isCustom) {
 			return ele.validate(showNewErrors);
-		} else if (isNativeFormElement(ele)) {
+		} else if (isNative) {
 			const customs = [...this._validationCustoms].filter(custom => custom.forElement === ele);
 			const results = await Promise.all(customs.map(custom => custom.validate()));
 			const errors = customs.map(custom => custom.failureText).filter((_, i) => !results[i]);

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/package.json

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