[field] fix double annotion tooltip and border

sanity-io · Oct 6, 2020 · 73e46b0 · 73e46b0
1 parent c99db33
commit 73e46b0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 40 deletions.
diff --git a/packages/@sanity/field/src/diff/components/Change.css b/packages/@sanity/field/src/diff/components/Change.css
@@ -1,18 +1,16 @@
 @import 'part:@sanity/base/theme/variables-style';
 
 .root {
+  box-shadow: 0 2px 0 var(--component-bg);
+  transition: box-shadow 0.2s linear;
+
   @nest &:hover .segment {
     border-bottom: 1px solid var(--component-bg);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    box-shadow: 0 2px 0 currentColor;
+  }
 
-    @nest &::after {
-      border-bottom-left-radius: 1px;
-      border-bottom-right-radius: 1px;
-      background: currentColor;
-      transform: translate3d(0, 1px, 0);
-      opacity: 1;
-    }
+  @nest & > div {
+    display: inline-block;
   }
 }
 
@@ -23,25 +21,12 @@
   margin: 3px 0;
   border-bottom: 1px solid transparent;
   word-break: break-all;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   overflow: hidden;
-
-  @nest &::after {
-    position: absolute;
-    bottom: -2px;
-    left: 0;
-    content: '';
-    width: 100%;
-    height: 2px;
-    transition: all 0.2s ease-in-out;
-    opacity: 0;
-  }
+  text-decoration: none;
 }
 
 .add {
   composes: segment;
-  text-decoration: none; /* remove underline from <ins> */
 }
 
 .remove {

diff --git a/packages/@sanity/field/src/diff/components/Change.tsx b/packages/@sanity/field/src/diff/components/Change.tsx
@@ -36,36 +36,26 @@ export function Change({
   }
 
   const from = hasValue(fromValue) ? (
-    <DiffAnnotationTooltip
-      as="del"
-      className={styles.remove}
-      annotation={annotation}
-      style={colorStyle}
-      description={description}
-    >
+    <ins className={styles.remove} style={colorStyle}>
       <PreviewComponent value={fromValue} schemaType={schemaType} />
-    </DiffAnnotationTooltip>
+    </ins>
   ) : (
     undefined
   )
 
   const to = hasValue(toValue) ? (
-    <DiffAnnotationTooltip
-      as="ins"
-      className={styles.add}
-      annotation={annotation}
-      style={colorStyle}
-      description={description}
-    >
+    <del className={styles.add} style={colorStyle}>
       <PreviewComponent value={toValue} schemaType={schemaType} />
-    </DiffAnnotationTooltip>
+    </del>
   ) : (
     undefined
   )
 
   return (
     <div className={containerClassName}>
-      <ChangeLayout from={from} to={to} layout={layout} />
+      <DiffAnnotationTooltip annotation={annotation} description={description}>
+        <ChangeLayout from={from} to={to} layout={layout} />
+      </DiffAnnotationTooltip>
     </div>
   )
 }