yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Rename tooltip.tooltip prop to tooltip.content

Browse Source
This commit is contained in:
Tom Moor
2024-02-03 16:22:51 -05:00
parent 0726445135
commit c3b515f0e1
32 changed files with 55 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Avatar/AvatarWithPresence.tsx
View File

@@ -34,7 +34,7 @@ function AvatarWithPresence({
return ( return (
<> <>
<Tooltip <Tooltip
tooltip={ content={
<Centered> <Centered>
<strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`} <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
{status && ( {status && (

2
app/components/ConnectionStatus.tsx
View File

@@ -42,7 +42,7 @@ function ConnectionStatus() {
return ui.multiplayerStatus === "connecting" || return ui.multiplayerStatus === "connecting" ||
ui.multiplayerStatus === "disconnected" ? ( ui.multiplayerStatus === "disconnected" ? (
<Tooltip <Tooltip
tooltip={ content={
message ? ( message ? (
<Centered> <Centered>
<strong>{message.title}</strong> <strong>{message.title}</strong>

2
app/components/DocumentCard.tsx
View File

@@ -145,7 +145,7 @@ function DocumentCard(props: Props) {
{canUpdatePin && ( {canUpdatePin && (
<Actions dir={document.dir} gap={4}> <Actions dir={document.dir} gap={4}>
{!isDragging && pin && ( {!isDragging && pin && (
<Tooltip tooltip={t("Unpin")}> <Tooltip content={t("Unpin")}>
<PinButton onClick={handleUnpin} aria-label={t("Unpin")}> <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
<CloseIcon /> <CloseIcon />
</PinButton> </PinButton>

2
app/components/DocumentListItem.tsx
View File

@@ -107,7 +107,7 @@ function DocumentListItem(
)} )}
{document.isDraft && showDraft && ( {document.isDraft && showDraft && (
<Tooltip <Tooltip
tooltip={t("Only visible to you")} content={t("Only visible to you")}
delay={500} delay={500}
placement="top" placement="top"
> >

2
app/components/LocaleTime.tsx
View File

@@ -79,7 +79,7 @@ const LocaleTime: React.FC<Props> = ({
}); });
return ( return (
<Tooltip tooltip={tooltipContent} delay={tooltipDelay} placement="bottom"> <Tooltip content={tooltipContent} delay={tooltipDelay} placement="bottom">
<time dateTime={dateTime}>{children || content}</time> <time dateTime={dateTime}>{children || content}</time>
</Tooltip> </Tooltip>
); );

4
app/components/Notifications/Notifications.tsx
View File

@@ -58,13 +58,13 @@ function Notifications(
</Text> </Text>
<Text color="textSecondary" as={Flex} gap={8}> <Text color="textSecondary" as={Flex} gap={8}>
{notifications.approximateUnreadCount > 0 && ( {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}> <Button action={markNotificationsAsRead} context={context}>
<MarkAsReadIcon /> <MarkAsReadIcon />
</Button> </Button>
</Tooltip> </Tooltip>
)} )}
<Tooltip delay={500} tooltip={t("Settings")}> <Tooltip delay={500} content={t("Settings")}>
<Button action={navigateToNotificationSettings} context={context}> <Button action={navigateToNotificationSettings} context={context}>
<SettingsIcon /> <SettingsIcon />
</Button> </Button>

10
app/components/Sharing/OtherAccess.tsx
View File

@@ -83,7 +83,7 @@ export const OtherAccess = observer(({ document, children }: Props) => {
image={<Avatar model={document.createdBy} showBorder={false} />} image={<Avatar model={document.createdBy} showBorder={false} />}
title={document.createdBy.name} title={document.createdBy.name}
actions={ actions={
<AccessTooltip tooltip={t("Created the document")}> <AccessTooltip content={t("Created the document")}>
{t("Can edit")} {t("Can edit")}
</AccessTooltip> </AccessTooltip>
} }
@@ -103,7 +103,7 @@ export const OtherAccess = observer(({ document, children }: Props) => {
subtitle={t("Other workspace members may have access")} subtitle={t("Other workspace members may have access")}
actions={ actions={
<AccessTooltip <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" "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 = ({ const AccessTooltip = ({
children, children,
tooltip, content,
}: { }: {
children?: React.ReactNode; children?: React.ReactNode;
tooltip?: string; content?: string;
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -129,7 +129,7 @@ const AccessTooltip = ({
<Text type="secondary" size="small"> <Text type="secondary" size="small">
{children} {children}
</Text> </Text>
<Tooltip tooltip={tooltip ?? t("Access inherited from collection")}> <Tooltip content={content ?? t("Access inherited from collection")}>
<QuestionMarkIcon size={18} /> <QuestionMarkIcon size={18} />
</Tooltip> </Tooltip>
</Flex> </Flex>

2
app/components/Sharing/PublicAccess.tsx
View File

@@ -111,7 +111,7 @@ function PublicAccess({ document, share, sharedParent }: Props) {
: share?.url ?? ""; : share?.url ?? "";
const copyButton = ( 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}> <CopyToClipboard text={shareUrl} onCopy={handleCopied}>
<NudeButton type="button" disabled={!share} style={{ marginRight: 3 }}> <NudeButton type="button" disabled={!share} style={{ marginRight: 3 }}>
<CopyIcon color={theme.placeholder} size={18} /> <CopyIcon color={theme.placeholder} size={18} />

2
app/components/Sharing/SharePopover.tsx
View File

@@ -228,7 +228,7 @@ function SharePopover({
) : null ) : null
) : ( ) : (
<Tooltip <Tooltip
tooltip={t("Copy link")} content={t("Copy link")}
delay={500} delay={500}
placement="top" placement="top"
key="copy-link" key="copy-link"

2
app/components/Sidebar/App.tsx
View File

@@ -76,7 +76,7 @@ function AppSidebar() {
} }
> >
<Tooltip <Tooltip
tooltip={t("Toggle sidebar")} content={t("Toggle sidebar")}
shortcut={`${metaDisplay}+.`} shortcut={`${metaDisplay}+.`}
delay={500} delay={500}
> >

2
app/components/Sidebar/Settings.tsx
View File

@@ -43,7 +43,7 @@ function SettingsSidebar() {
onClick={returnToApp} onClick={returnToApp}
> >
<Tooltip <Tooltip
tooltip={t("Toggle sidebar")} content={t("Toggle sidebar")}
shortcut={`${metaDisplay}+.`} shortcut={`${metaDisplay}+.`}
delay={500} delay={500}
> >

2
app/components/Sidebar/components/CollectionLink.tsx
View File

@@ -162,7 +162,7 @@ const CollectionLink: React.FC<Props> = ({
!isDraggingAnyCollection && ( !isDraggingAnyCollection && (
<Fade> <Fade>
<NudeButton <NudeButton
tooltip={{ tooltip: t("New doc"), delay: 500 }} tooltip={{ content: t("New doc"), delay: 500 }}
action={createDocument} action={createDocument}
context={context} context={context}
hideOnActionDisabled hideOnActionDisabled

2
app/components/Sidebar/components/DocumentLink.tsx
View File

@@ -354,7 +354,7 @@ function InnerDocumentLink(
!isDraggingAnyDocument ? ( !isDraggingAnyDocument ? (
<Fade> <Fade>
{can.createChildDocument && ( {can.createChildDocument && (
<Tooltip tooltip={t("New doc")} delay={500}> <Tooltip content={t("New doc")} delay={500}>
<NudeButton <NudeButton
type={undefined} type={undefined}
aria-label={t("New nested document")} aria-label={t("New nested document")}

4
app/components/Sidebar/components/HistoryNavigation.tsx
View File

@@ -43,12 +43,12 @@ function HistoryNavigation(props: React.ComponentProps<typeof Flex>) {
return ( return (
<Navigation gap={4} {...props}> <Navigation gap={4} {...props}>
<Tooltip tooltip={t("Go back")} delay={500}> <Tooltip content={t("Go back")} delay={500}>
<NudeButton onClick={() => Desktop.bridge.goBack()}> <NudeButton onClick={() => Desktop.bridge.goBack()}>
<Back $active={back} /> <Back $active={back} />
</NudeButton> </NudeButton>
</Tooltip> </Tooltip>
<Tooltip tooltip={t("Go forward")} delay={500}> <Tooltip content={t("Go forward")} delay={500}>
<NudeButton onClick={() => Desktop.bridge.goForward()}> <NudeButton onClick={() => Desktop.bridge.goForward()}>
<Forward $active={forward} /> <Forward $active={forward} />
</NudeButton> </NudeButton>

2
app/components/Star.tsx
View File

@@ -44,7 +44,7 @@ function Star({ size, document, collection, color, ...rest }: Props) {
context={context} context={context}
hideOnActionDisabled hideOnActionDisabled
tooltip={{ tooltip={{
tooltip: target.isStarred ? t("Unstar document") : t("Star document"), content: target.isStarred ? t("Unstar document") : t("Star document"),
delay: 500, delay: 500,
}} }}
action={ action={

6
app/components/Tooltip.tsx
View File

@@ -6,11 +6,13 @@ import { s } from "@shared/styles";
import useMobile from "~/hooks/useMobile"; import useMobile from "~/hooks/useMobile";
export type Props = Omit<TippyProps, "content" | "theme"> & { 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; shortcut?: React.ReactNode;
}; };
function Tooltip({ shortcut, tooltip, delay = 50, ...rest }: Props) { function Tooltip({ shortcut, content: tooltip, delay = 50, ...rest }: Props) {
const isMobile = useMobile(); const isMobile = useMobile();
let content = <>{tooltip}</>; let content = <>{tooltip}</>;

10
app/editor/components/FindAndReplace.tsx
View File

@@ -273,7 +273,7 @@ export default function FindAndReplace({
const navigation = ( const navigation = (
<> <>
<Tooltip <Tooltip
tooltip={t("Previous match")} content={t("Previous match")}
shortcut="shift+enter" shortcut="shift+enter"
delay={500} delay={500}
placement="bottom" placement="bottom"
@@ -283,7 +283,7 @@ export default function FindAndReplace({
</ButtonLarge> </ButtonLarge>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
tooltip={t("Next match")} content={t("Next match")}
shortcut="enter" shortcut="enter"
delay={500} delay={500}
placement="bottom" placement="bottom"
@@ -317,7 +317,7 @@ export default function FindAndReplace({
> >
<SearchModifiers gap={8}> <SearchModifiers gap={8}>
<Tooltip <Tooltip
tooltip={t("Match case")} content={t("Match case")}
shortcut={`${altDisplay}+${metaDisplay}+c`} shortcut={`${altDisplay}+${metaDisplay}+c`}
delay={500} delay={500}
placement="bottom" placement="bottom"
@@ -329,7 +329,7 @@ export default function FindAndReplace({
</ButtonSmall> </ButtonSmall>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
tooltip={t("Enable regex")} content={t("Enable regex")}
shortcut={`${altDisplay}+${metaDisplay}+r`} shortcut={`${altDisplay}+${metaDisplay}+r`}
delay={500} delay={500}
placement="bottom" placement="bottom"
@@ -345,7 +345,7 @@ export default function FindAndReplace({
{navigation} {navigation}
{!readOnly && ( {!readOnly && (
<Tooltip <Tooltip
tooltip={t("Replace options")} content={t("Replace options")}
delay={500} delay={500}
placement="bottom" placement="bottom"
> >

4
app/editor/components/LinkEditor.tsx
View File

@@ -334,13 +334,13 @@ class LinkEditor extends React.Component<Props, State> {
/> />
<Tooltip <Tooltip
tooltip={isInternal ? dictionary.goToLink : dictionary.openLink} content={isInternal ? dictionary.goToLink : dictionary.openLink}
> >
<ToolbarButton onClick={this.handleOpenLink} disabled={!value}> <ToolbarButton onClick={this.handleOpenLink} disabled={!value}>
{isInternal ? <ArrowIcon /> : <OpenIcon />} {isInternal ? <ArrowIcon /> : <OpenIcon />}
</ToolbarButton> </ToolbarButton>
</Tooltip> </Tooltip>
<Tooltip tooltip={dictionary.removeLink}> <Tooltip content={dictionary.removeLink}>
<ToolbarButton onClick={this.handleRemoveLink}> <ToolbarButton onClick={this.handleRemoveLink}>
<CloseIcon /> <CloseIcon />
</ToolbarButton> </ToolbarButton>

2
app/editor/components/ToolbarMenu.tsx
View File

@@ -93,7 +93,7 @@ function ToolbarMenu(props: Props) {
return ( return (
<Tooltip <Tooltip
tooltip={item.label === item.tooltip ? undefined : item.tooltip} content={item.label === item.tooltip ? undefined : item.tooltip}
key={index} key={index}
> >
{item.children ? ( {item.children ? (

7
app/editor/components/Tooltip.tsx
View File

@@ -3,12 +3,13 @@ import styled from "styled-components";
import Tooltip from "~/components/Tooltip"; import Tooltip from "~/components/Tooltip";
type Props = { type Props = {
/** The content to display in the tooltip. */
content?: string;
children?: React.ReactNode; children?: React.ReactNode;
tooltip?: string;
}; };
const WrappedTooltip: React.FC<Props> = ({ children, tooltip }: Props) => ( const WrappedTooltip: React.FC<Props> = ({ children, content }: Props) => (
<Tooltip offset={[0, 16]} delay={150} tooltip={tooltip} placement="top"> <Tooltip offset={[0, 16]} delay={150} content={content} placement="top">
<TooltipContent>{children}</TooltipContent> <TooltipContent>{children}</TooltipContent>
</Tooltip> </Tooltip>
); );

2
app/menus/NewDocumentMenu.tsx
View File

@@ -20,7 +20,7 @@ function NewDocumentMenu() {
return ( return (
<Tooltip <Tooltip
tooltip={t("New document")} content={t("New document")}
shortcut="n" shortcut="n"
delay={500} delay={500}
placement="bottom" placement="bottom"

2
app/scenes/Collection.tsx
View File

@@ -161,7 +161,7 @@ function CollectionScene() {
{collection.name} {collection.name}
{collection.isPrivate && ( {collection.isPrivate && (
<Tooltip <Tooltip
tooltip={t( content={t(
"This collection is only visible to those given access" "This collection is only visible to those given access"
)} )}
placement="bottom" placement="bottom"

2
app/scenes/Collection/Actions.tsx
View File

@@ -25,7 +25,7 @@ function Actions({ collection }: Props) {
<> <>
<Action> <Action>
<Tooltip <Tooltip
tooltip={t("New document")} content={t("New document")}
shortcut="n" shortcut="n"
delay={500} delay={500}
placement="bottom" placement="bottom"

2
app/scenes/Collection/MembershipPreview.tsx
View File

@@ -74,7 +74,7 @@ const MembershipPreview = ({ collection, limit = 8 }: Props) => {
context={context} context={context}
action={editCollectionPermissions} action={editCollectionPermissions}
tooltip={{ tooltip={{
tooltip: content:
usersCount > 0 usersCount > 0
? groupsCount > 0 ? groupsCount > 0
? groupsCount > 1 ? groupsCount > 1

2
app/scenes/Document/components/CommentForm.tsx
View File

@@ -302,7 +302,7 @@ function CommentForm({
{t("Cancel")} {t("Cancel")}
</ButtonSmall> </ButtonSmall>
</Flex> </Flex>
<Tooltip delay={500} tooltip={t("Upload image")} placement="top"> <Tooltip delay={500} content={t("Upload image")} placement="top">
<NudeButton onClick={handleImageUpload}> <NudeButton onClick={handleImageUpload}>
<ImageIcon color={theme.textTertiary} /> <ImageIcon color={theme.textTertiary} />
</NudeButton> </NudeButton>

12
app/scenes/Document/components/Header.tsx
View File

@@ -120,7 +120,7 @@ function DocumentHeader({
const canToggleEmbeds = team?.documentEmbeds; const canToggleEmbeds = team?.documentEmbeds;
const toc = ( const toc = (
<Tooltip <Tooltip
tooltip={ui.tocVisible ? t("Hide contents") : t("Show contents")} content={ui.tocVisible ? t("Hide contents") : t("Show contents")}
shortcut="ctrl+alt+h" shortcut="ctrl+alt+h"
delay={250} delay={250}
placement="bottom" placement="bottom"
@@ -138,7 +138,7 @@ function DocumentHeader({
const editAction = ( const editAction = (
<Action> <Action>
<Tooltip <Tooltip
tooltip={t("Edit {{noun}}", { content={t("Edit {{noun}}", {
noun: document.noun, noun: document.noun,
})} })}
shortcut="e" shortcut="e"
@@ -159,7 +159,7 @@ function DocumentHeader({
const appearanceAction = ( const appearanceAction = (
<Action> <Action>
<Tooltip <Tooltip
tooltip={ content={
resolvedTheme === "light" ? t("Switch to dark") : t("Switch to light") resolvedTheme === "light" ? t("Switch to dark") : t("Switch to light")
} }
delay={500} delay={500}
@@ -265,7 +265,7 @@ function DocumentHeader({
{(isEditing || isTemplate) && ( {(isEditing || isTemplate) && (
<Action> <Action>
<Tooltip <Tooltip
tooltip={t("Save")} content={t("Save")}
shortcut={`${metaDisplay}+enter`} shortcut={`${metaDisplay}+enter`}
delay={500} delay={500}
placement="bottom" placement="bottom"
@@ -297,7 +297,7 @@ function DocumentHeader({
document={document} document={document}
label={(props) => ( label={(props) => (
<Tooltip <Tooltip
tooltip={t("New document")} content={t("New document")}
shortcut="n" shortcut="n"
delay={500} delay={500}
placement="bottom" placement="bottom"
@@ -313,7 +313,7 @@ function DocumentHeader({
{revision && revision.createdAt !== document.updatedAt && ( {revision && revision.createdAt !== document.updatedAt && (
<Action> <Action>
<Tooltip <Tooltip
tooltip={t("Restore version")} content={t("Restore version")}
delay={500} delay={500}
placement="bottom" placement="bottom"
> >

2
app/scenes/Document/components/KeyboardShortcutsButton.tsx
View File

@@ -23,7 +23,7 @@ function KeyboardShortcutsButton() {
}; };
return ( return (
<Tooltip tooltip={t("Keyboard shortcuts")} shortcut="?" delay={500}> <Tooltip content={t("Keyboard shortcuts")} shortcut="?" delay={500}>
<Button onClick={handleOpenKeyboardShortcuts} $hidden={isEditingFocus}> <Button onClick={handleOpenKeyboardShortcuts} $hidden={isEditingFocus}>
<KeyboardIcon /> <KeyboardIcon />
</Button> </Button>

2
app/scenes/Document/components/SidebarLayout.tsx
View File

@@ -32,7 +32,7 @@ function SidebarLayout({ title, onClose, children, scrollable = true }: Props) {
<> <>
<Header> <Header>
<Title>{title}</Title> <Title>{title}</Title>
<Tooltip tooltip={t("Close")} shortcut="Esc" delay={500}> <Tooltip content={t("Close")} shortcut="Esc" delay={500}>
<Button <Button
icon={<ForwardIcon />} icon={<ForwardIcon />}
onClick={onClose} onClick={onClose}

4
app/scenes/Invite.tsx
View File

@@ -141,7 +141,7 @@ function Invite({ onSubmit }: Props) {
<span> <span>
<Trans>Invited members will receive access to</Trans>{" "} <Trans>Invited members will receive access to</Trans>{" "}
<Tooltip <Tooltip
tooltip={ content={
<> <>
{collections.nonPrivate.map((collection) => ( {collections.nonPrivate.map((collection) => (
<li key={collection.id}>{collection.name}</li> <li key={collection.id}>{collection.name}</li>
@@ -244,7 +244,7 @@ function Invite({ onSubmit }: Props) {
/> />
{index !== 0 && ( {index !== 0 && (
<Remove> <Remove>
<Tooltip tooltip={t("Remove invite")} placement="top"> <Tooltip content={t("Remove invite")} placement="top">
<NudeButton onClick={(ev) => handleRemove(ev, index)}> <NudeButton onClick={(ev) => handleRemove(ev, index)}>
<CloseIcon /> <CloseIcon />
</NudeButton> </NudeButton>

2
app/scenes/Search/components/RecentSearches.tsx
View File

@@ -52,7 +52,7 @@ function RecentSearches(
{...compositeProps} {...compositeProps}
> >
{searchQuery.query} {searchQuery.query}
<Tooltip tooltip={t("Remove search")} delay={150}> <Tooltip content={t("Remove search")} delay={150}>
<RemoveButton <RemoveButton
aria-label={t("Remove search")} aria-label={t("Remove search")}
onClick={async (ev) => { onClick={async (ev) => {

2
app/scenes/Settings/components/DomainManagement.tsx
View File

@@ -98,7 +98,7 @@ function DomainManagement({ onSuccess }: Props) {
onChange={createOnDomainChangedHandler(index)} onChange={createOnDomainChangedHandler(index)}
/> />
<Remove> <Remove>
<Tooltip tooltip={t("Remove domain")} placement="top"> <Tooltip content={t("Remove domain")} placement="top">
<NudeButton onClick={() => handleRemoveDomain(index)}> <NudeButton onClick={() => handleRemoveDomain(index)}>
<CloseIcon /> <CloseIcon />
</NudeButton> </NudeButton>

2
app/scenes/Settings/components/SharesTable.tsx
View File

@@ -70,7 +70,7 @@ function SharesTable({ canManage, data, ...rest }: Props) {
Cell: observer(({ value }: { value: string }) => Cell: observer(({ value }: { value: string }) =>
value ? ( value ? (
<Flex align="center"> <Flex align="center">
<Tooltip tooltip={t("Nested documents are publicly available")}> <Tooltip content={t("Nested documents are publicly available")}>
<CheckmarkIcon color={theme.accent} /> <CheckmarkIcon color={theme.accent} />
</Tooltip> </Tooltip>
</Flex> </Flex>