Convert Tooltip to Popover for Mobile

tone-row · Jul 11, 2023 · 26e59a6 · 26e59a6
1 parent 18e988d
commit 26e59a6
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 69 deletions.
diff --git a/app/src/components/LearnSyntaxDialog.module.css b/app/src/components/LearnSyntaxDialog.module.css
@@ -22,6 +22,7 @@
   overflow: hidden;
   max-height: calc(100vh - 20%);
   grid-template-rows: auto minmax(0, 1fr) auto;
+  z-index: 51;
 }
 
 .close {

diff --git a/app/src/components/LearnSyntaxDialog.tsx b/app/src/components/LearnSyntaxDialog.tsx
@@ -89,14 +89,14 @@ export function LearnSyntaxDialog() {
             id="syntax-help-header"
           >
             <Box
-              as={Dialog.Title}
+              as={"header"}
               content="normal start"
               items="center normal"
               gap={3}
               flow="column"
             >
               <TextAlignRight size={24} weight="bold" />
-              <SectionTitle>
+              <SectionTitle isUnderline={false}>
                 <Trans>Learn Syntax</Trans>
               </SectionTitle>
             </Box>

diff --git a/app/src/components/MightLoseSponsorTrigger.tsx b/app/src/components/MightLoseSponsorTrigger.tsx
@@ -1,11 +1,11 @@
 import { t, Trans } from "@lingui/macro";
-import * as Tooltip from "@radix-ui/react-tooltip";
+import * as Popover from "@radix-ui/react-popover";
 import { Warning } from "phosphor-react";
 import { useContext } from "react";
 
 import { useIsLocalChart, useIsValidSponsor } from "../lib/hooks";
 import { useRenameDialogStore } from "../lib/renameDialogStore";
-import { IconOutlineButton, tooltipContentProps } from "../ui/Shared";
+import { IconButton2, popoverContentProps } from "../ui/Shared";
 import { AppContext } from "./AppContext";
 
 export function MightLoseSponsorTrigger() {
@@ -16,17 +16,17 @@ export function MightLoseSponsorTrigger() {
   if (!isValidSponsor) return null;
   if (!isLocal) return null;
   return (
-    <Tooltip.Root>
-      <Tooltip.TooltipTrigger asChild>
-        <IconOutlineButton>
-          <Warning size={20} />
-        </IconOutlineButton>
-      </Tooltip.TooltipTrigger>
-      <Tooltip.TooltipPortal>
-        <Tooltip.TooltipContent {...tooltipContentProps}>
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <IconButton2>
+          <Warning size={16} />
+        </IconButton2>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content {...popoverContentProps}>
           <div className="grid gap-3 justify-items-start max-w-sm">
             <p className="text-xs opacity-80 leading-normal">
-              {t`Heads up! Before you clear your cache, remember that this document isn't saved in the cloud.`}
+              {t`This is a temporary chart, it will be deleted when you clear your browser cache.`}
             </p>
             <button
               className="font-bold text-xs text-blue-500 hover:underline block"
@@ -38,11 +38,11 @@ export function MightLoseSponsorTrigger() {
               }}
               data-testid="convert-to-hosted"
             >
-              <Trans>Convert to hosted chart?</Trans>
+              <Trans>Convert this to a hosted chart?</Trans>
             </button>
           </div>
-        </Tooltip.TooltipContent>
-      </Tooltip.TooltipPortal>
-    </Tooltip.Root>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
 }
diff --git a/app/src/components/MightLoseWarning.tsx b/app/src/components/MightLoseWarning.tsx
@@ -1,27 +1,27 @@
 import { Trans } from "@lingui/macro";
-import * as Tooltip from "@radix-ui/react-tooltip";
+import * as Popover from "@radix-ui/react-popover";
 import { Warning } from "phosphor-react";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
 
 import { useIsValidCustomer } from "../lib/hooks";
 import { track } from "../lib/track";
-import { IconOutlineButton, tooltipContentProps } from "../ui/Shared";
+import { IconButton2, popoverContentProps } from "../ui/Shared";
 import { AppContext } from "./AppContext";
 export function MightLoseWarning() {
   const isValidCustomer = useIsValidCustomer();
   const { customerIsLoading } = useContext(AppContext);
   const showMightLoseWarning = !isValidCustomer && !customerIsLoading;
   if (!showMightLoseWarning) return null;
   return (
-    <Tooltip.Root>
-      <Tooltip.TooltipTrigger asChild>
-        <IconOutlineButton>
-          <Warning size={20} />
-        </IconOutlineButton>
-      </Tooltip.TooltipTrigger>
-      <Tooltip.TooltipPortal>
-        <Tooltip.TooltipContent {...tooltipContentProps}>
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <IconButton2>
+          <Warning size={16} />
+        </IconButton2>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content {...popoverContentProps}>
           <p className="text-xs opacity-80 leading-normal max-w-md">
             <Trans>
               This document is only saved on this computer. If you want a way to
@@ -36,8 +36,8 @@ export function MightLoseWarning() {
           >
             <Trans>Learn More</Trans>
           </Link>
-        </Tooltip.TooltipContent>
-      </Tooltip.TooltipPortal>
-    </Tooltip.Root>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
 }
diff --git a/app/src/components/OnlyInEnglish.tsx b/app/src/components/OnlyInEnglish.tsx
@@ -1,25 +1,25 @@
 import { Trans } from "@lingui/macro";
-import * as Tooltip from "@radix-ui/react-tooltip";
+import * as Popover from "@radix-ui/react-popover";
 import { Translate } from "phosphor-react";
 
-import { IconOutlineButton, tooltipContentProps } from "../ui/Shared";
+import { IconButton2, popoverContentProps } from "../ui/Shared";
 
 /**
  * A warning message that a particular page is only available in English.
  */
 export function OnlyInEnglish() {
   return (
-    <Tooltip.Root>
-      <Tooltip.TooltipTrigger asChild>
-        <IconOutlineButton>
-          <Translate size={20} />
-        </IconOutlineButton>
-      </Tooltip.TooltipTrigger>
-      <Tooltip.TooltipPortal>
-        <Tooltip.TooltipContent {...tooltipContentProps}>
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <IconButton2>
+          <Translate size={16} />
+        </IconButton2>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content {...popoverContentProps}>
           <Trans>Sorry! This page is only available in English.</Trans>
-        </Tooltip.TooltipContent>
-      </Tooltip.TooltipPortal>
-    </Tooltip.Root>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
 }
diff --git a/app/src/components/Tabs/EditStyleTab.tsx b/app/src/components/Tabs/EditStyleTab.tsx
@@ -1,6 +1,6 @@
 import { Trans } from "@lingui/macro";
 import Editor from "@monaco-editor/react";
-import * as Tooltip from "@radix-ui/react-tooltip";
+import * as Popover from "@radix-ui/react-popover";
 import produce from "immer";
 import { Info } from "phosphor-react";
 import postcssParser from "prettier/parser-postcss";
@@ -11,11 +11,7 @@ import { DISCORD_URL } from "../../lib/constants";
 import { useLightOrDarkMode } from "../../lib/hooks";
 import { useDoc } from "../../lib/useDoc";
 import { useUnmountStore } from "../../lib/useUnmountStore";
-import {
-  Button2,
-  IconOutlineButton,
-  tooltipContentProps,
-} from "../../ui/Shared";
+import { Button2, IconButton2, popoverContentProps } from "../../ui/Shared";
 import { ThemePicker } from "../ThemePicker";
 
 export function EditStyleTab() {
@@ -167,14 +163,14 @@ function KeyboardKey({ children }: { children: ReactNode }) {
 
 function InfoButton() {
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <IconOutlineButton>
-          <Info size={20} />
-        </IconOutlineButton>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipContentProps}>
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <IconButton2>
+          <Info size={16} />
+        </IconButton2>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content {...popoverContentProps}>
           <p className="text-neutral-600 dark:text-neutral-300 text-xs leading-normal max-w-md">
             <Trans>
               Customize your theme by editing the <span>Cytoscape CSS</span>{" "}
@@ -200,8 +196,8 @@ function InfoButton() {
               if you get stuck.
             </Trans>
           </p>
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
 }
diff --git a/app/src/ui/Shared.tsx b/app/src/ui/Shared.tsx
@@ -1,3 +1,4 @@
+import { PopoverContentProps } from "@radix-ui/react-popover";
 import { TooltipContentProps } from "@radix-ui/react-tooltip";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import { HandWaving, Warning } from "phosphor-react";
@@ -183,6 +184,7 @@ export const Button2 = forwardRef<
       size = "sm",
       leftIcon,
       rightIcon,
+      isLoading,
       className = "",
       ...props
     },
@@ -196,8 +198,8 @@ export const Button2 = forwardRef<
       ${pSize[size]} ${focusClasses} ${className}
       `}
         {...props}
-        disabled={props.disabled || props.isLoading}
-        data-is-loading={props.isLoading}
+        disabled={props.disabled || isLoading}
+        data-is-loading={isLoading}
         ref={ref}
       >
         {leftIcon && (
@@ -213,7 +215,7 @@ export const Button2 = forwardRef<
             {rightIcon}
           </span>
         )}
-        {props.isLoading && (
+        {isLoading && (
           <Spinner
             r={8}
             s={2}
@@ -293,11 +295,13 @@ export const IconOutlineButton = forwardRef<
 
 IconOutlineButton.displayName = "IconOutlineButton";
 
+const tooltipPopoverContentShared =
+  "bg-background border border-neutral-400 dark:border-neutral-600 text-xs dark:bg-neutral-800 rounded-md px-4 py-3 leading-none shadow-sm";
+
 export const tooltipContentProps: TooltipContentProps = {
   side: "bottom",
   sideOffset: 10,
-  className:
-    "bg-background border border-neutral-400 dark:border-neutral-600 text-xs dark:bg-neutral-800 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade select-none rounded-md px-4 py-3 leading-none shadow-sm will-change-[transform,opacity]",
+  className: `${tooltipPopoverContentShared} data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade select-none will-change-[transform,opacity]`,
 };
 
 const { side: _side, ...tooltipContentPropsAutoSide } = tooltipContentProps;
@@ -321,3 +325,9 @@ export function Tooltip2({
     </RadixTooltip.Root>
   );
 }
+
+export const popoverContentClasses = `${tooltipPopoverContentShared} will-change-[transform,opacity] z-50 data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade`;
+export const popoverContentProps: PopoverContentProps = {
+  sideOffset: 10,
+  className: popoverContentClasses,
+};
diff --git a/app/src/ui/Typography.tsx b/app/src/ui/Typography.tsx
@@ -1,3 +1,4 @@
+import cx from "classnames";
 import { ReactNode } from "react";
 
 export const pageTitle = "text-2xl md:text-3xl font-extrabold";
@@ -13,15 +14,23 @@ export function PageTitle({
   );
 }
 
-export const sectionTitle =
-  "text-lg md:text-xl font-bold pb-1 border-b dark:border-b-neutral-800";
+export const sectionTitle = "text-lg md:text-xl font-bold";
 export function SectionTitle({
   children,
   className = "",
+  isUnderline = true,
   ...props
-}: { children: ReactNode } & React.HTMLAttributes<HTMLHeadingElement>) {
+}: {
+  children: ReactNode;
+  isUnderline?: boolean;
+} & React.HTMLAttributes<HTMLHeadingElement>) {
   return (
-    <h2 className={`${sectionTitle} ${className}`} {...props}>
+    <h2
+      className={cx(`${sectionTitle} ${className}`, {
+        "pb-1 border-b dark:border-b-neutral-800": isUnderline,
+      })}
+      {...props}
+    >
       {children}
     </h2>
   );