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

.changeset/few-news-impress.md

@@ -0,0 +1,7 @@
+---
+'@clerk/astro': patch
+'@clerk/clerk-react': 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/astro-components/unstyled/SignInButton.astro

@@ -1,10 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignInProps } from '@clerk/types'
+import type { SignInButtonProps } from '@clerk/types'
 import type { ButtonProps } from '../../types';
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignInProps & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignInButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
@@ -22,7 +22,7 @@ const {
   signUpFallbackRedirectUrl,
   signUpForceRedirectUrl,
   mode,
-  ...elementProps
+  ...props
 } = Astro.props
 
 const signInOptions = {
@@ -44,20 +44,20 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+    <Tag {...props} data-clerk-unstyled-id={safeId}>
       <slot>Sign in</slot>
     </Tag >
   )
 }
 
-<script is:inline define:vars={{ signInOptions, mode, safeId }}>
+<script is:inline define:vars={{ props, signInOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignIn(signInOptions);
+      return clerk.openSignIn({ ...signInOptions, appearance: props.appearance });
     }
 
     return clerk.redirectToSignIn({

packages/astro/src/astro-components/unstyled/SignOutButton.astro

@@ -4,7 +4,7 @@ import type { SignOutOptions, Without } from '@clerk/types'
 import type { ButtonProps } from '../../types';
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & Without<ButtonProps<Tag>, 'mode'>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & ButtonProps<Tag>>
 
 import { generateSafeId } from '@clerk/astro/internal'
 

packages/astro/src/astro-components/unstyled/SignUpButton.astro

@@ -1,10 +1,10 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignUpProps } from '@clerk/types'
+import type { SignUpButtonProps } from '@clerk/types'
 import type { ButtonProps } from '../../types'
 import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignUpProps & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignUpButtonProps;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
@@ -23,7 +23,7 @@ const {
   signInForceRedirectUrl,
   mode,
   unsafeMetadata,
-  ...elementProps
+  ...props
 } = Astro.props
 
 const signUpOptions = {
@@ -46,20 +46,20 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+    <Tag {...props} data-clerk-unstyled-id={safeId}>
       <slot>Sign up</slot>
     </Tag >
   )
 }
 
-<script is:inline define:vars={{ signUpOptions, mode, safeId }}>
+<script is:inline define:vars={{ props, signUpOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
   btn.addEventListener("click", () => {
     const clerk = window.Clerk
 
     if (mode === 'modal') {
-      return clerk.openSignUp(signUpOptions);
+      return clerk.openSignUp({ ...signUpOptions, appearance: props.appearance });
     }
 
     return clerk.redirectToSignUp({

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/astro/src/types.ts

@@ -82,5 +82,4 @@ export type ButtonProps<Tag> = {
    */
   as: Tag;
   asChild?: boolean;
-  mode?: 'redirect' | 'modal';
 };

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({