feat: added new Sample with visualtest for formfields with label

packages/samples/react/src/scenarios/routes.ts

@@ -12,6 +12,7 @@ import { InputsGetValue } from './inputs-get-value';
 import { PerformanceTest } from './performance-test';
 import { RHFBasic } from './react-hook-form/basic';
 import { RHFDisabled } from './react-hook-form/disabled';
+import { SameHeightOfAllFormElements } from './same-height-of-all-form-elements-with-label';
 import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
 import { SampleFormWithValidation } from './sample-form-with-validation';
 import { Skeleton } from './skeleton';
@@ -33,6 +34,7 @@ export const SCENARIO_ROUTES: Routes = {
 		'react-hook-form-adapter': RHFBasic,
 		'react-hook-form-adapter-disabled': RHFDisabled,
 		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
+		'same-height-of-all-form-elements-with-label': SameHeightOfAllFormElements,
 		'static-form': StaticForm,
 		'sample-form-with-validation': SampleFormWithValidation,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,

packages/samples/react/src/scenarios/same-height-of-all-form-elements-with-label.tsx

@@ -0,0 +1,46 @@
+import {
+	KolCombobox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRange,
+	KolInputText,
+	KolSelect,
+	KolSingleSelect,
+	KolTextarea,
+} from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const SameHeightOfAllFormElements: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>All form elements with labels, should have the same height and gaps to ensure a consistent and visually balanced user interface.</p>
+			</SampleDescription>
+			<div className="w-full flex flex-wrap gap-4">
+				<KolCombobox _icons="kolicon-house" _label="Combobox" _suggestions={[]} />
+				<KolInputColor
+					_icons={{
+						left: 'kolicon-house',
+					}}
+					_label="Input-Color"
+				/>
+				<KolInputFile _icons="kolicon-house" _label="Input-File" />
+				<KolInputDate _icons="kolicon-house" _label="Input-Date" />
+				<KolInputEmail _icons="kolicon-house" _label="Input-Email" />
+				<KolInputNumber _icons="kolicon-house" _label="Input-Number" />
+				<KolInputPassword _icons="kolicon-house" _label="Input-Password" />
+				<KolInputRange _icons="kolicon-house" _label="Input-Range" />
+				<KolInputText _icons="kolicon-house" _label="Input-Text" />
+				<KolSelect _icons="kolicon-house" _label="Select" _options={[]} />
+				<KolSingleSelect _icons="kolicon-house" _label="Single Select" _options={[]} />
+				<KolTextarea _icons="kolicon-house" _label="Textarea" />
+			</div>
+		</>
+	);
+};

packages/tools/visual-tests/tests/sample-app.routes.js

@@ -1276,6 +1276,17 @@ ROUTES.set('scenarios/same-height-of-all-interactive-elements', {
 	},
 });
 
+ROUTES.set('scenarios/same-height-of-all-form-elements-with-label', {
+	axe: {
+		skipFailures: true,
+	},
+	snapshot: {
+		zoom: {
+			skip: true,
+		},
+	},
+});
+
 /* Focus tests */
 ROUTES.set('scenarios/focus-elements?component=accordion', {
 	snapshot: {