fix(ui): Ensure optional hints are not shown in sign in flow (#3747)

clerk · Jul 18, 2024 · 03bfe90 · 03bfe90
1 parent d6cf9a3
commit 03bfe90
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 13 deletions.
diff --git a/.changeset/weak-geckos-fetch.md b/.changeset/weak-geckos-fetch.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/ui/src/common/email-or-phone-number-field.tsx b/packages/ui/src/common/email-or-phone-number-field.tsx
@@ -13,20 +13,16 @@ export function EmailOrPhoneNumberField({
   labelEmail = 'Email address',
   labelPhoneNumber = 'Phone number',
   locationBasedCountryIso,
-  requiredEmail,
-  requiredPhoneNumber,
   toggleLabelEmail = 'Use email',
   toggleLabelPhoneNumber = 'Use phone',
   ...props
 }: {
   labelEmail?: React.ReactNode;
   labelPhoneNumber?: React.ReactNode;
   locationBasedCountryIso: React.ComponentProps<typeof PhoneNumberField>['locationBasedCountryIso'];
-  requiredEmail?: boolean;
-  requiredPhoneNumber?: boolean;
   toggleLabelEmail?: string;
   toggleLabelPhoneNumber?: string;
-} & Omit<React.ComponentProps<typeof Common.Input>, 'required' | 'type'>) {
+} & Omit<React.ComponentProps<typeof Common.Input>, 'type'>) {
   const [showPhoneNumberField, setShowPhoneNumberField] = React.useState(false);
 
   const toggle = (
@@ -44,7 +40,6 @@ export function EmailOrPhoneNumberField({
       label={labelPhoneNumber}
       locationBasedCountryIso={locationBasedCountryIso}
       alternativeFieldTrigger={toggle}
-      required={requiredPhoneNumber}
       name={name}
       {...props}
     />
@@ -54,7 +49,6 @@ export function EmailOrPhoneNumberField({
       name={name}
       label={labelEmail}
       alternativeFieldTrigger={toggle}
-      required={requiredEmail}
     />
   );
 }
diff --git a/packages/ui/src/common/email-or-username-or-phone-number-field.tsx b/packages/ui/src/common/email-or-username-or-phone-number-field.tsx
@@ -13,16 +13,12 @@ export function EmailOrUsernameOrPhoneNumberField({
   labelEmailOrUsername = 'Email address or username',
   labelPhoneNumber = 'Phone number',
   locationBasedCountryIso,
-  requiredEmailOrUsername,
-  requiredPhoneNumber,
   toggleDescription = 'Toggle between email or username, and phone.',
   ...props
 }: {
   labelEmailOrUsername?: React.ReactNode;
   labelPhoneNumber?: React.ReactNode;
   locationBasedCountryIso: React.ComponentProps<typeof PhoneNumberField>['locationBasedCountryIso'];
-  requiredEmailOrUsername?: boolean;
-  requiredPhoneNumber?: boolean;
   toggleDescription?: string;
 } & Omit<React.ComponentProps<typeof Common.Input>, 'type'>) {
   const [showPhoneNumberField, setShowPhoneNumberField] = React.useState(false);
@@ -44,7 +40,6 @@ export function EmailOrUsernameOrPhoneNumberField({
       name={name}
       locationBasedCountryIso={locationBasedCountryIso}
       alternativeFieldTrigger={toggle}
-      required={requiredPhoneNumber}
       {...props}
     />
   ) : (
@@ -53,7 +48,6 @@ export function EmailOrUsernameOrPhoneNumberField({
       name={name}
       label={labelEmailOrUsername}
       alternativeFieldTrigger={toggle}
-      required={requiredEmailOrUsername}
     />
   );
 }
diff --git a/packages/ui/src/components/sign-in/sign-in.tsx b/packages/ui/src/components/sign-in/sign-in.tsx
@@ -88,13 +88,15 @@ export function SignInComponentLoaded() {
                           <EmailField
                             name='identifier'
                             disabled={isGlobalLoading}
+                            required
                           />
                         ) : null}
 
                         {usernameEnabled && !emailAddressEnabled && !phoneNumberEnabled ? (
                           <UsernameField
                             name='identifier'
                             disabled={isGlobalLoading}
+                            required
                           />
                         ) : null}
 
@@ -103,13 +105,15 @@ export function SignInComponentLoaded() {
                             name='identifier'
                             disabled={isGlobalLoading}
                             locationBasedCountryIso={locationBasedCountryIso}
+                            required
                           />
                         ) : null}
 
                         {emailAddressEnabled && usernameEnabled && !phoneNumberEnabled ? (
                           <EmailOrUsernameField
                             name='identifier'
                             disabled={isGlobalLoading}
+                            required
                           />
                         ) : null}
 
@@ -118,6 +122,7 @@ export function SignInComponentLoaded() {
                             name='identifier'
                             disabled={isGlobalLoading}
                             locationBasedCountryIso={locationBasedCountryIso}
+                            required
                           />
                         ) : null}
 
@@ -126,6 +131,7 @@ export function SignInComponentLoaded() {
                             name='identifier'
                             disabled={isGlobalLoading}
                             locationBasedCountryIso={locationBasedCountryIso}
+                            required
                           />
                         ) : null}
 
@@ -134,6 +140,7 @@ export function SignInComponentLoaded() {
                             name='identifier'
                             disabled={isGlobalLoading}
                             locationBasedCountryIso={locationBasedCountryIso}
+                            required
                           />
                         ) : null}
                       </div>