From 3945ec96e9489d327ab77b2211b696731715fb6f Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Thu, 19 Oct 2023 13:31:01 +0200
Subject: [PATCH 01/12] feat(facelift): create StudioUI tooltip with delay and
 replace

---
 .../formField/FormFieldValidationStatus.tsx   |  5 ++-
 .../CrossDatasetReferencePreview.tsx          | 15 +++----
 .../ReferenceInput/PreviewReferenceValue.tsx  |  7 +--
 .../ReferenceInput/ReferencePreview.tsx       | 43 +++++++++----------
 .../navbar/new-document/NewDocumentButton.tsx |  6 +--
 .../navbar/resources/ResourcesButton.tsx      |  9 ++--
 .../filters/addFilter/items/FilterTooltip.tsx |  5 ++-
 .../addFilter/items/MenuItemFilter.tsx        | 22 +---------
 .../components/navbar/userMenu/UserMenu.tsx   | 10 +----
 .../navbar/workspace/WorkspaceMenuButton.tsx  |  8 +---
 .../src/desk/components/DraftStatus.tsx       | 19 ++++----
 .../src/desk/components/PublishedStatus.tsx   | 19 ++++----
 .../header/DocumentPanelHeader.tsx            |  4 +-
 .../statusBar/DocumentStatusBarActions.tsx    |  5 ++-
 .../ReviewChangesButton.tsx                   |  5 ++-
 packages/sanity/src/ui/tooltip/Tooltip.tsx    | 25 ++---------
 16 files changed, 78 insertions(+), 129 deletions(-)

diff --git a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
index a718514b6a0..a4390dad26a 100644
--- a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
+++ b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
@@ -3,9 +3,10 @@
 import {hues} from '@sanity/color'
 import {ErrorOutlineIcon, InfoOutlineIcon, WarningOutlineIcon} from '@sanity/icons'
 import {FormNodeValidation} from '@sanity/types'
-import {Box, Flex, Placement, Stack, Text, Tooltip} from '@sanity/ui'
+import {Box, Flex, Placement, Stack, Text} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
+import {Tooltip} from '../../../../ui'
 
 /** @internal */
 export interface FormFieldValidationStatusProps {
@@ -98,7 +99,7 @@ export function FormFieldValidationStatus(props: FormFieldValidationStatusProps)
   return (
     <Tooltip
       content={
-        <StyledStack padding={3} space={3}>
+        <StyledStack space={3}>
           {showSummary && <FormFieldValidationSummary validation={validation} />}
 
           {!showSummary && (
diff --git a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
index c39f1d343b5..6b597249a3b 100644
--- a/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx
@@ -1,24 +1,23 @@
 import React, {createElement, ReactNode, useMemo} from 'react'
 import {CrossDatasetType, PreviewValue} from '@sanity/types'
-import {Box, Flex, Inline, Label, Text, Tooltip} from '@sanity/ui'
+import {Box, Flex, Inline, Label, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon, LaunchIcon} from '@sanity/icons'
 import imageUrlBuilder from '@sanity/image-url'
 import {isImageSource} from '@sanity/asset-utils'
 import {DocumentAvailability} from '../../../preview'
 import {DefaultPreview, PreviewMediaDimensions, TextWithTone} from '../../../components'
+import {Tooltip} from '../../../../ui'
 import {FIXME} from '../../../FIXME'
 
 import {StyledPreviewFlex, TooltipContent} from './CrossDatasetReferencePreview.styled'
 
 function UnavailableMessage(props: {children: ReactNode}) {
   return (
-    <TooltipContent padding={3}>
+    <TooltipContent>
       <Box flex={1}>
-        <Box>
-          <Text as="p" size={1}>
-            {props.children}
-          </Text>
-        </Box>
+        <Text as="p" size={1}>
+          {props.children}
+        </Text>
       </Box>
     </TooltipContent>
   )
@@ -141,7 +140,7 @@ export function CrossDatasetReferencePreview(props: {
               <Tooltip
                 portal
                 content={
-                  <TooltipContent padding={2}>
+                  <TooltipContent>
                     {hasStudioUrl ? (
                       <Text size={1}>This document opens in a new tab</Text>
                     ) : (
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
index 09d32a0f70c..306559dfdb9 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
@@ -1,10 +1,11 @@
 import React, {ComponentType, ReactNode, Fragment} from 'react'
 import {Reference, ReferenceSchemaType} from '@sanity/types'
-import {Box, Flex, Inline, Label, Stack, Text, Tooltip} from '@sanity/ui'
+import {Box, Flex, Inline, Label, Stack, Text} from '@sanity/ui'
 import {AccessDeniedIcon, HelpCircleIcon} from '@sanity/icons'
 import {RenderPreviewCallback} from '../../types'
 import {SanityDefaultPreview} from '../../../preview'
 import {TextWithTone} from '../../../components'
+import {Tooltip} from '../../../../ui'
 import {ReferencePreview} from './ReferencePreview'
 import {Loadable} from './useReferenceInfo'
 import {ReferenceInfo} from './types'
@@ -142,7 +143,7 @@ export function PreviewReferenceValue(props: {
 function UnavailableMessage(props: {icon: ComponentType; children: ReactNode; title: ReactNode}) {
   const Icon = props.icon
   return (
-    <Flex padding={3}>
+    <Flex>
       <Box>
         <Text size={1}>
           <Icon />
@@ -177,7 +178,7 @@ function InvalidType(props: {documentId: string; actualType: string; declaredTyp
         <Tooltip
           portal
           content={
-            <Stack space={3} padding={3}>
+            <Stack space={3}>
               <Text size={1}>
                 Referenced document (<code>{props.documentId}</code>) is of type{' '}
                 <code>{props.actualType}</code>.
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
index 87d4d413de9..cbd68497dad 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
@@ -1,11 +1,12 @@
 import React, {useMemo} from 'react'
 import {ObjectSchemaType} from '@sanity/types'
-import {Box, Flex, Inline, Label, Text, Tooltip, useRootTheme} from '@sanity/ui'
+import {Box, Flex, Inline, Label, Text, useRootTheme} from '@sanity/ui'
 import {EditIcon, PublishIcon} from '@sanity/icons'
 import {RenderPreviewCallback} from '../../types'
 import {PreviewLayoutKey, TextWithTone} from '../../../components'
 import {useDocumentPresence} from '../../../store'
 import {DocumentPreviewPresence} from '../../../presence'
+import {Tooltip} from '../../../../ui'
 import {TimeAgo} from './utils/TimeAgo'
 import {ReferenceInfo} from './types'
 
@@ -74,17 +75,15 @@ export function ReferencePreview(props: {
               <Tooltip
                 portal
                 content={
-                  <Box padding={2}>
-                    <Text size={1}>
-                      {preview.published?._updatedAt ? (
-                        <>
-                          Published <TimeAgo time={preview.published._updatedAt} />
-                        </>
-                      ) : (
-                        <>Not published</>
-                      )}
-                    </Text>
-                  </Box>
+                  <Text size={1}>
+                    {preview.published?._updatedAt ? (
+                      <>
+                        Published <TimeAgo time={preview.published._updatedAt} />
+                      </>
+                    ) : (
+                      <>Not published</>
+                    )}
+                  </Text>
                 }
               >
                 <TextWithTone
@@ -102,17 +101,15 @@ export function ReferencePreview(props: {
               <Tooltip
                 portal
                 content={
-                  <Box padding={2}>
-                    <Text size={1}>
-                      {preview.draft?._updatedAt ? (
-                        <>
-                          Edited <TimeAgo time={preview.draft._updatedAt} />
-                        </>
-                      ) : (
-                        <>No unpublished edits</>
-                      )}
-                    </Text>
-                  </Box>
+                  <Text size={1}>
+                    {preview.draft?._updatedAt ? (
+                      <>
+                        Edited <TimeAgo time={preview.draft._updatedAt} />
+                      </>
+                    ) : (
+                      <>No unpublished edits</>
+                    )}
+                  </Text>
                 }
               >
                 <TextWithTone
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
index 9cca4e0d29c..704c6f5b76e 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
@@ -1,24 +1,24 @@
 import React, {useCallback, useMemo, useState} from 'react'
 import {
   Box,
-  Tooltip,
   Text,
   useClickOutside,
   Stack,
   TextInput,
   ButtonProps,
-  TooltipProps,
   TextInputProps,
   Label,
   Card,
   Flex,
   Button,
+  TooltipProps,
 } from '@sanity/ui'
 import {ComposeIcon, SearchIcon} from '@sanity/icons'
 import ReactFocusLock from 'react-focus-lock'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useCurrentUser} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
+import {Tooltip} from '../../../../../ui'
 import {NewDocumentList, NewDocumentListProps} from './NewDocumentList'
 import {ModalType, NewDocumentOption} from './types'
 import {filterOptions} from './filter'
@@ -175,7 +175,7 @@ export function NewDocumentButton(props: NewDocumentButtonProps) {
   // Shared tooltip props for the popover and dialog
   const sharedTooltipProps: TooltipProps = useMemo(
     () => ({
-      content: <TooltipContentBox padding={2}>{tooltipContent}</TooltipContentBox>,
+      content: <TooltipContentBox>{tooltipContent}</TooltipContentBox>,
       disabled: loading || open,
       placement: 'bottom',
       portal: true,
diff --git a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
index c017fbc12fb..ddc2ea9c1b8 100644
--- a/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/resources/ResourcesButton.tsx
@@ -1,8 +1,9 @@
 import {HelpCircleIcon} from '@sanity/icons'
-import {Box, Button, Flex, Menu, MenuButton, Text, Tooltip} from '@sanity/ui'
+import {Button, Flex, Menu, MenuButton, Text} from '@sanity/ui'
 import React, {useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {useColorScheme} from '../../../colorScheme'
+import {Tooltip} from '../../../../../ui'
 import {useGetHelpResources} from './helper-functions/hooks'
 import {ResourcesMenuItems} from './ResourcesMenuItems'
 
@@ -23,11 +24,7 @@ export function ResourcesButton() {
   return (
     <Flex>
       <Tooltip
-        content={
-          <Box padding={2}>
-            <Text size={1}>Help and resources </Text>
-          </Box>
-        }
+        content={<Text size={1}>Help and resources</Text>}
         scheme={scheme}
         placement="bottom"
         portal
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
index 76e5ec1d2fa..df3fc758b8e 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx
@@ -1,8 +1,9 @@
-import {Card, Code, Flex, Inline, Label, Stack, Text, Tooltip} from '@sanity/ui'
+import {Card, Code, Flex, Inline, Label, Stack, Text} from '@sanity/ui'
 import {startCase, uniq} from 'lodash'
 import React, {ReactElement, useMemo} from 'react'
 import {useSchema} from '../../../../../../../../hooks'
 import {isNonNullable} from '../../../../../../../../util'
+import {Tooltip} from '../../../../../../../../../ui'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
 import type {SearchFieldDefinition} from '../../../../definitions/fields'
 import type {SearchFilterDefinition} from '../../../../definitions/filters'
@@ -75,7 +76,7 @@ export function FilterTooltip({
     <Tooltip
       content={
         <Card tone="default" radius={2} style={{maxWidth: '250px'}}>
-          <Stack padding={3} space={4}>
+          <Stack space={4}>
             {/* Field name */}
             {fieldDefinition && (
               <Stack space={2}>
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
index dea885d2502..6e4a1d5c3cc 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/MenuItemFilter.tsx
@@ -1,5 +1,5 @@
 import {Box, Button, ResponsiveMarginProps, ResponsivePaddingProps} from '@sanity/ui'
-import React, {useCallback, useEffect, useRef, useState} from 'react'
+import React, {useCallback} from 'react'
 import {useSearchState} from '../../../../contexts/search/useSearchState'
 import type {FilterMenuItemFilter} from '../../../../types'
 import {getFilterKey} from '../../../../utils/filterUtils'
@@ -16,8 +16,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
   onClose,
   ...rest
 }: FilterMenuItemProps) {
-  const [tooltipVisible, setTooltipVisible] = useState(false)
-
   const {
     dispatch,
     state: {filters},
@@ -30,20 +28,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
 
   const isAlreadyActive = !!filters.find((f) => getFilterKey(f) === getFilterKey(item.filter))
 
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
-
-  const handleMouseEnter = useCallback(() => {
-    timeoutRef.current = setTimeout(() => setTooltipVisible(true), 500)
-  }, [])
-  const handleMouseLeave = useCallback(() => {
-    setTooltipVisible(false)
-    clearTimeout(timeoutRef.current)
-  }, [])
-
-  useEffect(() => {
-    return () => clearTimeout(timeoutRef.current)
-  }, [])
-
   // Only enable tooltips if an associated field definition exists, or the filter has a valid description
   const tooltipEnabled = !!(item.fieldDefinition || item.filterDefinition.description)
 
@@ -55,8 +39,6 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
         justify="flex-start"
         mode="bleed"
         onClick={isAlreadyActive ? undefined : handleClick}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
         padding={0}
         style={{position: 'relative', whiteSpace: 'normal', width: '100%'}}
         tabIndex={-1}
@@ -65,7 +47,7 @@ export const MenuItemFilter = React.memo(function MenuItemFilter({
         <FilterTooltip
           fieldDefinition={item.fieldDefinition}
           filterDefinition={item.filterDefinition}
-          visible={tooltipEnabled && tooltipVisible}
+          visible={tooltipEnabled}
         >
           <Box padding={3}>
             <FilterDetails filter={item.filter} />
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
index ad170be1d69..de89976dbca 100644
--- a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -12,13 +12,13 @@ import {
   MenuItem,
   Stack,
   Text,
-  Tooltip,
 } from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {UserAvatar} from '../../../../components'
 import {getProviderTitle} from '../../../../store'
 import {type StudioThemeColorSchemeKey} from '../../../../theme'
+import {Tooltip} from '../../../../../ui'
 import {
   useColorSchemeOptions,
   useColorSchemeSetValue,
@@ -109,13 +109,7 @@ export function UserMenu() {
               <Tooltip
                 disabled={!providerTitle}
                 portal
-                content={
-                  providerTitle && (
-                    <Box padding={2}>
-                      <Text size={1}>Signed in with {providerTitle}</Text>
-                    </Box>
-                  )
-                }
+                content={providerTitle && <Text size={1}>Signed in with {providerTitle}</Text>}
               >
                 <AvatarBox marginRight={3}>
                   <UserAvatar size={AVATAR_SIZE} user="me" />
diff --git a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
index 67fc4f3d7dd..9275c4832fe 100644
--- a/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/workspace/WorkspaceMenuButton.tsx
@@ -7,7 +7,6 @@ import {
   MenuButtonProps,
   Box,
   Label,
-  Tooltip,
   Text,
   Stack,
 } from '@sanity/ui'
@@ -16,6 +15,7 @@ import styled from 'styled-components'
 import {useActiveWorkspace} from '../../../activeWorkspaceMatcher'
 import {useColorScheme} from '../../../colorScheme'
 import {useWorkspaces} from '../../../workspaces'
+import {Tooltip} from '../../../../../ui'
 import {useWorkspaceAuthStates} from './hooks'
 import {WorkspacePreview} from './WorkspacePreview'
 import {useRouter} from 'sanity/router'
@@ -54,11 +54,7 @@ export function WorkspaceMenuButton(props: WorkspaceMenuButtonProps) {
 
   return (
     <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>Select workspace</Text>
-        </Box>
-      }
+      content={<Text size={1}>Select workspace</Text>}
       disabled={tooltipDisabled}
       placement="bottom"
       portal
diff --git a/packages/sanity/src/desk/components/DraftStatus.tsx b/packages/sanity/src/desk/components/DraftStatus.tsx
index 19c2e04b2fa..16f5e59587d 100644
--- a/packages/sanity/src/desk/components/DraftStatus.tsx
+++ b/packages/sanity/src/desk/components/DraftStatus.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import {EditIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Box, Text, Tooltip} from '@sanity/ui'
+import {Text} from '@sanity/ui'
+import {Tooltip} from '../../ui'
 import {TimeAgo} from './TimeAgo'
 import {TextWithTone} from 'sanity'
 
@@ -13,15 +14,13 @@ export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocu
     <Tooltip
       portal
       content={
-        <Box padding={2}>
-          <Text size={1}>
-            {document ? (
-              <>Edited {updatedAt && <TimeAgo time={updatedAt} />}</>
-            ) : (
-              <>No unpublished edits</>
-            )}
-          </Text>
-        </Box>
+        <Text size={1}>
+          {document ? (
+            <>Edited {updatedAt && <TimeAgo time={updatedAt} />}</>
+          ) : (
+            <>No unpublished edits</>
+          )}
+        </Text>
       }
     >
       <TextWithTone tone="caution" dimmed={!document} muted={!document} size={1}>
diff --git a/packages/sanity/src/desk/components/PublishedStatus.tsx b/packages/sanity/src/desk/components/PublishedStatus.tsx
index 0f257979df1..dc0d7c15f69 100644
--- a/packages/sanity/src/desk/components/PublishedStatus.tsx
+++ b/packages/sanity/src/desk/components/PublishedStatus.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import {PublishIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Box, Text, Tooltip} from '@sanity/ui'
+import {Text} from '@sanity/ui'
+import {Tooltip} from '../../ui'
 import {TimeAgo} from './TimeAgo'
 import {TextWithTone} from 'sanity'
 
@@ -14,15 +15,13 @@ export function PublishedStatus(props: {document?: PreviewValue | Partial<Sanity
     <Tooltip
       portal
       content={
-        <Box padding={2}>
-          <Text size={1}>
-            {document ? (
-              <>Published {updatedAt && <TimeAgo time={updatedAt} />}</>
-            ) : (
-              <>Not published</>
-            )}
-          </Text>
-        </Box>
+        <Text size={1}>
+          {document ? (
+            <>Published {updatedAt && <TimeAgo time={updatedAt} />}</>
+          ) : (
+            <>Not published</>
+          )}
+        </Text>
       }
     >
       <TextWithTone tone="positive" dimmed={!document} muted={!document} size={1}>
diff --git a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
index b8a8efa4169..dd2567f3618 100644
--- a/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
+++ b/packages/sanity/src/desk/panes/document/documentPanel/header/DocumentPanelHeader.tsx
@@ -1,5 +1,5 @@
 import {ArrowLeftIcon, CloseIcon, SplitVerticalIcon} from '@sanity/icons'
-import {Button, Flex, Text, Tooltip} from '@sanity/ui'
+import {Button, Flex, Text} from '@sanity/ui'
 import React, {createElement, memo, forwardRef, useMemo} from 'react'
 import {
   PaneContextMenuButton,
@@ -12,6 +12,7 @@ import {TimelineMenu} from '../../timeline'
 import {useDocumentPane} from '../../useDocumentPane'
 import {isMenuNodeButton, isNotMenuNodeButton, resolveMenuNodes} from '../../../../menuNodes'
 import {useDeskTool} from '../../../../useDeskTool'
+import {Tooltip} from '../../../../../ui'
 import {DocumentHeaderTabs} from './DocumentHeaderTabs'
 import {DocumentHeaderTitle} from './DocumentHeaderTitle'
 import {useFieldActions, useTimelineSelector} from 'sanity'
@@ -116,7 +117,6 @@ export const DocumentPanelHeader = memo(
                     Split pane right
                   </Text>
                 }
-                padding={2}
                 placement="bottom"
                 portal
               >
diff --git a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
index a377ba61636..e671ba7214d 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -1,7 +1,8 @@
-import {Box, Flex, Tooltip, Stack, Button, Hotkeys, LayerProvider, Text} from '@sanity/ui'
+import {Box, Flex, Stack, Button, Hotkeys, LayerProvider, Text} from '@sanity/ui'
 import React, {memo, useMemo, useState} from 'react'
 import {RenderActionCollectionState} from '../../../components'
 import {HistoryRestoreAction} from '../../../documentActions'
+import {Tooltip} from '../../../../ui'
 import {useDocumentPane} from '../useDocumentPane'
 import {ActionMenuButton} from './ActionMenuButton'
 import {ActionStateDialog} from './ActionStateDialog'
@@ -22,7 +23,7 @@ function DocumentStatusBarActionsInner(props: DocumentStatusBarActionsInnerProps
     if (!firstActionState || (!firstActionState.title && !firstActionState.shortcut)) return null
 
     return (
-      <Flex padding={2} style={{maxWidth: 300}} align="center">
+      <Flex style={{maxWidth: 300}} align="center">
         <Text size={1}>{firstActionState.title}</Text>
         {firstActionState.shortcut && (
           <Box marginLeft={firstActionState.title ? 2 : 0}>
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
index 1f1cc80394e..6723d53896c 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/ReviewChangesButton/ReviewChangesButton.tsx
@@ -1,5 +1,6 @@
 import React, {useMemo} from 'react'
-import {Box, Button, ButtonProps, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {Box, Button, ButtonProps, Flex, Stack, Text} from '@sanity/ui'
+import {Tooltip} from '../../../../../../ui'
 import {AnimatedStatusIcon} from './AnimatedStatusIcon'
 import {useTimeAgo} from 'sanity'
 
@@ -51,7 +52,7 @@ const ReviewButton = React.forwardRef(function ReviewButton(
       portal
       disabled={status !== 'changes'}
       content={
-        <Stack padding={3} space={3}>
+        <Stack space={3}>
           <Text size={1} weight="semibold">
             Review changes
           </Text>
diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index 77748f99edf..3d81f2b35d1 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -1,17 +1,7 @@
-import {
-  Text,
-  Tooltip as UITooltip,
-  TooltipProps as UITooltipProps,
-  HotkeysProps as UIHotkeysProps,
-} from '@sanity/ui'
+import {Tooltip as UITooltip, TooltipProps as UITooltipProps} from '@sanity/ui'
 import React from 'react'
 
 /** @internal */
-export interface TooltipProps
-  extends Pick<UITooltipProps, 'children' | 'disabled' | 'placement' | 'scheme'>,
-    Pick<UIHotkeysProps, 'keys'> {
-  text: string
-}
 
 /**
  * Studio UI <Tooltip>.
@@ -21,15 +11,6 @@ export interface TooltipProps
  *
  * @internal
  */
-export const Tooltip = ({text, ...rest}: TooltipProps) => {
-  return (
-    <UITooltip
-      content={
-        <Text size={1} weight="medium">
-          {text}
-        </Text>
-      }
-      {...rest}
-    />
-  )
+export const Tooltip = ({...rest}: UITooltipProps) => {
+  return <UITooltip delay={{open: 500}} {...rest} />
 }

From 046680383d520a6819b268b27db95d1b76e535d1 Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Thu, 19 Oct 2023 13:53:02 +0200
Subject: [PATCH 02/12] fix(core/desk): use StudioUi Tooltip

---
 .../components/InsufficientPermissionsMessage.tsx |  2 +-
 .../src/core/components/userAvatar/UserAvatar.tsx | 13 +++----------
 .../__workshop__/customSchema/blockActions.tsx    | 13 +++----------
 .../inputs/PortableText/object/Annotation.tsx     |  4 ++--
 .../inputs/PortableText/object/BlockObject.tsx    |  5 +++--
 .../inputs/PortableText/object/InlineObject.tsx   |  4 ++--
 .../form/inputs/PortableText/text/TextBlock.tsx   |  5 +++--
 .../form/inputs/PortableText/toolbar/Toolbar.tsx  |  5 +++--
 .../form/inputs/ReferenceInput/CreateButton.tsx   | 15 ++++-----------
 .../ArrayOfObjectsFunctions.tsx                   | 15 +++------------
 .../ArrayOfPrimitivesFunctions.tsx                |  5 +++--
 .../src/core/form/studio/assetSource/AssetRow.tsx |  9 +++------
 .../src/core/presence/DocumentPreviewPresence.tsx |  5 +++--
 .../sanity/src/core/presence/PresenceTooltip.tsx  |  5 +++--
 .../studio/components/navbar/StudioNavbar.tsx     |  2 --
 .../ConfirmDeleteDialogBody.styles.tsx            | 13 ++++++-------
 .../InsufficientPermissionsMessageTooltip.tsx     |  7 +++----
 .../panes/document/statusBar/ActionMenuButton.tsx |  8 ++------
 .../statusBar/sparkline/PublishStatus.tsx         |  5 +++--
 19 files changed, 53 insertions(+), 87 deletions(-)

diff --git a/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx b/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
index c763e32af26..650e8ff205b 100644
--- a/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
+++ b/packages/sanity/src/core/components/InsufficientPermissionsMessage.tsx
@@ -22,7 +22,7 @@ export function InsufficientPermissionsMessage(props: InsufficientPermissionsMes
   const plural = roles.length !== 1
 
   return (
-    <Box padding={2}>
+    <Box>
       <Inline space={2}>
         <Text size={1}>
           <AccessDeniedIcon />
diff --git a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
index ce22b510931..40316db344f 100644
--- a/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
+++ b/packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
@@ -1,9 +1,10 @@
-import {Avatar, AvatarPosition, AvatarSize, AvatarStatus, Box, Text, Tooltip} from '@sanity/ui'
+import {Avatar, AvatarPosition, AvatarSize, AvatarStatus, Text} from '@sanity/ui'
 import React, {forwardRef, useState} from 'react'
 import type {User} from '@sanity/types'
 import {useUser} from '../../store'
 import {isRecord} from '../../util'
 import {useUserColor} from '../../user-color'
+import {Tooltip} from '../../../ui'
 
 /**
  * @hidden
@@ -60,15 +61,7 @@ function TooltipUserAvatar(props: Omit<UserAvatarProps, 'user'> & {user: User})
   } = props
 
   return (
-    <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>{displayName}</Text>
-        </Box>
-      }
-      placement="top"
-      portal
-    >
+    <Tooltip content={<Text size={1}>{displayName}</Text>} 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
index d6b68fdf6f7..f6113f3a800 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/__workshop__/customSchema/blockActions.tsx
@@ -1,9 +1,10 @@
-import {Box, Button, Text, Tooltip} from '@sanity/ui'
+import {Button, Text} from '@sanity/ui'
 import React, {memo, useCallback} from 'react'
 import {CopyIcon} from '@sanity/icons'
 import {keyGenerator} from '@sanity/portable-text-editor'
 import {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {RenderBlockActionsCallback} from '../../types'
+import {Tooltip} from '../../../../../../ui'
 
 const BlockActions = memo(function BlockActions(props: {
   block: PortableTextBlock
@@ -28,15 +29,7 @@ const BlockActions = memo(function BlockActions(props: {
   }, [block, insert])
 
   return (
-    <Tooltip
-      content={
-        <Box padding={2}>
-          <Text size={1}>Duplicate</Text>
-        </Box>
-      }
-      placement="right"
-      portal="default"
-    >
+    <Tooltip content={<Text size={1}>Duplicate</Text>} placement="right" portal="default">
       <Button
         aria-label="Duplicate"
         fontSize={1}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
index 156c3927122..4993e3a9f0c 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx
@@ -1,6 +1,5 @@
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextObject} from '@sanity/types'
-import {Tooltip} from '@sanity/ui'
 import React, {ComponentType, useCallback, useMemo, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
 import {pathToString} from '../../../../field'
@@ -22,6 +21,7 @@ import {usePortableTextMemberItem} from '../hooks/usePortableTextMembers'
 import {debugRender} from '../debugRender'
 import {useChildPresence} from '../../../studio/contexts/Presence'
 import {EMPTY_ARRAY} from '../../../../util'
+import {Tooltip} from '../../../../../ui'
 import {AnnotationToolbarPopover} from './AnnotationToolbarPopover'
 import {Root, TooltipBox} from './Annotation.styles'
 import {ObjectEditModal} from './modals/ObjectEditModal'
@@ -122,7 +122,7 @@ export function Annotation(props: AnnotationProps) {
           placement="bottom"
           portal="default"
           content={
-            <TooltipBox padding={2}>
+            <TooltipBox>
               <Markers
                 markers={markers}
                 renderCustomMarkers={renderCustomMarkers}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
index 2a39a7912dd..73eee05d1ad 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx
@@ -5,7 +5,7 @@ import {
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextBlock, isImage} from '@sanity/types'
-import {Tooltip, Flex, ResponsivePaddingProps, Box} from '@sanity/ui'
+import {Flex, ResponsivePaddingProps, Box} from '@sanity/ui'
 import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
 import {
@@ -30,6 +30,7 @@ import {debugRender} from '../debugRender'
 import {EMPTY_ARRAY} from '../../../../util'
 import {useChildPresence} from '../../../studio/contexts/Presence'
 import {useFormCallbacks} from '../../../studio'
+import {Tooltip} from '../../../../../ui'
 import {
   Root,
   ChangeIndicatorWrapper,
@@ -187,7 +188,7 @@ export function BlockObject(props: BlockObjectProps) {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             validation={validation}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
index f886216daa6..ba299faa784 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
@@ -5,7 +5,6 @@ import {
 } from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
-import {Tooltip} from '@sanity/ui'
 import {isEqual} from '@sanity/util/paths'
 import {
   BlockProps,
@@ -24,6 +23,7 @@ import {usePortableTextMemberItem} from '../hooks/usePortableTextMembers'
 import {pathToString} from '../../../../field/paths'
 import {EMPTY_ARRAY} from '../../../../util'
 import {useChildPresence} from '../../../studio/contexts/Presence'
+import {Tooltip} from '../../../../../ui'
 import {InlineObjectToolbarPopover} from './InlineObjectToolbarPopover'
 import {ObjectEditModal} from './modals/ObjectEditModal'
 import {PreviewSpan, Root, TooltipBox} from './InlineObject.styles'
@@ -186,7 +186,7 @@ export const InlineObject = (props: InlineObjectProps) => {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             validation={validation}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
index 1a4d15fd237..92e0e2ab08b 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx
@@ -1,4 +1,4 @@
-import {Box, Flex, ResponsivePaddingProps, Tooltip, Text} from '@sanity/ui'
+import {Box, Flex, ResponsivePaddingProps, Text} from '@sanity/ui'
 import React, {RefObject, useCallback, useMemo, useState} from 'react'
 import {ObjectSchemaType, Path, PortableTextTextBlock} from '@sanity/types'
 import {
@@ -29,6 +29,7 @@ import {debugRender} from '../debugRender'
 import {EMPTY_ARRAY} from '../../../../util'
 import {useChildPresence} from '../../../studio/contexts/Presence'
 import {useFormCallbacks} from '../../../studio'
+import {Tooltip} from '../../../../../ui'
 import {TEXT_STYLE_PADDING} from './constants'
 import {
   BlockActionsInner,
@@ -246,7 +247,7 @@ export function TextBlock(props: TextBlockProps) {
   const toolTipContent = useMemo(
     () =>
       (tooltipEnabled && (
-        <TooltipBox padding={2}>
+        <TooltipBox>
           <Markers
             markers={markers}
             renderCustomMarkers={renderCustomMarkers}
diff --git a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
index b90640b8277..51fdf892f9b 100644
--- a/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
+++ b/packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx
@@ -6,11 +6,12 @@ import {
 } from '@sanity/portable-text-editor'
 import React, {memo, useCallback, useMemo, useState} from 'react'
 import {ObjectSchemaType, Path, SchemaType} from '@sanity/types'
-import {Box, Button, Flex, Hotkeys, Text, Tooltip, useElementRect, useToast} from '@sanity/ui'
+import {Box, Button, Flex, Hotkeys, Text, useElementRect, useToast} from '@sanity/ui'
 import {CollapseIcon, ExpandIcon} from '@sanity/icons'
 import styled, {css} from 'styled-components'
 import {useRovingFocus} from '../../../../components'
 import {useResolveInitialValueForType} from '../../../../store'
+import {Tooltip} from '../../../../../ui'
 import {ActionMenu} from './ActionMenu'
 import {BlockStyleSelect} from './BlockStyleSelect'
 import {InsertMenu} from './InsertMenu'
@@ -129,7 +130,7 @@ const InnerToolbar = memo(function InnerToolbar({
       <FullscreenButtonBox padding={isFullscreen ? 2 : 1}>
         <Tooltip
           content={
-            <Flex align="center" padding={1}>
+            <Flex align="center">
               <Box flex={1} paddingX={1}>
                 <Text size={1}>{`${isFullscreen ? 'Collapse' : 'Expand'} editor`}</Text>
               </Box>
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
index 7ce2eb3a16e..874acb61d30 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx
@@ -1,7 +1,8 @@
 import React, {ComponentProps} from 'react'
 import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Tooltip} from '@sanity/ui'
+import {Button, Menu, MenuButton, MenuButtonProps, MenuItem} from '@sanity/ui'
 import {InsufficientPermissionsMessage} from '../../../components'
+import {Tooltip} from '../../../../ui'
 import {CreateReferenceOption} from './types'
 
 interface Props extends ComponentProps<typeof Button> {
@@ -30,13 +31,7 @@ export function CreateButton(props: Props) {
   const canCreateAny = createOptions.some((option) => option.permission.granted)
   if (!canCreateAny) {
     return (
-      <Tooltip
-        content={
-          <Box padding={2}>
-            <InsufficientPermissionsMessage operationLabel="create a new reference" />
-          </Box>
-        }
-      >
+      <Tooltip content={<InsufficientPermissionsMessage operationLabel="create a new reference" />}>
         {/* this wrapper div is needed because disabled button doesn't trigger mouse events */}
         <div style={INLINE_BLOCK_STYLE}>
           <Button text="Create new" mode="ghost" disabled icon={AddIcon} style={FULL_WIDTH} />
@@ -64,9 +59,7 @@ export function CreateButton(props: Props) {
               disabled={createOption.permission.granted}
               key={createOption.id}
               content={
-                <Box padding={2}>
-                  <InsufficientPermissionsMessage operationLabel="create this type of document" />
-                </Box>
+                <InsufficientPermissionsMessage operationLabel="create this type of document" />
               }
               portal
             >
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
index 23e18210219..9b9235b8152 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
@@ -1,18 +1,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useId, useCallback} from 'react'
-import {
-  Box,
-  Button,
-  Grid,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Tooltip,
-  Text,
-  MenuButtonProps,
-} from '@sanity/ui'
+import {Box, Button, Grid, Menu, MenuButton, MenuItem, Text, MenuButtonProps} from '@sanity/ui'
 import {ArrayInputFunctionsProps, ObjectItem} from '../../../types'
+import {Tooltip} from '../../../../../ui'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,
@@ -48,7 +39,7 @@ export function ArrayOfObjectsFunctions<
       <Tooltip
         portal
         content={
-          <Box padding={2} sizing="border">
+          <Box sizing="border">
             <Text size={1}>This field is read-only</Text>
           </Box>
         }
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
index 7b7d6b4857f..1d700ac1cc6 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
@@ -2,8 +2,9 @@
 import {ArraySchemaType, isReferenceSchemaType} from '@sanity/types'
 import {AddIcon} from '@sanity/icons'
 import React, {useMemo, useId} from 'react'
-import {Box, Button, Grid, Menu, MenuButton, MenuItem, Tooltip, Text} from '@sanity/ui'
+import {Box, Button, Grid, Menu, MenuButton, MenuItem, Text} from '@sanity/ui'
 import {ArrayInputFunctionsProps} from '../../../types'
+import {Tooltip} from '../../../../../ui'
 
 /**
  * @hidden
@@ -33,7 +34,7 @@ export function ArrayOfPrimitivesFunctions<
       <Tooltip
         portal
         content={
-          <Box padding={2} sizing="border">
+          <Box sizing="border">
             <Text size={1}>This field is read-only</Text>
           </Box>
         }
diff --git a/packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx b/packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx
index 967156459e3..b28d939b237 100644
--- a/packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx
+++ b/packages/sanity/src/core/form/studio/assetSource/AssetRow.tsx
@@ -1,12 +1,13 @@
 import type {Subscription} from 'rxjs'
 import React, {useRef, useState} from 'react'
 import styled, {css} from 'styled-components'
-import {Button, Box, Card, Flex, Stack, Label, Text, Tooltip, Grid, useToast} from '@sanity/ui'
+import {Button, Box, Card, Flex, Stack, Label, Text, Grid, useToast} from '@sanity/ui'
 import {DocumentIcon, ChevronUpIcon, ChevronDownIcon, LinkIcon, TrashIcon} from '@sanity/icons'
 import {Asset as AssetType} from '@sanity/types'
 import {FIXME} from '../../../FIXME'
 import {useClient, useTimeAgo} from '../../../hooks'
 import {DEFAULT_STUDIO_CLIENT_OPTIONS} from '../../../studioClient'
+import {Tooltip} from '../../../../ui'
 import {prettyBytes} from './prettyBytes'
 import {AssetUsageDialog} from './AssetUsageDialog'
 import {AssetMenu} from './AssetMenu'
@@ -357,11 +358,7 @@ export const AssetRow = (props: RowProps) => {
             </Card>
             {showTooltip && (
               <Tooltip
-                content={
-                  <Box padding={2}>
-                    <Text size={1}>{originalFilename}</Text>
-                  </Box>
-                }
+                content={<Text size={1}>{originalFilename}</Text>}
                 fallbackPlacements={['right', 'left']}
                 placement="top"
                 portal
diff --git a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
index 4402f2d89ee..bb0ae17ff17 100644
--- a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
+++ b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
@@ -1,9 +1,10 @@
-import {AvatarStack, Box, Card, Text, Theme, Tooltip, TooltipProps} from '@sanity/ui'
+import {AvatarStack, Box, Card, Text, Theme, TooltipProps} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled, {css, useTheme} from 'styled-components'
 import {usePreviewCard, UserAvatar} from '../components'
 import {DocumentPresence} from '../store'
 import {isNonNullable} from '../util'
+import {Tooltip} from '../../ui'
 
 /** @internal */
 export interface DocumentPreviewPresenceProps {
@@ -59,7 +60,7 @@ export function DocumentPreviewPresence(props: DocumentPreviewPresenceProps) {
 
   const tooltipContent = useMemo(() => {
     return (
-      <TooltipContentBox padding={2}>
+      <TooltipContentBox>
         <Text align="center" size={1}>
           {getTooltipText(uniqueUsers)}
         </Text>
diff --git a/packages/sanity/src/core/presence/PresenceTooltip.tsx b/packages/sanity/src/core/presence/PresenceTooltip.tsx
index 7e1045bc08c..531b9d1d34f 100644
--- a/packages/sanity/src/core/presence/PresenceTooltip.tsx
+++ b/packages/sanity/src/core/presence/PresenceTooltip.tsx
@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react'
-import {Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {Flex, Stack, Text} from '@sanity/ui'
 import {UserAvatar} from '../components/userAvatar'
+import {Tooltip} from '../../ui'
 import {FormNodePresence} from './types'
 
 interface PresenceTooltipProps {
@@ -19,7 +20,7 @@ export function PresenceTooltip(props: PresenceTooltipProps) {
 
   const content = useMemo(
     () => (
-      <Stack padding={1} sizing="border">
+      <Stack sizing="border">
         {items.map((item) => (
           <Flex align="center" gap={2} padding={1} key={item.user.id}>
             <div>
diff --git a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
index 07d83d92075..daa219c9106 100644
--- a/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/StudioNavbar.tsx
@@ -8,8 +8,6 @@ import {
   Layer,
   LayerProvider,
   PortalProvider,
-  Text,
-  Tooltip,
   useMediaIndex,
   useRootTheme,
 } from '@sanity/ui'
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
index 89eeccea22e..d0f25e32573 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
-import {rem, Flex, Text, Box, Tooltip, Container, Inline} from '@sanity/ui'
+import {rem, Flex, Text, Box, Container, Inline} from '@sanity/ui'
 import {InfoOutlineIcon} from '@sanity/icons'
+import {Tooltip} from '../../../ui'
 
 export const ChevronWrapper = styled(Box)`
   margin-left: auto;
@@ -62,12 +63,10 @@ export const OtherReferenceCount = (props: {totalCount: number; references: unkn
         placement="top"
         content={
           <Container width={0}>
-            <Box padding={2}>
-              <Text size={1}>
-                We can't show metadata about these references because no token with access to the
-                datasets they are in was found.
-              </Text>
-            </Box>
+            <Text size={1}>
+              We can't show metadata about these references because no token with access to the
+              datasets they are in was found.
+            </Text>
           </Container>
         }
       >
diff --git a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
index 1a921c5cf26..29498349002 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
+++ b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
@@ -1,5 +1,6 @@
-import {Tooltip, Text, Box} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import React from 'react'
+import {Tooltip} from '../../../ui'
 import {useCurrentUser, InsufficientPermissionsMessage} from 'sanity'
 
 interface InsufficientPermissionsMessageTooltipProps {
@@ -23,9 +24,7 @@ export function InsufficientPermissionsMessageTooltip({
     <Tooltip
       content={
         loading ? (
-          <Box padding={2}>
-            <Text>Loading…</Text>
-          </Box>
+          <Text>Loading…</Text>
         ) : (
           <InsufficientPermissionsMessage currentUser={currentUser} />
         )
diff --git a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
index 7e57dfc8f96..7973158a00c 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/ActionMenuButton.tsx
@@ -9,7 +9,6 @@ import {
   MenuItem,
   PopoverProps,
   Text,
-  Tooltip,
 } from '@sanity/ui'
 import React, {
   createElement,
@@ -21,6 +20,7 @@ import React, {
   useId,
 } from 'react'
 import {isValidElementType} from 'react-is'
+import {Tooltip} from '../../../../ui'
 import {ActionStateDialog} from './ActionStateDialog'
 import {DocumentActionDescription, LegacyLayerProvider} from 'sanity'
 
@@ -108,11 +108,7 @@ function ActionMenuListItem(props: ActionMenuListItemProps) {
     if (onHandle) onHandle()
   }, [index, onAction, onHandle])
 
-  const tooltipContent = actionState.title && (
-    <Box padding={2}>
-      <Text size={1}>{actionState.title}</Text>
-    </Box>
-  )
+  const tooltipContent = actionState.title && <Text size={1}>{actionState.title}</Text>
 
   return (
     <MenuItem
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx
index 550802f7a8b..8042c9ca553 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/PublishStatus.tsx
@@ -1,7 +1,8 @@
-import {Box, Button, Flex, Stack, Text, Tooltip} from '@sanity/ui'
+import {Box, Button, Flex, Stack, Text} from '@sanity/ui'
 import {PlayIcon, PublishIcon} from '@sanity/icons'
 import React from 'react'
 import styled from 'styled-components'
+import {Tooltip} from '../../../../../ui'
 import {useTimeAgo} from 'sanity'
 
 interface PublishStatusProps {
@@ -42,7 +43,7 @@ export function PublishStatus(props: PublishStatusProps) {
         placement="top"
         portal
         content={
-          <Stack padding={3} space={3}>
+          <Stack space={3}>
             <Text size={1}>
               {liveEdit ? (
                 <>

From 01db122bffdadc000920f94edf1cb4486e1ca85b Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Thu, 19 Oct 2023 15:12:13 +0200
Subject: [PATCH 03/12] fix(core/desk): use Studio UI tooltip

---
 .../vision/src/components/VisionGui.tsx       | 18 ++++-----------
 .../src/core/components/StatusButton.tsx      | 23 +++----------------
 .../components/collapseMenu/CollapseMenu.tsx  |  9 +++-----
 .../previews/general/MediaPreview.styled.ts   |  2 +-
 .../previews/general/MediaPreview.tsx         |  3 ++-
 .../field/diff/components/DiffTooltip.tsx     |  5 ++--
 .../core/presence/DocumentPreviewPresence.tsx |  4 ++--
 .../navbar/new-document/NewDocumentButton.tsx |  3 +--
 .../new-document/NewDocumentListOption.tsx    |  5 ++--
 .../searchResults/item/DebugOverlay.tsx       |  5 ++--
 .../desk/components/NotPublishedStatus.tsx    |  3 ++-
 packages/sanity/src/ui/tooltip/Tooltip.tsx    |  1 +
 12 files changed, 29 insertions(+), 52 deletions(-)

diff --git a/packages/@sanity/vision/src/components/VisionGui.tsx b/packages/@sanity/vision/src/components/VisionGui.tsx
index 7f82df3a6b6..496fa0789c8 100644
--- a/packages/@sanity/vision/src/components/VisionGui.tsx
+++ b/packages/@sanity/vision/src/components/VisionGui.tsx
@@ -13,12 +13,12 @@ import {
   Select,
   Text,
   TextInput,
-  Tooltip,
   Grid,
   Button,
   ToastContextValue,
   Inline,
 } from '@sanity/ui'
+import {Tooltip} from 'sanity/src/ui'
 import {VisionCodeMirror} from '../codemirror/VisionCodeMirror'
 import {getLocalStorage, LocalStorageish} from '../util/localStorage'
 import {parseApiQueryString, ParsedApiQueryString} from '../util/parseApiQueryString'
@@ -756,7 +756,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                     </Box>
                     <Tooltip
                       content={
-                        <Box padding={2}>
+                        <Box>
                           <Text>Copy to clipboard</Text>
                         </Box>
                       }
@@ -825,15 +825,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                       <Flex>
                         <StyledLabel muted>Params</StyledLabel>
                         {paramsError && (
-                          <Tooltip
-                            placement="top-end"
-                            portal
-                            content={
-                              <Box padding={2}>
-                                <Text>{paramsError}</Text>
-                              </Box>
-                            }
-                          >
+                          <Tooltip placement="top-end" portal content={<Text>{paramsError}</Text>}>
                             <Box padding={1} marginX={2}>
                               <Text>
                                 <ErrorOutlineIcon />
@@ -850,7 +842,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                     <Card padding={3} paddingX={3}>
                       <Tooltip
                         content={
-                          <Card padding={2} radius={4}>
+                          <Card radius={4}>
                             <Text size={1} muted>
                               Parameters are not valid JSON
                             </Text>
@@ -864,7 +856,7 @@ export class VisionGui extends React.PureComponent<VisionGuiProps, VisionGuiStat
                           <Box flex={1}>
                             <Tooltip
                               content={
-                                <Card padding={2} radius={4}>
+                                <Card radius={4}>
                                   <Hotkeys keys={['Ctrl', 'Enter']} />
                                 </Card>
                               }
diff --git a/packages/sanity/src/core/components/StatusButton.tsx b/packages/sanity/src/core/components/StatusButton.tsx
index ba5c96277c1..22c619e7d46 100644
--- a/packages/sanity/src/core/components/StatusButton.tsx
+++ b/packages/sanity/src/core/components/StatusButton.tsx
@@ -1,15 +1,4 @@
-import {
-  Box,
-  Button,
-  ButtonMode,
-  ButtonProps,
-  Flex,
-  Hotkeys,
-  Text,
-  Tooltip,
-  TooltipProps,
-  useTheme,
-} from '@sanity/ui'
+import {Box, Button, ButtonMode, ButtonProps, Flex, Hotkeys, Text, useTheme} from '@sanity/ui'
 import React, {
   createElement,
   isValidElement,
@@ -21,6 +10,7 @@ import React, {
 } from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
+import {Tooltip, TooltipProps} from '../../ui'
 
 /** @hidden @beta */
 export interface StatusButtonProps extends Omit<ButtonProps, 'iconRight'> {
@@ -79,14 +69,7 @@ export const StatusButton = forwardRef(function StatusButton(
     )
 
   return (
-    <Tooltip
-      padding={2}
-      placement="bottom"
-      {...tooltip}
-      content={tooltipContent}
-      disabled={!label}
-      portal
-    >
+    <Tooltip placement="bottom" {...tooltip} content={tooltipContent} disabled={!label} portal>
       <div>
         <Button
           data-ui="StatusButton"
diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
index 89d5dca8f12..19ea64ca744 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
@@ -1,7 +1,8 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Box, Button, Flex, MenuButtonProps, Text, Tooltip, useElementRect} from '@sanity/ui'
+import {Button, Flex, MenuButtonProps, Text, useElementRect} from '@sanity/ui'
 import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
 import styled, {css} from 'styled-components'
+import {Tooltip} from '../../../ui'
 import {CollapseOverflowMenu} from './CollapseOverflowMenu'
 import {ObserveElement} from './ObserveElement'
 import {CollapseMenuDivider} from './CollapseMenuDivider'
@@ -201,11 +202,7 @@ export const CollapseMenu = forwardRef(function CollapseMenu(
                   <Tooltip
                     portal
                     disabled={!tooltipText}
-                    content={
-                      <Box padding={2} sizing="border">
-                        <Text size={1}>{tooltipText}</Text>
-                      </Box>
-                    }
+                    content={<Text size={1}>{tooltipText}</Text>}
                     {...tooltipProps}
                   >
                     <Flex>
diff --git a/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts b/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
index a2bc2d44c8e..ef0e4b59836 100644
--- a/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
+++ b/packages/sanity/src/core/components/previews/general/MediaPreview.styled.ts
@@ -43,6 +43,6 @@ export const ProgressFlex = styled(Flex).attrs({align: 'center', justify: 'cente
   }
 `
 
-export const TooltipContentStack = styled(Stack).attrs({padding: 2, space: 2})`
+export const TooltipContentStack = styled(Stack).attrs({space: 2})`
   max-width: ${rem(200)};
 `
diff --git a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
index 53929b31d18..44ba967e869 100644
--- a/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
+++ b/packages/sanity/src/core/components/previews/general/MediaPreview.tsx
@@ -1,8 +1,9 @@
 import React, {useMemo} from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
-import {Text, Tooltip} from '@sanity/ui'
+import {Text} from '@sanity/ui'
 import {CircularProgress} from '../../progress'
 import {Media} from '../_common/Media'
+import {Tooltip} from '../../../../ui'
 import {PREVIEW_MEDIA_SIZE} from '../constants'
 import {PreviewMediaDimensions, PreviewProps} from '../types'
 import {renderPreviewNode} from '../helpers'
diff --git a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
index c6cbe958a8e..34d1b5732e3 100644
--- a/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
+++ b/packages/sanity/src/core/field/diff/components/DiffTooltip.tsx
@@ -1,11 +1,12 @@
 import {Path} from '@sanity/types'
-import {Tooltip, TooltipProps, Text, Stack, Flex, Inline, Label} from '@sanity/ui'
+import {Text, Stack, Flex, Inline, Label} from '@sanity/ui'
 import React from 'react'
 import {LegacyLayerProvider, UserAvatar} from '../../../components'
 import {useTimeAgo} from '../../../hooks'
 import {useUser} from '../../../store'
 import {AnnotationDetails, Diff} from '../../types'
 import {getAnnotationAtPath, useAnnotationColor} from '../annotations'
+import {Tooltip, TooltipProps} from '../../../../ui'
 
 /** @internal */
 export interface DiffTooltipProps extends TooltipProps {
@@ -42,7 +43,7 @@ function DiffTooltipWithAnnotation(props: DiffTooltipWithAnnotationsProps) {
   }
 
   const content = (
-    <Stack padding={3} space={2}>
+    <Stack space={2}>
       <Label size={1} style={{textTransform: 'uppercase'}}>
         {description}
       </Label>
diff --git a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
index bb0ae17ff17..c112521cf8a 100644
--- a/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
+++ b/packages/sanity/src/core/presence/DocumentPreviewPresence.tsx
@@ -1,10 +1,10 @@
-import {AvatarStack, Box, Card, Text, Theme, TooltipProps} from '@sanity/ui'
+import {AvatarStack, Box, Card, Text, Theme} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled, {css, useTheme} from 'styled-components'
 import {usePreviewCard, UserAvatar} from '../components'
 import {DocumentPresence} from '../store'
 import {isNonNullable} from '../util'
-import {Tooltip} from '../../ui'
+import {Tooltip, TooltipProps} from '../../ui'
 
 /** @internal */
 export interface DocumentPreviewPresenceProps {
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
index 704c6f5b76e..42c90b2a69d 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx
@@ -11,14 +11,13 @@ import {
   Card,
   Flex,
   Button,
-  TooltipProps,
 } from '@sanity/ui'
 import {ComposeIcon, SearchIcon} from '@sanity/icons'
 import ReactFocusLock from 'react-focus-lock'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useCurrentUser} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
-import {Tooltip} from '../../../../../ui'
+import {Tooltip, TooltipProps} from '../../../../../ui'
 import {NewDocumentList, NewDocumentListProps} from './NewDocumentList'
 import {ModalType, NewDocumentOption} from './types'
 import {filterOptions} from './filter'
diff --git a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
index 30e7d95bbf8..77f5d2ea242 100644
--- a/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx
@@ -1,8 +1,9 @@
 import {CurrentUser} from '@sanity/types'
-import {Tooltip, Box, Card, Text} from '@sanity/ui'
+import {Box, Card, Text} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
 import styled from 'styled-components'
 import {InsufficientPermissionsMessage} from '../../../../components'
+import {Tooltip} from '../../../../../ui'
 import {NewDocumentOption, PreviewLayout} from './types'
 import {useIntentLink} from 'sanity/router'
 
@@ -48,7 +49,7 @@ export function NewDocumentListOption(props: NewDocumentListOptionProps) {
       key={option.id}
       portal
       content={
-        <TooltipContentBox padding={2}>
+        <TooltipContentBox>
           <InsufficientPermissionsMessage
             currentUser={currentUser}
             operationLabel="create this document"
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
index 67defcaaa24..9134b9fb6ae 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
@@ -1,7 +1,8 @@
-import {Box, Card, CardTone, Code, Inline, Stack, Tooltip} from '@sanity/ui'
+import {Box, Card, CardTone, Code, Inline, Stack} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
 import type {WeightedHit} from '../../../../../../../search'
+import {Tooltip} from '../../../../../../../../ui'
 
 interface DebugScoreProps {
   data: WeightedHit
@@ -30,7 +31,7 @@ export function DebugOverlay({data}: DebugScoreProps) {
     <>
       <Tooltip
         content={
-          <Box padding={2}>
+          <Box>
             <Stack space={2}>
               {matchingStories.length ? (
                 <>
diff --git a/packages/sanity/src/desk/components/NotPublishedStatus.tsx b/packages/sanity/src/desk/components/NotPublishedStatus.tsx
index 58bffa5d6d6..9d96c0a4052 100644
--- a/packages/sanity/src/desk/components/NotPublishedStatus.tsx
+++ b/packages/sanity/src/desk/components/NotPublishedStatus.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import {UnpublishIcon} from '@sanity/icons'
-import {Text, Tooltip} from '@sanity/ui'
+import {Text} from '@sanity/ui'
+import {Tooltip} from '../../ui'
 
 export function NotPublishedStatus() {
   return (
diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index 3d81f2b35d1..75a5db7e043 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -2,6 +2,7 @@ import {Tooltip as UITooltip, TooltipProps as UITooltipProps} from '@sanity/ui'
 import React from 'react'
 
 /** @internal */
+export type TooltipProps = UITooltipProps
 
 /**
  * Studio UI <Tooltip>.

From 07e34cb49fb970f9d0b334203ffcc8c5fe14414d Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Thu, 19 Oct 2023 15:18:58 +0200
Subject: [PATCH 04/12] fix(core/desk): use StudioUI tooltip and remove
 paddings

---
 .../components/collapseMenu/CollapseMenuButton.tsx    |  3 ++-
 .../filter/inputs/date/ParsedDateTextInput.tsx        |  3 ++-
 .../document/statusBar/sparkline/DocumentBadges.tsx   | 11 +++--------
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
index 7e0a5addc61..e51ebf65905 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenuButton.tsx
@@ -1,5 +1,6 @@
-import {Button, ButtonProps, TooltipProps} from '@sanity/ui'
+import {Button, ButtonProps} from '@sanity/ui'
 import React, {forwardRef} from 'react'
+import {TooltipProps} from '../../../ui'
 
 /** @internal */
 export interface CommonProps extends Omit<ButtonProps, 'text' | 'iconRight'> {
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
index 5b45d2e603d..2a90f8e690a 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/filters/filter/inputs/date/ParsedDateTextInput.tsx
@@ -1,6 +1,6 @@
 import {hues} from '@sanity/color'
 import {ErrorOutlineIcon} from '@sanity/icons'
-import {Flex, Text, Theme, Tooltip} from '@sanity/ui'
+import {Flex, Text, Theme} from '@sanity/ui'
 import {format, isValid, parse} from 'date-fns'
 import React, {
   ChangeEvent,
@@ -13,6 +13,7 @@ import React, {
 } from 'react'
 import styled, {css} from 'styled-components'
 import {CustomTextInput} from '../../../../common/CustomTextInput'
+import {Tooltip} from '../../../../../../../../../../ui'
 import {getDateISOString} from './utils/getDateISOString'
 
 interface ParsedDateTextInputProps
diff --git a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
index afa55d9262f..c122e6b5d48 100644
--- a/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
+++ b/packages/sanity/src/desk/panes/document/statusBar/sparkline/DocumentBadges.tsx
@@ -1,7 +1,8 @@
-import {Badge, BadgeTone, Box, Inline, Text, Tooltip} from '@sanity/ui'
+import {Badge, BadgeTone, Inline, Text} from '@sanity/ui'
 import React from 'react'
 import {RenderBadgeCollectionState} from '../../../../components'
 import {useDocumentPane} from '../../useDocumentPane'
+import {Tooltip} from '../../../../../ui'
 import {DocumentBadgeDescription} from 'sanity'
 
 interface DocumentBadgesInnerProps {
@@ -20,13 +21,7 @@ function DocumentBadgesInner({states}: DocumentBadgesInnerProps) {
     <Inline space={1}>
       {states.map((badge, index) => (
         <Tooltip
-          content={
-            badge.title && (
-              <Box padding={2}>
-                <Text size={1}>{badge.title}</Text>
-              </Box>
-            )
-          }
+          content={badge.title && <Text size={1}>{badge.title}</Text>}
           disabled={!badge.title}
           key={String(index)}
           placement="top"

From 266eaee1114fa47ba4df0312496cf00ce152c991 Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Thu, 19 Oct 2023 15:21:35 +0200
Subject: [PATCH 05/12] fix(core): use StudioUI tooltip for TooltipOfDisabled -
 ref prop error

---
 packages/sanity/src/core/components/TooltipOfDisabled.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

From f51396e5336b4d4609baf2366b30fd17cc9c7fbe Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Mon, 23 Oct 2023 14:39:40 +0200
Subject: [PATCH 06/12] fix(src): fix studioUI tooltip to take strings and
 replace current tooltips with this logic

---
 .../vision/src/components/VisionGui.tsx       | 10 ++----
 .../src/core/components/TooltipOfDisabled.tsx | 17 ++++-----
 .../components/collapseMenu/CollapseMenu.tsx  |  7 +---
 .../core/components/userAvatar/UserAvatar.tsx |  2 +-
 .../customSchema/blockActions.tsx             |  2 +-
 .../core/form/studio/assetSource/AssetRow.tsx |  2 +-
 .../navbar/resources/ResourcesButton.tsx      |  2 +-
 .../components/navbar/userMenu/UserMenu.tsx   |  6 +---
 .../navbar/workspace/WorkspaceMenuButton.tsx  |  2 +-
 .../InsufficientPermissionsMessageTooltip.tsx |  8 +----
 .../header/DocumentPanelHeader.tsx            | 10 +-----
 .../document/statusBar/ActionMenuButton.tsx   |  6 ++--
 .../statusBar/sparkline/DocumentBadges.tsx    |  2 +-
 packages/sanity/src/ui/tooltip/Tooltip.tsx    | 36 +++++++++++++++----
 14 files changed, 53 insertions(+), 59 deletions(-)

diff --git a/packages/@sanity/vision/src/components/VisionGui.tsx b/packages/@sanity/vision/src/components/VisionGui.tsx
index 496fa0789c8..3f8f4a21500 100644
--- 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
index f5895bb491e..dcf21a8d24e 100644
--- 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
index 19ea64ca744..6bc1a60bdf7 100644
--- 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
index 40316db344f..9fdeed573b6 100644
--- 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
index f6113f3a800..0c1504429a5 100644
--- 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
index b28d939b237..d3cd62356db 100644
--- 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
index ddc2ea9c1b8..5cf49f2d5b8 100644
--- 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
index de89976dbca..315d97dc54c 100644
--- 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
index 9275c4832fe..581c0f3344b 100644
--- 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/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx b/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
index 29498349002..c5b3b462c8c 100644
--- a/packages/sanity/src/desk/components/paneHeaderActions/InsufficientPermissionsMessageTooltip.tsx
+++ b/packages/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
index dd2567f3618..f08484b3c77 100644
--- 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
index 7973158a00c..5ea4ac73bd2 100644
--- 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
index c122e6b5d48..ffe3907b29e 100644
--- 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
index 75a5db7e043..936ee935380 100644
--- 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} />
+})

From e862a3b0a83321315c3de8e3e6cf4a4720667f6f Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Mon, 23 Oct 2023 19:40:27 +0200
Subject: [PATCH 07/12] fix(vision): change tooltip import path

---
 packages/@sanity/vision/src/components/VisionGui.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@sanity/vision/src/components/VisionGui.tsx b/packages/@sanity/vision/src/components/VisionGui.tsx
index 3f8f4a21500..7ac12827eff 100644
--- a/packages/@sanity/vision/src/components/VisionGui.tsx
+++ b/packages/@sanity/vision/src/components/VisionGui.tsx
@@ -18,7 +18,7 @@ import {
   ToastContextValue,
   Inline,
 } from '@sanity/ui'
-import {Tooltip} from 'sanity/src/ui'
+import {Tooltip} from '../../../../sanity/src/ui'
 import {VisionCodeMirror} from '../codemirror/VisionCodeMirror'
 import {getLocalStorage, LocalStorageish} from '../util/localStorage'
 import {parseApiQueryString, ParsedApiQueryString} from '../util/parseApiQueryString'

From 63c3b993411c50a2e2fa0b65d3ba0348cf482b6c Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Tue, 24 Oct 2023 13:44:45 +0200
Subject: [PATCH 08/12] fix(src): fix up content in StudioUI tooltips, remove
 comment

---
 .../components/collapseMenu/CollapseMenu.tsx  |  2 +-
 .../ReferenceInput/PreviewReferenceValue.tsx  |  8 ++---
 .../ArrayOfObjectsFunctions.tsx               |  9 +----
 .../ArrayOfPrimitivesFunctions.tsx            |  9 +----
 .../searchResults/item/DebugOverlay.tsx       | 36 +++++++++----------
 .../src/desk/components/DraftStatus.tsx       | 20 +++--------
 .../src/desk/components/PublishedStatus.tsx   | 20 +++--------
 .../ConfirmDeleteDialogBody.styles.tsx        | 11 ++----
 packages/sanity/src/ui/tooltip/Tooltip.tsx    |  6 ----
 9 files changed, 35 insertions(+), 86 deletions(-)

diff --git a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
index 6bc1a60bdf7..d2820edcd34 100644
--- a/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
+++ b/packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
@@ -1,5 +1,5 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
-import {Button, Flex, MenuButtonProps, Text, useElementRect} from '@sanity/ui'
+import {Button, Flex, MenuButtonProps, useElementRect} from '@sanity/ui'
 import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
 import styled, {css} from 'styled-components'
 import {Tooltip} from '../../../ui'
diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
index 306559dfdb9..c3634943460 100644
--- a/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
+++ b/packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx
@@ -144,11 +144,9 @@ function UnavailableMessage(props: {icon: ComponentType; children: ReactNode; ti
   const Icon = props.icon
   return (
     <Flex>
-      <Box>
-        <Text size={1}>
-          <Icon />
-        </Text>
-      </Box>
+      <Text size={1}>
+        <Icon />
+      </Text>
       <Box flex={1} marginLeft={3}>
         <Text size={1} weight="semibold">
           {props.title}
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
index 9b9235b8152..9292d07f32c 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfObjectsInput/ArrayOfObjectsFunctions.tsx
@@ -36,14 +36,7 @@ export function ArrayOfObjectsFunctions<
 
   if (readOnly) {
     return (
-      <Tooltip
-        portal
-        content={
-          <Box sizing="border">
-            <Text size={1}>This field is read-only</Text>
-          </Box>
-        }
-      >
+      <Tooltip portal content="This field is read-only">
         <Grid>
           <Button
             icon={AddIcon}
diff --git a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
index 1d700ac1cc6..9e61c78d344 100644
--- a/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
+++ b/packages/sanity/src/core/form/inputs/arrays/ArrayOfPrimitivesInput/ArrayOfPrimitivesFunctions.tsx
@@ -31,14 +31,7 @@ export function ArrayOfPrimitivesFunctions<
 
   if (readOnly) {
     return (
-      <Tooltip
-        portal
-        content={
-          <Box sizing="border">
-            <Text size={1}>This field is read-only</Text>
-          </Box>
-        }
-      >
+      <Tooltip portal content="This field is read-only">
         <Grid>
           <Button
             icon={AddIcon}
diff --git a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
index 9134b9fb6ae..7efef1decc1 100644
--- a/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
+++ b/packages/sanity/src/core/studio/components/navbar/search/components/searchResults/item/DebugOverlay.tsx
@@ -1,4 +1,4 @@
-import {Box, Card, CardTone, Code, Inline, Stack} from '@sanity/ui'
+import {Card, CardTone, Code, Inline, Stack} from '@sanity/ui'
 import React from 'react'
 import styled from 'styled-components'
 import type {WeightedHit} from '../../../../../../../search'
@@ -31,24 +31,22 @@ export function DebugOverlay({data}: DebugScoreProps) {
     <>
       <Tooltip
         content={
-          <Box>
-            <Stack space={2}>
-              {matchingStories.length ? (
-                <>
-                  {matchingStories.map((story) => (
-                    <Inline key={story.path} space={3}>
-                      <Code size={0} weight="semibold">
-                        {story.path}
-                      </Code>
-                      <Code size={0}>{story.why}</Code>
-                    </Inline>
-                  ))}
-                </>
-              ) : (
-                <Code size={0}>No matches</Code>
-              )}
-            </Stack>
-          </Box>
+          <Stack space={2}>
+            {matchingStories.length ? (
+              <>
+                {matchingStories.map((story) => (
+                  <Inline key={story.path} space={3}>
+                    <Code size={0} weight="semibold">
+                      {story.path}
+                    </Code>
+                    <Code size={0}>{story.why}</Code>
+                  </Inline>
+                ))}
+              </>
+            ) : (
+              <Code size={0}>No matches</Code>
+            )}
+          </Stack>
         }
         placement="bottom-start"
         portal
diff --git a/packages/sanity/src/desk/components/DraftStatus.tsx b/packages/sanity/src/desk/components/DraftStatus.tsx
index 16f5e59587d..73dffa51faf 100644
--- a/packages/sanity/src/desk/components/DraftStatus.tsx
+++ b/packages/sanity/src/desk/components/DraftStatus.tsx
@@ -1,28 +1,18 @@
 import React from 'react'
 import {EditIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Text} from '@sanity/ui'
 import {Tooltip} from '../../ui'
-import {TimeAgo} from './TimeAgo'
-import {TextWithTone} from 'sanity'
+import {TextWithTone, useTimeAgo} from 'sanity'
 
 export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
   const {document} = props
   const updatedAt = document && '_updatedAt' in document && document._updatedAt
 
+  // Label with abbreviations and suffix
+  const lastUpdatedTimeAgo = useTimeAgo(updatedAt || '', {minimal: true, agoSuffix: true})
+
   return (
-    <Tooltip
-      portal
-      content={
-        <Text size={1}>
-          {document ? (
-            <>Edited {updatedAt && <TimeAgo time={updatedAt} />}</>
-          ) : (
-            <>No unpublished edits</>
-          )}
-        </Text>
-      }
-    >
+    <Tooltip portal content={document ? `Edited ${lastUpdatedTimeAgo}` : 'No unpublished edits'}>
       <TextWithTone tone="caution" dimmed={!document} muted={!document} size={1}>
         <EditIcon />
       </TextWithTone>
diff --git a/packages/sanity/src/desk/components/PublishedStatus.tsx b/packages/sanity/src/desk/components/PublishedStatus.tsx
index dc0d7c15f69..16a830f5ef6 100644
--- a/packages/sanity/src/desk/components/PublishedStatus.tsx
+++ b/packages/sanity/src/desk/components/PublishedStatus.tsx
@@ -1,29 +1,19 @@
 import React from 'react'
 import {PublishIcon} from '@sanity/icons'
 import {PreviewValue, SanityDocument} from '@sanity/types'
-import {Text} from '@sanity/ui'
 import {Tooltip} from '../../ui'
-import {TimeAgo} from './TimeAgo'
-import {TextWithTone} from 'sanity'
+import {TextWithTone, useTimeAgo} from 'sanity'
 
 export function PublishedStatus(props: {document?: PreviewValue | Partial<SanityDocument> | null}) {
   const {document} = props
   const updatedAt = document && '_updatedAt' in document && document._updatedAt
   const statusLabel = document ? 'Published' : 'Not published'
 
+  // Label with abbreviations and suffix
+  const lastUpdatedTimeAgo = useTimeAgo(updatedAt || '', {minimal: true, agoSuffix: true})
+
   return (
-    <Tooltip
-      portal
-      content={
-        <Text size={1}>
-          {document ? (
-            <>Published {updatedAt && <TimeAgo time={updatedAt} />}</>
-          ) : (
-            <>Not published</>
-          )}
-        </Text>
-      }
-    >
+    <Tooltip portal content={document ? `Published ${lastUpdatedTimeAgo}` : 'Not published'}>
       <TextWithTone tone="positive" dimmed={!document} muted={!document} size={1}>
         <PublishIcon aria-label={statusLabel} />
       </TextWithTone>
diff --git a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
index d0f25e32573..7e96a835121 100644
--- a/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
+++ b/packages/sanity/src/desk/components/confirmDeleteDialog/ConfirmDeleteDialogBody.styles.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import {rem, Flex, Text, Box, Container, Inline} from '@sanity/ui'
+import {rem, Flex, Text, Box, Inline} from '@sanity/ui'
 import {InfoOutlineIcon} from '@sanity/icons'
 import {Tooltip} from '../../../ui'
 
@@ -61,14 +61,7 @@ export const OtherReferenceCount = (props: {totalCount: number; references: unkn
       <Tooltip
         portal
         placement="top"
-        content={
-          <Container width={0}>
-            <Text size={1}>
-              We can't show metadata about these references because no token with access to the
-              datasets they are in was found.
-            </Text>
-          </Container>
-        }
+        content="We can't show metadata about these references because no token with access to the datasets they are in was found."
       >
         <Text size={1} muted>
           <InfoOutlineIcon />
diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index 936ee935380..bdf42f9f500 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -3,15 +3,9 @@ import React, {forwardRef} from 'react'
 
 /** @internal */
 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>.
  *

From 1fbcdc5d347098e699ff0c051686115be907ccff Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Tue, 24 Oct 2023 20:35:15 +0200
Subject: [PATCH 09/12] fix(core): add two arguments to forwardRef render
 function

---
 .../sanity/src/core/components/TooltipOfDisabled.tsx     | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

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

From e90c6bc8c2b70926b796d631fff9a80107575b21 Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Tue, 24 Oct 2023 21:45:52 +0200
Subject: [PATCH 10/12] fix(test-studio): add custom badge to author schema
 type

---
 dev/test-studio/components/formComponents.tsx | 7 +++++++
 dev/test-studio/sanity.config.ts              | 2 ++
 2 files changed, 9 insertions(+)

diff --git a/dev/test-studio/components/formComponents.tsx b/dev/test-studio/components/formComponents.tsx
index 00a78fce7e5..0b970318189 100644
--- a/dev/test-studio/components/formComponents.tsx
+++ b/dev/test-studio/components/formComponents.tsx
@@ -78,6 +78,13 @@ export function Preview(props: PreviewProps) {
   )
 }
 
+export function CustomBadge() {
+  return {
+    label: 'Hello world',
+    title: 'Hello I am a custom document badge',
+  }
+}
+
 export const formComponentsPlugin = definePlugin({
   name: 'form-components-plugin',
   form: {
diff --git a/dev/test-studio/sanity.config.ts b/dev/test-studio/sanity.config.ts
index 12c708ed827..632c02cd381 100644
--- a/dev/test-studio/sanity.config.ts
+++ b/dev/test-studio/sanity.config.ts
@@ -27,6 +27,7 @@ import {
 import {
   Annotation,
   Block,
+  CustomBadge,
   Field,
   formComponentsPlugin,
   InlineBlock,
@@ -76,6 +77,7 @@ const sharedSettings = definePlugin({
       return prev
     },
     newDocumentOptions,
+    badges: (prev, context) => (context.schemaType === 'author' ? [CustomBadge, ...prev] : prev),
   },
   plugins: [
     deskTool({

From a91379c3813a052935469d627d296625ba36de14 Mon Sep 17 00:00:00 2001
From: Nina Andal Aarvik <nina@sanity.io>
Date: Thu, 26 Oct 2023 11:47:57 +0200
Subject: [PATCH 11/12] Update packages/sanity/src/ui/tooltip/Tooltip.tsx

Co-authored-by: Robin Pyon <robinpyon@users.noreply.github.com>
---
 packages/sanity/src/ui/tooltip/Tooltip.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index bdf42f9f500..face503fa07 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -23,7 +23,7 @@ export const Tooltip = forwardRef(function Tooltip(
   if (typeof content === 'string') {
     return (
       <UITooltip
-        content={<Text size={1}>{content}</Text>}
+        content={<Text size={1} weight="medium">{content}</Text>}
         delay={{open: 500}}
         ref={ref}
         {...rest}

From a15d1866fd70c0e4342e2b35d9e001b633bd63de Mon Sep 17 00:00:00 2001
From: Robin Pyon <robin.pyon@gmail.com>
Date: Thu, 26 Oct 2023 14:13:33 +0100
Subject: [PATCH 12/12] refactor: slightly DRY tooltip component

---
 packages/sanity/src/ui/tooltip/Tooltip.tsx | 32 ++++++++++++++--------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/sanity/src/ui/tooltip/Tooltip.tsx b/packages/sanity/src/ui/tooltip/Tooltip.tsx
index face503fa07..9e26172c7ea 100644
--- a/packages/sanity/src/ui/tooltip/Tooltip.tsx
+++ b/packages/sanity/src/ui/tooltip/Tooltip.tsx
@@ -6,6 +6,10 @@ export interface TooltipProps extends UITooltipProps {
   ref?: React.ForwardedRef<HTMLDivElement>
 }
 
+const TOOLTIP_DELAY_PROPS = {
+  open: 500,
+}
+
 /**
  * Studio UI <Tooltip>.
  *
@@ -20,16 +24,20 @@ export const Tooltip = forwardRef(function Tooltip(
 ) {
   const {content, ...rest} = props
 
-  if (typeof content === 'string') {
-    return (
-      <UITooltip
-        content={<Text size={1} weight="medium">{content}</Text>}
-        delay={{open: 500}}
-        ref={ref}
-        {...rest}
-      />
-    )
-  }
-
-  return <UITooltip delay={{open: 500}} ref={ref} content={content} {...rest} />
+  return (
+    <UITooltip
+      content={
+        typeof content === 'string' || typeof content === 'number' ? (
+          <Text size={1} weight="medium">
+            {content}
+          </Text>
+        ) : (
+          content
+        )
+      }
+      delay={TOOLTIP_DELAY_PROPS}
+      ref={ref}
+      {...rest}
+    />
+  )
 })