chore(core): improvements to diff component styles and presentation (#…

…7385) * chore(core): improvements to diff component styles and presentation * chore(core): removing unused listener hook * chore(core): tidying updates to reference search input observers * chore(core): reverting changes to collation for reference search
sanity-io · Aug 29, 2024 · 35b6600 · 35b6600
1 parent 57384e6
commit 35b6600
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 16 deletions.
diff --git a/packages/sanity/src/core/field/__workshop__/ChangeResolverStory.tsx b/packages/sanity/src/core/field/__workshop__/ChangeResolverStory.tsx
@@ -103,6 +103,7 @@ export default function ChangeResolverStory() {
       rootDiff: diff,
       schemaType,
       value: {name: 'Test'},
+      showFromValue: true,
     }),
     [diff, documentId, FieldWrapper, schemaType],
   )

diff --git a/packages/sanity/src/core/field/diff/components/DiffCard.tsx b/packages/sanity/src/core/field/diff/components/DiffCard.tsx
@@ -17,13 +17,19 @@ export interface DiffCardProps {
   tooltip?: {description?: ReactNode} | boolean
 }
 
-const StyledCard = styled(Card)`
+interface StyledCardProps {
+  $annotationColor: {backgroundColor: string; color: string}
+}
+
+const StyledCard = styled(Card)<StyledCardProps>`
   --diff-card-radius: ${({theme}) => rem(theme.sanity.radius[2])};
   --diff-card-bg-color: ${({theme}) => theme.sanity.color.card.enabled.bg};
 
   max-width: 100%;
   position: relative;
   border-radius: var(--diff-card-radius);
+  background-color: ${({$annotationColor}) => $annotationColor.backgroundColor};
+  color: ${({$annotationColor}) => $annotationColor.color};
 
   &:not(del) {
     text-decoration: none;
@@ -100,13 +106,12 @@ export const DiffCard = forwardRef(function DiffCard(
       as={as}
       className={className}
       data-hover={disableHoverEffect || !annotation ? undefined : ''}
+      data-ui="diff-card"
       ref={ref}
       radius={1}
-      style={{
-        ...style,
-        backgroundColor: color.background,
-        color: color.text,
-      }}
+      // Added annotation color to the card using css to make it possible to override by the ReleaseReview
+      $annotationColor={{backgroundColor: color.background, color: color.text}}
+      style={style}
     >
       {children}
     </StyledCard>

diff --git a/packages/sanity/src/core/field/diff/components/FieldChange.tsx b/packages/sanity/src/core/field/diff/components/FieldChange.tsx
@@ -96,6 +96,7 @@ export function FieldChange(
               data-revert-field-hover={revertHovered ? '' : undefined}
               data-error={change.error ? '' : undefined}
               data-revert-all-hover
+              data-ui="field-diff-inspect-wrapper"
             >
               {change.error ? (
                 <ValueError error={change.error} />

diff --git a/packages/sanity/src/core/field/diff/components/GroupChange.tsx b/packages/sanity/src/core/field/diff/components/GroupChange.tsx
@@ -81,10 +81,11 @@ export function GroupChange(
         <Stack
           space={1}
           as={GroupChangeContainer}
+          data-ui="group-change-content"
           data-revert-group-hover={isRevertButtonHovered ? '' : undefined}
           data-portable-text={isPortableText ? '' : undefined}
         >
-          <Stack as={ChangeListWrapper} space={5}>
+          <Stack as={ChangeListWrapper} space={5} data-ui="group-change-list">
             {changes.map((change) => (
               <ChangeResolver
                 key={change.key}

diff --git a/packages/sanity/src/core/field/diff/contexts/DocumentChangeContext.tsx b/packages/sanity/src/core/field/diff/contexts/DocumentChangeContext.tsx
@@ -11,4 +11,9 @@ export type DocumentChangeContextInstance = {
   isComparingCurrent: boolean
   FieldWrapper: ComponentType<{path: Path; children: ReactNode; hasHover: boolean}>
   value: Partial<SanityDocument>
+  /**
+   * When comparing two values it decides if it shows the original "from" value in the Diff components.
+   * Useful for the DocumentDiff in releases when showing the diff for a new document.
+   */
+  showFromValue: boolean
 }
diff --git a/packages/sanity/src/core/field/types/boolean/diff/BooleanFieldDiff.tsx b/packages/sanity/src/core/field/types/boolean/diff/BooleanFieldDiff.tsx
@@ -1,6 +1,6 @@
 import {Box, Flex, Text} from '@sanity/ui'
 
-import {DiffTooltip, FromToArrow, useDiffAnnotationColor} from '../../../diff'
+import {DiffTooltip, FromToArrow, useDiffAnnotationColor, useDocumentChange} from '../../../diff'
 import {type BooleanDiff, type DiffComponent} from '../../../types'
 import {Checkbox, Switch} from '../preview'
 
@@ -9,20 +9,22 @@ export const BooleanFieldDiff: DiffComponent<BooleanDiff> = ({diff, schemaType})
   const {title, options} = schemaType
   const Preview = options?.layout === 'checkbox' ? Checkbox : Switch
   const userColor = useDiffAnnotationColor(diff, [])
-
+  const {showFromValue} = useDocumentChange()
   const showToValue = toValue !== undefined && toValue !== null
 
   return (
     <Flex align="center">
       <DiffTooltip diff={diff}>
         <Flex align="center">
-          <Preview checked={fromValue} color={userColor} />
+          {showFromValue && <Preview checked={fromValue} color={userColor} />}
 
           {showToValue && (
             <>
-              <Box marginX={2}>
-                <FromToArrow />
-              </Box>
+              {showFromValue && (
+                <Box marginX={2}>
+                  <FromToArrow />
+                </Box>
+              )}
               <Preview checked={toValue} color={userColor} />
             </>
           )}

diff --git a/packages/sanity/src/core/field/types/image/diff/ImageFieldDiff.tsx b/packages/sanity/src/core/field/types/image/diff/ImageFieldDiff.tsx
@@ -2,7 +2,13 @@ import {type Image} from '@sanity/types'
 import {Box, Card, Text} from '@sanity/ui'
 
 import {type TFunction, useTranslation} from '../../../../i18n'
-import {ChangeList, DiffCard, DiffTooltip, getAnnotationAtPath} from '../../../diff'
+import {
+  ChangeList,
+  DiffCard,
+  DiffTooltip,
+  getAnnotationAtPath,
+  useDocumentChange,
+} from '../../../diff'
 import {FromTo} from '../../../diff/components'
 import {type DiffComponent, type ObjectDiff} from '../../../types'
 import {ImagePreview, NoImagePreview} from './ImagePreview'
@@ -16,7 +22,7 @@ const CARD_STYLES = {
 
 export const ImageFieldDiff: DiffComponent<ObjectDiff<Image>> = ({diff, schemaType}) => {
   const {t} = useTranslation()
-
+  const {showFromValue} = useDocumentChange()
   const {fromValue, toValue, fields, isChanged} = diff
   const fromRef = fromValue?.asset?._ref
   const toRef = toValue?.asset?._ref
@@ -96,7 +102,9 @@ export const ImageFieldDiff: DiffComponent<ObjectDiff<Image>> = ({diff, schemaTy
     ) : null
   }
 
-  const imageDiff = <FromTo align="center" from={from} layout="grid" to={to} />
+  const imageDiff = (
+    <FromTo align="center" from={showFromValue ? from : undefined} layout="grid" to={to} />
+  )
 
   return (
     <>

diff --git a/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx b/packages/sanity/src/core/store/_legacy/__workshop__/HistoryTimelineStory.tsx
@@ -89,6 +89,7 @@ export default function HistoryTimelineStory() {
       rootDiff: diff,
       isComparingCurrent,
       value,
+      showFromValue: true,
     }),
     [diff, documentId, isComparingCurrent, schemaType, value],
   )

diff --git a/packages/sanity/src/structure/panes/document/inspectors/changes/ChangesInspector.tsx b/packages/sanity/src/structure/panes/document/inspectors/changes/ChangesInspector.tsx
@@ -55,6 +55,7 @@ export function ChangesInspector(props: DocumentInspectorProps): ReactElement {
       rootDiff: diff,
       isComparingCurrent,
       value,
+      showFromValue: true,
     }),
     [documentId, diff, isComparingCurrent, schemaType, value],
   )