@microsoft/atlas-js - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

dist/elements/form-behavior.js

@@ -54,3 +54,4 @@ import { generateElementId, kebabToCamelCase } from '../utilities/util';
         const errorSummaryContainer = document.createElement('div');
-        errorSummaryContainer.classList.add('form-error-container');
+        errorSummaryContainer.classList.add('margin-bottom-sm', 'background-color-danger-light');
+        errorSummaryContainer.setAttribute('data-form-error-container', '');
         this.insertAdjacentElement('afterend', errorSummaryContainer);
@@ -141,2 +142,9 @@ this.initialData = new FormData(form);
             this.showNoChangesMessage(form);
+            const validationErrorEvent = new CustomEvent('form-validating', {
+                detail: {
+                    form
+                },
+                bubbles: true
+            });
+            this.dispatchEvent(validationErrorEvent);
             return;
@@ -207,2 +215,3 @@ }
                     detail: {
+                        form,
                         request,
@@ -224,3 +233,3 @@ response
     createErrorAlert(form) {
-        const formLayout = form.querySelector('.form-error-container') || form;
+        const formLayout = form.querySelector('[data-form-error-container]') || form;
         const alertId = generateElementId();
@@ -246,3 +255,3 @@ const errorAlert = document.createElement('div');
     getErrorAlert(form) {
-        const errorAlert = form.querySelector('.form-error-container .alert');
+        const errorAlert = form.querySelector('[data-form-error-container] .alert');
         if (errorAlert) {
@@ -303,2 +312,6 @@ return {
             }
+            // Don't check markdown editor attachment input
+            if (input.id === 'attachment-count') {
+                continue;
+            }
             const isCustomElement = !!customElements.find(el => el === input);
@@ -319,3 +332,2 @@ this.runBasicValidation(input, displayValidity, errors, errorList, isCustomElement);
         if (displayValidity) {
-            errorAlert.classList.add('margin-bottom-sm');
             errorAlert.hidden = false;
@@ -481,2 +493,3 @@ errorAlert.focus();
     note.classList.add('field-error');
+    note.setAttribute('data-field-error', '');
     getFieldBody(input).after(note);
@@ -487,3 +500,3 @@ return note;
     const group = getField(element);
-    const note = group.querySelector('.field-error') || createErrorNote(element);
+    const note = group.querySelector('[data-field-error]') || createErrorNote(element);
     note.textContent = message;
@@ -490,0 +503,0 @@ }

dist/index.d.ts

 export * from './behaviors/popover';
 export * from './behaviors/snap-scroll';
 export * from './elements/form-behavior';
+export * from './utilities/util';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

 export * from './behaviors/popover';
 export * from './behaviors/snap-scroll';
 export * from './elements/form-behavior';
+export * from './utilities/util';

package.json

 {
 	"name": "@microsoft/atlas-js",
-	"version": "1.5.0",
+	"version": "1.5.1",
 	"public": true,
@@ -5,0 +5,0 @@ "description": "Scripts backing the Atlas Design System used by Microsoft's Developer Relations.",

src/elements/form-behavior.ts

@@ -68,3 +68,4 @@ import { generateElementId, kebabToCamelCase } from '../utilities/util';
 		const errorSummaryContainer = document.createElement('div');
-		errorSummaryContainer.classList.add('form-error-container');
+		errorSummaryContainer.classList.add('margin-bottom-sm', 'background-color-danger-light');
+		errorSummaryContainer.setAttribute('data-form-error-container', '');
 		this.insertAdjacentElement('afterend', errorSummaryContainer);
@@ -179,2 +180,9 @@
 			this.showNoChangesMessage(form);
+			const validationErrorEvent = new CustomEvent('form-validating', {
+				detail: {
+					form
+				},
+				bubbles: true
+			});
+			this.dispatchEvent(validationErrorEvent);
 			return;
@@ -255,2 +263,3 @@ }
 						detail: {
+							form,
 							request,
@@ -277,3 +286,3 @@ response
 	} {
-		const formLayout = form.querySelector('.form-error-container') || form;
+		const formLayout = form.querySelector('[data-form-error-container]') || form;
 		const alertId = generateElementId();
@@ -305,3 +314,3 @@
 	getErrorAlert(form: HTMLFormElement) {
-		const errorAlert = form.querySelector<HTMLDivElement>('.form-error-container .alert');
+		const errorAlert = form.querySelector<HTMLDivElement>('[data-form-error-container] .alert');
 		if (errorAlert) {
@@ -383,2 +392,7 @@ return {
 
+			// Don't check markdown editor attachment input
+			if (input.id === 'attachment-count') {
+				continue;
+			}
+
 			const isCustomElement = !!customElements.find(el => el === input);
@@ -402,3 +416,2 @@
 		if (displayValidity) {
-			errorAlert.classList.add('margin-bottom-sm');
 			errorAlert.hidden = false;
@@ -657,2 +670,3 @@ errorAlert.focus();
 	note.classList.add('field-error');
+	note.setAttribute('data-field-error', '');
 	getFieldBody(input).after(note);
@@ -664,3 +678,3 @@ return note;
 	const group = getField(element);
-	const note = group.querySelector('.field-error') || createErrorNote(element);
+	const note = group.querySelector('[data-field-error]') || createErrorNote(element);
 	note.textContent = message;
@@ -667,0 +681,0 @@ }

src/index.ts

 export * from './behaviors/popover';
 export * from './behaviors/snap-scroll';
 export * from './elements/form-behavior';
+export * from './utilities/util';

No alert changes

Improved metrics

Total package byte prevSize

62489

increased by1.75%

Lines of code

1587

increased by1.86%

No dependency changes