fix(iconbutton): fix overriding of default sx prop

* refactor(button)
Set deafault type of Button to button

* perf(usePopup): fix dependency array

* fix(iconbutton): fix overriding of default sx prop

Author: ehsan-github

src/components/button/index.tsx

@@ -31,13 +31,18 @@ const Button: FC<QuartzButtonProps> = ({
   loadingOnly,
   target,
   external,
+  sx,
+  type = 'button',
   ...props
 }: QuartzButtonProps) => {
-  const test = { ...props };
-  test.sx = { ...test.sx, ...styles };
-
   const component = (
-    <RebassButton variant={intent} disabled={disabled || isLoading} {...test}>
+    <RebassButton
+      variant={intent}
+      disabled={disabled || isLoading}
+      sx={{ ...sx, ...styles }}
+      type={type}
+      {...props}
+    >
       {icon && (!loadingOnly || !isLoading) && (
         <GetIcon icon={icon} size="md" color={buttonIntentToColor(intent)} />
       )}

src/components/icon-button/index.tsx

@@ -27,14 +27,15 @@ const IconButton: FC<IconButtonProps> = ({
   href,
   onClickIcon,
   target,
+  sx,
   ...props
 }: IconButtonProps) => {
   let component;
   if (tooltip) {
     component = (
       <Tooltip {...tooltipProps} disabled={disabled} mainText={tooltip}>
         <RebassButton
-          sx={styles(disabled)}
+          sx={{ ...styles(disabled), ...sx }}
           variant={`icon-${intent}`}
           disabled={disabled}
           {...props}

src/utils/usePopup.ts

@@ -7,7 +7,7 @@ const usePopup = (isInitialOpen = false): UsePopup => {
 
   const handleToggle = useCallback(() => {
     setOpen((open) => !open);
-  }, [isOpen, setOpen]);
+  }, [setOpen]);
 
   return [isOpen, handleToggle, setOpen];
 };