chore: implement disabled button tooltips

Proof-Of-Humanity · Sep 16, 2020 · c9e40c5 · c9e40c5
1 parent 6589f7e
commit c9e40c5
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 29 deletions.
diff --git a/_pages/profile/[id]/submission-details-card/deadlines/challenge-button.js b/_pages/profile/[id]/submission-details-card/deadlines/challenge-button.js
@@ -148,6 +148,7 @@ export default function ChallengeButton({ request, contract, submissionID }) {
             width: "100%",
           }}
           disabled={disputed && currentReasonIsNotDuplicate}
+          disabledTooltip="Already Challenged"
         >
           Challenge Request
         </Button>

diff --git a/components/button.js b/components/button.js
@@ -2,42 +2,77 @@ import { forwardRef } from "react";
 import { MoonLoader } from "react-spinners";
 import { Box, Button as _Button } from "theme-ui";
 
+import Popup from "./popup";
 import Text from "./text";
 
 const Button = forwardRef(
-  ({ id, sx, type = "button", disabled, children, loading, ...rest }, ref) => (
-    <_Button
-      ref={ref}
-      id={id}
-      sx={{
-        backgroundImage({ colors: { primary, secondary } }) {
-          return `linear-gradient(90deg, ${primary} 0%, ${secondary} 100%)`;
-        },
-        ...sx,
-      }}
-      type={type}
-      disabled={disabled || !children || loading}
-      data-loading={loading}
-      {...rest}
-    >
-      <Text
-        id={id && `${id}-text`}
+  (
+    {
+      id,
+      sx,
+      type = "button",
+      disabled,
+      children,
+      loading,
+      disabledTooltip,
+      ...rest
+    },
+    ref
+  ) => {
+    const button = (
+      <_Button
+        ref={ref}
+        id={id}
         sx={{
-          alignItems: "center",
-          display: "flex",
-          justifyContent: "space-evenly",
-          minWidth: "100px",
+          backgroundImage({ colors: { primary, secondary } }) {
+            return `linear-gradient(90deg, ${primary} 0%, ${secondary} 100%)`;
+          },
+          ...sx,
         }}
+        type={type}
+        disabled={disabled || !children || loading}
+        data-loading={loading}
+        {...rest}
       >
-        {children}
-        {loading && (
-          <Box variant="buttons.primary.spinner">
-            <MoonLoader size={16} />
+        <Text
+          id={id && `${id}-text`}
+          sx={{
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "space-evenly",
+            minWidth: "100px",
+          }}
+        >
+          {children}
+          {loading && (
+            <Box variant="buttons.primary.spinner">
+              <MoonLoader size={16} />
+            </Box>
+          )}
+        </Text>
+      </_Button>
+    );
+    return disabled && disabledTooltip ? (
+      <Popup
+        trigger={
+          <Box
+            sx={{
+              display: "inline-block",
+              height: sx?.height,
+              width: sx?.width,
+            }}
+          >
+            {button}
           </Box>
-        )}
-      </Text>
-    </_Button>
-  )
+        }
+        on={["focus", "hover"]}
+      >
+        {disabledTooltip}
+      </Popup>
+    ) : (
+      button
+    );
+  }
 );
 Button.displayName = "Button";
 export default Button;
diff --git a/components/theme-provider.js b/components/theme-provider.js
@@ -105,6 +105,10 @@ const theme = merge(merge(base, toTheme(typographyTheme)), {
     secondary: {
       backgroundColor: "secondary",
       backgroundImage: "none !important",
+      "&:disabled:not([data-loading=true])": {
+        backgroundColor: "skeleton",
+        backgroundImage: "none !important",
+      },
     },
   },
   cards: {