Skip to content

Commit a198d14

Browse files
joe-bellalexcarpenter
joe-bell
and
alexcarpenter
authored
fix(ui): Remove space-y-* classes to mitigate duplicate spacing (clerk#3559)
Co-authored-by: Alex Carpenter <im.alexcarpenter@gmail.com>
1 parent 4b7044f commit a198d14

5 files changed

Lines changed: 12 additions & 6 deletions

File tree

‎.changeset/five-forks-arrive.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/ui/src/components/sign-in/sign-in.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export function SignInComponent() {
6363
})}
6464
</Connection.Root>
6565
<Seperator>or</Seperator>
66-
<div className='space-y-4'>
66+
<div className='flex flex-col gap-4'>
6767
{/* @ts-ignore Expected https://github.com/clerk/javascript/blob/12f78491d6b10f2be63891f8a7f76fc6acf37c00/packages/clerk-js/src/ui/elements/PhoneInput/PhoneInput.tsx#L248-L249 */}
6868
<PhoneNumberField locationBasedCountryIso={clerk.__internal_country} />
6969
<EmailField disabled={isGlobalLoading} />

‎packages/ui/src/components/sign-up/sign-up.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export function SignUpComponent() {
6767
</Connection.Root>
6868

6969
<Seperator>or</Seperator>
70-
<div className='space-y-4'>
70+
<div className='flex flex-col gap-4'>
7171
<div className='flex gap-4'>
7272
<FirstNameField disabled={isGlobalLoading} />
7373
<LastNameField disabled={isGlobalLoading} />

‎packages/ui/src/primitives/card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const Content = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
3030
ref={forwardedRef}
3131
{...props}
3232
className={cn(
33-
'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',
33+
'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',
3434
className,
3535
)}
3636
>
@@ -47,7 +47,7 @@ export const Header = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTML
4747
<div
4848
ref={forwardedRef}
4949
{...props}
50-
className={cn('space-y-space-1 text-center', className)}
50+
className={cn('flex flex-col gap-1 text-center', className)}
5151
>
5252
{children}
5353
</div>
@@ -91,7 +91,7 @@ export const Body = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
9191
<div
9292
ref={forwardedRef}
9393
{...props}
94-
className={cn('space-y-6 rounded-lg', className)}
94+
className={cn('flex flex-col gap-6 rounded-lg', className)}
9595
>
9696
{children}
9797
</div>

‎packages/ui/src/primitives/field.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,11 @@ export const Root = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
1414
<div
1515
ref={forwardedRef}
1616
{...props}
17-
className={cn('has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]', 'space-y-2', className)}
17+
className={cn(
18+
'has-[[data-field-input][disabled]]:[--cl-field-label-opacity:0.5]',
19+
'flex flex-col gap-2',
20+
className,
21+
)}
1822
>
1923
{children}
2024
</div>

0 commit comments

Comments
 (0)