refactor(ui): Rename preferredSignInIdentifier to preferredIdentifier

Author: nikosdouvlis

.changeset/phone-country-preferred-identifier.md

@@ -3,4 +3,4 @@
 '@clerk/ui': minor
 ---
 
-Add `phoneNumberCountryCode` to `SignIn` component's `initialValues` prop for preselecting the phone dropdown country via ISO 3166 alpha-2 code. Add `preferredSignInIdentifier` to `appearance.options` for selecting which identifier type (email, phone, username) shows first without pre-filling a value.
+Add `phoneNumberCountryCode` to `SignIn` component's `initialValues` prop for preselecting the phone dropdown country via ISO 3166 alpha-2 code. Add `preferredIdentifier` to `appearance.options` for selecting which identifier type (email, phone, username) shows first without pre-filling a value.

packages/ui/src/components/SignIn/SignInStart.tsx

@@ -136,8 +136,8 @@ function SignInStartInternal(): JSX.Element {
       if (mapped) return mapped;
     }
 
-    if (parsedOptions.preferredSignInIdentifier) {
-      const mapped = mapToIdentifierAttribute(parsedOptions.preferredSignInIdentifier);
+    if (parsedOptions.preferredIdentifier) {
+      const mapped = mapToIdentifierAttribute(parsedOptions.preferredIdentifier);
       if (mapped) return mapped;
     }
 

packages/ui/src/components/SignIn/__tests__/SignInStart.test.tsx

@@ -479,13 +479,13 @@ describe('SignInStart', () => {
     });
   });
 
-  describe('preferredSignInIdentifier (appearance option)', () => {
+  describe('preferredIdentifier (appearance option)', () => {
     it('selects phone_number tab when set to phoneNumber', async () => {
       const { wrapper, props } = await createFixtures(f => {
         f.withEmailAddress();
         f.withPhoneNumber();
       });
-      props.setProps({ appearance: { options: { preferredSignInIdentifier: 'phoneNumber' } } });
+      props.setProps({ appearance: { options: { preferredIdentifier: 'phoneNumber' } } });
 
       render(<SignInStart />, { wrapper });
       screen.getByText(/phone number/i);
@@ -496,7 +496,7 @@ describe('SignInStart', () => {
         f.withEmailAddress();
         f.withPhoneNumber();
       });
-      props.setProps({ appearance: { options: { preferredSignInIdentifier: 'emailAddress' } } });
+      props.setProps({ appearance: { options: { preferredIdentifier: 'emailAddress' } } });
 
       render(<SignInStart />, { wrapper });
       screen.getByText(/email address/i);
@@ -506,7 +506,7 @@ describe('SignInStart', () => {
       const { wrapper, props } = await createFixtures(f => {
         f.withEmailAddress();
       });
-      props.setProps({ appearance: { options: { preferredSignInIdentifier: 'phoneNumber' } } });
+      props.setProps({ appearance: { options: { preferredIdentifier: 'phoneNumber' } } });
 
       render(<SignInStart />, { wrapper });
       screen.getByText(/email address/i);
@@ -519,7 +519,7 @@ describe('SignInStart', () => {
       });
       props.setProps({
         initialValues: { phoneNumber: '+306911111111' },
-        appearance: { options: { preferredSignInIdentifier: 'emailAddress' } },
+        appearance: { options: { preferredIdentifier: 'emailAddress' } },
       });
 
       render(<SignInStart />, { wrapper });
@@ -531,7 +531,7 @@ describe('SignInStart', () => {
         f.withEmailAddress();
         f.withUsername();
       });
-      props.setProps({ appearance: { options: { preferredSignInIdentifier: 'username' } } });
+      props.setProps({ appearance: { options: { preferredIdentifier: 'username' } } });
 
       render(<SignInStart />, { wrapper });
       screen.getByText(/email address or username/i);

packages/ui/src/customizables/parseAppearance.ts

@@ -17,8 +17,7 @@ import {
 
 export type ParsedElements = Elements[];
 export type ParsedInternalTheme = InternalTheme;
-export type ParsedOptions = Required<Omit<Options, 'preferredSignInIdentifier'>> &
-  Pick<Options, 'preferredSignInIdentifier'>;
+export type ParsedOptions = Required<Omit<Options, 'preferredIdentifier'>> & Pick<Options, 'preferredIdentifier'>;
 export type ParsedCaptcha = Required<CaptchaAppearanceOptions>;
 
 type PublicAppearanceTopLevelKey = Exclude<
@@ -52,7 +51,7 @@ const defaultOptions: ParsedOptions = {
   shimmer: true,
   animations: true,
   unsafe_disableDevelopmentModeWarnings: false,
-  preferredSignInIdentifier: undefined,
+  preferredIdentifier: undefined,
 };
 
 const defaultCaptchaOptions: ParsedCaptcha = {

packages/ui/src/internal/appearance.ts

@@ -970,7 +970,7 @@ export type Options = {
    *
    * @default undefined
    */
-  preferredSignInIdentifier?: 'emailAddress' | 'phoneNumber' | 'username';
+  preferredIdentifier?: 'emailAddress' | 'phoneNumber' | 'username';
 };
 
 export type CaptchaAppearanceOptions = {