Skip to content

fix(elements): Types for step component #3359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brkalow merged 5 commits into from
May 10, 2024
Merged

fix(elements): Types for step component #3359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c2252b5
fix(elements): Types for step component
LekoArts May 10, 2024
7089818
chore(repo): Add changeset
LekoArts May 10, 2024
c2562ad
fix(elements): Adjust markup
LekoArts May 10, 2024
5fb8861
fix(elements): Make it a div
LekoArts May 10, 2024
a25f2eb
Merge branch 'main' into elements/fix-props-types
LekoArts May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/smooth-lobsters-rhyme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@clerk/elements': minor
---

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>`).

**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.
114 changes: 58 additions & 56 deletions packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,74 +203,76 @@ export default function SignInPage() {
</div>
</SignIn.Step>

<SignIn.Step name='choose-strategy'>
<div className='flex flex-col items-center gap-6 w-96'>
<H3>CHOOSE STRATEGY:</H3>
<SignIn.Step
name='choose-strategy'
className='flex flex-col items-center gap-6 w-96'
>
<H3>CHOOSE STRATEGY:</H3>

<CustomProvider provider='github'>Continue with GitHub</CustomProvider>
<CustomProvider provider='google'>Continue with Google</CustomProvider>
<CustomProvider provider='metamask'>Continue with Metamask</CustomProvider>
<CustomProvider provider='github'>Continue with GitHub</CustomProvider>
<CustomProvider provider='google'>Continue with Google</CustomProvider>
<CustomProvider provider='metamask'>Continue with Metamask</CustomProvider>

<SignIn.SupportedStrategy
asChild
name='password'
>
<Button>Password</Button>
</SignIn.SupportedStrategy>
<SignIn.SupportedStrategy
asChild
name='password'
>
<Button>Password</Button>
</SignIn.SupportedStrategy>

<SignIn.SupportedStrategy
asChild
name='phone_code'
>
<Button>Send a code to your phone</Button>
</SignIn.SupportedStrategy>
<SignIn.SupportedStrategy
asChild
name='phone_code'
>
<Button>Send a code to your phone</Button>
</SignIn.SupportedStrategy>

<SignIn.SupportedStrategy
asChild
name='email_code'
>
<Button>Send a code to your email</Button>
</SignIn.SupportedStrategy>
<SignIn.SupportedStrategy
asChild
name='email_code'
>
<Button>Send a code to your email</Button>
</SignIn.SupportedStrategy>

<SignIn.Action
asChild
navigate='previous'
>
<TextButton>Go back</TextButton>
</SignIn.Action>
</div>
<SignIn.Action
asChild
navigate='previous'
>
<TextButton>Go back</TextButton>
</SignIn.Action>
</SignIn.Step>

<SignIn.Step name='forgot-password'>
<div className='flex flex-col items-center gap-6 w-96'>
<H3>FORGOT PASSWORD:</H3>
<SignIn.Step
name='forgot-password'
className='flex flex-col items-center gap-6 w-96'
>
<H3>FORGOT PASSWORD:</H3>

<SignIn.SupportedStrategy
asChild
name='reset_password_email_code'
>
<Button>Reset your password via Email</Button>
</SignIn.SupportedStrategy>
<SignIn.SupportedStrategy
asChild
name='reset_password_email_code'
>
<Button>Reset your password via Email</Button>
</SignIn.SupportedStrategy>

<SignIn.SupportedStrategy
asChild
name='reset_password_phone_code'
>
<Button>Reset your password via Phone</Button>
</SignIn.SupportedStrategy>
<SignIn.SupportedStrategy
asChild
name='reset_password_phone_code'
>
<Button>Reset your password via Phone</Button>
</SignIn.SupportedStrategy>

<p>Or</p>
<p>Or</p>

<CustomProvider provider='github'>Continue with GitHub</CustomProvider>
<CustomProvider provider='google'>Continue with Google</CustomProvider>
<CustomProvider provider='github'>Continue with GitHub</CustomProvider>
<CustomProvider provider='google'>Continue with Google</CustomProvider>

<SignIn.Action
asChild
navigate='previous'
>
<TextButton>Go back</TextButton>
</SignIn.Action>
</div>
<SignIn.Action
asChild
navigate='previous'
>
<TextButton>Go back</TextButton>
</SignIn.Action>
</SignIn.Step>

<SignIn.Step name='verifications'>
Expand Down
21 changes: 14 additions & 7 deletions packages/elements/src/react/sign-in/choose-strategy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,24 +32,31 @@ export function factorHasLocalStrategy(factor: SignInFactor | undefined | null):

// --------------------------------- COMPONENTS ---------------------------------

export type SignInChooseStrategyProps = {
children: React.ReactNode;
};
export type SignInChooseStrategyProps = React.HTMLAttributes<HTMLDivElement>;
export type SignInForgotPasswordProps = React.HTMLAttributes<HTMLDivElement>;

export const SignInChooseStrategyCtx = createContextForDomValidation('SignInChooseStrategyCtx');

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

return activeState ? <SignInChooseStrategyCtx.Provider>{children}</SignInChooseStrategyCtx.Provider> : null;
return activeState ? (
<SignInChooseStrategyCtx.Provider>
<div {...props}>{children}</div>
</SignInChooseStrategyCtx.Provider>
) : null;
}

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

return activeState ? <SignInChooseStrategyCtx.Provider>{children}</SignInChooseStrategyCtx.Provider> : null;
return activeState ? (
<SignInChooseStrategyCtx.Provider>
<div {...props}>{children}</div>
</SignInChooseStrategyCtx.Provider>
) : null;
}

const SUPPORTED_STRATEGY_NAME = 'SignInSupportedStrategy';
Expand Down
0 ...src/react/sign-in/step/reset-password.tsx → ...ents/src/react/sign-in/reset-password.tsx
View file
Open in desktop
File renamed without changes.
12 changes: 6 additions & 6 deletions .../elements/src/react/sign-in/step/step.tsx → packages/elements/src/react/sign-in/step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import { eventComponentMounted } from '@clerk/shared/telemetry';

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

import type { SignInChooseStrategyProps } from '../choose-strategy';
import { SignInChooseStrategy, SignInForgotPassword } from '../choose-strategy';
import type { SignInStartProps } from '../start';
import { SignInStart } from '../start';
import type { SignInVerificationsProps } from '../verifications';
import { SignInVerifications } from '../verifications';
import type { SignInChooseStrategyProps } from './choose-strategy';
import { SignInChooseStrategy, SignInForgotPassword } from './choose-strategy';
import type { SignInResetPasswordProps } from './reset-password';
import { SignInResetPassword } from './reset-password';
import type { SignInStartProps } from './start';
import { SignInStart } from './start';
import type { SignInVerificationsProps } from './verifications';
import { SignInVerifications } from './verifications';

export const SIGN_IN_STEPS = {
start: 'start',
Expand Down
3 changes: 0 additions & 3 deletions packages/elements/src/react/sign-in/step/index.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/elements/src/react/sign-in/verifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
} from '~/react/sign-in/context';
import { createContextFromActorRef } from '~/react/utils/create-context-from-actor-ref';

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

@LekoArts LekoArts May 10, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FormProps already marks children as required


export const SignInFirstFactorCtx = createContextFromActorRef<TSignInFirstFactorMachine>('SignInFirstFactorCtx');
export const SignInSecondFactorCtx = createContextFromActorRef<TSignInSecondFactorMachine>('SignInSecondFactorCtx');
Expand Down