From acf26ba1e30123963d14bd1340fdba636ee9c137 Mon Sep 17 00:00:00 2001
From: Diego Temkin <65834932+dtemkin1@users.noreply.github.com>
Date: Sat, 7 Dec 2024 03:47:25 -0500
Subject: [PATCH] Fix tooltip in button looking weird in groups (#95)

Noticed UI issue with button inside tooltips on filter groups, fixed
based on
https://github.com/chakra-ui/chakra-ui/issues/9294#issuecomment-2521704953.

Before

![image](https://github.com/user-attachments/assets/5d7204ba-ed59-4657-afa0-47da0e4d8bd1)

After

![image](https://github.com/user-attachments/assets/5e9065bb-5d08-49c4-a6ea-8524778c4d54)
---
 src/components/ClassTable.tsx | 44 +++++++++++++++++------------------
 src/components/ui/button.tsx  | 26 +++++++++++++++++++++
 2 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/components/ClassTable.tsx b/src/components/ClassTable.tsx
index 12fce63..5402dca 100644
--- a/src/components/ClassTable.tsx
+++ b/src/components/ClassTable.tsx
@@ -7,8 +7,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { LuPlus, LuMinus, LuSearch } from "react-icons/lu";
 
 import { InputGroup } from "./ui/input-group";
-import { Tooltip } from "./ui/tooltip";
-import { Button } from "./ui/button";
+import { Button, LabelledButton } from "./ui/button";
 import { useColorMode } from "./ui/color-mode";
 
 import { Class, DARK_IMAGES, Flags, getFlagImg } from "../lib/class";
@@ -222,34 +221,33 @@ function ClassFlags(props: {
       <Group attached colorPalette="orange" wrap="wrap">
         {group.map(([flag, label, image]) => {
           const checked = flags.get(flag);
-          const content = (
+          return image ? (
+            <LabelledButton
+              key={flag}
+              onClick={() => onChange(flag, !checked)}
+              title={label}
+              variant={checked ? "solid" : "outline"}
+              portalled
+            >
+              <Image
+                src={image}
+                alt={label}
+                filter={
+                  colorMode === "dark" && DARK_IMAGES.includes(flag ?? "")
+                    ? "invert()"
+                    : ""
+                }
+              />
+            </LabelledButton>
+          ) : (
             <Button
               key={flag}
               onClick={() => onChange(flag, !checked)}
               variant={checked ? "solid" : "outline"}
             >
-              {image ? (
-                <Image
-                  src={image}
-                  alt={label}
-                  filter={
-                    colorMode === "dark" && DARK_IMAGES.includes(flag ?? "")
-                      ? "invert()"
-                      : ""
-                  }
-                />
-              ) : (
-                label
-              )}
+              {label}
             </Button>
           );
-          return image ? (
-            <Tooltip content={label} key={flag} portalled>
-              {content}
-            </Tooltip>
-          ) : (
-            content
-          );
         })}
       </Group>
     );
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index d8e37bc..ef336e5 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -4,8 +4,10 @@ import {
   Button as ChakraButton,
   Span,
   Spinner,
+  Tooltip as ChakraTooltip,
 } from "@chakra-ui/react";
 import * as React from "react";
+import { Tooltip } from "./tooltip";
 
 interface ButtonLoadingProps {
   loading?: boolean;
@@ -45,3 +47,27 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
   },
 );
+
+export interface LabelledButtonProps extends ButtonProps {
+  showArrow?: boolean;
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  titleProps?: ChakraTooltip.ContentProps;
+  disabled?: boolean;
+}
+
+export const LabelledButton = (props: LabelledButtonProps) => {
+  const { showArrow, title, titleProps, portalled, disabled, ...rest } = props;
+  if (!title) return <Button {...rest} />;
+  return (
+    <Tooltip
+      content={title}
+      contentProps={titleProps}
+      portalled={portalled}
+      showArrow={showArrow}
+      disabled={disabled}
+    >
+      <Button {...rest} />
+    </Tooltip>
+  );
+};