@microsoft/atlas-js - npm Package Compare versions

Comparing version 1.10.1 to 1.11.0

dist/elements/form-behavior.d.ts

 export declare const defaultMessageStrings: {
     contentHasChanged: string;
+    inputGroupRequired: string;
     inputMaxLength: string;
@@ -21,2 +22,3 @@ inputMinLength: string;
         contentHasChanged: string;
+        inputGroupRequired: string;
         inputMaxLength: string;
@@ -43,2 +45,3 @@ inputMinLength: string;
         contentHasChanged: string;
+        inputGroupRequired: string;
         inputMaxLength: string;
@@ -45,0 +48,0 @@ inputMinLength: string;

dist/elements/form-behavior.js

 import { generateElementId, kebabToCamelCase } from '../utilities/util';
 export const defaultMessageStrings = {
     contentHasChanged: 'Content has changed, please reload the page to get the latest changes.',
+    inputGroupRequired: 'At least one selection for {inputGroup} is required.',
     inputMaxLength: '{inputLabel} cannot be longer than {maxLength} characters.',
@@ -297,3 +298,5 @@ inputMinLength: '{inputLabel} must be at least {minLength} characters.',
         if (input.validity.valueMissing) {
-            return `${this.locStrings.inputRequired.replace('{inputLabel}', customElements.get(input.localName) ? `A selection for "${label}"` : label)}`;
+            return this.locStrings.inputRequired.replace('{inputLabel}', customElements.get(input.localName) || input.type === 'radio'
+                ? `A selection for "${label}"`
+                : label);
         }
@@ -305,5 +308,5 @@ return null;
             (input.validity.tooShort || (input.minLength > 0 && input.value.length < input.minLength))) {
-            return `${this.locStrings.inputMinLength
+            return this.locStrings.inputMinLength
                 .replace('{inputLabel}', label)
-                .replace('{minLength}', input.minLength.toString())}`;
+                .replace('{minLength}', input.minLength.toString());
         }
@@ -315,5 +318,5 @@ return null;
             (input.validity.tooLong || (input.maxLength > 0 && input.value.length > input.maxLength))) {
-            return `${this.locStrings.inputMaxLength
+            return this.locStrings.inputMaxLength
                 .replace('{inputLabel}', label)
-                .replace('{maxLength}', input.maxLength.toString())}`;
+                .replace('{maxLength}', input.maxLength.toString());
         }
@@ -334,2 +337,10 @@ return null;
             }
+            // Apply validation to the first radio in a group
+            // This is to prevent duplicate validation messages for each radio in a group
+            if (input.type === 'radio') {
+                const radioGroup = form.querySelectorAll(`input[name="${input.name}"]`);
+                if (radioGroup.length > 1 && radioGroup[0] !== input) {
+                    continue;
+                }
+            }
             if (input.hasAttribute('aria-hidden') === true) {
@@ -423,6 +434,2 @@ continue;
         const group = getField(input);
-        if (displayValidity) {
-            setValidationMessage(input, '');
-            group.classList.remove('errored');
-        }
         for (const validator of this.validators) {
@@ -464,2 +471,5 @@ const message = validator(input, label);
                     }
+                    else if (input.type === 'radio') {
+                        input.closest('label.radio')?.classList.add(`is-invalid`);
+                    }
                     else {
@@ -518,5 +528,19 @@ input.classList.add(`${input.localName}-danger`);
 export function getLabel(input) {
-    const label = input.labels && input.labels.length
-        ? input.labels[0].textContent
-        : input.getAttribute('aria-label');
+    let label = null;
+    if (input.type === 'radio') {
+        const group = getField(input);
+        const groupLabel = group.querySelector('.field-label');
+        if (groupLabel) {
+            label = groupLabel.textContent;
+        }
+        else {
+            label = input.getAttribute('aria-label');
+        }
+    }
+    else if (input.labels?.length) {
+        label = input.labels[0].textContent;
+    }
+    else {
+        label = input.getAttribute('aria-label');
+    }
     if (!label) {
@@ -523,0 +547,0 @@ throw new Error(`${input.nodeName} name="${input.name}" id="${input.id}" has no associated label.`);

package.json

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

src/elements/form-behavior.ts

@@ -5,2 +5,3 @@ import { generateElementId, kebabToCamelCase } from '../utilities/util';
 	contentHasChanged: 'Content has changed, please reload the page to get the latest changes.',
+	inputGroupRequired: 'At least one selection for {inputGroup} is required.',
 	inputMaxLength: '{inputLabel} cannot be longer than {maxLength} characters.',
@@ -360,6 +361,8 @@ inputMinLength: '{inputLabel} must be at least {minLength} characters.',
 		if (input.validity.valueMissing) {
-			return `${this.locStrings.inputRequired.replace(
+			return this.locStrings.inputRequired.replace(
 				'{inputLabel}',
-				customElements.get(input.localName) ? `A selection for "${label}"` : label
-			)}`;
+				customElements.get(input.localName) || input.type === 'radio'
+					? `A selection for "${label}"`
+					: label
+			);
 		}
@@ -374,5 +377,5 @@ return null;
 		) {
-			return `${this.locStrings.inputMinLength
+			return this.locStrings.inputMinLength
 				.replace('{inputLabel}', label)
-				.replace('{minLength}', input.minLength.toString())}`;
+				.replace('{minLength}', input.minLength.toString());
 		}
@@ -387,5 +390,5 @@ return null;
 		) {
-			return `${this.locStrings.inputMaxLength
+			return this.locStrings.inputMaxLength
 				.replace('{inputLabel}', label)
-				.replace('{maxLength}', input.maxLength.toString())}`;
+				.replace('{maxLength}', input.maxLength.toString());
 		}
@@ -414,2 +417,11 @@ return null;
 
+			// Apply validation to the first radio in a group
+			// This is to prevent duplicate validation messages for each radio in a group
+			if (input.type === 'radio') {
+				const radioGroup = form.querySelectorAll<HTMLInputElement>(`input[name="${input.name}"]`);
+				if (radioGroup.length > 1 && radioGroup[0] !== input) {
+					continue;
+				}
+			}
+
 			if (input.hasAttribute('aria-hidden') === true) {
@@ -527,7 +539,2 @@ continue;
 
-		if (displayValidity) {
-			setValidationMessage(input, '');
-			group.classList.remove('errored');
-		}
-
 		for (const validator of this.validators) {
@@ -574,2 +581,4 @@ const message = validator(input, label);
 						input.closest('label.checkbox')?.classList.add(`is-invalid`);
+					} else if (input.type === 'radio') {
+						input.closest('label.radio')?.classList.add(`is-invalid`);
 					} else {
@@ -685,6 +694,18 @@ input.classList.add(`${input.localName}-danger`);
 export function getLabel(input: HTMLValueElement): string {
-	const label =
-		input.labels && input.labels.length
-			? input.labels[0].textContent
-			: input.getAttribute('aria-label');
+	let label: string | null = null;
+
+	if (input.type === 'radio') {
+		const group = getField(input);
+		const groupLabel = group.querySelector('.field-label');
+		if (groupLabel) {
+			label = groupLabel.textContent;
+		} else {
+			label = input.getAttribute('aria-label');
+		}
+	} else if (input.labels?.length) {
+		label = input.labels[0].textContent;
+	} else {
+		label = input.getAttribute('aria-label');
+	}
+
 	if (!label) {
@@ -691,0 +712,0 @@ throw new Error(

No alert changes

Improved metrics

Total package byte prevSize

112145

increased by1.6%

Lines of code

2787

increased by1.68%

No dependency changes