fix: button micro interaction

novuhq · Jan 7, 2025 · 30d29c2 · 30d29c2
1 parent ed841b8
commit 30d29c2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/apps/dashboard/src/components/primitives/button.tsx b/apps/dashboard/src/components/primitives/button.tsx
@@ -24,7 +24,8 @@ export const buttonVariants = tv({
     ],
     icon: [
       // base
-      'flex size-5 shrink-0 items-center justify-center',
+      'flex size-5 shrink-0 items-center justify-center transition-transform duration-200',
+      '[&.arrow-right-hover-animation]:group-hover:translate-x-0.5',
     ],
   },
   variants: {
@@ -353,17 +354,20 @@ export type ButtonProps = React.ComponentPropsWithoutRef<typeof ButtonRoot> & {
   trailingIcon?: IconType;
 };
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, ...rest }, forwardedRef) => {
-    return (
-      <ButtonRoot ref={forwardedRef} {...rest}>
-        {LeadingIcon && <ButtonIcon as={LeadingIcon} />}
-        <Slottable>{children}</Slottable>
-        {TrailingIcon && <ButtonIcon as={TrailingIcon} />}
-      </ButtonRoot>
-    );
-  }
-);
+const Button = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, children, ...rest }: ButtonProps) => {
+  const isArrowRight = TrailingIcon?.name === 'RiArrowRightSLine';
+
+  return (
+    <ButtonRoot {...rest}>
+      {LeadingIcon && <ButtonIcon as={LeadingIcon} />}
+      <Slottable>{children}</Slottable>
+      {TrailingIcon && (
+        <ButtonIcon className={isArrowRight ? 'arrow-right-hover-animation' : undefined} as={TrailingIcon} />
+      )}
+    </ButtonRoot>
+  );
+};
+
 Button.displayName = 'Button';
 
 function ButtonIcon<T extends React.ElementType>({
@@ -381,4 +385,4 @@ function ButtonIcon<T extends React.ElementType>({
 }
 ButtonIcon.displayName = BUTTON_ICON_NAME;
 
-export { Button, ButtonIcon as ButtonIcon, ButtonRoot as Root };
+export { Button, ButtonIcon, ButtonRoot };
diff --git a/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx b/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx
@@ -361,8 +361,10 @@ export const ConfigureWorkflowForm = (props: ConfigureWorkflowFormProps) => {
               leadingIcon={RiSettingsLine}
               className="flex w-full justify-start gap-1.5 p-1.5 text-xs font-medium"
               type="button"
+              trailingIcon={RiArrowRightSLine}
             >
-              Configure channel preferences <RiArrowRightSLine className="ml-auto h-4 w-4 text-neutral-600" />
+              Configure channel preferences
+              <span className="ml-auto" />
             </Button>
           </Link>
         </SidebarContent>