fix: correct cursor for checkbox, spacing between checkboxes and disa…

…ble border for spacer
GoldElysium · Aug 4, 2024 · a9ff133 · a9ff133
1 parent 64c0c6e
commit a9ff133
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 21 deletions.
diff --git a/src/components/ui/form/ui/blocks/checkbox.tsx b/src/components/ui/form/ui/blocks/checkbox.tsx
@@ -110,7 +110,7 @@ export function CheckboxFabric(props: {
 	return (
 		<div className="w-full">
 			<label
-				className="relative inline-flex min-h-5 select-none items-center"
+				className="relative inline-flex min-h-5 cursor-pointer select-none items-center"
 			>
 				<input
 					className="absolute size-0 cursor-pointer opacity-0"

diff --git a/src/components/ui/form/ui/blocks/checkboxes.tsx b/src/components/ui/form/ui/blocks/checkboxes.tsx
@@ -21,30 +21,34 @@ function CheckboxesFabric(props: {
 		<>
 			{props.checkboxes.map(
 				(checkbox, index) => (props.view === 'preview' || checkbox.label) && (
-					<CheckboxFabric
-						key={checkbox.id || index}
-						label={checkbox.label}
-						description={checkbox.description}
-						required={checkbox.required}
-						disabled={checkbox.disabled}
-						readOnly={checkbox.readOnly}
-						error={checkbox.error}
-						tabIndex={checkbox.tabIndex || props.tabIndex}
-						tabSubmit={index + 1 === props.checkboxes.length}
-						value={checkbox.value}
-						ariaDescribedBy={props.ariaDescribedBy}
-						onChange={checkbox.onChange}
-						onAutoFocus={(index === 0 && props.onAutoFocus) || undefined}
-						onFocus={props.onFocus}
-						onBlur={props.onBlur}
-						onSubmit={props.onSubmit}
-						onCancel={(index === 0 && props.onCancel) || undefined}
-					/>
+					<>
+						<CheckboxFabric
+							key={checkbox.id || index}
+							label={checkbox.label}
+							description={checkbox.description}
+							required={checkbox.required}
+							disabled={checkbox.disabled}
+							readOnly={checkbox.readOnly}
+							error={checkbox.error}
+							tabIndex={checkbox.tabIndex || props.tabIndex}
+							tabSubmit={index + 1 === props.checkboxes.length}
+							value={checkbox.value}
+							ariaDescribedBy={props.ariaDescribedBy}
+							onChange={checkbox.onChange}
+							onAutoFocus={(index === 0 && props.onAutoFocus) || undefined}
+							onFocus={props.onFocus}
+							onBlur={props.onBlur}
+							onSubmit={props.onSubmit}
+							onCancel={(index === 0 && props.onCancel) || undefined}
+						/>
+						<hr className="my-2 border-none" />
+					</>
 				),
 			)}
 		</>
 	);
 }
+
 /* eslint-enable */
 
 @tripetto({
@@ -58,6 +62,7 @@ export default class CheckboxesBlock extends Checkboxes implements IFormNodeBloc
 			<>
 				{props.name}
 				{props.description}
+				<hr className="mt-3 border-none" />
 				<CheckboxesFabric
 					checkboxes={this.checkboxes(props)}
 					ariaDescribedBy={props.ariaDescribedBy}

diff --git a/src/components/ui/form/ui/blocks/spacer.tsx b/src/components/ui/form/ui/blocks/spacer.tsx
@@ -9,7 +9,7 @@ import { IFormNodeBlock } from '@/components/ui/form/interfaces/block';
 export default class SpacerBlock extends Spacer implements IFormNodeBlock {
 	render() {
 		return (
-			<hr style={{ height: `${this.size}em` }} className="min-w-1" />
+			<hr style={{ height: `${this.size}em` }} className="min-w-1 border-none" />
 		);
 	}
 }