Merge pull request #229 from brainstormforce/uat-bugs/help-text-size

SRML-64 - fix: Clicking on the hint text toggles checkbox/switch and updated help text font-size
brainstormforce · Dec 30, 2024 · 329c0d1 · 329c0d1
2 parents 9d8ed58 + f4b8132
commit 329c0d1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 26 deletions.
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
@@ -8,6 +8,7 @@ import {
 import { nanoid } from 'nanoid';
 import { cn } from '@/utilities/functions';
 import { Check, Minus } from 'lucide-react';
+import Label from '../label/label';
 
 // Types for Component Props
 export declare interface CheckboxProps {
@@ -59,7 +60,7 @@ export const CheckboxComponent = (
 			checkbox: 'size-4 rounded gap-1',
 			icon: 'size-3',
 			text: 'text-sm', // text class for sm
-			description: 'text-xs',
+			description: 'text-sm',
 			gap: 'gap-0.5',
 		},
 		md: {
@@ -116,27 +117,30 @@ export const CheckboxComponent = (
 		return (
 			<div className={ sizeClassNames[ size ].gap }>
 				{ label?.heading && (
-					<p
+					<Label
 						className={ cn(
 							'text-text-primary font-medium leading-4 m-0',
 							sizeClassNames[ size ].text,
 							sizeClassNames[ size ].gap,
 							disabled && 'text-text-disabled'
 						) }
+						htmlFor={ checkboxId }
 					>
 						{ label?.heading }
-					</p>
+					</Label>
 				) }
 				{ label?.description && (
-					<p
+					<Label
+						tag="p"
 						className={ cn(
-							'text-text-secondary font-normal leading-5 m-0',
+							'font-normal leading-5 m-0',
 							sizeClassNames[ size ].description,
 							disabled && 'text-text-disabled'
 						) }
+						variant="help"
 					>
 						{ label?.description }
-					</p>
+					</Label>
 				) }
 			</div>
 		);
@@ -187,17 +191,7 @@ export const CheckboxComponent = (
 					) }
 				</span>
 			</label>
-			{ !! label && (
-				<label
-					className={ cn(
-						'cursor-pointer',
-						disabled && 'cursor-not-allowed'
-					) }
-					htmlFor={ checkboxId }
-				>
-					{ renderLabel() }
-				</label>
-			) }
+			{ !! label && renderLabel() }
 		</div>
 	);
 };

diff --git a/src/components/label/label.tsx b/src/components/label/label.tsx
@@ -49,6 +49,13 @@ const Label = forwardRef(
 				'text-field-color-disabled disabled cursor-not-allowed [&>*]:text-field-color-disabled',
 		};
 
+		const fontWeightClassNames: Record<string, string> = {
+			neutral: '',
+			help: 'font-normal',
+			error: 'font-normal',
+			disabled: '',
+		};
+
 		if ( ! children ) {
 			return null;
 		}
@@ -68,6 +75,7 @@ const Label = forwardRef(
 					sizeClasses[ size ],
 					variantClasses[ variant ],
 					requiredClasses,
+					fontWeightClassNames?.[ variant ],
 					className
 				) }
 				{ ...props }

diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
@@ -66,7 +66,7 @@ export const SwitchLabel = ( {
 		md: 'text-base leading-6 font-medium',
 	};
 	const descriptionClasses = {
-		sm: 'text-xs leading-4 font-normal',
+		sm: 'text-sm leading-5 font-normal',
 		md: 'text-sm leading-5 font-normal',
 	};
 	const gapClassNames = {
@@ -90,7 +90,7 @@ export const SwitchLabel = ( {
 			<div className={ cn( 'space-y-0.5', gapClassNames[ size ] ) }>
 				{ heading && (
 					<Label
-						tag="p"
+						htmlFor={ switchId }
 						className={ cn( 'm-0', headingClasses[ size ] ) }
 						{ ...( disabled && { variant: 'disabled' } ) }
 					>
@@ -102,7 +102,7 @@ export const SwitchLabel = ( {
 						tag="p"
 						variant="help"
 						className={ cn(
-							'text-xs font-normal leading-5 m-0',
+							'text-sm font-normal leading-5 m-0',
 							descriptionClasses[ size ]
 						) }
 						{ ...( disabled && { variant: 'disabled' } ) }
@@ -125,12 +125,7 @@ export const SwitchLabel = ( {
 	return (
 		<div className={ cn( 'inline-flex', alignmentClass, 'gap-3' ) }>
 			{ children }
-			<label
-				htmlFor={ switchId }
-				className={ cn( ! disabled && 'cursor-pointer' ) }
-			>
-				{ renderLabel() }
-			</label>
+			{ renderLabel() }
 		</div>
 	);
 };