[field] Improve diff UI

sanity-io · Oct 6, 2020 · 467d996 · 467d996
1 parent 0b0a942
commit 467d996
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 40 deletions.
diff --git a/packages/@sanity/field/src/diff/components/DiffCard.css b/packages/@sanity/field/src/diff/components/DiffCard.css
@@ -39,3 +39,7 @@
     }
   }
 }
+
+ins.root {
+  text-decoration: none;
+}
diff --git a/packages/@sanity/field/src/diff/components/DiffFromTo.css b/packages/@sanity/field/src/diff/components/DiffFromTo.css
@@ -0,0 +1,3 @@
+.card {
+  display: block;
+}
diff --git a/packages/@sanity/field/src/diff/components/DiffFromTo.tsx b/packages/@sanity/field/src/diff/components/DiffFromTo.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import {Path, SchemaType} from '@sanity/types'
 import React, {createElement} from 'react'
 import {getChangeVerb, Diff} from '../../diff'
@@ -6,6 +7,8 @@ import {DiffCard} from './DiffCard'
 import {DiffTooltip} from './DiffTooltip'
 import {FromTo} from './FromTo'
 
+import styles from './DiffFromTo.css'
+
 interface DiffFromToProps {
   cardClassName?: string
   diff: Diff
@@ -17,31 +20,34 @@ interface DiffFromToProps {
 
 export function DiffFromTo(props: DiffFromToProps) {
   const {cardClassName, diff, layout, path, previewComponent, schemaType} = props
+  const {action} = diff
   const changeVerb = getChangeVerb(diff)
 
+  if (action === 'unchanged') {
+    return <DiffCard>{createElement(previewComponent, {schemaType, value: diff.toValue})}</DiffCard>
+  }
+
+  const from =
+    diff.fromValue !== undefined && diff.fromValue !== null ? (
+      <DiffCard as="del" className={classNames(styles.card, cardClassName)} diff={diff} path={path}>
+        {createElement(previewComponent, {schemaType, value: diff.fromValue})}
+      </DiffCard>
+    ) : (
+      undefined
+    )
+
+  const to =
+    diff.toValue !== undefined && diff.toValue !== null ? (
+      <DiffCard as="ins" className={classNames(styles.card, cardClassName)} diff={diff} path={path}>
+        {createElement(previewComponent, {schemaType, value: diff.toValue})}
+      </DiffCard>
+    ) : (
+      undefined
+    )
+
   return (
     <DiffTooltip description={changeVerb} diff={diff} path={path}>
-      <FromTo
-        from={
-          diff.fromValue !== undefined && diff.fromValue !== null ? (
-            <DiffCard className={cardClassName} diff={diff} path={path}>
-              <del>{createElement(previewComponent, {schemaType, value: diff.fromValue})}</del>
-            </DiffCard>
-          ) : (
-            undefined
-          )
-        }
-        layout={layout}
-        to={
-          diff.toValue !== undefined && diff.toValue !== null ? (
-            <DiffCard className={cardClassName} diff={diff} path={path}>
-              <ins>{createElement(previewComponent, {schemaType, value: diff.toValue})}</ins>
-            </DiffCard>
-          ) : (
-            undefined
-          )
-        }
-      />
+      <FromTo from={from} layout={layout} to={to} />
     </DiffTooltip>
   )
 }
diff --git a/packages/@sanity/field/src/types/number/preview/NumberPreview.tsx b/packages/@sanity/field/src/types/number/preview/NumberPreview.tsx
@@ -4,11 +4,7 @@ import {PreviewComponent} from '../../../preview/types'
 import styles from './NumberPreview.css'
 
 export const NumberPreview: PreviewComponent<string> = props => {
-  const {color, value} = props
+  const {value} = props
 
-  return (
-    <span className={styles.root} style={{background: color?.background, color: color?.text}}>
-      {value}
-    </span>
-  )
+  return <span className={styles.root}>{value}</span>
 }
diff --git a/packages/@sanity/field/src/types/reference/diff/ReferenceFieldDiff.css b/packages/@sanity/field/src/types/reference/diff/ReferenceFieldDiff.css
diff --git a/packages/@sanity/field/src/types/reference/preview/ReferencePreview.tsx b/packages/@sanity/field/src/types/reference/preview/ReferencePreview.tsx
@@ -6,8 +6,8 @@ import {PreviewComponent} from '../../../preview/types'
 
 import styles from './ReferencePreview.css'
 
-export const ReferencePreview: PreviewComponent<Reference> = ({color, value, schemaType}) => (
-  <div className={styles.root} style={{background: color?.background, color: color?.text}}>
+export const ReferencePreview: PreviewComponent<Reference> = ({value, schemaType}) => (
+  <div className={styles.root}>
     <Preview type={getReferencedType(schemaType)} value={value} layout="default" />
   </div>
 )
diff --git a/packages/@sanity/field/src/types/string/preview/StringPreview.tsx b/packages/@sanity/field/src/types/string/preview/StringPreview.tsx
@@ -4,11 +4,7 @@ import {PreviewComponent} from '../../../preview/types'
 import styles from './StringPreview.css'
 
 export const StringPreview: PreviewComponent<string> = props => {
-  const {color, value} = props
+  const {value} = props
 
-  return (
-    <span className={styles.root} style={{background: color?.background, color: color?.text}}>
-      {value}
-    </span>
-  )
+  return <span className={styles.root}>{value}</span>
 }