feat(facelift): create StudioUI tooltip with delay and replace (#5016)

* feat(facelift): create StudioUI tooltip with delay and replace * fix(core/desk): use StudioUi Tooltip * fix(core/desk): use Studio UI tooltip * fix(core/desk): use StudioUI tooltip and remove paddings * fix(core): use StudioUI tooltip for TooltipOfDisabled - ref prop error * fix(src): fix studioUI tooltip to take strings and replace current tooltips with this logic * fix(vision): change tooltip import path * fix(src): fix up content in StudioUI tooltips, remove comment * fix(core): add two arguments to forwardRef render function * fix(test-studio): add custom badge to author schema type * Update packages/sanity/src/ui/tooltip/Tooltip.tsx Co-authored-by: Robin Pyon <[email protected]> * refactor: slightly DRY tooltip component --------- Co-authored-by: Robin Pyon <[email protected]> Co-authored-by: Robin Pyon <[email protected]>
sanity-io · Oct 30, 2023 · 13d0c3e · 13d0c3e
1 parent 2bcdf32
commit 13d0c3e
Show file tree

Hide file tree

Showing 50 changed files with 209 additions and 363 deletions.
diff --git 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
@@ -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({

diff --git 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'
@@ -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 padding={2}>
-                          <Text>Copy to clipboard</Text>
-                        </Box>
-                      }
-                    >
+                    <Tooltip content="Copy to clipboard">
                       <Button
                         aria-label="Copy to clipboard"
                         type="button"
@@ -825,15 +819,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={paramsError}>
                             <Box padding={1} marginX={2}>
                               <Text>
                                 <ErrorOutlineIcon />
@@ -850,7 +836,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 +850,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/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/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/TooltipOfDisabled.tsx b/packages/sanity/src/core/components/TooltipOfDisabled.tsx
@@ -1,15 +1,13 @@
-import {Tooltip, TooltipProps} from '@sanity/ui'
-import React, {ForwardedRef, forwardRef} from 'react'
+import React, {forwardRef} from 'react'
+import {Tooltip, TooltipProps} from '../../ui'
 
 /** @internal */
-export const TooltipOfDisabled = forwardRef(function DisabledTooltip(
-  props: TooltipProps,
-  ref: ForwardedRef<HTMLDivElement>,
+export const TooltipOfDisabled = forwardRef<HTMLDivElement, TooltipProps>(function DisabledTooltip(
+  {children, content, disabled, ...restProps},
+  ref,
 ) {
-  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>
   )

diff --git 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, 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'
@@ -198,16 +199,7 @@ export const CollapseMenu = forwardRef(function CollapseMenu(
                   aria-hidden={hidden}
                   data-hidden={hidden}
                 >
-                  <Tooltip
-                    portal
-                    disabled={!tooltipText}
-                    content={
-                      <Box padding={2} sizing="border">
-                        <Text size={1}>{tooltipText}</Text>
-                      </Box>
-                    }
-                    {...tooltipProps}
-                  >
+                  <Tooltip portal disabled={!tooltipText} content={tooltipText} {...tooltipProps}>
                     <Flex>
                       {cloneElement(child, {
                         disabled: child.props.disabled || hidden,

diff --git 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/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
@@ -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/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={displayName} placement="top" portal>
       <div style={{display: 'inline-block'}}>
         <StaticUserAvatar {...props} />
       </div>

diff --git 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/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/...s/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx b/...s/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/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="Duplicate" 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
@@ -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}