chore: Rename tooltip.tooltip prop to tooltip.content

2024-02-03 16:22:51 -05:00
parent 0726445135
commit c3b515f0e1
32 changed files with 55 additions and 52 deletions
--- a/app/components/Avatar/AvatarWithPresence.tsx
+++ b/app/components/Avatar/AvatarWithPresence.tsx
@@ -34,7 +34,7 @@ function AvatarWithPresence({
  return (
    <>
      <Tooltip
-        tooltip={
+        content={
          <Centered>
            <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
            {status && (
--- a/app/components/ConnectionStatus.tsx
+++ b/app/components/ConnectionStatus.tsx
@@ -42,7 +42,7 @@ function ConnectionStatus() {
  return ui.multiplayerStatus === "connecting" ||
    ui.multiplayerStatus === "disconnected" ? (
    <Tooltip
-      tooltip={
+      content={
        message ? (
          <Centered>
            <strong>{message.title}</strong>
--- a/app/components/DocumentCard.tsx
+++ b/app/components/DocumentCard.tsx
@@ -145,7 +145,7 @@ function DocumentCard(props: Props) {
          {canUpdatePin && (
            <Actions dir={document.dir} gap={4}>
              {!isDragging && pin && (
-                <Tooltip tooltip={t("Unpin")}>
+                <Tooltip content={t("Unpin")}>
                  <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
                    <CloseIcon />
                  </PinButton>
--- a/app/components/DocumentListItem.tsx
+++ b/app/components/DocumentListItem.tsx
@@ -107,7 +107,7 @@ function DocumentListItem(
          )}
          {document.isDraft && showDraft && (
            <Tooltip
-              tooltip={t("Only visible to you")}
+              content={t("Only visible to you")}
              delay={500}
              placement="top"
            >
--- a/app/components/LocaleTime.tsx
+++ b/app/components/LocaleTime.tsx
@@ -79,7 +79,7 @@ const LocaleTime: React.FC<Props> = ({
        });

  return (
-    <Tooltip tooltip={tooltipContent} delay={tooltipDelay} placement="bottom">
+    <Tooltip content={tooltipContent} delay={tooltipDelay} placement="bottom">
      <time dateTime={dateTime}>{children || content}</time>
    </Tooltip>
  );
--- a/app/components/Notifications/Notifications.tsx
+++ b/app/components/Notifications/Notifications.tsx
@@ -58,13 +58,13 @@ function Notifications(
          </Text>
          <Text color="textSecondary" as={Flex} gap={8}>
            {notifications.approximateUnreadCount > 0 && (
-              <Tooltip delay={500} tooltip={t("Mark all as read")}>
+              <Tooltip delay={500} content={t("Mark all as read")}>
                <Button action={markNotificationsAsRead} context={context}>
                  <MarkAsReadIcon />
                </Button>
              </Tooltip>
            )}
-            <Tooltip delay={500} tooltip={t("Settings")}>
+            <Tooltip delay={500} content={t("Settings")}>
              <Button action={navigateToNotificationSettings} context={context}>
                <SettingsIcon />
              </Button>
--- a/app/components/Sharing/OtherAccess.tsx
+++ b/app/components/Sharing/OtherAccess.tsx
@@ -83,7 +83,7 @@ export const OtherAccess = observer(({ document, children }: Props) => {
            image={<Avatar model={document.createdBy} showBorder={false} />}
            title={document.createdBy.name}
            actions={
-              <AccessTooltip tooltip={t("Created the document")}>
+              <AccessTooltip content={t("Created the document")}>
                {t("Can edit")}
              </AccessTooltip>
            }
@@ -103,7 +103,7 @@ export const OtherAccess = observer(({ document, children }: Props) => {
            subtitle={t("Other workspace members may have access")}
            actions={
              <AccessTooltip
-                tooltip={t(
+                content={t(
                  "This document may be shared with more workspace members through a parent document or collection you do not have access to"
                )}
              />
@@ -117,10 +117,10 @@ export const OtherAccess = observer(({ document, children }: Props) => {

 const AccessTooltip = ({
  children,
-  tooltip,
+  content,
 }: {
  children?: React.ReactNode;
-  tooltip?: string;
+  content?: string;
 }) => {
  const { t } = useTranslation();

@@ -129,7 +129,7 @@ const AccessTooltip = ({
      <Text type="secondary" size="small">
        {children}
      </Text>
-      <Tooltip tooltip={tooltip ?? t("Access inherited from collection")}>
+      <Tooltip content={content ?? t("Access inherited from collection")}>
        <QuestionMarkIcon size={18} />
      </Tooltip>
    </Flex>
--- a/app/components/Sharing/PublicAccess.tsx
+++ b/app/components/Sharing/PublicAccess.tsx
@@ -111,7 +111,7 @@ function PublicAccess({ document, share, sharedParent }: Props) {
    : share?.url ?? "";

  const copyButton = (
-    <Tooltip tooltip={t("Copy public link")} delay={500} placement="top">
+    <Tooltip content={t("Copy public link")} delay={500} placement="top">
      <CopyToClipboard text={shareUrl} onCopy={handleCopied}>
        <NudeButton type="button" disabled={!share} style={{ marginRight: 3 }}>
          <CopyIcon color={theme.placeholder} size={18} />
--- a/app/components/Sharing/SharePopover.tsx
+++ b/app/components/Sharing/SharePopover.tsx
@@ -228,7 +228,7 @@ function SharePopover({
    ) : null
  ) : (
    <Tooltip
-      tooltip={t("Copy link")}
+      content={t("Copy link")}
      delay={500}
      placement="top"
      key="copy-link"
--- a/app/components/Sidebar/App.tsx
+++ b/app/components/Sidebar/App.tsx
@@ -76,7 +76,7 @@ function AppSidebar() {
                }
              >
                <Tooltip
-                  tooltip={t("Toggle sidebar")}
+                  content={t("Toggle sidebar")}
                  shortcut={`${metaDisplay}+.`}
                  delay={500}
                >
--- a/app/components/Sidebar/Settings.tsx
+++ b/app/components/Sidebar/Settings.tsx
@@ -43,7 +43,7 @@ function SettingsSidebar() {
        onClick={returnToApp}
      >
        <Tooltip
-          tooltip={t("Toggle sidebar")}
+          content={t("Toggle sidebar")}
          shortcut={`${metaDisplay}+.`}
          delay={500}
        >
--- a/app/components/Sidebar/components/CollectionLink.tsx
+++ b/app/components/Sidebar/components/CollectionLink.tsx
@@ -162,7 +162,7 @@ const CollectionLink: React.FC<Props> = ({
              !isDraggingAnyCollection && (
                <Fade>
                  <NudeButton
-                    tooltip={{ tooltip: t("New doc"), delay: 500 }}
+                    tooltip={{ content: t("New doc"), delay: 500 }}
                    action={createDocument}
                    context={context}
                    hideOnActionDisabled
--- a/app/components/Sidebar/components/DocumentLink.tsx
+++ b/app/components/Sidebar/components/DocumentLink.tsx
@@ -354,7 +354,7 @@ function InnerDocumentLink(
                  !isDraggingAnyDocument ? (
                    <Fade>
                      {can.createChildDocument && (
-                        <Tooltip tooltip={t("New doc")} delay={500}>
+                        <Tooltip content={t("New doc")} delay={500}>
                          <NudeButton
                            type={undefined}
                            aria-label={t("New nested document")}
--- a/app/components/Sidebar/components/HistoryNavigation.tsx
+++ b/app/components/Sidebar/components/HistoryNavigation.tsx
@@ -43,12 +43,12 @@ function HistoryNavigation(props: React.ComponentProps<typeof Flex>) {

  return (
    <Navigation gap={4} {...props}>
-      <Tooltip tooltip={t("Go back")} delay={500}>
+      <Tooltip content={t("Go back")} delay={500}>
        <NudeButton onClick={() => Desktop.bridge.goBack()}>
          <Back $active={back} />
        </NudeButton>
      </Tooltip>
-      <Tooltip tooltip={t("Go forward")} delay={500}>
+      <Tooltip content={t("Go forward")} delay={500}>
        <NudeButton onClick={() => Desktop.bridge.goForward()}>
          <Forward $active={forward} />
        </NudeButton>
--- a/app/components/Star.tsx
+++ b/app/components/Star.tsx
@@ -44,7 +44,7 @@ function Star({ size, document, collection, color, ...rest }: Props) {
      context={context}
      hideOnActionDisabled
      tooltip={{
-        tooltip: target.isStarred ? t("Unstar document") : t("Star document"),
+        content: target.isStarred ? t("Unstar document") : t("Star document"),
        delay: 500,
      }}
      action={
--- a/app/components/Tooltip.tsx
+++ b/app/components/Tooltip.tsx
@@ -6,11 +6,13 @@ import { s } from "@shared/styles";
 import useMobile from "~/hooks/useMobile";

 export type Props = Omit<TippyProps, "content" | "theme"> & {
-  tooltip?: React.ReactChild | React.ReactChild[];
+  /** The content to display in the tooltip. */
+  content?: React.ReactChild | React.ReactChild[];
+  /** A keyboard shortcut to display next to the content */
  shortcut?: React.ReactNode;
 };

-function Tooltip({ shortcut, tooltip, delay = 50, ...rest }: Props) {
+function Tooltip({ shortcut, content: tooltip, delay = 50, ...rest }: Props) {
  const isMobile = useMobile();

  let content = <>{tooltip}</>;
--- a/app/editor/components/FindAndReplace.tsx
+++ b/app/editor/components/FindAndReplace.tsx
@@ -273,7 +273,7 @@ export default function FindAndReplace({
  const navigation = (
    <>
      <Tooltip
-        tooltip={t("Previous match")}
+        content={t("Previous match")}
        shortcut="shift+enter"
        delay={500}
        placement="bottom"
@@ -283,7 +283,7 @@ export default function FindAndReplace({
        </ButtonLarge>
      </Tooltip>
      <Tooltip
-        tooltip={t("Next match")}
+        content={t("Next match")}
        shortcut="enter"
        delay={500}
        placement="bottom"
@@ -317,7 +317,7 @@ export default function FindAndReplace({
            >
              <SearchModifiers gap={8}>
                <Tooltip
-                  tooltip={t("Match case")}
+                  content={t("Match case")}
                  shortcut={`${altDisplay}+${metaDisplay}+c`}
                  delay={500}
                  placement="bottom"
@@ -329,7 +329,7 @@ export default function FindAndReplace({
                  </ButtonSmall>
                </Tooltip>
                <Tooltip
-                  tooltip={t("Enable regex")}
+                  content={t("Enable regex")}
                  shortcut={`${altDisplay}+${metaDisplay}+r`}
                  delay={500}
                  placement="bottom"
@@ -345,7 +345,7 @@ export default function FindAndReplace({
            {navigation}
            {!readOnly && (
              <Tooltip
-                tooltip={t("Replace options")}
+                content={t("Replace options")}
                delay={500}
                placement="bottom"
              >
--- a/app/editor/components/LinkEditor.tsx
+++ b/app/editor/components/LinkEditor.tsx
@@ -334,13 +334,13 @@ class LinkEditor extends React.Component<Props, State> {
        />

        <Tooltip
-          tooltip={isInternal ? dictionary.goToLink : dictionary.openLink}
+          content={isInternal ? dictionary.goToLink : dictionary.openLink}
        >
          <ToolbarButton onClick={this.handleOpenLink} disabled={!value}>
            {isInternal ? <ArrowIcon /> : <OpenIcon />}
          </ToolbarButton>
        </Tooltip>
-        <Tooltip tooltip={dictionary.removeLink}>
+        <Tooltip content={dictionary.removeLink}>
          <ToolbarButton onClick={this.handleRemoveLink}>
            <CloseIcon />
          </ToolbarButton>
--- a/app/editor/components/ToolbarMenu.tsx
+++ b/app/editor/components/ToolbarMenu.tsx
@@ -93,7 +93,7 @@ function ToolbarMenu(props: Props) {

        return (
          <Tooltip
-            tooltip={item.label === item.tooltip ? undefined : item.tooltip}
+            content={item.label === item.tooltip ? undefined : item.tooltip}
            key={index}
          >
            {item.children ? (
--- a/app/editor/components/Tooltip.tsx
+++ b/app/editor/components/Tooltip.tsx
@@ -3,12 +3,13 @@ import styled from "styled-components";
 import Tooltip from "~/components/Tooltip";

 type Props = {
+  /** The content to display in the tooltip. */
+  content?: string;
  children?: React.ReactNode;
-  tooltip?: string;
 };

-const WrappedTooltip: React.FC<Props> = ({ children, tooltip }: Props) => (
-  <Tooltip offset={[0, 16]} delay={150} tooltip={tooltip} placement="top">
+const WrappedTooltip: React.FC<Props> = ({ children, content }: Props) => (
+  <Tooltip offset={[0, 16]} delay={150} content={content} placement="top">
    <TooltipContent>{children}</TooltipContent>
  </Tooltip>
 );
--- a/app/menus/NewDocumentMenu.tsx
+++ b/app/menus/NewDocumentMenu.tsx
@@ -20,7 +20,7 @@ function NewDocumentMenu() {

  return (
    <Tooltip
-      tooltip={t("New document")}
+      content={t("New document")}
      shortcut="n"
      delay={500}
      placement="bottom"
--- a/app/scenes/Collection.tsx
+++ b/app/scenes/Collection.tsx
@@ -161,7 +161,7 @@ function CollectionScene() {
                {collection.name}
                {collection.isPrivate && (
                  <Tooltip
-                    tooltip={t(
+                    content={t(
                      "This collection is only visible to those given access"
                    )}
                    placement="bottom"
--- a/app/scenes/Collection/Actions.tsx
+++ b/app/scenes/Collection/Actions.tsx
@@ -25,7 +25,7 @@ function Actions({ collection }: Props) {
        <>
          <Action>
            <Tooltip
-              tooltip={t("New document")}
+              content={t("New document")}
              shortcut="n"
              delay={500}
              placement="bottom"
--- a/app/scenes/Collection/MembershipPreview.tsx
+++ b/app/scenes/Collection/MembershipPreview.tsx
@@ -74,7 +74,7 @@ const MembershipPreview = ({ collection, limit = 8 }: Props) => {
      context={context}
      action={editCollectionPermissions}
      tooltip={{
-        tooltip:
+        content:
          usersCount > 0
            ? groupsCount > 0
              ? groupsCount > 1
--- a/app/scenes/Document/components/CommentForm.tsx
+++ b/app/scenes/Document/components/CommentForm.tsx
@@ -302,7 +302,7 @@ function CommentForm({
                  {t("Cancel")}
                </ButtonSmall>
              </Flex>
-              <Tooltip delay={500} tooltip={t("Upload image")} placement="top">
+              <Tooltip delay={500} content={t("Upload image")} placement="top">
                <NudeButton onClick={handleImageUpload}>
                  <ImageIcon color={theme.textTertiary} />
                </NudeButton>
--- a/app/scenes/Document/components/Header.tsx
+++ b/app/scenes/Document/components/Header.tsx
@@ -120,7 +120,7 @@ function DocumentHeader({
  const canToggleEmbeds = team?.documentEmbeds;
  const toc = (
    <Tooltip
-      tooltip={ui.tocVisible ? t("Hide contents") : t("Show contents")}
+      content={ui.tocVisible ? t("Hide contents") : t("Show contents")}
      shortcut="ctrl+alt+h"
      delay={250}
      placement="bottom"
@@ -138,7 +138,7 @@ function DocumentHeader({
  const editAction = (
    <Action>
      <Tooltip
-        tooltip={t("Edit {{noun}}", {
+        content={t("Edit {{noun}}", {
          noun: document.noun,
        })}
        shortcut="e"
@@ -159,7 +159,7 @@ function DocumentHeader({
  const appearanceAction = (
    <Action>
      <Tooltip
-        tooltip={
+        content={
          resolvedTheme === "light" ? t("Switch to dark") : t("Switch to light")
        }
        delay={500}
@@ -265,7 +265,7 @@ function DocumentHeader({
            {(isEditing || isTemplate) && (
              <Action>
                <Tooltip
-                  tooltip={t("Save")}
+                  content={t("Save")}
                  shortcut={`${metaDisplay}+enter`}
                  delay={500}
                  placement="bottom"
@@ -297,7 +297,7 @@ function DocumentHeader({
                    document={document}
                    label={(props) => (
                      <Tooltip
-                        tooltip={t("New document")}
+                        content={t("New document")}
                        shortcut="n"
                        delay={500}
                        placement="bottom"
@@ -313,7 +313,7 @@ function DocumentHeader({
            {revision && revision.createdAt !== document.updatedAt && (
              <Action>
                <Tooltip
-                  tooltip={t("Restore version")}
+                  content={t("Restore version")}
                  delay={500}
                  placement="bottom"
                >
--- a/app/scenes/Document/components/KeyboardShortcutsButton.tsx
+++ b/app/scenes/Document/components/KeyboardShortcutsButton.tsx
@@ -23,7 +23,7 @@ function KeyboardShortcutsButton() {
  };

  return (
-    <Tooltip tooltip={t("Keyboard shortcuts")} shortcut="?" delay={500}>
+    <Tooltip content={t("Keyboard shortcuts")} shortcut="?" delay={500}>
      <Button onClick={handleOpenKeyboardShortcuts} $hidden={isEditingFocus}>
        <KeyboardIcon />
      </Button>
--- a/app/scenes/Document/components/SidebarLayout.tsx
+++ b/app/scenes/Document/components/SidebarLayout.tsx
@@ -32,7 +32,7 @@ function SidebarLayout({ title, onClose, children, scrollable = true }: Props) {
    <>
      <Header>
        <Title>{title}</Title>
-        <Tooltip tooltip={t("Close")} shortcut="Esc" delay={500}>
+        <Tooltip content={t("Close")} shortcut="Esc" delay={500}>
          <Button
            icon={<ForwardIcon />}
            onClick={onClose}
--- a/app/scenes/Invite.tsx
+++ b/app/scenes/Invite.tsx
@@ -141,7 +141,7 @@ function Invite({ onSubmit }: Props) {
    <span>
      <Trans>Invited members will receive access to</Trans>{" "}
      <Tooltip
-        tooltip={
+        content={
          <>
            {collections.nonPrivate.map((collection) => (
              <li key={collection.id}>{collection.name}</li>
@@ -244,7 +244,7 @@ function Invite({ onSubmit }: Props) {
            />
            {index !== 0 && (
              <Remove>
-                <Tooltip tooltip={t("Remove invite")} placement="top">
+                <Tooltip content={t("Remove invite")} placement="top">
                  <NudeButton onClick={(ev) => handleRemove(ev, index)}>
                    <CloseIcon />
                  </NudeButton>
--- a/app/scenes/Search/components/RecentSearches.tsx
+++ b/app/scenes/Search/components/RecentSearches.tsx
@@ -52,7 +52,7 @@ function RecentSearches(
                  {...compositeProps}
                >
                  {searchQuery.query}
-                  <Tooltip tooltip={t("Remove search")} delay={150}>
+                  <Tooltip content={t("Remove search")} delay={150}>
                    <RemoveButton
                      aria-label={t("Remove search")}
                      onClick={async (ev) => {
--- a/app/scenes/Settings/components/DomainManagement.tsx
+++ b/app/scenes/Settings/components/DomainManagement.tsx
@@ -98,7 +98,7 @@ function DomainManagement({ onSuccess }: Props) {
            onChange={createOnDomainChangedHandler(index)}
          />
          <Remove>
-            <Tooltip tooltip={t("Remove domain")} placement="top">
+            <Tooltip content={t("Remove domain")} placement="top">
              <NudeButton onClick={() => handleRemoveDomain(index)}>
                <CloseIcon />
              </NudeButton>
--- a/app/scenes/Settings/components/SharesTable.tsx
+++ b/app/scenes/Settings/components/SharesTable.tsx
@@ -70,7 +70,7 @@ function SharesTable({ canManage, data, ...rest }: Props) {
          Cell: observer(({ value }: { value: string }) =>
            value ? (
              <Flex align="center">
-                <Tooltip tooltip={t("Nested documents are publicly available")}>
+                <Tooltip content={t("Nested documents are publicly available")}>
                  <CheckmarkIcon color={theme.accent} />
                </Tooltip>
              </Flex>