Merge pull request #13707 from ethereum/button-props

refactor: accept size and variant as direct props

Author: pettinarip

src/components/ui/buttons/Button.tsx

@@ -108,22 +108,37 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-type ButtonLinkProps = Omit<LinkProps, "onClick"> & {
-  buttonProps?: ButtonProps
-  customEventOptions?: MatomoEventOptions
-}
+type ButtonLinkProps = Omit<LinkProps, "onClick"> &
+  Pick<ButtonProps, "size" | "variant" | "isSecondary"> & {
+    buttonProps?: Omit<ButtonProps, "size" | "variant">
+    customEventOptions?: MatomoEventOptions
+  }
 
 const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
   (
-    { buttonProps, customEventOptions, children, className, ...linkProps },
+    {
+      size,
+      variant,
+      isSecondary,
+      buttonProps,
+      customEventOptions,
+      children,
+      className,
+      ...linkProps
+    },
     ref
   ) => {
-    const { size, variant } = buttonProps || {}
     const handleClick = () => {
       customEventOptions && trackCustomEvent(customEventOptions)
     }
     return (
-      <Button asChild size={size} variant={variant} {...buttonProps}>
+      <Button
+        asChild
+        size={size}
+        variant={variant}
+        isSecondary={isSecondary}
+        {...buttonProps}
+      >
         <BaseLink
           ref={ref}
           className={cn("no-underline hover:no-underline", className)}

src/pages/what-is-ethereum.tsx

@@ -650,13 +650,7 @@ const WhatIsEthereumPage = ({
                     <ButtonLink href="/smart-contracts/">
                       {t("page-what-is-ethereum-more-on-smart-contracts")}
                     </ButtonLink>
-                    <ButtonLink
-                      href="/dapps/"
-                      buttonProps={{
-                        variant: "outline",
-                        isSecondary: true,
-                      }}
-                    >
+                    <ButtonLink href="/dapps/" variant="outline" isSecondary>
                       {t("page-what-is-ethereum-explore-dapps")}
                     </ButtonLink>
                   </ButtonRow>
@@ -679,13 +673,7 @@ const WhatIsEthereumPage = ({
                     <ButtonLink href="/eth/">
                       {t("page-what-is-ethereum-what-is-ether")}
                     </ButtonLink>
-                    <ButtonLink
-                      href="/get-eth/"
-                      buttonProps={{
-                        variant: "outline",
-                        isSecondary: true,
-                      }}
-                    >
+                    <ButtonLink href="/get-eth/" variant="outline" isSecondary>
                       {t("page-what-is-ethereum-get-eth")}
                     </ButtonLink>
                   </ButtonRow>
@@ -714,10 +702,8 @@ const WhatIsEthereumPage = ({
                     </ButtonLink>
                     <ButtonLink
                       href="/roadmap/merge/"
-                      buttonProps={{
-                        variant: "outline",
-                        isSecondary: true,
-                      }}
+                      variant="outline"
+                      isSecondary
                     >
                       {t("page-what-is-ethereum-the-merge-update")}
                     </ButtonLink>