fix(clerk-js): Fix button font size for alternative methods on <SignI…

…n/> (#2997)
clerk · Mar 14, 2024 · 94bbdf7 · 94bbdf7
1 parent 2684f1d
commit 94bbdf7
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/great-seals-punch.md b/.changeset/great-seals-punch.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix font size inconsistencies when selecting method to sign in.
diff --git a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
@@ -88,6 +88,7 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
                       textElementDescriptor={descriptors.alternativeMethodsBlockButtonText}
                       arrowElementDescriptor={descriptors.alternativeMethodsBlockButtonArrow}
                       key={i}
+                      textVariant='buttonLarge'
                       isDisabled={card.isLoading}
                       onClick={() => onFactorSelected(factor)}
                     />

diff --git a/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx b/packages/clerk-js/src/ui/elements/ArrowBlockButton.tsx
@@ -22,6 +22,7 @@ type ArrowBlockButtonProps = PropsOfComponent<typeof Button> & {
   spinnerElementDescriptor?: ElementDescriptor;
   spinnerElementId?: ElementId;
   textLocalizationKey?: LocalizationKey | string;
+  textVariant?: PropsOfComponent<typeof Text>['variant'];
 };
 
 export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockButtonProps>((props, ref) => {
@@ -43,6 +44,7 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
     textLocalizationKey,
     childrenSx,
     badge,
+    textVariant = 'buttonSmall',
     ...rest
   } = props;
 
@@ -116,7 +118,7 @@ export const ArrowBlockButton = React.forwardRef<HTMLButtonElement, ArrowBlockBu
           elementId={textElementId}
           as='span'
           truncate
-          variant='buttonSmall'
+          variant={textVariant}
           localizationKey={textLocalizationKey}
         >
           {children}