Skip to content

Commit 8cb4aa0

Browse files
LekoArtsLekoArts
authored
fix(elements): Types for step component (#3359)
* fix(elements): Types for step component * chore(repo): Add changeset * fix(elements): Adjust markup * fix(elements): Make it a div
1 parent 48985ab commit 8cb4aa0

7 files changed

Lines changed: 86 additions & 73 deletions

File tree

‎.changeset/smooth-lobsters-rhyme.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@clerk/elements': minor
3+
---
4+
5+
With this change `<SignIn.Step name="choose-strategy">` and `<SignIn.Step name="forgot-password">` now render a `<div>`. This aligns them with all other `<Step>` components (which render an element, mostly `<form>`).
6+
7+
**Required action:** Update your markup to account for the new `<div>`, e.g. by removing an element you previously added yourself and moving props like `className` to the `<Step>` now. This change can be considered a breaking change so check if you're affected.

‎packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx‎

Lines changed: 58 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -203,74 +203,76 @@ export default function SignInPage() {
203203
</div>
204204
</SignIn.Step>
205205

206-
<SignIn.Step name='choose-strategy'>
207-
<div className='flex flex-col items-center gap-6 w-96'>
208-
<H3>CHOOSE STRATEGY:</H3>
206+
<SignIn.Step
207+
name='choose-strategy'
208+
className='flex flex-col items-center gap-6 w-96'
209+
>
210+
<H3>CHOOSE STRATEGY:</H3>
209211

210-
<CustomProvider provider='github'>Continue with GitHub</CustomProvider>
211-
<CustomProvider provider='google'>Continue with Google</CustomProvider>
212-
<CustomProvider provider='metamask'>Continue with Metamask</CustomProvider>
212+
<CustomProvider provider='github'>Continue with GitHub</CustomProvider>
213+
<CustomProvider provider='google'>Continue with Google</CustomProvider>
214+
<CustomProvider provider='metamask'>Continue with Metamask</CustomProvider>
213215

214-
<SignIn.SupportedStrategy
215-
asChild
216-
name='password'
217-
>
218-
<Button>Password</Button>
219-
</SignIn.SupportedStrategy>
216+
<SignIn.SupportedStrategy
217+
asChild
218+
name='password'
219+
>
220+
<Button>Password</Button>
221+
</SignIn.SupportedStrategy>
220222

221-
<SignIn.SupportedStrategy
222-
asChild
223-
name='phone_code'
224-
>
225-
<Button>Send a code to your phone</Button>
226-
</SignIn.SupportedStrategy>
223+
<SignIn.SupportedStrategy
224+
asChild
225+
name='phone_code'
226+
>
227+
<Button>Send a code to your phone</Button>
228+
</SignIn.SupportedStrategy>
227229

228-
<SignIn.SupportedStrategy
229-
asChild
230-
name='email_code'
231-
>
232-
<Button>Send a code to your email</Button>
233-
</SignIn.SupportedStrategy>
230+
<SignIn.SupportedStrategy
231+
asChild
232+
name='email_code'
233+
>
234+
<Button>Send a code to your email</Button>
235+
</SignIn.SupportedStrategy>
234236

235-
<SignIn.Action
236-
asChild
237-
navigate='previous'
238-
>
239-
<TextButton>Go back</TextButton>
240-
</SignIn.Action>
241-
</div>
237+
<SignIn.Action
238+
asChild
239+
navigate='previous'
240+
>
241+
<TextButton>Go back</TextButton>
242+
</SignIn.Action>
242243
</SignIn.Step>
243244

244-
<SignIn.Step name='forgot-password'>
245-
<div className='flex flex-col items-center gap-6 w-96'>
246-
<H3>FORGOT PASSWORD:</H3>
245+
<SignIn.Step
246+
name='forgot-password'
247+
className='flex flex-col items-center gap-6 w-96'
248+
>
249+
<H3>FORGOT PASSWORD:</H3>
247250

248-
<SignIn.SupportedStrategy
249-
asChild
250-
name='reset_password_email_code'
251-
>
252-
<Button>Reset your password via Email</Button>
253-
</SignIn.SupportedStrategy>
251+
<SignIn.SupportedStrategy
252+
asChild
253+
name='reset_password_email_code'
254+
>
255+
<Button>Reset your password via Email</Button>
256+
</SignIn.SupportedStrategy>
254257

255-
<SignIn.SupportedStrategy
256-
asChild
257-
name='reset_password_phone_code'
258-
>
259-
<Button>Reset your password via Phone</Button>
260-
</SignIn.SupportedStrategy>
258+
<SignIn.SupportedStrategy
259+
asChild
260+
name='reset_password_phone_code'
261+
>
262+
<Button>Reset your password via Phone</Button>
263+
</SignIn.SupportedStrategy>
261264

262-
<p>Or</p>
265+
<p>Or</p>
263266

264-
<CustomProvider provider='github'>Continue with GitHub</CustomProvider>
265-
<CustomProvider provider='google'>Continue with Google</CustomProvider>
267+
<CustomProvider provider='github'>Continue with GitHub</CustomProvider>
268+
<CustomProvider provider='google'>Continue with Google</CustomProvider>
266269

267-
<SignIn.Action
268-
asChild
269-
navigate='previous'
270-
>
271-
<TextButton>Go back</TextButton>
272-
</SignIn.Action>
273-
</div>
270+
<SignIn.Action
271+
asChild
272+
navigate='previous'
273+
>
274+
<TextButton>Go back</TextButton>
275+
</SignIn.Action>
274276
</SignIn.Step>
275277

276278
<SignIn.Step name='verifications'>

‎packages/elements/src/react/sign-in/choose-strategy.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,31 @@ export function factorHasLocalStrategy(factor: SignInFactor | undefined | null):
3232

3333
// --------------------------------- COMPONENTS ---------------------------------
3434

35-
export type SignInChooseStrategyProps = {
36-
children: React.ReactNode;
37-
};
35+
export type SignInChooseStrategyProps = React.HTMLAttributes<HTMLDivElement>;
36+
export type SignInForgotPasswordProps = React.HTMLAttributes<HTMLDivElement>;
3837

3938
export const SignInChooseStrategyCtx = createContextForDomValidation('SignInChooseStrategyCtx');
4039

41-
export function SignInChooseStrategy({ children }: SignInChooseStrategyProps) {
40+
export function SignInChooseStrategy({ children, ...props }: SignInChooseStrategyProps) {
4241
const routerRef = SignInRouterCtx.useActorRef();
4342
const activeState = useActiveTags(routerRef, ['route:first-factor', 'route:choose-strategy'], ActiveTagsMode.all);
4443

45-
return activeState ? <SignInChooseStrategyCtx.Provider>{children}</SignInChooseStrategyCtx.Provider> : null;
44+
return activeState ? (
45+
<SignInChooseStrategyCtx.Provider>
46+
<div {...props}>{children}</div>
47+
</SignInChooseStrategyCtx.Provider>
48+
) : null;
4649
}
4750

48-
export function SignInForgotPassword({ children }: SignInChooseStrategyProps) {
51+
export function SignInForgotPassword({ children, ...props }: SignInForgotPasswordProps) {
4952
const routerRef = SignInRouterCtx.useActorRef();
5053
const activeState = useActiveTags(routerRef, ['route:first-factor', 'route:forgot-password'], ActiveTagsMode.all);
5154

52-
return activeState ? <SignInChooseStrategyCtx.Provider>{children}</SignInChooseStrategyCtx.Provider> : null;
55+
return activeState ? (
56+
<SignInChooseStrategyCtx.Provider>
57+
<div {...props}>{children}</div>
58+
</SignInChooseStrategyCtx.Provider>
59+
) : null;
5360
}
5461

5562
const SUPPORTED_STRATEGY_NAME = 'SignInSupportedStrategy';

packages/elements/src/react/sign-in/step/reset-password.tsx renamed to packages/elements/src/react/sign-in/reset-password.tsx

File renamed without changes.

packages/elements/src/react/sign-in/step/step.tsx renamed to packages/elements/src/react/sign-in/step.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { eventComponentMounted } from '@clerk/shared/telemetry';
33

44
import { ClerkElementsRuntimeError } from '~/internals/errors';
55

6-
import type { SignInChooseStrategyProps } from '../choose-strategy';
7-
import { SignInChooseStrategy, SignInForgotPassword } from '../choose-strategy';
8-
import type { SignInStartProps } from '../start';
9-
import { SignInStart } from '../start';
10-
import type { SignInVerificationsProps } from '../verifications';
11-
import { SignInVerifications } from '../verifications';
6+
import type { SignInChooseStrategyProps } from './choose-strategy';
7+
import { SignInChooseStrategy, SignInForgotPassword } from './choose-strategy';
128
import type { SignInResetPasswordProps } from './reset-password';
139
import { SignInResetPassword } from './reset-password';
10+
import type { SignInStartProps } from './start';
11+
import { SignInStart } from './start';
12+
import type { SignInVerificationsProps } from './verifications';
13+
import { SignInVerifications } from './verifications';
1414

1515
export const SIGN_IN_STEPS = {
1616
start: 'start',

‎packages/elements/src/react/sign-in/step/index.ts‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/elements/src/react/sign-in/verifications.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
} from '~/react/sign-in/context';
1919
import { createContextFromActorRef } from '~/react/utils/create-context-from-actor-ref';
2020

21-
export type SignInVerificationsProps = { preferred?: ClerkSignInStrategy; children: React.ReactNode } & FormProps;
21+
export type SignInVerificationsProps = { preferred?: ClerkSignInStrategy } & FormProps;
2222

2323
export const SignInFirstFactorCtx = createContextFromActorRef<TSignInFirstFactorMachine>('SignInFirstFactorCtx');
2424
export const SignInSecondFactorCtx = createContextFromActorRef<TSignInSecondFactorMachine>('SignInSecondFactorCtx');

0 commit comments

Comments
 (0)