From c2252b541c00a7500fb690a96c0f7441bc3461dd Mon Sep 17 00:00:00 2001 From: LekoArts Date: Fri, 10 May 2024 10:13:14 +0200 Subject: [PATCH 1/4] fix(elements): Types for step component --- .../elements/src/react/sign-in/choose-strategy.tsx | 8 ++++---- .../src/react/sign-in/{step => }/reset-password.tsx | 0 .../elements/src/react/sign-in/{step => }/step.tsx | 12 ++++++------ packages/elements/src/react/sign-in/step/index.ts | 3 --- .../elements/src/react/sign-in/verifications.tsx | 2 +- 5 files changed, 11 insertions(+), 14 deletions(-) rename packages/elements/src/react/sign-in/{step => }/reset-password.tsx (100%) rename packages/elements/src/react/sign-in/{step => }/step.tsx (88%) delete mode 100644 packages/elements/src/react/sign-in/step/index.ts diff --git a/packages/elements/src/react/sign-in/choose-strategy.tsx b/packages/elements/src/react/sign-in/choose-strategy.tsx index 6b9969e98ad..20e5ecfde9b 100644 --- a/packages/elements/src/react/sign-in/choose-strategy.tsx +++ b/packages/elements/src/react/sign-in/choose-strategy.tsx @@ -7,6 +7,7 @@ import type { ActorRefFrom } from 'xstate'; import type { TSignInFirstFactorMachine } from '~/internals/machines/sign-in'; import { SignInRouterSystemId } from '~/internals/machines/sign-in'; +import type { FormProps } from '../common'; import { useActiveTags } from '../hooks'; import { ActiveTagsMode } from '../hooks/use-active-tags.hook'; import { createContextForDomValidation } from '../utils/create-context-for-dom-validation'; @@ -32,9 +33,8 @@ export function factorHasLocalStrategy(factor: SignInFactor | undefined | null): // --------------------------------- COMPONENTS --------------------------------- -export type SignInChooseStrategyProps = { - children: React.ReactNode; -}; +export type SignInChooseStrategyProps = FormProps; +export type SignInForgotPasswordProps = FormProps; export const SignInChooseStrategyCtx = createContextForDomValidation('SignInChooseStrategyCtx'); @@ -45,7 +45,7 @@ export function SignInChooseStrategy({ children }: SignInChooseStrategyProps) { return activeState ? {children} : null; } -export function SignInForgotPassword({ children }: SignInChooseStrategyProps) { +export function SignInForgotPassword({ children }: SignInForgotPasswordProps) { const routerRef = SignInRouterCtx.useActorRef(); const activeState = useActiveTags(routerRef, ['route:first-factor', 'route:forgot-password'], ActiveTagsMode.all); 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'); From 70898185dc630e1e072662b011e65ba068730804 Mon Sep 17 00:00:00 2001 From: LekoArts Date: Fri, 10 May 2024 10:22:32 +0200 Subject: [PATCH 2/4] chore(repo): Add changeset --- .changeset/smooth-lobsters-rhyme.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/smooth-lobsters-rhyme.md diff --git a/.changeset/smooth-lobsters-rhyme.md b/.changeset/smooth-lobsters-rhyme.md new file mode 100644 index 00000000000..aa7b61ede02 --- /dev/null +++ b/.changeset/smooth-lobsters-rhyme.md @@ -0,0 +1,5 @@ +--- +'@clerk/elements': patch +--- + +Correctly set allowed props types for `` and ``. You should be able to pass all valid `
` props now. Previously only `children: React.ReactNode` was allowed. From c2562ad74c57586548389b4211efbbcc77e4c8fa Mon Sep 17 00:00:00 2001 From: LekoArts Date: Fri, 10 May 2024 11:09:44 +0200 Subject: [PATCH 3/4] fix(elements): Adjust markup --- .../src/react/sign-in/choose-strategy.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/elements/src/react/sign-in/choose-strategy.tsx b/packages/elements/src/react/sign-in/choose-strategy.tsx index 20e5ecfde9b..e4b166816e6 100644 --- a/packages/elements/src/react/sign-in/choose-strategy.tsx +++ b/packages/elements/src/react/sign-in/choose-strategy.tsx @@ -6,6 +6,7 @@ import type { ActorRefFrom } from 'xstate'; import type { TSignInFirstFactorMachine } from '~/internals/machines/sign-in'; import { SignInRouterSystemId } from '~/internals/machines/sign-in'; +import { Form } from '~/react/common/form'; import type { FormProps } from '../common'; import { useActiveTags } from '../hooks'; @@ -38,18 +39,26 @@ export type SignInForgotPasswordProps = FormProps; 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 }: SignInForgotPasswordProps) { +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'; From 5fb886111459bdf9408ba9e5082b49f0b1bbeb4f Mon Sep 17 00:00:00 2001 From: LekoArts Date: Fri, 10 May 2024 15:51:48 +0200 Subject: [PATCH 4/4] fix(elements): Make it a div --- .changeset/smooth-lobsters-rhyme.md | 6 +- .../app/sign-in/[[...sign-in]]/page.tsx | 114 +++++++++--------- .../src/react/sign-in/choose-strategy.tsx | 10 +- 3 files changed, 66 insertions(+), 64 deletions(-) diff --git a/.changeset/smooth-lobsters-rhyme.md b/.changeset/smooth-lobsters-rhyme.md index aa7b61ede02..79ec5265c27 100644 --- a/.changeset/smooth-lobsters-rhyme.md +++ b/.changeset/smooth-lobsters-rhyme.md @@ -1,5 +1,7 @@ --- -'@clerk/elements': patch +'@clerk/elements': minor --- -Correctly set allowed props types for `` and ``. You should be able to pass all valid `
` props now. Previously only `children: React.ReactNode` was allowed. +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 e4b166816e6..7582e530208 100644 --- a/packages/elements/src/react/sign-in/choose-strategy.tsx +++ b/packages/elements/src/react/sign-in/choose-strategy.tsx @@ -6,9 +6,7 @@ import type { ActorRefFrom } from 'xstate'; import type { TSignInFirstFactorMachine } from '~/internals/machines/sign-in'; import { SignInRouterSystemId } from '~/internals/machines/sign-in'; -import { Form } from '~/react/common/form'; -import type { FormProps } from '../common'; import { useActiveTags } from '../hooks'; import { ActiveTagsMode } from '../hooks/use-active-tags.hook'; import { createContextForDomValidation } from '../utils/create-context-for-dom-validation'; @@ -34,8 +32,8 @@ export function factorHasLocalStrategy(factor: SignInFactor | undefined | null): // --------------------------------- COMPONENTS --------------------------------- -export type SignInChooseStrategyProps = FormProps; -export type SignInForgotPasswordProps = FormProps; +export type SignInChooseStrategyProps = React.HTMLAttributes; +export type SignInForgotPasswordProps = React.HTMLAttributes; export const SignInChooseStrategyCtx = createContextForDomValidation('SignInChooseStrategyCtx'); @@ -45,7 +43,7 @@ export function SignInChooseStrategy({ children, ...props }: SignInChooseStrateg return activeState ? ( - {children} +
{children}
 ) : null; } @@ -56,7 +54,7 @@ export function SignInForgotPassword({ children, ...props }: SignInForgotPasswor return activeState ? ( -
{children}
+
{children}
 ) : null; }