[field] Improve diff UI

sanity-io · Oct 6, 2020 · ba71dbf · ba71dbf
1 parent 9277284
commit ba71dbf
Show file tree

Hide file tree

Showing 26 changed files with 168 additions and 129 deletions.
diff --git a/packages/@sanity/field/src/diff/components/ChangeList.tsx b/packages/@sanity/field/src/diff/components/ChangeList.tsx
@@ -52,7 +52,7 @@ export function ChangeList({diff, fields, schemaType}: Props): React.ReactElemen
 
       {path.length === 0 && changes.length > 1 && (
         <div className={styles.revertAllContainer}>
-          <Button icon={UndoIcon} kind="secondary" onClick={handleRevertAllChanges}>
+          <Button color="danger" icon={UndoIcon} kind="secondary" onClick={handleRevertAllChanges}>
             Revert all changes
           </Button>
         </div>

diff --git a/packages/@sanity/field/src/diff/components/DiffCard.tsx b/packages/@sanity/field/src/diff/components/DiffCard.tsx
@@ -54,7 +54,7 @@ const DiffCardWithAnnotation = forwardRef(
     const elementProps = {
       ...restProps,
       className: classNames(styles.root, className),
-      'data-hover': disableHoverEffect ? undefined : '',
+      'data-hover': disableHoverEffect || !annotation ? undefined : '',
       ref,
       style: {backgroundColor: color.background, color: color.text, ...style}
     }

diff --git a/packages/@sanity/field/src/diff/components/DiffFromTo.tsx b/packages/@sanity/field/src/diff/components/DiffFromTo.tsx
@@ -10,6 +10,7 @@ import {FromTo} from './FromTo'
 import styles from './DiffFromTo.css'
 
 interface DiffFromToProps {
+  align?: 'top' | 'center' | 'bottom'
   cardClassName?: string
   diff: Diff
   layout?: 'grid' | 'inline'
@@ -19,7 +20,7 @@ interface DiffFromToProps {
 }
 
 export function DiffFromTo(props: DiffFromToProps) {
-  const {cardClassName, diff, layout, path, previewComponent, schemaType} = props
+  const {align, cardClassName, diff, layout, path, previewComponent, schemaType} = props
   const {action} = diff
   const changeVerb = getChangeVerb(diff)
 
@@ -31,27 +32,37 @@ export function DiffFromTo(props: DiffFromToProps) {
     )
   }
 
-  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 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>
+  )
+
+  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>
+  )
+
+  if (from && !to) {
+    return (
+      <DiffTooltip description={changeVerb} diff={diff} path={path}>
+        {from}
+      </DiffTooltip>
     )
+  }
 
-  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
+  if (!from && to) {
+    return (
+      <DiffTooltip description={changeVerb} diff={diff} path={path}>
+        {to}
+      </DiffTooltip>
     )
+  }
 
   return (
     <DiffTooltip description={changeVerb} diff={diff} path={path}>
-      <FromTo from={from} layout={layout} to={to} />
+      <FromTo align={align} from={from} layout={layout} to={to} />
     </DiffTooltip>
   )
 }
diff --git a/packages/@sanity/field/src/diff/components/DiffString.css b/packages/@sanity/field/src/diff/components/DiffString.css
@@ -19,6 +19,7 @@
     background-position-y: bottom;
     padding-bottom: 3px;
     box-shadow: 0 0 0 1px var(--component-bg);
+    z-index: 1;
   }
 }
 

diff --git a/packages/@sanity/field/src/diff/components/FieldChange.css b/packages/@sanity/field/src/diff/components/FieldChange.css
@@ -17,7 +17,7 @@
 
 .change {
   position: relative;
-  padding: var(--extra-small-padding) 0 0 var(--small-padding);
+  padding: var(--extra-small-padding) 0 var(--extra-small-padding) var(--small-padding);
 
   @nest &::before {
     content: '';
@@ -26,11 +26,11 @@
     top: 0;
     left: 0;
     bottom: 0;
-    border-left: 1px solid var(--hairline-color);
+    border-left: 1px solid var(--gray-lighter);
   }
 
   @nest &:hover::before {
-    border-left: 2px solid var(--gray-lighter);
+    border-left: 2px solid var(--gray-light);
   }
 
   @nest .revertHovered &::before {
@@ -45,5 +45,6 @@
 
 .revertChangesButtonContainer {
   margin-left: calc(0 - var(--extra-small-padding) - 2px);
-  margin-top: 0.25em;
+  margin-top: var(--extra-small-padding);
+  margin-bottom: calc(0 - var(--extra-small-padding));
 }
diff --git a/packages/@sanity/field/src/diff/components/FromTo.css b/packages/@sanity/field/src/diff/components/FromTo.css
@@ -1,34 +1,51 @@
 @import 'part:@sanity/base/theme/variables-style';
 
-.root {
-  display: flex;
-  align-items: center;
+:root {
+  --from-to-arrow-width: 25px;
+}
 
+.root {
   @nest &[data-from-to-layout='inline'] {
     display: inline-flex;
+    max-width: 100%;
   }
 
   @nest &[data-from-to-layout='grid'] {
-    /* display: grid;
-    grid-template-columns: 1fr auto 1fr; */
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--from-to-arrow-width) minmax(0, 1fr);
   }
 }
 
-.from,
-.to {
-  max-width: calc(50% - 13px);
-
-  @nest .root[data-from-to-layout='grid'] & {
-    flex: 1;
+.column {
+  @nest [data-from-to-layout='inline'] & {
     min-width: 0;
+    flex-shrink: 1;
+    flex-basis: 1;
   }
 }
 
+.arrow {
+  padding: calc(var(--extra-small-padding) + 2px) var(--extra-small-padding);
+}
+
+.column,
 .arrow {
   display: flex;
-  padding: 0 var(--extra-small-padding);
-  align-items: center;
-  font-size: var(--font-size-large);
-  line-height: var(--line-height-large);
-  color: var(--text-muted);
+
+  @nest & > * {
+    min-width: 0;
+    min-height: 0;
+  }
+
+  @nest .root[data-from-to-align='top'] > & {
+    align-items: flex-start;
+  }
+
+  @nest .root[data-from-to-align='center'] > & {
+    align-items: center;
+  }
+
+  @nest .root[data-from-to-align='bottom'] > & {
+    align-items: flex-end;
+  }
 }
diff --git a/packages/@sanity/field/src/diff/components/FromTo.tsx b/packages/@sanity/field/src/diff/components/FromTo.tsx
@@ -1,45 +1,39 @@
 import classNames from 'classnames'
 import React, {forwardRef} from 'react'
-import ArrowIcon from 'part:@sanity/base/arrow-right'
+import {FromToArrow} from './FromToArrow'
 
 import styles from './FromTo.css'
 
 export interface FromToProps {
+  align?: 'top' | 'center' | 'bottom'
   layout?: 'grid' | 'inline'
-  from?: React.ReactElement | boolean | null | ''
-  to?: React.ReactElement | boolean | null | ''
-  children?: React.ReactNode
+  from?: React.ReactNode
+  to?: React.ReactNode
 }
 
-export const FromToArrow = () => (
-  <div className={styles.arrow}>
-    <ArrowIcon />
-  </div>
-)
-
 export const FromTo = forwardRef(
   (
     {
-      children,
+      align = 'top',
       className,
       layout = 'inline',
       from,
       to,
       ...restProps
-    }: FromToProps & React.HTMLProps<HTMLDivElement>,
+    }: FromToProps & Omit<React.HTMLProps<HTMLDivElement>, 'children'>,
     ref
   ) => {
     return (
       <div
         {...restProps}
         className={classNames(styles.root, className)}
+        data-from-to-align={align}
         data-from-to-layout={layout}
         ref={ref as any}
       >
-        {from && <div className={styles.from}>{from}</div>}
-        {from && to && <FromToArrow />}
-        {to && <div className={styles.to}>{to}</div>}
-        {children}
+        <div className={styles.column}>{from}</div>
+        <FromToArrow className={styles.arrow} />
+        <div className={styles.column}>{to}</div>
       </div>
     )
   }

diff --git a/packages/@sanity/field/src/diff/components/FromToArrow.css b/packages/@sanity/field/src/diff/components/FromToArrow.css
@@ -0,0 +1,10 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.root {
+  color: var(--text-muted);
+
+  @nest & > svg {
+    display: block;
+    font-size: calc(17 / 16 * 1rem);
+  }
+}
diff --git a/packages/@sanity/field/src/diff/components/FromToArrow.tsx b/packages/@sanity/field/src/diff/components/FromToArrow.tsx
@@ -0,0 +1,22 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import styles from './FromToArrow.css'
+
+export const FromToArrow = ({
+  className,
+  ...restProps
+}: Omit<React.HTMLProps<HTMLDivElement>, 'children'>) => (
+  <div {...restProps} className={classNames(styles.root, className)}>
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 17 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M4 8.5L12 8.5" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M9 5.5L12 8.5L9 11.5" stroke="currentColor" strokeWidth="1.2" />
+    </svg>
+  </div>
+)
diff --git a/packages/@sanity/field/src/diff/components/GroupChange.css b/packages/@sanity/field/src/diff/components/GroupChange.css
@@ -17,7 +17,7 @@
     top: 0;
     left: 0;
     bottom: 0;
-    border-left: 1px solid var(--hairline-color);
+    border-left: 1px solid var(--gray-lighter);
   }
 }
 

diff --git a/packages/@sanity/field/src/diff/components/index.ts b/packages/@sanity/field/src/diff/components/index.ts
@@ -6,5 +6,6 @@ export * from './DiffString'
 export * from './DiffTooltip'
 export * from './DocumentChangeContext'
 export * from './FromTo'
+export * from './FromToArrow'
 export * from './MetaInfo'
 export * from './NoChanges'
diff --git a/packages/@sanity/field/src/types/boolean/diff/BooleanFieldDiff.tsx b/packages/@sanity/field/src/types/boolean/diff/BooleanFieldDiff.tsx
@@ -21,7 +21,7 @@ export const BooleanFieldDiff: DiffComponent<BooleanDiff> = ({diff, schemaType})
         <Preview checked={fromValue} color={userColor} />
         {toValue !== undefined && toValue !== null && (
           <>
-            <FromToArrow />
+            <FromToArrow style={{padding: '0 2px'}} />
             <div className={styles.label}>
               <Preview checked={toValue} color={userColor} />
               {title && <div className={styles.title}>{title}</div>}

diff --git a/packages/@sanity/field/src/types/datetime/diff/DatetimeFieldDiff.css b/packages/@sanity/field/src/types/datetime/diff/DatetimeFieldDiff.css
@@ -0,0 +1,7 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.card {
+  display: inline-block;
+  padding: calc(var(--small-padding) - 4px) var(--small-padding) calc(var(--small-padding) - 3px);
+  word-break: break-all;
+}
diff --git a/packages/@sanity/field/src/types/datetime/diff/DatetimeFieldDiff.tsx b/packages/@sanity/field/src/types/datetime/diff/DatetimeFieldDiff.tsx
@@ -2,11 +2,14 @@ import React from 'react'
 import {DiffComponent, DiffFromTo, StringDiff} from '../../../diff'
 import {DatetimePreview} from '../preview'
 
+import styles from './DatetimeFieldDiff.css'
+
 export const DatetimeFieldDiff: DiffComponent<StringDiff> = ({diff, schemaType}) => {
   return (
     <DiffFromTo
+      align="center"
+      cardClassName={styles.card}
       diff={diff}
-      layout="grid"
       schemaType={schemaType}
       previewComponent={DatetimePreview}
     />

diff --git a/packages/@sanity/field/src/types/datetime/preview/DatetimePreview.css b/packages/@sanity/field/src/types/datetime/preview/DatetimePreview.css
diff --git a/packages/@sanity/field/src/types/datetime/preview/DatetimePreview.tsx b/packages/@sanity/field/src/types/datetime/preview/DatetimePreview.tsx
@@ -3,24 +3,11 @@ import format from 'date-fns/format'
 import {StringSchemaType} from '../../../diff'
 import {PreviewComponent} from '../../../preview/types'
 
-import styles from './DatetimePreview.css'
-
 export const DatetimePreview: PreviewComponent<string> = function DatetimePreview({
-  color,
   value,
   schemaType
 }) {
-  return (
-    <span
-      className={styles.root}
-      style={{
-        background: color?.background,
-        color: color?.text
-      }}
-    >
-      {formatDate(value, schemaType)}
-    </span>
-  )
+  return <>{formatDate(value, schemaType)}</>
 }
 
 function formatDate(value: string, schemaType: StringSchemaType): string {

diff --git a/packages/@sanity/field/src/types/image/diff/ImageFieldDiff.css b/packages/@sanity/field/src/types/image/diff/ImageFieldDiff.css
@@ -4,6 +4,7 @@
 }
 
 .annotation {
+  align-self: stretch;
   border-radius: var(--border-radius-small);
 }