fix(clerk-js): Add descriptor on the button arrow (#2395)

clerk · Dec 18, 2023 · d261e3a · d261e3a
1 parent b599a78
commit d261e3a
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/tidy-buttons-pump.md b/.changeset/tidy-buttons-pump.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -282,6 +282,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'badge',
   'notificationBadge',
   'button',
+  'buttonArrowIcon',
   'providerIcon',
   'spinner',
   // Decide if we want to keep the keys as camel cased in HTML as well,

diff --git a/packages/clerk-js/src/ui/elements/Form.tsx b/packages/clerk-js/src/ui/elements/Form.tsx
@@ -79,6 +79,7 @@ const FormSubmit = (props: PropsOfComponent<typeof Button>) => {
     <Button
       elementDescriptor={descriptors.formButtonPrimary}
       block
+      hasArrow
       textVariant='buttonLarge'
       isLoading={isLoading}
       isDisabled={isDisabled}

diff --git a/packages/clerk-js/src/ui/primitives/Button.tsx b/packages/clerk-js/src/ui/primitives/Button.tsx
@@ -211,12 +211,14 @@ const ButtonChildrenWithArrow = ({ children }: PropsWithChildren) => {
   return (
     <Flex
       align='center'
-      gap={2}
+      as='span'
     >
       {children}
       <Icon
+        elementDescriptor={descriptors.buttonArrowIcon}
         icon={ArrowRightButtonIcon}
         sx={t => ({
+          marginLeft: t.space.$2,
           width: t.sizes.$2x5,
           height: t.sizes.$2x5,
           opacity: t.opacity.$inactive,

diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
@@ -401,6 +401,7 @@ export type ElementsConfig = {
   badge: WithOptions<'primary' | 'actionRequired'>;
   notificationBadge: WithOptions;
   button: WithOptions<never, LoadingState>;
+  buttonArrowIcon: WithOptions;
   providerIcon: WithOptions<OAuthProvider | Web3Provider>;
   spinner: WithOptions;
 };