Merge branch 'main' into feat/dlc-empty

Author: cgero-eth

.changeset/big-texts-hurt.md

@@ -0,0 +1,5 @@
+---
+'@aragon/gov-ui-kit': patch
+---
+
+Reduce text size of the descriptions on the RadioCard and CheckboxCard components

src/core/components/forms/checkboxCard/checkboxCard.tsx

@@ -64,6 +64,22 @@ export const CheckboxCard = forwardRef<HTMLButtonElement, ICheckboxCardProps>((p
     const randomId = useRandomId(id);
     const labelId = `${randomId}-label`;
 
+    const containerClasses = classNames(
+        'group flex min-w-0 cursor-pointer flex-col gap-3 outline-hidden transition-all', // Layout
+        'bg-neutral-0 focus-ring-primary rounded-xl border px-4 py-3 md:gap-4 md:px-6 md:py-4', // Style
+        'border-primary-400 shadow-primary hover:shadow-primary-md', // Checked/indeterminate & hover
+        'data-[state=unchecked]:enabled:shadow-neutral-sm data-[state=unchecked]:enabled:border-neutral-100', // Unchecked
+        'data-[state=unchecked]:enabled:hover:shadow-neutral', // Unchecked hover
+        'disabled:cursor-default disabled:border-neutral-300 disabled:bg-neutral-100 disabled:shadow-none', // Checked/indeterminate & disabled
+        'disabled:data-[state=unchecked]:border-neutral-200', // Disabled & unchecked
+        className,
+    );
+
+    const labelClasses = classNames(
+        'max-w-full cursor-pointer truncate text-neutral-800 group-data-[state=unchecked]:text-neutral-800 md:text-base',
+        'group-data-disabled:cursor-default group-data-[state=unchecked]:group-data-disabled:text-neutral-300',
+    );
+
     return (
         <RadixCheckbox.Root
             id={randomId}
@@ -72,28 +88,13 @@ export const CheckboxCard = forwardRef<HTMLButtonElement, ICheckboxCardProps>((p
             checked={checked}
             onCheckedChange={onCheckedChange}
             disabled={disabled}
-            className={classNames(
-                'group flex min-w-0 cursor-pointer flex-col gap-3 outline-hidden transition-all', // Layout
-                'bg-neutral-0 focus-ring-primary rounded-xl border px-4 py-3 md:gap-4 md:px-6 md:py-4', // Style
-                'border-primary-400 shadow-primary hover:shadow-primary-md', // Checked/indeterminate & hover
-                'data-[state=unchecked]:enabled:shadow-neutral-sm data-[state=unchecked]:enabled:border-neutral-100', // Unchecked
-                'data-[state=unchecked]:enabled:hover:shadow-neutral', // Unchecked hover
-                'disabled:cursor-default disabled:border-neutral-300 disabled:bg-neutral-100 disabled:shadow-none', // Checked/indeterminate & disabled
-                'disabled:data-[state=unchecked]:border-neutral-200', // Disabled & unchecked
-                className,
-            )}
+            className={containerClasses}
             {...otherProps}
         >
             <div className={classNames('flex w-full min-w-0 flex-row gap-3', { 'items-center': !description })}>
                 {avatar && <Avatar size="sm" responsiveSize={{ md: 'md' }} src={avatar} />}
-                <div className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-sm leading-tight font-normal md:gap-1 md:text-base">
-                    <p
-                        id={randomId}
-                        className={classNames(
-                            'max-w-full cursor-pointer truncate text-neutral-800 group-data-[state=unchecked]:text-neutral-800',
-                            'group-data-disabled:cursor-default group-data-[state=unchecked]:group-data-disabled:text-neutral-300',
-                        )}
-                    >
+                <div className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-sm leading-tight font-normal md:gap-1">
+                    <p id={randomId} className={labelClasses}>
                         {label}
                     </p>
                     {description && (

src/core/components/forms/radioCard/radioCard.tsx

@@ -53,11 +53,8 @@ export const RadioCard = forwardRef<HTMLButtonElement, IRadioCardProps>((props,
         className,
     );
 
-    const baseTextClasses =
-        'text-sm leading-tight text-left text-neutral-500 md:text-base w-full group-disabled:text-neutral-300 truncate';
-
     const labelClasses = classNames(
-        baseTextClasses,
+        'text-left text-neutral-500 w-full group-disabled:text-neutral-300 truncate md:text-base',
         'group-data-[state=checked]:text-neutral-800 group-data-[state=checked]:group-disabled:text-neutral-800',
     );
 
@@ -74,15 +71,17 @@ export const RadioCard = forwardRef<HTMLButtonElement, IRadioCardProps>((props,
             <div className="flex size-full items-center gap-x-3 md:gap-x-4">
                 {avatar && <Avatar size="sm" responsiveSize={{ md: 'md' }} src={avatar} />}
                 <div
-                    className={classNames('flex min-w-0 flex-1 gap-x-0.5 md:gap-x-4', {
-                        'items-center': !description,
-                    })}
+                    className={classNames('flex min-w-0 flex-1 gap-x-0.5 md:gap-x-4', { 'items-center': !description })}
                 >
-                    <div className="flex min-w-0 flex-1 flex-col gap-y-0.5 md:gap-y-1">
+                    <div className="flex min-w-0 flex-1 flex-col gap-y-0.5 text-sm leading-tight font-normal md:gap-y-1">
                         <p className={labelClasses} id={labelId}>
                             {label}
                         </p>
-                        {description && <p className={baseTextClasses}>{description}</p>}
+                        {description && (
+                            <p className="w-full truncate text-left text-neutral-500 group-disabled:text-neutral-300">
+                                {description}
+                            </p>
+                        )}
                     </div>
                     {tag && <Tag {...tag} />}
                 </div>