add color validation story

jorgefilipecosta · jorgefilipecosta · commit 0b2d8294b0d5 · 2025-09-08T12:15:30.000+01:00
diff --git a/packages/dataviews/src/components/dataform/stories/index.story.tsx b/packages/dataviews/src/components/dataform/stories/index.story.tsx
@@ -391,6 +391,7 @@ const ValidationComponent = ( {
 		email: string;
 		telephone: string;
 		url: string;
+		color: string;
 		integer: number;
 		boolean: boolean;
 		customEdit: string;
@@ -401,6 +402,7 @@ const ValidationComponent = ( {
 		email: 'hi@example.com',
 		telephone: '+306978241796',
 		url: 'https://example.com',
+		color: '#ff6600',
 		integer: 2,
 		boolean: true,
 		customEdit: 'custom control',
@@ -434,6 +436,13 @@ const ValidationComponent = ( {
 
 		return null;
 	};
+	const customColorRule = ( value: ValidatedItem ) => {
+		if ( ! /^#[0-9A-Fa-f]{6}$/.test( value.color ) ) {
+			return 'Color must be a valid hex format (e.g., #ff6600).';
+		}
+
+		return null;
+	};
 	const customIntegerRule = ( value: ValidatedItem ) => {
 		if ( value.integer % 2 !== 0 ) {
 			return 'Integer must be an even number.';
@@ -485,6 +494,15 @@ const ValidationComponent = ( {
 				custom: maybeCustomRule( customUrlRule ),
 			},
 		},
+		{
+			id: 'color',
+			type: 'color',
+			label: 'Color',
+			isValid: {
+				required,
+				custom: maybeCustomRule( customColorRule ),
+			},
+		},
 		{
 			id: 'integer',
 			type: 'integer',
@@ -519,6 +537,7 @@ const ValidationComponent = ( {
 			'email',
 			'telephone',
 			'url',
+			'color',
 			'integer',
 			'boolean',
 			'customEdit',
