🎁 Wrap form field messages to single row (#207)

WallfacerLabs · Mar 21, 2024 · 5269a91 · 5269a91
1 parent 4713ac2
commit 5269a91
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/src/app/waves/[waveId]/applications/create/steps/mainDetails.tsx b/src/app/waves/[waveId]/applications/create/steps/mainDetails.tsx
@@ -20,6 +20,7 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
+  FormMessages,
 } from "@/components/ui/form";
 import { ImageUpload } from "@/components/ui/imageUpload";
 import { Input } from "@/components/ui/input";
@@ -129,11 +130,13 @@ export function MainDetails() {
                   placeholder="Enter the name of your project"
                 />
               </FormControl>
-              <FormCounter
-                current={field.value.length}
-                limit={FORM_FIELD_PARAMS.name.max}
-              />
-              <FormMessage />
+              <FormMessages>
+                <FormMessage />
+                <FormCounter
+                  current={field.value.length}
+                  limit={FORM_FIELD_PARAMS.name.max}
+                />
+              </FormMessages>
             </FormItem>
           )}
         />

diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
@@ -188,6 +188,21 @@ const FormDescription = forwardRef<
 });
 FormDescription.displayName = "FormDescription";
 
+const FormMessages = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("flex gap-4 [&>p]:mt-0.5 [&>span]:mt-0.5", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+FormMessages.displayName = "FormMessages";
+
 const FormMessage = forwardRef<
   HTMLParagraphElement,
   HTMLAttributes<HTMLParagraphElement>
@@ -204,11 +219,7 @@ const FormMessage = forwardRef<
       data-role="message"
       ref={ref}
       id={formMessageId}
-      className={cn(
-        "text-sm font-medium text-destructive",
-        "[input+&]:mt-0.5 [textarea+&]:mt-0.5",
-        className,
-      )}
+      className={cn("text-xs font-medium text-destructive", className)}
       {...props}
     >
       {body}
@@ -226,10 +237,7 @@ interface FormCounterProps
 const FormCounter = ({ current, limit, className }: FormCounterProps) => {
   return (
     <p
-      className={cn(
-        "group !mt-0 ml-auto mr-4 w-fit text-xs opacity-60",
-        className,
-      )}
+      className={cn("group ml-auto mr-4 w-fit text-xs opacity-60", className)}
       data-overlimit={current > limit}
     >
       <span className="transition-colors group-data-[overlimit=true]:text-destructive">
@@ -267,6 +275,7 @@ export {
   FormHint,
   FormItem,
   FormLabel,
+  FormMessages,
   FormMessage,
   useFormField,
 };