[field] Rename DiffLayout to ChangeLayout

packages/@sanity/field/src/diff/annotations/DiffAnnotationCard.tsx

@@ -1,18 +1,23 @@
 import React, {createElement} from 'react'
-import {Diff, Path} from '../../types'
-import {useDiffAnnotationColor} from './hooks'
+import {useAnnotationColor} from './hooks'
+import {AnnotationProps, AnnotatedDiffProps} from './DiffAnnotation'
+import {getAnnotationForPath} from './helpers'
 
-interface DiffAnnotationCardProps {
+interface BaseDiffAnnotationCardProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  diff: Diff
-  path?: Path | string
 }
 
+export type DiffAnnotationCardProps = (AnnotationProps | AnnotatedDiffProps) &
+  BaseDiffAnnotationCardProps
+
 export function DiffAnnotationCard(
   props: DiffAnnotationCardProps & React.HTMLProps<HTMLDivElement>
 ): React.ReactElement {
-  const {as = 'div', children, diff, path, style = {}, ...restProps} = props
-  const color = useDiffAnnotationColor(diff, path)
+  const {as = 'div', children, style = {}, ...restProps} = props
+  const annotation =
+    'diff' in props ? getAnnotationForPath(props.diff, props.path || []) : props.annotation
+
+  const color = useAnnotationColor(annotation)
   const colorStyle = color ? {background: color.background, color: color.text} : {}
   return createElement(as, {...restProps, style: {...colorStyle, ...style}}, children)
 }

packages/@sanity/field/src/diff/annotations/hooks.ts

@@ -2,7 +2,7 @@ import {UserColor, useUserColorManager} from '@sanity/base/user-color'
 import {Annotation, Diff, Path} from '../../types'
 import {getAnnotationColor, getAnnotationForPath} from './helpers'
 
-export function useAnnotationColor(annotation: Annotation): Readonly<UserColor> {
+export function useAnnotationColor(annotation?: Annotation | null): Readonly<UserColor> {
   const userColorManager = useUserColorManager()
   return getAnnotationColor(userColorManager, annotation)
 }

packages/@sanity/field/src/diff/components/Change.tsx

@@ -3,7 +3,7 @@ import {Path} from '../../paths'
 import {PreviewComponent} from '../../preview/types'
 import {DiffAnnotationTooltip, DiffAnnotationCard} from '../annotations'
 import {Diff as DiffType, SchemaType} from '../../types'
-import {DiffLayout} from './DiffLayout'
+import {ChangeLayout} from './ChangeLayout'
 import styles from './Change.css'
 
 interface ChangeProps {
@@ -43,7 +43,7 @@ export function Change({
 
   return (
     <DiffAnnotationTooltip className={containerClassName} diff={diff}>
-      <DiffLayout from={from} to={to} layout={layout} />
+      <ChangeLayout from={from} to={to} layout={layout} />
     </DiffAnnotationTooltip>
   )
 }

packages/@sanity/field/src/diff/components/DiffLayout.tsx → packages/@sanity/field/src/diff/components/ChangeLayout.tsx

@@ -1,25 +1,25 @@
 import React from 'react'
 import ArrowIcon from 'part:@sanity/base/arrow-right'
-import styles from './DiffLayout.css'
+import styles from './ChangeLayout.css'
 
-export interface DiffLayoutProps {
+export interface ChangeLayoutProps {
   layout?: 'grid' | 'inline'
   from?: React.ReactElement | boolean | null | ''
   to?: React.ReactElement | boolean | null | ''
   children?: React.ReactNode
 }
 
-export const DiffArrow = () => (
+export const ChangeArrow = () => (
   <div className={styles.arrow}>
     <ArrowIcon />
   </div>
 )
 
-export function DiffLayout({layout = 'inline', from, to, children}: DiffLayoutProps) {
+export function ChangeLayout({layout = 'inline', from, to, children}: ChangeLayoutProps) {
   return (
     <div className={styles.root} data-layout={layout}>
       {from}
-      {from && to && <DiffArrow />}
+      {from && to && <ChangeArrow />}
       {to}
       {children}
     </div>

packages/@sanity/field/src/diff/components/index.ts

@@ -1,3 +1,3 @@
-export * from './DiffLayout'
+export * from './ChangeLayout'
 export * from './MetaInfo'
 export * from './Change'

packages/@sanity/field/src/types/boolean/diff/BooleanFieldDiff.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {
   BooleanDiff,
   DiffAnnotationTooltip,
-  DiffArrow,
+  ChangeArrow,
   DiffComponent,
   useDiffAnnotationColor
 } from '../../../diff'
@@ -19,7 +19,7 @@ export const BooleanFieldDiff: DiffComponent<BooleanDiff> = ({diff, schemaType})
       <Preview checked={fromValue} color={userColor} />
       {toValue !== undefined && toValue !== null && (
         <>
-          <DiffArrow />
+          <ChangeArrow />
           <div className={styles.label}>
             <Preview checked={toValue} color={userColor} />
             {title && <div className={styles.title}>{title}</div>}

packages/@sanity/field/src/types/file/diff/FileFieldDiff.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import FileIcon from 'part:@sanity/base/file-icon'
 import {getRefValue} from '../../../diff/hooks'
-import {MetaInfo, DiffArrow} from '../../../diff/components'
+import {MetaInfo, ChangeArrow} from '../../../diff/components'
 import {
   DiffComponent,
   ObjectDiff,
@@ -57,7 +57,7 @@ export const FileFieldDiff: DiffComponent<ObjectDiff<File>> = ({diff, schemaType
                 </MetaInfo>
               </div>
             )}
-            {prev && next && <DiffArrow />}
+            {prev && next && <ChangeArrow />}
             {next && (
               <div
                 className={styles.annotation}

packages/@sanity/field/src/types/image/diff/ImageFieldDiff.tsx

@@ -10,7 +10,7 @@ import ImagePreview from './ImagePreview'
 import styles from './ImageFieldDiff.css'
 import {Image} from './types'
 import {getRefValue} from '../../../diff/hooks'
-import {DiffArrow} from '../../../diff/components'
+import {ChangeArrow} from '../../../diff/components'
 
 /* TODO:
   - Correct annotation for hotspot/crop changes
@@ -64,7 +64,7 @@ export const ImageFieldDiff: DiffComponent<ObjectDiff<Image>> = ({diff, schemaTy
                 />
               </DiffAnnotationCard>
             )}
-            {prev && next && <DiffArrow />}
+            {prev && next && <ChangeArrow />}
             {next && (
               <DiffAnnotationCard
                 className={styles.annotation}

packages/@sanity/field/src/types/reference/diff/ReferenceFieldDiff.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../../diff'
 import styles from './ReferenceFieldDiff.css'
 import {useRefPreview} from '../../../diff/hooks'
-import {DiffLayout, MetaInfo} from '../../../diff/components'
+import {ChangeLayout, MetaInfo} from '../../../diff/components'
 
 // TODO: fix hooks error
 
@@ -19,7 +19,7 @@ export const ReferenceFieldDiff: DiffComponent<ReferenceDiff> = ({diff, schemaTy
 
   return (
     <DiffAnnotationTooltip as="div" diff={diff} path="_ref">
-      <DiffLayout
+      <ChangeLayout
         layout={prev && next ? 'grid' : 'inline'}
         from={
           prev && (