[field] fix tooltip position in boolean diff

sanity-io · Oct 6, 2020 · 23139e3 · 23139e3
1 parent 59df4cf
commit 23139e3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/packages/@sanity/field/src/types/boolean/diff/BooleanFieldDiff.css b/packages/@sanity/field/src/types/boolean/diff/BooleanFieldDiff.css
@@ -5,9 +5,9 @@
   align-items: center;
 }
 
+.preview,
 .label {
-  display: flex;
-  align-items: center;
+  composes: root;
 }
 
 .title {

diff --git a/packages/@sanity/field/src/types/boolean/diff/BooleanFieldDiff.tsx b/packages/@sanity/field/src/types/boolean/diff/BooleanFieldDiff.tsx
@@ -15,20 +15,24 @@ export const BooleanFieldDiff: DiffComponent<BooleanDiff> = ({diff, schemaType})
   const Preview = options?.layout === 'checkbox' ? Checkbox : Switch
   const userColor = useDiffAnnotationColor(diff, []) || {background: '', text: '', border: ''}
 
+  const showToValue = toValue !== undefined && toValue !== null
+
   return (
-    <DiffTooltip diff={diff}>
-      <div className={styles.root}>
-        <Preview checked={fromValue} color={userColor} />
-        {toValue !== undefined && toValue !== null && (
-          <>
-            <FromToArrow style={{padding: '0 2px'}} />
-            <div className={styles.label}>
+    <div className={styles.root}>
+      <DiffTooltip diff={diff}>
+        <div className={styles.preview}>
+          <Preview checked={fromValue} color={userColor} />
+          {showToValue && (
+            <>
+              <FromToArrow style={{padding: '0 2px'}} />
               <Preview checked={toValue} color={userColor} />
-              {title && <div className={styles.title}>{title}</div>}
-            </div>
-          </>
-        )}
-      </div>
-    </DiffTooltip>
+            </>
+          )}
+        </div>
+      </DiffTooltip>
+      {showToValue && (
+        <div className={styles.label}>{title && <div className={styles.title}>{title}</div>}</div>
+      )}
+    </div>
   )
 }