Merge branch 'feat/facelift-mvi-2' into facelift/cherrypick-title

packages/sanity/src/core/components/StatusButton.tsx

@@ -1,7 +1,14 @@
-import {Flex, Hotkeys, Text, useTheme} from '@sanity/ui'
+import {
+  Flex,
+  Hotkeys,
+  Text,
+  Tooltip, // eslint-disable-line no-restricted-imports
+  TooltipProps, // eslint-disable-line no-restricted-imports
+  useTheme,
+} from '@sanity/ui'
 import React, {useMemo, HTMLProps, forwardRef, ForwardedRef, ReactNode} from 'react'
 import styled from 'styled-components'
-import {Tooltip, TooltipProps, Button, ButtonProps} from '../../ui'
+import {Button, ButtonProps} from '../../ui'
 
 /** @hidden @beta */
 export interface StatusButtonProps extends Omit<ButtonProps, 'iconRight'> {

packages/sanity/src/core/components/TooltipOfDisabled.tsx

@@ -1,5 +1,8 @@
 import React, {forwardRef} from 'react'
-import {Tooltip, TooltipProps} from '../../ui'
+import {
+  Tooltip, // eslint-disable-line no-restricted-imports
+  TooltipProps, // eslint-disable-line no-restricted-imports
+} from '@sanity/ui'
 
 /** @internal */
 export const TooltipOfDisabled = forwardRef<HTMLDivElement, TooltipProps>(function DisabledTooltip(

packages/sanity/src/core/components/popoverDialog/PopoverDialog.tsx

@@ -60,25 +60,24 @@ export function PopoverDialog(props: PopoverDialogProps) {
     referenceElement?.focus()
   }, [onClose, referenceElement])
 
+  // @todo: these use the same styles as dialogs, can this be shared?
   const content = (
     <PopoverContainer width={width}>
       <TrapFocus autoFocus>
         <Stack ref={containerRef}>
           <StickyLayer>
-            <Box padding={2} paddingLeft={3}>
+            <Box padding={2} paddingLeft={4}>
               <Flex align="center" gap={2}>
                 <Box flex={1}>
-                  <Text textOverflow="ellipsis" weight="medium">
+                  <Text size={1} textOverflow="ellipsis" weight="medium">
                     {header}
                   </Text>
                 </Box>
-
                 <Button icon={CloseIcon} mode="bleed" onClick={handleClose} />
               </Flex>
             </Box>
           </StickyLayer>
-
-          {children}
+          <Box padding={4}>{children}</Box>
         </Stack>
       </TrapFocus>
     </PopoverContainer>

packages/sanity/src/core/components/previews/general/MediaPreview.tsx

@@ -1,9 +1,11 @@
 import React, {useMemo} from 'react'
 import {getDevicePixelRatio} from 'use-device-pixel-ratio'
-import {Text} from '@sanity/ui'
+import {
+  Text,
+  Tooltip, // eslint-disable-line no-restricted-imports
+} 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'

packages/sanity/src/core/field/diff/components/DiffTooltip.tsx

@@ -1,12 +1,18 @@
 import {Path} from '@sanity/types'
-import {Text, Stack, Flex, Inline} from '@sanity/ui'
+import {
+  Text,
+  Stack,
+  Flex,
+  Inline,
+  Tooltip, // eslint-disable-line no-restricted-imports
+  TooltipProps, // eslint-disable-line no-restricted-imports
+} 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 {

packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx

@@ -3,10 +3,16 @@
 import {hues} from '@sanity/color'
 import {ErrorOutlineIcon, InfoOutlineIcon, WarningOutlineIcon} from '@sanity/icons'
 import {FormNodeValidation} from '@sanity/types'
-import {Box, Flex, Placement, Stack, Text} from '@sanity/ui'
+import {
+  Box,
+  Flex,
+  Placement,
+  Stack,
+  Text,
+  Tooltip, // eslint-disable-line no-restricted-imports
+} from '@sanity/ui'
 import React, {useMemo} from 'react'
 import styled from 'styled-components'
-import {Tooltip} from '../../../../ui'
 
 /** @internal */
 export interface FormFieldValidationStatusProps {

packages/sanity/src/core/form/inputs/CrossDatasetReferenceInput/CrossDatasetReferencePreview.tsx

@@ -1,12 +1,18 @@
 import React, {createElement, ReactNode, useMemo} from 'react'
 import {CrossDatasetType, PreviewValue} from '@sanity/types'
-import {Badge, Box, Flex, Inline, Text} from '@sanity/ui'
+import {
+  Badge,
+  Box,
+  Flex,
+  Inline,
+  Text,
+  Tooltip, // eslint-disable-line no-restricted-imports
+} 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'
@@ -108,6 +114,7 @@ export function CrossDatasetReferencePreview(props: {
 
           {(insufficientPermissions || notFound) && (
             <Box>
+              {/* @todo: possible candidate to promote to Studio UI tooltip */}
               <Tooltip
                 portal
                 content={

packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx

@@ -1,6 +1,9 @@
 import {PortableTextEditor, usePortableTextEditor} from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextObject} from '@sanity/types'
 import React, {ComponentType, useCallback, useMemo, useState} from 'react'
+import {
+  Tooltip, // eslint-disable-line no-restricted-imports
+} from '@sanity/ui'
 import {isEqual} from '@sanity/util/paths'
 import {pathToString} from '../../../../field'
 import {
@@ -21,7 +24,6 @@ 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'

packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx

@@ -5,7 +5,12 @@ import {
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
 import {ObjectSchemaType, Path, PortableTextBlock, isImage} from '@sanity/types'
-import {Flex, ResponsivePaddingProps, Box} from '@sanity/ui'
+import {
+  Box,
+  Flex,
+  ResponsivePaddingProps,
+  Tooltip, // eslint-disable-line no-restricted-imports
+} from '@sanity/ui'
 import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
 import {
@@ -30,7 +35,6 @@ 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,

packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx

@@ -3,6 +3,9 @@ import {
   PortableTextEditor,
   usePortableTextEditor,
 } from '@sanity/portable-text-editor'
+import {
+  Tooltip, // eslint-disable-line no-restricted-imports
+} from '@sanity/ui'
 import {ObjectSchemaType, Path, PortableTextBlock, PortableTextChild} from '@sanity/types'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {isEqual} from '@sanity/util/paths'
@@ -23,7 +26,6 @@ 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'

packages/sanity/src/core/form/inputs/PortableText/text/TextBlock.tsx

@@ -1,4 +1,10 @@
-import {Box, Flex, ResponsivePaddingProps, Text} from '@sanity/ui'
+import {
+  Box,
+  Flex,
+  ResponsivePaddingProps,
+  Text,
+  Tooltip, // eslint-disable-line no-restricted-imports
+} from '@sanity/ui'
 import React, {RefObject, useCallback, useMemo, useState} from 'react'
 import {ObjectSchemaType, Path, PortableTextTextBlock} from '@sanity/types'
 import {
@@ -29,7 +35,6 @@ 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,

packages/sanity/src/core/form/inputs/PortableText/toolbar/Toolbar.tsx

@@ -6,7 +6,7 @@ import {
 } from '@sanity/portable-text-editor'
 import React, {memo, useCallback, useMemo, useState} from 'react'
 import {ObjectSchemaType, Path, SchemaType} from '@sanity/types'
-import {Box, Flex, Hotkeys, Text, useElementRect, useToast} from '@sanity/ui'
+import {Box, Flex, useElementRect, useToast} from '@sanity/ui'
 import {CollapseIcon, ExpandIcon} from '@sanity/icons'
 import styled, {css} from 'styled-components'
 import {useRovingFocus} from '../../../../components'
@@ -129,16 +129,8 @@ const InnerToolbar = memo(function InnerToolbar({
       </Flex>
       <FullscreenButtonBox padding={isFullscreen ? 2 : 1}>
         <Tooltip
-          content={
-            <Flex align="center">
-              <Box flex={1} paddingX={1}>
-                <Text size={1}>{`${isFullscreen ? 'Collapse' : 'Expand'} editor`}</Text>
-              </Box>
-              <Box marginLeft={1}>
-                <Hotkeys keys={[`${IS_MAC ? 'Cmd' : 'Ctrl'}`, 'Enter']} />
-              </Box>
-            </Flex>
-          }
+          content={`${isFullscreen ? 'Collapse' : 'Expand'} editor`}
+          hotkeys={[`${IS_MAC ? 'Cmd' : 'Ctrl'}`, 'Enter']}
           placement={isFullscreen ? 'bottom' : 'top'}
           portal="default"
         >

packages/sanity/src/core/form/inputs/ReferenceInput/CreateButton.tsx

@@ -1,8 +1,13 @@
 import React, {ComponentProps} from 'react'
 import {AddIcon} from '@sanity/icons'
-import {Menu, MenuButton, MenuButtonProps} from '@sanity/ui'
+import {
+  Menu,
+  MenuButton,
+  MenuButtonProps,
+  Tooltip, // eslint-disable-line no-restricted-imports
+} from '@sanity/ui'
 import {InsufficientPermissionsMessage} from '../../../components'
-import {Button, Tooltip, MenuItem} from '../../../../ui'
+import {Button, MenuItem} from '../../../../ui'
 import {CreateReferenceOption} from './types'
 
 interface Props extends ComponentProps<typeof Button> {

packages/sanity/src/core/form/inputs/ReferenceInput/PreviewReferenceValue.tsx

@@ -1,11 +1,18 @@
 import React, {ComponentType, ReactNode, Fragment} from 'react'
 import {Reference, ReferenceSchemaType} from '@sanity/types'
-import {Badge, Box, Flex, Inline, Stack, Text} from '@sanity/ui'
+import {
+  Badge,
+  Box,
+  Flex,
+  Inline,
+  Stack,
+  Text,
+  Tooltip, // eslint-disable-line no-restricted-imports
+} 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'

packages/sanity/src/core/presence/PresenceTooltip.tsx

@@ -1,7 +1,11 @@
 import React, {useMemo} from 'react'
-import {Flex, Stack, Text} from '@sanity/ui'
+import {
+  Flex,
+  Stack,
+  Text,
+  Tooltip, // eslint-disable-line no-restricted-imports
+} from '@sanity/ui'
 import {UserAvatar} from '../components/userAvatar'
-import {Tooltip} from '../../ui'
 import {FormNodePresence} from './types'
 
 interface PresenceTooltipProps {

packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentButton.tsx

@@ -1,11 +1,21 @@
 import React, {useCallback, useMemo, useState} from 'react'
-import {Text, useClickOutside, Stack, TextInput, TextInputProps, Card, Flex} from '@sanity/ui'
+import {
+  Text,
+  useClickOutside,
+  Stack,
+  TextInput,
+  TextInputProps,
+  Tooltip, // eslint-disable-line no-restricted-imports
+  TooltipProps, // eslint-disable-line no-restricted-imports
+  Card,
+  Flex,
+} from '@sanity/ui'
 import {AddIcon, ChevronDownIcon, SearchIcon} from '@sanity/icons'
 import ReactFocusLock from 'react-focus-lock'
 import {InsufficientPermissionsMessage} from '../../../../components'
 import {useCurrentUser} from '../../../../store'
 import {useColorScheme} from '../../../colorScheme'
-import {Tooltip, TooltipProps, Button, ButtonProps} from '../../../../../ui'
+import {Button, ButtonProps} from '../../../../../ui'
 import {NewDocumentList, NewDocumentListProps} from './NewDocumentList'
 import {ModalType, NewDocumentOption} from './types'
 import {filterOptions} from './filter'

packages/sanity/src/core/studio/components/navbar/new-document/NewDocumentListOption.tsx

@@ -1,8 +1,11 @@
 import {CurrentUser} from '@sanity/types'
-import {Card, Text} from '@sanity/ui'
+import {
+  Card,
+  Text,
+  Tooltip, // eslint-disable-line no-restricted-imports
+} from '@sanity/ui'
 import React, {useCallback, useMemo} from 'react'
 import {InsufficientPermissionsMessage} from '../../../../components'
-import {Tooltip} from '../../../../../ui'
 import {NewDocumentOption, PreviewLayout} from './types'
 import {useIntentLink} from 'sanity/router'
 

packages/sanity/src/core/studio/components/navbar/search/SearchButton.tsx

@@ -1,9 +1,6 @@
-/* eslint-disable react/jsx-pascal-case */
 import {SearchIcon} from '@sanity/icons'
-import {Flex, KBD, Text} from '@sanity/ui'
 import React, {forwardRef} from 'react'
 import {Button, Tooltip} from '../../../../../ui'
-import {useColorScheme} from '../../../colorScheme'
 import {GLOBAL_SEARCH_KEY, GLOBAL_SEARCH_KEY_MODIFIER} from './constants'
 
 interface SearchButtonProps {
@@ -17,22 +14,11 @@ export const SearchButton = forwardRef(function SearchButton(
   {onClick}: SearchButtonProps,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
-  const {scheme} = useColorScheme()
-
   return (
     <Tooltip
-      scheme={scheme}
-      placement="bottom"
+      content="Search"
+      hotkeys={[GLOBAL_SEARCH_KEY_MODIFIER, GLOBAL_SEARCH_KEY.toUpperCase()]}
       portal
-      content={
-        <Flex align="center" gap={3}>
-          <Text size={1}>Search</Text>
-          <Flex gap={1}>
-            <KBD>{GLOBAL_SEARCH_KEY_MODIFIER}</KBD>
-            <KBD>{GLOBAL_SEARCH_KEY.toUpperCase()}</KBD>
-          </Flex>
-        </Flex>
-      }
     >
       <Button
         aria-label="Open search"

packages/sanity/src/core/studio/components/navbar/search/components/filters/addFilter/items/FilterTooltip.tsx

@@ -1,9 +1,16 @@
-import {Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
+import {
+  Card,
+  Code,
+  Flex,
+  Inline,
+  Stack,
+  Text,
+  Tooltip, // eslint-disable-line no-restricted-imports
+} 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'