fix(src): fix studioUI tooltip to take strings and replace current to…

…oltips with this logic
sanity-io · Oct 23, 2023 · f51396e · f51396e
1 parent 266eaee
commit f51396e
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 59 deletions.
diff --git a/packages/@sanity/vision/src/components/VisionGui.tsx b/packages/@sanity/vision/src/components/VisionGui.tsx
@@ -754,13 +754,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                     <Box flex={1}>
                       <TextInput readOnly type="url" ref={this._operationUrlElement} value={url} />
                     </Box>
-                    <Tooltip
-                      content={
-                        <Box>
-                          <Text>Copy to clipboard</Text>
-                        </Box>
-                      }
-                    >
+                    <Tooltip content="Copy to clipboard">
                       <Button
                         aria-label="Copy to clipboard"
                         type="button"
@@ -825,7 +819,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                       <Flex>
                         <StyledLabel muted>Params</StyledLabel>
                         {paramsError && (
-                          <Tooltip placement="top-end" portal content={<Text>{paramsError}</Text>}>
+                          <Tooltip placement="top-end" portal content={paramsError}>
                             <Box padding={1} marginX={2}>
                               <Text>
                                 <ErrorOutlineIcon />

diff --git a/packages/sanity/src/core/components/TooltipOfDisabled.tsx b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
@@ -1,13 +1,14 @@
-import React, {ForwardedRef, forwardRef} from 'react'
-import {Tooltip, TooltipProps} from '../../ui' //ref error
+import React, {forwardRef} from 'react'
+import {Tooltip, TooltipProps} from '../../ui'
 
 /** @internal */
-export const TooltipOfDisabled = forwardRef(function DisabledTooltip(
-  props: TooltipProps,
-  ref: ForwardedRef<HTMLDivElement>,
-) {
-  const {children, content, disabled, ...restProps} = props
-
+export const TooltipOfDisabled = forwardRef(function DisabledTooltip({
+  children,
+  content,
+  disabled,
+  ref,
+  ...restProps
+}: TooltipProps) {
   return (
     <Tooltip {...restProps} content={content} disabled={disabled || !content} ref={ref}>
       <div>{children}</div>

diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
@@ -199,12 +199,7 @@ export const CollapseMenu = forwardRef(function CollapseMenu(
                   aria-hidden={hidden}
                   data-hidden={hidden}
                 >
-                  <Tooltip
-                    portal
-                    disabled={!tooltipText}
-                    content={<Text size={1}>{tooltipText}</Text>}
-                    {...tooltipProps}
-                  >
+                  <Tooltip portal disabled={!tooltipText} content={tooltipText} {...tooltipProps}>
                     <Flex>
                       {cloneElement(child, {
                         disabled: child.props.disabled || hidden,

diff --git a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
@@ -61,7 +61,7 @@ function TooltipUserAvatar(props: Omit<UserAvatarProps, 'user'> & {user: User})
   } = props
 
   return (
-    <Tooltip content={<Text size={1}>{displayName}</Text>} placement="top" portal>
+    <Tooltip content={displayName} placement="top" portal>
       <div style={{display: 'inline-block'}}>
         <StaticUserAvatar {...props} />
       </div>

diff --git a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
@@ -29,7 +29,7 @@ const BlockActions = memo(function BlockActions(props: {
   }, [block, insert])
 
   return (
-    <Tooltip content={<Text size={1}>Duplicate</Text>} placement="right" portal="default">
+    <Tooltip content="Duplicate" placement="right" portal="default">
       <Button
         aria-label="Duplicate"
         fontSize={1}

diff --git a/packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx b/packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx
@@ -358,7 +358,7 @@ export const AssetRow = (props: RowProps) => {
             </Card>
             {showTooltip && (
               <Tooltip
-                content={<Text size={1}>{originalFilename}</Text>}
+                content={originalFilename}
                 fallbackPlacements={['right', 'left']}
                 placement="top"
                 portal

diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
@@ -24,7 +24,7 @@ export function ResourcesButton() {
   return (
     <Flex>
       <Tooltip
-        content={<Text size={1}>Help and resources</Text>}
+        content="Help and resources"
         scheme={scheme}
         placement="bottom"
         portal

diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -106,11 +106,7 @@ export function UserMenu() {
         <StyledMenu>
           <Card padding={2}>
             <Flex align="center">
-              <Tooltip
-                disabled={!providerTitle}
-                portal
-                content={providerTitle && <Text size={1}>Signed in with {providerTitle}</Text>}
-              >
+              <Tooltip disabled={!providerTitle} portal content={`Signed in with ${providerTitle}`}>
                 <AvatarBox marginRight={3}>
                   <UserAvatar size={AVATAR_SIZE} user="me" />
                   {currentUser?.provider && <LoginProviderLogo provider={currentUser.provider} />}

diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -54,7 +54,7 @@ export function WorkspaceMenuButton(props: WorkspaceMenuButtonProps) {
 
   return (
     <Tooltip
-      content={<Text size={1}>Select workspace</Text>}
+      content="Select workspace"
       disabled={tooltipDisabled}
       placement="bottom"
       portal

diff --git a/...es/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx b/...es/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
@@ -22,13 +22,7 @@ export function InsufficientPermissionsMessageTooltip({
 
   return (
     <Tooltip
-      content={
-        loading ? (
-          <Text>Loading…</Text>
-        ) : (
-          <InsufficientPermissionsMessage currentUser={currentUser} />
-        )
-      }
+      content={loading ? 'Loading…' : <InsufficientPermissionsMessage currentUser={currentUser} />}
       portal
     >
       {/* this wrapping div is to allow mouse events */}

diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
@@ -111,15 +111,7 @@ export const DocumentPanelHeader = memo(
             <PaneContextMenuButton nodes={contextMenuNodes} key="context-menu" />
 
             {showSplitPaneButton && (
-              <Tooltip
-                content={
-                  <Text size={1} style={{whiteSpace: 'nowrap'}}>
-                    Split pane right
-                  </Text>
-                }
-                placement="bottom"
-                portal
-              >
+              <Tooltip content="Split pane right" placement="bottom" portal>
                 <Button
                   aria-label="Split pane right"
                   icon={SplitVerticalIcon}

diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -108,8 +108,6 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
     if (onHandle) onHandle()
   }, [index, onAction, onHandle])
 
-  const tooltipContent = actionState.title && <Text size={1}>{actionState.title}</Text>
-
   return (
     <MenuItem
       data-testid={`action-${actionState.label.replace(' ', '')}`}
@@ -119,8 +117,8 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
       tone={actionState.tone}
     >
       <Tooltip
-        content={tooltipContent}
-        disabled={!tooltipContent}
+        content={actionState.title}
+        disabled={!actionState.title}
         fallbackPlacements={['left', 'bottom']}
         placement="top"
         portal

diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
@@ -21,7 +21,7 @@ function DocumentBadgesInner({states}: DocumentBadgesInnerProps) {
     <Inline space={1}>
       {states.map((badge, index) => (
         <Tooltip
-          content={badge.title && <Text size={1}>{badge.title}</Text>}
+          content={badge.title}
           disabled={!badge.title}
           key={String(index)}
           placement="top"

diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -1,8 +1,16 @@
-import {Tooltip as UITooltip, TooltipProps as UITooltipProps} from '@sanity/ui'
-import React from 'react'
+import {Tooltip as UITooltip, TooltipProps as UITooltipProps, Text} from '@sanity/ui'
+import React, {forwardRef} from 'react'
 
 /** @internal */
-export type TooltipProps = UITooltipProps
+export interface TooltipProps extends UITooltipProps {
+  //pick the props we allow
+  ref?: React.ForwardedRef<HTMLDivElement>
+}
+
+//We want to be able to set the text, like earlier, but then you are not allowed to set content
+//So content OR text
+//OR just have one prop and check if it is a string - then we wrap that text in a <Text />
+// IF it is a reactnode - just render it
 
 /**
  * Studio UI <Tooltip>.
@@ -12,6 +20,22 @@ export type TooltipProps = UITooltipProps
  *
  * @internal
  */
-export const Tooltip = ({...rest}: UITooltipProps) => {
-  return <UITooltip delay={{open: 500}} {...rest} />
-}
+export const Tooltip = forwardRef(function Tooltip(
+  props: TooltipProps,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {content, ...rest} = props
+
+  if (typeof content === 'string') {
+    return (
+      <UITooltip
+        content={<Text size={1}>{content}</Text>}
+        delay={{open: 500}}
+        ref={ref}
+        {...rest}
+      />
+    )
+  }
+
+  return <UITooltip delay={{open: 500}} ref={ref} content={content} {...rest} />
+})