refactor(web): support tooltip on icon button [VIZ-1401]

web/src/beta/features/PluginPlayground/Code/index.tsx

@@ -1,5 +1,5 @@
 import { OnMount } from "@monaco-editor/react";
-import { Button, CodeInput } from "@reearth/beta/lib/reearth-ui";
+import { Button, CodeInput, IconButton } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
 import { FC, useCallback, useState } from "react";
@@ -104,11 +104,12 @@ const Code: FC<Props> = ({
     <>
       <Wrapper>
         <Header>
-          <Button
+          <IconButton
             icon="playRight"
-            iconButton
             tooltipText={t("Run Code")}
             placement="top"
+            size="large"
+            hasBorder
             onClick={executeCode}
           />
           <Button

web/src/beta/features/PluginPlayground/Plugins/index.tsx

@@ -1,4 +1,4 @@
-import { Collapse, Typography, Button } from "@reearth/beta/lib/reearth-ui";
+import { Collapse, Typography, IconButton } from "@reearth/beta/lib/reearth-ui";
 import { EntryItem } from "@reearth/beta/ui/components";
 import { useT } from "@reearth/services/i18n";
 import { styled } from "@reearth/services/theme";
@@ -90,32 +90,36 @@ const Plugins: FC<Props> = ({
   return (
     <Wrapper>
       <Actions>
-        <Button
+        <IconButton
           icon="addFile"
-          iconButton
           tooltipText={t("Add File")}
           placement="top"
+          size="large"
+          hasBorder
           onClick={() => setIsAddingNewFile(true)}
         />
-        <Button
+        <IconButton
           icon="import"
-          iconButton
           tooltipText={t("Import Plugin")}
           placement="top"
+          size="large"
+          hasBorder
           onClick={handlePluginImport}
         />
-        <Button
+        <IconButton
           icon="export"
-          iconButton
           tooltipText={t("Export Plugin")}
           placement="top"
+          size="large"
+          hasBorder
           onClick={handlePluginDownload}
         />
-        <Button
+        <IconButton
           icon="paperPlaneTilt"
-          iconButton
           tooltipText={t("Share Plugin")}
           placement="top"
+          size="large"
+          hasBorder
           onClick={handlePluginShare}
         />
       </Actions>

web/src/beta/lib/reearth-ui/components/IconButton/index.tsx

@@ -2,6 +2,7 @@ import { styled } from "@reearth/services/theme";
 import { FC, MouseEvent, useCallback } from "react";
 
 import { IconName, Icon, IconProps } from "../Icon";
+import Tooltip from "../Tooltip";
 
 export type IconButtonProps = {
   icon: IconName;
@@ -40,8 +41,7 @@ export const IconButton: FC<IconButtonProps> = ({
     },
     [disabled, stopPropagationOnClick, onClick]
   );
-
-  return (
+  const iconButtonComponent = (
     <StyledButton
       className={className}
       disabled={disabled}
@@ -52,15 +52,21 @@ export const IconButton: FC<IconButtonProps> = ({
       onClick={handleClick}
       hasBorder={hasBorder}
     >
-      <Icon
-        icon={icon}
-        color={iconColor}
-        offset={12}
-        placement={placement}
-        tooltipText={tooltipText}
-      />
+      <Icon icon={icon} color={iconColor} />
     </StyledButton>
   );
+
+  return tooltipText ? (
+    <Tooltip
+      type="custom"
+      text={tooltipText}
+      placement={placement}
+      offset={5}
+      triggerComponent={iconButtonComponent}
+    />
+  ) : (
+    iconButtonComponent
+  );
 };
 
 const StyledButton = styled("button")<{

web/src/beta/lib/reearth-ui/components/Popup/index.tsx

@@ -93,7 +93,7 @@ const Content = forwardRef<
               ref={context.arrowRef}
               context={floatingContext}
               style={{
-                fill: theme.bg[1]
+                fill: theme.bg[2]
               }}
               width={8}
               height={6}

web/src/beta/lib/reearth-ui/components/Tooltip/index.tsx

@@ -7,7 +7,7 @@ import {
 } from "@reearth/beta/lib/reearth-ui";
 import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
-import { FC, useMemo } from "react";
+import { FC, ReactNode, useMemo } from "react";
 
 type TooltipProps = {
   type: "experimental" | "custom";
@@ -16,6 +16,7 @@ type TooltipProps = {
   offset?: number;
   iconColor?: string;
   placement?: Placement;
+  triggerComponent?: ReactNode; 
 };
 
 const Tooltip: FC<TooltipProps> = ({
@@ -24,7 +25,8 @@ const Tooltip: FC<TooltipProps> = ({
   text,
   offset = 6,
   iconColor,
-  placement
+  placement,
+  triggerComponent
 }) => {
   const theme = useTheme();
   const t = useT();
@@ -44,22 +46,26 @@ const Tooltip: FC<TooltipProps> = ({
     [type, text, t]
   );
 
+  const trigger = useMemo(() => {
+    if (triggerComponent) return triggerComponent;
+    if (tooltipIcon) {
+      return (
+        <IconWrapper>
+          <Icon
+            icon={tooltipIcon}
+            color={type === "experimental" ? theme.warning.weak : iconColor}
+          />
+        </IconWrapper>
+      );
+    }
+    return <Typography size="footnote">TIPS</Typography>; // TODO: support tigger as text
+  }, [triggerComponent, tooltipIcon, type, theme.warning.weak, iconColor]);
+
   return (
     <Popup
       offset={offset}
       placement={placement}
-      trigger={
-        tooltipIcon ? (
-          <IconWrapper>
-            <Icon
-              icon={tooltipIcon}
-              color={type === "experimental" ? theme.warning.weak : iconColor}
-            />
-          </IconWrapper>
-        ) : (
-          "TIPS" // TODO: support tigger as text
-        )
-      }
+      trigger={trigger}
       triggerOnHover
       tooltip
     >
@@ -90,9 +96,9 @@ const TipPanel = styled("div")(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   gap: theme.spacing.small,
-  padding: `${theme.spacing.small}px`,
-  background: theme.bg[1],
+  padding: `${theme.spacing.smallest}px ${theme.spacing.small}px`,
+  background: theme.bg[2],
   color: theme.content.main,
-  boxShadow: theme.shadow.card,
+  boxShadow: theme.shadow.tooltip,
   borderRadius: theme.radius.normal
 }));

web/src/services/theme/reearthTheme/common/shadow.ts

@@ -2,7 +2,8 @@ const shadow = {
   input: "0px 2px 2px 0px rgba(0, 0, 0, 0.25) inset",
   button: "0px 2px 2px 0px rgba(0, 0, 0, 0.25)",
   card: "2px 2px 2px 0px rgba(0, 0, 0, 0.25)",
-  popup: "4px 4px 4px 0px rgba(0, 0, 0, 0.25)"
+  popup: "4px 4px 4px 0px rgba(0, 0, 0, 0.25)",
+  tooltip: "4px 6px 12px 0px rgba(0, 0, 0, 0.60)"
 } as const;
 
 export type ShadowType = typeof shadow;