diff --git a/.changeset/smooth-lobsters-rhyme.md b/.changeset/smooth-lobsters-rhyme.md new file mode 100644 index 00000000000..79ec5265c27 --- /dev/null +++ b/.changeset/smooth-lobsters-rhyme.md @@ -0,0 +1,7 @@ +--- +'@clerk/elements': minor +--- + +With this change `` and `` now render a `
`. This aligns them with all other `` components (which render an element, mostly `
`). + +**Required action:** Update your markup to account for the new `
`, e.g. by removing an element you previously added yourself and moving props like `className` to the `` now. This change can be considered a breaking change so check if you're affected. diff --git a/packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx b/packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx index 7061ff69a76..dfaafd36a21 100644 --- a/packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx +++ b/packages/elements/examples/nextjs/app/sign-in/[[...sign-in]]/page.tsx @@ -203,74 +203,76 @@ export default function SignInPage() {
- -
-

CHOOSE STRATEGY:

+ +

CHOOSE STRATEGY:

- Continue with GitHub - Continue with Google - Continue with Metamask + Continue with GitHub + Continue with Google + Continue with Metamask - - - + + + - - - + + + - - - + + + - - Go back - -
+ + Go back + - -
-

FORGOT PASSWORD:

+ +

FORGOT PASSWORD:

- - - + + + - - - + + + -

Or

+

Or

- Continue with GitHub - Continue with Google + Continue with GitHub + Continue with Google - - Go back - -
+ + Go back + diff --git a/packages/elements/src/react/sign-in/choose-strategy.tsx b/packages/elements/src/react/sign-in/choose-strategy.tsx index 6b9969e98ad..7582e530208 100644 --- a/packages/elements/src/react/sign-in/choose-strategy.tsx +++ b/packages/elements/src/react/sign-in/choose-strategy.tsx @@ -32,24 +32,31 @@ export function factorHasLocalStrategy(factor: SignInFactor | undefined | null): // --------------------------------- COMPONENTS --------------------------------- -export type SignInChooseStrategyProps = { - children: React.ReactNode; -}; +export type SignInChooseStrategyProps = React.HTMLAttributes; +export type SignInForgotPasswordProps = React.HTMLAttributes; 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 ? {children} : null; + return activeState ? ( + +
{children}
+ + ) : 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 ? {children} : null; + return activeState ? ( + +
{children}
+ + ) : null; } const SUPPORTED_STRATEGY_NAME = 'SignInSupportedStrategy'; diff --git a/packages/elements/src/react/sign-in/step/reset-password.tsx b/packages/elements/src/react/sign-in/reset-password.tsx similarity index 100% rename from packages/elements/src/react/sign-in/step/reset-password.tsx rename to packages/elements/src/react/sign-in/reset-password.tsx diff --git a/packages/elements/src/react/sign-in/step/step.tsx b/packages/elements/src/react/sign-in/step.tsx similarity index 88% rename from packages/elements/src/react/sign-in/step/step.tsx rename to packages/elements/src/react/sign-in/step.tsx index 46222131d40..36e04cbe7f1 100644 --- a/packages/elements/src/react/sign-in/step/step.tsx +++ b/packages/elements/src/react/sign-in/step.tsx @@ -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', diff --git a/packages/elements/src/react/sign-in/step/index.ts b/packages/elements/src/react/sign-in/step/index.ts deleted file mode 100644 index 7975825249a..00000000000 --- a/packages/elements/src/react/sign-in/step/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { SignInStep, SIGN_IN_STEPS } from './step'; - -export type { SignInStepProps, TSignInStep } from './step'; diff --git a/packages/elements/src/react/sign-in/verifications.tsx b/packages/elements/src/react/sign-in/verifications.tsx index df952147abf..a2682fa2b6e 100644 --- a/packages/elements/src/react/sign-in/verifications.tsx +++ b/packages/elements/src/react/sign-in/verifications.tsx @@ -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; export const SignInFirstFactorCtx = createContextFromActorRef('SignInFirstFactorCtx'); export const SignInSecondFactorCtx = createContextFromActorRef('SignInSecondFactorCtx');