feat: replace tooltip with new design (#3969)

2026-02-14 05:14:54 +00:00 · 2023-08-28 14:15:12 +08:00
parent b9c4b88a6b
commit 1e87707b2e
28 changed files with 138 additions and 148 deletions
--- a/apps/core/package.json
+++ b/apps/core/package.json
@@ -39,7 +39,7 @@
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.6",
    "@react-hookz/web": "^23.1.0",
-    "@toeverything/components": "^0.0.17",
+    "@toeverything/components": "^0.0.19",
    "async-call-rpc": "^6.3.1",
    "cmdk": "^0.2.0",
    "css-spring": "^4.1.0",
--- a/apps/core/src/bootstrap/plugins/setup.ts
+++ b/apps/core/src/bootstrap/plugins/setup.ts
@@ -158,6 +158,9 @@ function createSetupImpl(rootStore: ReturnType<typeof createStore>) {
    '@toeverything/components/button': import(
      '@toeverything/components/button'
    ),
+    '@toeverything/components/tooltip': import(
+      '@toeverything/components/tooltip'
+    ),
  });

  // pluginName -> module -> importName -> updater[]
--- a/apps/core/src/components/affine/create-workspace-modal/index.tsx
+++ b/apps/core/src/components/affine/create-workspace-modal/index.tsx
@@ -4,19 +4,19 @@ import {
  ModalCloseButton,
  ModalWrapper,
  toast,
-  Tooltip,
 } from '@affine/component';
 import { DebugLogger } from '@affine/debug';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { HelpIcon } from '@blocksuite/icons';
 import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import type {
  LoadDBFileResult,
  SelectDBFileLocationResult,
 } from '@toeverything/infra/type';
 import { useSetAtom } from 'jotai';
 import type { KeyboardEvent } from 'react';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useLayoutEffect } from 'react';
 import { useCallback, useState } from 'react';

@@ -125,6 +125,7 @@ const SetDBLocationContent = ({
  onConfirmLocation,
 }: SetDBLocationContentProps) => {
  const t = useAFFiNEI18N();
+  const ref = useRef(null);
  const defaultDBLocation = useDefaultDBLocation();
  const [opening, setOpening] = useState(false);

@@ -161,11 +162,12 @@ const SetDBLocationContent = ({
          {t['Customize']()}
        </Button>
        <Tooltip
-          zIndex={1000}
          content={t['Default db location hint']({
            location: defaultDBLocation,
          })}
-          placement="top-start"
+          portalOptions={{
+            container: ref.current,
+          }}
        >
          <Button
            data-testid="create-workspace-default-location-button"
@@ -175,6 +177,7 @@ const SetDBLocationContent = ({
            }}
            icon={<HelpIcon />}
            iconPosition="end"
+            ref={ref}
          >
            {t['Default Location']()}
          </Button>
--- a/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/publish.tsx
@@ -1,4 +1,4 @@
-import { FlexWrapper, Switch, Tooltip } from '@affine/component';
+import { FlexWrapper, Switch } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { Unreachable } from '@affine/env/constant';
 import type {
@@ -8,6 +8,7 @@ import type {
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { useCallback, useEffect, useState } from 'react';

@@ -93,10 +94,7 @@ const FakePublishPanelAffine = (_props: FakePublishPanelAffineProps) => {
  const t = useAFFiNEI18N();

  return (
-    <Tooltip
-      content={t['com.affine.settings.workspace.publish-tooltip']()}
-      placement="top"
-    >
+    <Tooltip content={t['com.affine.settings.workspace.publish-tooltip']()}>
      <div className={style.fakeWrapper}>
        <SettingRow name={t['Publish']()} desc={t['Unpublished hint']()}>
          <Switch checked={false} />
--- a/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx
+++ b/apps/core/src/components/affine/new-workspace-setting-detail/storage.tsx
@@ -1,7 +1,8 @@
-import { FlexWrapper, toast, Tooltip } from '@affine/component';
+import { FlexWrapper, toast } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
 import type { MoveDBFileResult } from '@toeverything/infra/type';
 import { useMemo } from 'react';
 import { useCallback, useEffect, useState } from 'react';
@@ -75,9 +76,9 @@ export const StoragePanel = ({ workspace }: StoragePanelProps) => {
      secondaryPath ? (
        <FlexWrapper justifyContent="space-between">
          <Tooltip
-            zIndex={1000}
            content={t['com.affine.settings.storage.db-location.change-hint']()}
-            placement="top-start"
+            side="top"
+            align="start"
          >
            <Button
              data-testid="move-folder"
--- a/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
+++ b/apps/core/src/components/affine/setting-modal/setting-sidebar/index.tsx
@@ -1,4 +1,4 @@
-import { ScrollableContainer, Tooltip } from '@affine/component';
+import { ScrollableContainer } from '@affine/component';
 import {
  WorkspaceListItemSkeleton,
  WorkspaceListSkeleton,
@@ -7,11 +7,12 @@ import { WorkspaceAvatar } from '@affine/component/workspace-avatar';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { RootWorkspaceMetadata } from '@affine/workspace/atom';
 import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useBlockSuiteWorkspaceName } from '@toeverything/hooks/use-block-suite-workspace-name';
 import { useStaticBlockSuiteWorkspace } from '@toeverything/infra/__internal__/react';
 import clsx from 'clsx';
 import { useAtomValue } from 'jotai';
-import { Suspense } from 'react';
+import { Suspense, useRef } from 'react';

 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import type {
@@ -136,6 +137,7 @@ const WorkspaceListItem = ({
 }: WorkspaceListItemProps) => {
  const workspace = useStaticBlockSuiteWorkspace(meta.id);
  const [workspaceName] = useBlockSuiteWorkspaceName(workspace);
+  const ref = useRef(null);

  return (
    <div
@@ -143,16 +145,17 @@ const WorkspaceListItem = ({
      title={workspaceName}
      onClick={onClick}
      data-testid="workspace-list-item"
+      ref={ref}
    >
      <WorkspaceAvatar size={14} workspace={workspace} className="icon" />
      <span className="setting-name">{workspaceName}</span>
      {isCurrent ? (
        <Tooltip
          content="Current"
-          title="Current"
-          offset={[0, -5]}
-          placement="top"
-          disablePortal={false}
+          side="top"
+          portalOptions={{
+            container: ref.current,
+          }}
        >
          <div
            className={currentWorkspaceLabel}
--- a/apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
+++ b/apps/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
@@ -1,10 +1,10 @@
-import { Tooltip } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/global/utils';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtom } from 'jotai';
 import type { CSSProperties } from 'react';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';

 import { pageSettingFamily } from '../../../atoms';
 import type { BlockSuiteWorkspace } from '../../../shared';
@@ -21,12 +21,12 @@ export type EditorModeSwitchProps = {
 const TooltipContent = () => {
  const t = useAFFiNEI18N();
  return (
-    <div>
+    <>
      {t['Switch']()}
      <StyledKeyboardItem>
        {!environment.isServer && environment.isMacOs ? '⌥ + S' : 'Alt + S'}
      </StyledKeyboardItem>
-    </div>
+    </>
  );
 };
 export const EditorModeSwitch = ({
@@ -40,6 +40,7 @@ export const EditorModeSwitch = ({
    meta => meta.id === pageId
  );
  const t = useAFFiNEI18N();
+  const ref = useRef(null);
  assertExists(pageMeta);
  const { trash } = pageMeta;
  useEffect(() => {
@@ -70,11 +71,17 @@ export const EditorModeSwitch = ({
  }, [setSetting, t, trash]);

  return (
-    <Tooltip content={<TooltipContent />}>
+    <Tooltip
+      content={<TooltipContent />}
+      portalOptions={{
+        container: ref.current,
+      }}
+    >
      <StyledEditorModeSwitch
        style={style}
        switchLeft={currentMode === 'page'}
        showAlone={trash}
+        ref={ref}
      >
        <PageSwitchItem
          data-testid="switch-page-mode-button"
--- a/apps/core/src/components/pure/help-island/index.tsx
+++ b/apps/core/src/components/pure/help-island/index.tsx
@@ -1,6 +1,7 @@
-import { MuiFade, Tooltip } from '@affine/component';
+import { MuiFade } from '@affine/component';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon, UserGuideIcon } from '@blocksuite/icons';
+import { Tooltip } from '@toeverything/components/tooltip';
 import { useSetAtom } from 'jotai/react';
 import { useAtomValue } from 'jotai/react';
 import { useCallback, useState } from 'react';
@@ -60,11 +61,7 @@ export const HelpIsland = ({
          style={{ height: spread ? `${showList.length * 40 + 4}px` : 0 }}
        >
          {showList.includes('whatNew') && (
-            <Tooltip
-              content={t["Discover what's new!"]()}
-              placement="left-end"
-              showArrow={true}
-            >
+            <Tooltip content={t["Discover what's new!"]()} side="left">
              <StyledIconWrapper
                data-testid="right-bottom-change-log-icon"
                onClick={() => {
@@ -76,11 +73,7 @@ export const HelpIsland = ({
            </Tooltip>
          )}
          {showList.includes('contact') && (
-            <Tooltip
-              content={t['Contact Us']()}
-              placement="left-end"
-              showArrow={true}
-            >
+            <Tooltip content={t['Contact Us']()} side="left">
              <StyledIconWrapper
                data-testid="right-bottom-contact-us-icon"
                onClick={openAbout}
@@ -90,11 +83,7 @@ export const HelpIsland = ({
            </Tooltip>
          )}
          {showList.includes('shortcuts') && (
-            <Tooltip
-              content={t['Keyboard Shortcuts']()}
-              placement="left-end"
-              showArrow={true}
-            >
+            <Tooltip content={t['Keyboard Shortcuts']()} side="left">
              <StyledIconWrapper
                data-testid="shortcuts-icon"
                onClick={() => {
@@ -109,8 +98,7 @@ export const HelpIsland = ({
          {showList.includes('guide') && (
            <Tooltip
              content={t['com.affine.helpIsland.gettingStarted']()}
-              placement="left-end"
-              showArrow={true}
+              side="left"
            >
              <StyledIconWrapper
                data-testid="easy-guide"
@@ -125,11 +113,7 @@ export const HelpIsland = ({
          )}
        </StyledAnimateWrapper>

-        <Tooltip
-          content={t['Help and Feedback']()}
-          placement={'left-end'}
-          showArrow={true}
-        >
+        <Tooltip content={t['Help and Feedback']()} side="left">
          <MuiFade in={!spread} data-testid="faq-icon">
            <StyledTriggerWrapper>
              <HelpIcon />
--- a/apps/storybook/src/stories/card.stories.tsx
+++ b/apps/storybook/src/stories/card.stories.tsx
@@ -1,4 +1,4 @@
-import { toast, Tooltip } from '@affine/component';
+import { toast } from '@affine/component';
 import { BlockCard } from '@affine/component/card/block-card';
 import { WorkspaceCard } from '@affine/component/card/workspace-card';
 import { WorkspaceFlavour } from '@affine/env/workspace';
@@ -10,6 +10,7 @@ import {
  PageIcon,
 } from '@blocksuite/icons';
 import type { Meta } from '@storybook/react';
+import { Tooltip } from '@toeverything/components/tooltip';

 export default {
  title: 'AFFiNE/Card',