fix(ui): Remove space-y-* classes to mitigate duplicate spacing (#3559)

Co-authored-by: Alex Carpenter <[email protected]>
clerk · Jun 12, 2024 · a198d14 · a198d14
1 parent 4b7044f
commit a198d14
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git a/.changeset/five-forks-arrive.md b/.changeset/five-forks-arrive.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -63,7 +63,7 @@ export function SignInComponent() {
                       })}
                     </Connection.Root>
                     <Seperator>or</Seperator>
-                    <div className='space-y-4'>
+                    <div className='flex flex-col gap-4'>
                       {/* @ts-ignore Expected https://github.com/clerk/javascript/blob/12f78491d6b10f2be63891f8a7f76fc6acf37c00/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx#L248-L249 */}
                       <PhoneNumberField locationBasedCountryIso={clerk.__internal_country} />
                       <EmailField disabled={isGlobalLoading} />

diff --git a/packages/ui/src/components/sign-up/sign-up.tsx b/packages/ui/src/components/sign-up/sign-up.tsx
@@ -67,7 +67,7 @@ export function SignUpComponent() {
                     </Connection.Root>
 
                     <Seperator>or</Seperator>
-                    <div className='space-y-4'>
+                    <div className='flex flex-col gap-4'>
                       <div className='flex gap-4'>
                         <FirstNameField disabled={isGlobalLoading} />
                         <LastNameField disabled={isGlobalLoading} />

diff --git a/packages/ui/src/primitives/card.tsx b/packages/ui/src/primitives/card.tsx
@@ -30,7 +30,7 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
       ref={forwardedRef}
       {...props}
       className={cn(
-        'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -mx-px -mt-px space-y-8 rounded-[inherit] border px-10 py-8 shadow-sm',
+        'bg-gray-surface shadow-gray-a3 border-gray-a6 relative -mx-px -mt-px flex flex-col gap-8 rounded-[inherit] border px-10 py-8 shadow-sm',
         className,
       )}
     >
@@ -47,7 +47,7 @@ export const Header = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTML
     <div
       ref={forwardedRef}
       {...props}
-      className={cn('space-y-space-1 text-center', className)}
+      className={cn('flex flex-col gap-1 text-center', className)}
     >
       {children}
     </div>
@@ -91,7 +91,7 @@ export const Body = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     <div
       ref={forwardedRef}
       {...props}
-      className={cn('space-y-6 rounded-lg', className)}
+      className={cn('flex flex-col gap-6 rounded-lg', className)}
     >
       {children}
     </div>

diff --git a/packages/ui/src/primitives/field.tsx b/packages/ui/src/primitives/field.tsx
@@ -14,7 +14,11 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     <div
       ref={forwardedRef}
       {...props}
-      className={cn('has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]', 'space-y-2', className)}
+      className={cn(
+        'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
+        'flex flex-col gap-2',
+        className,
+      )}
     >
       {children}
     </div>