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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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;

@LekoArtsLekoArtsMay 10, 2024

Copy link
Copy Markdown
ContributorAuthor

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
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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;
@LekoArtsLekoArtsMay 10, 2024

Copy link


Copy Markdown

ContributorAuthor
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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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;
@LekoArtsLekoArtsMay 10, 2024

Copy link


Copy Markdown

ContributorAuthor
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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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;
@LekoArtsLekoArtsMay 10, 2024

Copy link


Copy Markdown

ContributorAuthor
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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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;
@LekoArtsLekoArtsMay 10, 2024

Copy link


Copy Markdown

ContributorAuthor
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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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;
@LekoArtsLekoArtsMay 10, 2024

Copy link


Copy Markdown

ContributorAuthor
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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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;
@LekoArtsLekoArtsMay 10, 2024

Copy link


Copy Markdown

ContributorAuthor
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

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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;
@LekoArtsLekoArtsMay 10, 2024

Copy link


Copy Markdown

ContributorAuthor
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