DataForm: update validation story to cover number field type (#71980)

oandregal · web-flow · commit 5c32321d875f · 2025-09-30T18:41:51.000+02:00
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -523,6 +523,7 @@ const ValidationComponent = ( {
 		url: string;
 		color: string;
 		integer: number;
+		number: number;
 		boolean: boolean;
 		customEdit: string;
 		categories: string[];
@@ -542,6 +543,7 @@ const ValidationComponent = ( {
 		url: 'https://example.com',
 		color: '#ff6600',
 		integer: 2,
+		number: 3.14,
 		boolean: true,
 		categories: [ 'astronomy' ],
 		countries: [ 'us' ],
@@ -616,6 +618,13 @@ const ValidationComponent = ( {
 
 		return null;
 	};
+	const customNumberRule = ( value: ValidatedItem ) => {
+		if ( ! /^\d+\.\d{2}$/.test( value?.number?.toString() ) ) {
+			return 'Number must have exactly two decimal places.';
+		}
+
+		return null;
+	};
 	const customBooleanRule = ( value: ValidatedItem ) => {
 		if ( value.boolean !== true ) {
 			return 'Boolean must be active.';
@@ -750,6 +759,15 @@ const ValidationComponent = ( {
 				custom: maybeCustomRule( customIntegerRule ),
 			},
 		},
+		{
+			id: 'number',
+			type: 'number',
+			label: 'Number',
+			isValid: {
+				required,
+				custom: maybeCustomRule( customNumberRule ),
+			},
+		},
 		{
 			id: 'boolean',
 			type: 'boolean',
@@ -850,6 +868,7 @@ const ValidationComponent = ( {
 			'url',
 			'color',
 			'integer',
+			'number',
 			'boolean',
 			'categories',
 			'countries',
