From 4c8138ad4a8c40436bd0449fbd445d46afed1a34 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 14 Nov 2022 19:36:24 -0500
Subject: [PATCH] fix: Some react warnings in dev mode

---
 app/components/Button.tsx                     | 35 +++++++++++--------
 app/scenes/CollectionExport.tsx               |  2 +-
 app/scenes/Document/components/Header.tsx     |  1 -
 .../Document/components/SharePopover.tsx      |  1 -
 app/scenes/Settings/Export.tsx                |  1 -
 5 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index e404217da..6c23ceaa0 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -8,16 +8,16 @@ import ActionButton, {
 } from "~/components/ActionButton";
 
 type RealProps = {
-  fullwidth?: boolean;
-  borderOnHover?: boolean;
+  $fullwidth?: boolean;
+  $borderOnHover?: boolean;
   $neutral?: boolean;
-  danger?: boolean;
-  iconColor?: string;
+  $danger?: boolean;
+  $iconColor?: string;
 };
 
 const RealButton = styled(ActionButton)<RealProps>`
-  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
-  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
+  display: ${(props) => (props.$fullwidth ? "block" : "inline-block")};
+  width: ${(props) => (props.$fullwidth ? "100%" : "auto")};
   margin: 0;
   padding: 0;
   border: 0;
@@ -35,10 +35,10 @@ const RealButton = styled(ActionButton)<RealProps>`
   appearance: none !important;
 
   ${(props) =>
-    !props.borderOnHover &&
+    !props.$borderOnHover &&
     `
       svg {
-        fill: ${props.iconColor || "currentColor"};
+        fill: ${props.$iconColor || "currentColor"};
       }
     `}
 
@@ -69,16 +69,16 @@ const RealButton = styled(ActionButton)<RealProps>`
     background: ${props.theme.buttonNeutralBackground};
     color: ${props.theme.buttonNeutralText};
     box-shadow: ${
-      props.borderOnHover
+      props.$borderOnHover
         ? "none"
         : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
     };
 
     ${
-      props.borderOnHover
+      props.$borderOnHover
         ? ""
         : `svg {
-      fill: ${props.iconColor || "currentColor"};
+      fill: ${props.$iconColor || "currentColor"};
     }`
     }
 
@@ -86,7 +86,7 @@ const RealButton = styled(ActionButton)<RealProps>`
     &:hover:not(:disabled),
     &[aria-expanded="true"] {
       background: ${
-        props.borderOnHover
+        props.$borderOnHover
           ? props.theme.buttonNeutralBackground
           : darken(0.05, props.theme.buttonNeutralBackground)
       };
@@ -106,7 +106,7 @@ const RealButton = styled(ActionButton)<RealProps>`
   `}
 
   ${(props) =>
-    props.danger &&
+    props.$danger &&
     `
       background: ${props.theme.danger};
       color: ${props.theme.white};
@@ -158,7 +158,6 @@ export type Props<T> = ActionButtonProps & {
   disclosure?: boolean;
   neutral?: boolean;
   danger?: boolean;
-  primary?: boolean;
   fullwidth?: boolean;
   as?: T;
   to?: LocationDescriptor;
@@ -181,6 +180,10 @@ const Button = <T extends React.ElementType = "button">(
     neutral,
     action,
     icon,
+    iconColor,
+    borderOnHover,
+    fullwidth,
+    danger,
     ...rest
   } = props;
   const hasText = children !== undefined || value !== undefined;
@@ -193,6 +196,10 @@ const Button = <T extends React.ElementType = "button">(
       ref={ref}
       $neutral={neutral}
       action={action}
+      $danger={danger}
+      $fullwidth={fullwidth}
+      $borderOnHover={borderOnHover}
+      $iconColor={iconColor}
       {...rest}
     >
       <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
diff --git a/app/scenes/CollectionExport.tsx b/app/scenes/CollectionExport.tsx
index b39ebf31d..6bbfd61ff 100644
--- a/app/scenes/CollectionExport.tsx
+++ b/app/scenes/CollectionExport.tsx
@@ -54,7 +54,7 @@ function CollectionExport({ collection, onSubmit }: Props) {
             format. Please visit the Export section in Settings to get the zip.
           </Trans>
         </Text>
-        <Button type="submit" disabled={isLoading} primary>
+        <Button type="submit" disabled={isLoading}>
           {isLoading ? `${t("Exporting")}…` : t("Export collection")}
         </Button>
       </form>
diff --git a/app/scenes/Document/components/Header.tsx b/app/scenes/Document/components/Header.tsx
index 3d43d312b..dc4870367 100644
--- a/app/scenes/Document/components/Header.tsx
+++ b/app/scenes/Document/components/Header.tsx
@@ -291,7 +291,6 @@ function DocumentHeader({
                   to={newDocumentPath(document.collectionId, {
                     templateId: document.id,
                   })}
-                  primary
                 >
                   {t("New from template")}
                 </Button>
diff --git a/app/scenes/Document/components/SharePopover.tsx b/app/scenes/Document/components/SharePopover.tsx
index a93a1e1cc..fa01b6a89 100644
--- a/app/scenes/Document/components/SharePopover.tsx
+++ b/app/scenes/Document/components/SharePopover.tsx
@@ -254,7 +254,6 @@ function SharePopover({
             type="submit"
             disabled={isCopied || (!share && team.sharing)}
             ref={buttonRef}
-            primary
           >
             {t("Copy link")}
           </Button>
diff --git a/app/scenes/Settings/Export.tsx b/app/scenes/Settings/Export.tsx
index 05b8d3907..898acdb2d 100644
--- a/app/scenes/Settings/Export.tsx
+++ b/app/scenes/Settings/Export.tsx
@@ -69,7 +69,6 @@ function Export() {
         type="submit"
         onClick={handleExport}
         disabled={isLoading || isExporting}
-        primary
       >
         {isExporting
           ? t("Export Requested")