Skip to content

Commit

Permalink
feat(facelift): create StudioUI tooltip with delay and replace (#5016)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
3 people authored Oct 30, 2023
1 parent 2bcdf32 commit 13d0c3e
Show file tree
Hide file tree
Showing 50 changed files with 209 additions and 363 deletions.
7 changes: 7 additions & 0 deletions dev/test-studio/components/formComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
2 changes: 2 additions & 0 deletions dev/test-studio/sanity.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
import {
Annotation,
Block,
CustomBadge,
Field,
formComponentsPlugin,
InlineBlock,
Expand Down Expand Up @@ -76,6 +77,7 @@ const sharedSettings = definePlugin({
return prev
},
newDocumentOptions,
badges: (prev, context) => (context.schemaType === 'author' ? [CustomBadge, ...prev] : prev),
},
plugins: [
deskTool({
Expand Down
24 changes: 5 additions & 19 deletions packages/@sanity/vision/src/components/VisionGui.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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 />
Expand All @@ -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>
Expand All @@ -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>
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
23 changes: 3 additions & 20 deletions packages/sanity/src/core/components/StatusButton.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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'> {
Expand Down Expand Up @@ -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"
Expand Down
14 changes: 6 additions & 8 deletions packages/sanity/src/core/components/TooltipOfDisabled.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
Expand Down
14 changes: 3 additions & 11 deletions packages/sanity/src/core/components/collapseMenu/CollapseMenu.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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'> {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)};
`
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
13 changes: 3 additions & 10 deletions packages/sanity/src/core/components/userAvatar/UserAvatar.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 && (
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
)
Expand Down Expand Up @@ -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>
) : (
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -122,7 +122,7 @@ export function Annotation(props: AnnotationProps) {
placement="bottom"
portal="default"
content={
<TooltipBox padding={2}>
<TooltipBox>
<Markers
markers={markers}
renderCustomMarkers={renderCustomMarkers}
Expand Down
Loading

0 comments on commit 13d0c3e

Please sign in to comment.