Added classname passing

- Classname can now be passed from placeholder or custom elements

Author: kirankunigiri

example-client/src/routes/rooms/$id.tsx

@@ -11,6 +11,8 @@ export const Route = createFileRoute('/rooms/$id')({
 	component: PeopleDetail,
 });
 
+const roomFields = meta.models.room.fields;
+
 function PeopleDetail() {
 	const params = Route.useParams() as { id: string };
 	const id = Number(params.id);
@@ -22,14 +24,15 @@ function PeopleDetail() {
 		<div>
 			<DetailHeader model="Room" id={id} route="/rooms" />
 			<MantineZenstackUpdateForm formRef={formRef} model="Room" id={id} route="/rooms/$id">
-				<div className="mt-4 flex flex-col gap-2">
-					<Divider />
-					<div data-placeholder-name={meta.models.room.fields.description.name} />
-					<Divider />
-				</div>
-				<div className="">
+				<div className="flex w-full gap-4">
+					{/* A placeholder example. This gets replaced by an input component */}
+					<div className="grow" data-placeholder-name={roomFields.description.name} />
+
+					{/* A custom element example. This will be directly used by the form */}
 					<Textarea
-						data-field-name={meta.models.room.fields.aiSummary.name}
+						className="grow"
+						autosize
+						data-field-name={roomFields.aiSummary.name}
 						label="AI Summary"
 						placeholder="AI Summary"
 					/>

package/src/form/form.tsx

@@ -360,6 +360,7 @@ const ZenstackBaseForm = (props: ZenstackBaseFormProps) => {
 					key={fieldName}
 					field={field}
 					index={-1}
+					className={element.props.className}
 					{...props}
 				/>
 			);
@@ -451,6 +452,7 @@ interface ZenstackFormInputProps extends ZenstackBaseFormProps {
 	field: Field
 	index: number
 	customElement?: React.ReactElement
+	className?: string
 }
 const ZenstackFormInputInternal = (props: ZenstackFormInputProps) => {
 	const { metadata: originalMetadata, elementMap, hooks, enumLabelTransformer } = useZenstackUIProvider();
@@ -588,12 +590,16 @@ const ZenstackFormInputInternal = (props: ZenstackFormInputProps) => {
 
 	// If we have a custom element, use it instead of the element mapping
 	if (props.customElement) {
+		const originalClassName = props.customElement.props.className || '';
+		const dirtyClassName = isDirty ? 'dirty' : '';
+		const combinedClassName = `${originalClassName} ${dirtyClassName}`.trim();
+
 		return React.cloneElement(props.customElement, {
 			...props.form.getInputProps(fieldName),
 			onChange: handleChange,
 			required,
 			key: props.form.key(fieldName),
-			className: isDirty ? 'dirty' : '',
+			className: combinedClassName,
 			disabled: isDisabled,
 			placeholder: placeholder,
 		});
@@ -608,7 +614,7 @@ const ZenstackFormInputInternal = (props: ZenstackFormInputProps) => {
 			onChange={handleChange} // Override onChange with our wrapped version
 			label={label}
 			data={labelData}
-			className={isDirty ? 'dirty' : ''}
+			className={`${props.className || ''} ${isDirty ? 'dirty' : ''}`.trim()}
 			disabled={isDisabled}
 			data-autofocus={props.index === 0}
 		/>