feat(clerk-react,astro,vue): Add appearance option to modal components

.changeset/few-news-impress.md

@@ -0,0 +1,8 @@
+---
+'@clerk/astro': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+'@clerk/vue': patch
+---
+
+Add the ability to specify an appearance for modal component usages.

.changeset/giant-fans-pretend.md

@@ -0,0 +1,5 @@
+---
+'@clerk/types': minor
+---
+
+Extract common button component props.

packages/astro/src/react/SignInButton.tsx

@@ -1,46 +1,48 @@
-import type { SignInProps } from '@clerk/types';
+import type { SignInButtonProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
-import type { SignInButtonProps } from './types';
 import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk, type WithClerkProp } from './utils';
 
 export type { SignInButtonProps };
 
-export const SignInButton = withClerk(({ clerk, children, ...props }: WithClerkProp<SignInButtonProps>) => {
-  const { signUpFallbackRedirectUrl, forceRedirectUrl, fallbackRedirectUrl, signUpForceRedirectUrl, mode, ...rest } =
-    props;
-  children = normalizeWithDefaultValue(children, 'Sign in');
-  const child = assertSingleChild(children)('SignInButton');
-
-  const clickHandler = () => {
-    const opts: SignInProps = {
-      forceRedirectUrl,
-      fallbackRedirectUrl,
-      signUpFallbackRedirectUrl,
-      signUpForceRedirectUrl,
+export const SignInButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignInButtonProps>>) => {
+    const { signUpFallbackRedirectUrl, forceRedirectUrl, fallbackRedirectUrl, signUpForceRedirectUrl, mode, ...rest } =
+      props;
+    children = normalizeWithDefaultValue(children, 'Sign in');
+    const child = assertSingleChild(children)('SignInButton');
+
+    const clickHandler = () => {
+      const opts: SignInProps = {
+        forceRedirectUrl,
+        fallbackRedirectUrl,
+        signUpFallbackRedirectUrl,
+        signUpForceRedirectUrl,
+      };
+
+      if (!clerk) {
+        return;
+      }
+
+      if (mode === 'modal') {
+        return clerk.openSignIn({ ...opts, appearance: props.appearance });
+      }
+      return clerk.redirectToSignIn({
+        ...opts,
+        signInFallbackRedirectUrl: fallbackRedirectUrl,
+        signInForceRedirectUrl: forceRedirectUrl,
+      });
     };
 
-    if (!clerk) {
-      return;
-    }
-
-    if (mode === 'modal') {
-      return clerk.openSignIn(opts);
-    }
-    return clerk.redirectToSignIn({
-      ...opts,
-      signInFallbackRedirectUrl: fallbackRedirectUrl,
-      signInForceRedirectUrl: forceRedirectUrl,
-    });
-  };
-
-  const wrappedChildClickHandler: React.MouseEventHandler = async e => {
-    if (child && typeof child === 'object' && 'props' in child) {
-      await safeExecute(child.props.onClick)(e);
-    }
-    return clickHandler();
-  };
-
-  const childProps = { ...rest, onClick: wrappedChildClickHandler };
-  return React.cloneElement(child as React.ReactElement<unknown>, childProps);
-}, 'SignInButton');
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  'SignInButton',
+);

packages/astro/src/react/SignUpButton.tsx

@@ -1,56 +1,58 @@
-import type { SignUpProps } from '@clerk/types';
+import type { SignUpButtonProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
-import type { SignUpButtonProps } from './types';
 import { assertSingleChild, normalizeWithDefaultValue, safeExecute, withClerk, type WithClerkProp } from './utils';
 
 export type { SignUpButtonProps };
 
-export const SignUpButton = withClerk(({ clerk, children, ...props }: WithClerkProp<SignUpButtonProps>) => {
-  const {
-    fallbackRedirectUrl,
-    forceRedirectUrl,
-    signInFallbackRedirectUrl,
-    signInForceRedirectUrl,
-    mode,
-    unsafeMetadata,
-    ...rest
-  } = props;
-
-  children = normalizeWithDefaultValue(children, 'Sign up');
-  const child = assertSingleChild(children)('SignUpButton');
-
-  const clickHandler = () => {
-    const opts: SignUpProps = {
+export const SignUpButton = withClerk(
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignUpButtonProps>>) => {
+    const {
       fallbackRedirectUrl,
       forceRedirectUrl,
       signInFallbackRedirectUrl,
       signInForceRedirectUrl,
+      mode,
       unsafeMetadata,
+      ...rest
+    } = props;
+
+    children = normalizeWithDefaultValue(children, 'Sign up');
+    const child = assertSingleChild(children)('SignUpButton');
+
+    const clickHandler = () => {
+      const opts: SignUpProps = {
+        fallbackRedirectUrl,
+        forceRedirectUrl,
+        signInFallbackRedirectUrl,
+        signInForceRedirectUrl,
+        unsafeMetadata,
+      };
+
+      if (!clerk) {
+        return;
+      }
+
+      if (mode === 'modal') {
+        return clerk.openSignUp({ ...opts, appearance: props.appearance });
+      }
+
+      return clerk.redirectToSignUp({
+        ...opts,
+        signUpFallbackRedirectUrl: fallbackRedirectUrl,
+        signUpForceRedirectUrl: forceRedirectUrl,
+      });
     };
 
-    if (!clerk) {
-      return;
-    }
-
-    if (mode === 'modal') {
-      return clerk.openSignUp(opts);
-    }
-
-    return clerk.redirectToSignUp({
-      ...opts,
-      signUpFallbackRedirectUrl: fallbackRedirectUrl,
-      signUpForceRedirectUrl: forceRedirectUrl,
-    });
-  };
-
-  const wrappedChildClickHandler: React.MouseEventHandler = async e => {
-    if (child && typeof child === 'object' && 'props' in child) {
-      await safeExecute(child.props.onClick)(e);
-    }
-    return clickHandler();
-  };
-
-  const childProps = { ...rest, onClick: wrappedChildClickHandler };
-  return React.cloneElement(child as React.ReactElement<unknown>, childProps);
-}, 'SignUpButton');
+    const wrappedChildClickHandler: React.MouseEventHandler = async e => {
+      if (child && typeof child === 'object' && 'props' in child) {
+        await safeExecute(child.props.onClick)(e);
+      }
+      return clickHandler();
+    };
+
+    const childProps = { ...rest, onClick: wrappedChildClickHandler };
+    return React.cloneElement(child as React.ReactElement<unknown>, childProps);
+  },
+  'SignUpButton',
+);

packages/astro/src/react/types.ts

@@ -1,23 +1,9 @@
-import type { SignInProps, SignUpProps } from '@clerk/types';
+import type { SignInButtonProps as _SignInButtonProps, SignUpButtonProps as _SignUpButtonProps } from '@clerk/types';
 
-// TODO-SHARED: Duplicate from @clerk/clerk-react
-type ButtonProps = {
-  mode?: 'redirect' | 'modal';
+export type SignInButtonProps = _SignInButtonProps & {
   children?: React.ReactNode;
 };
 
-// TODO-SHARED: Duplicate from @clerk/clerk-react
-export type SignInButtonProps = ButtonProps &
-  Pick<
-    SignInProps,
-    'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signUpForceRedirectUrl' | 'signUpFallbackRedirectUrl'
-  >;
-
-// TODO-SHARED: Duplicate from @clerk/clerk-react
-export type SignUpButtonProps = {
-  unsafeMetadata?: SignUpUnsafeMetadata;
-} & ButtonProps &
-  Pick<
-    SignUpProps,
-    'fallbackRedirectUrl' | 'forceRedirectUrl' | 'signInForceRedirectUrl' | 'signInFallbackRedirectUrl'
-  >;
+export type SignUpButtonProps = _SignUpButtonProps & {
+  children?: React.ReactNode;
+};

packages/react/src/components/SignInButton.tsx

@@ -1,12 +1,12 @@
-import type { SignInProps } from '@clerk/types';
+import type { SignInButtonProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
-import type { SignInButtonProps, WithClerkProp } from '../types';
+import type { WithClerkProp } from '../types';
 import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
 import { withClerk } from './withClerk';
 
 export const SignInButton = withClerk(
-  ({ clerk, children, ...props }: WithClerkProp<SignInButtonProps>) => {
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignInButtonProps>>) => {
     const {
       signUpFallbackRedirectUrl,
       forceRedirectUrl,
@@ -31,7 +31,7 @@ export const SignInButton = withClerk(
       };
 
       if (mode === 'modal') {
-        return clerk.openSignIn(opts);
+        return clerk.openSignIn({ ...opts, appearance: props.appearance });
       }
       return clerk.redirectToSignIn({
         ...opts,

packages/react/src/components/SignUpButton.tsx

@@ -1,12 +1,12 @@
-import type { SignUpProps } from '@clerk/types';
+import type { SignUpButtonProps, SignUpProps } from '@clerk/types';
 import React from 'react';
 
-import type { SignUpButtonProps, WithClerkProp } from '../types';
+import type { WithClerkProp } from '../types';
 import { assertSingleChild, normalizeWithDefaultValue, safeExecute } from '../utils';
 import { withClerk } from './withClerk';
 
 export const SignUpButton = withClerk(
-  ({ clerk, children, ...props }: WithClerkProp<SignUpButtonProps>) => {
+  ({ clerk, children, ...props }: WithClerkProp<React.PropsWithChildren<SignUpButtonProps>>) => {
     const {
       fallbackRedirectUrl,
       forceRedirectUrl,
@@ -32,7 +32,7 @@ export const SignUpButton = withClerk(
       };
 
       if (mode === 'modal') {
-        return clerk.openSignUp(opts);
+        return clerk.openSignUp({ ...opts, appearance: props.appearance });
       }
 
       return clerk.redirectToSignUp({

packages/react/src/types.ts

@@ -7,9 +7,7 @@ import type {
   LoadedClerk,
   MultiDomainAndOrProxy,
   RedirectUrlProp,
-  SignInProps,
   SignInRedirectOptions,
-  SignUpProps,
   SignUpRedirectOptions,
   Without,
 } from '@clerk/types';
@@ -109,35 +107,10 @@ export type ClerkProp =
   | undefined
   | null;
 
-type ButtonProps = {
+export type SignInWithMetamaskButtonProps = {
   mode?: 'redirect' | 'modal';
   children?: React.ReactNode;
-};
-
-export type SignInButtonProps = ButtonProps &
-  Pick<
-    SignInProps,
-    | 'fallbackRedirectUrl'
-    | 'forceRedirectUrl'
-    | 'signUpForceRedirectUrl'
-    | 'signUpFallbackRedirectUrl'
-    | 'initialValues'
-    | 'withSignUp'
-  >;
-
-export type SignUpButtonProps = {
-  unsafeMetadata?: SignUpUnsafeMetadata;
-} & ButtonProps &
-  Pick<
-    SignUpProps,
-    | 'fallbackRedirectUrl'
-    | 'forceRedirectUrl'
-    | 'signInForceRedirectUrl'
-    | 'signInFallbackRedirectUrl'
-    | 'initialValues'
-  >;
-
-export type SignInWithMetamaskButtonProps = ButtonProps & RedirectUrlProp;
+} & RedirectUrlProp;
 
 export type RedirectToSignInProps = SignInRedirectOptions;
 export type RedirectToSignUpProps = SignUpRedirectOptions;

packages/types/src/clerk.ts

@@ -1388,6 +1388,40 @@ export interface HandleEmailLinkVerificationParams {
   onVerifiedOnOtherDevice?: () => void;
 }
 
+type ButtonPropsModal<T extends SignInProps | SignUpProps> = {
+  mode: 'modal';
+  appearance?: T['appearance'];
+};
+
+type ButtonPropsRedirect = {
+  mode?: 'redirect';
+};
+
+type ButtonProps<T extends SignInProps | SignUpProps> = ButtonPropsModal<T> | ButtonPropsRedirect;
+
+export type SignInButtonProps = ButtonProps<SignInProps> &
+  Pick<
+    SignInProps,
+    | 'fallbackRedirectUrl'
+    | 'forceRedirectUrl'
+    | 'signUpForceRedirectUrl'
+    | 'signUpFallbackRedirectUrl'
+    | 'initialValues'
+    | 'withSignUp'
+  >;
+
+export type SignUpButtonProps = {
+  unsafeMetadata?: SignUpUnsafeMetadata;
+} & ButtonProps<SignUpProps> &
+  Pick<
+    SignUpProps,
+    | 'fallbackRedirectUrl'
+    | 'forceRedirectUrl'
+    | 'signInForceRedirectUrl'
+    | 'signInFallbackRedirectUrl'
+    | 'initialValues'
+  >;
+
 export type CreateOrganizationInvitationParams = {
   emailAddress: string;
   role: OrganizationCustomRoleKey;