[desk-tool] add boolean diff

packages/@sanity/desk-tool/src/diffs/boolean/BooleanFieldDiff.css

@@ -1,2 +1,28 @@
+@import 'part:@sanity/base/theme/variables-style';
+
 .root {
+  display: flex;
+  padding: var(--small-padding);
 }
+
+.arrow {
+  display: flex;
+  align-self: flex-start;
+  padding: 0 var(--small-padding);
+  flex: 0;
+  font-size: var(--font-size-large);
+}
+
+/* TODO: find less hacky solution to prevent focus styles */
+
+.input:focus-within {
+  @nest & div[class*="switchWrapper"] {
+    border-color: transparent;
+  }
+  @nest & div[class*="Checkbox_checkbox"] {
+    border-color: var(--gray-light);
+    @nest &::before {
+      content: unset;
+    }
+  }
+}

packages/@sanity/desk-tool/src/diffs/boolean/BooleanFieldDiff.tsx

@@ -1,19 +1,30 @@
-import React from 'react'
-import {DiffComponent, BooleanDiff, DiffAnnotation} from '@sanity/field/diff'
+import React, {useRef} from 'react'
+import {DiffComponent, BooleanDiff, DiffAnnotationTooltip} from '@sanity/field/diff'
+import SwitchInput from 'part:@sanity/components/toggles/switch'
+import CheckboxInput from 'part:@sanity/components/toggles/checkbox'
+import ArrowIcon from 'part:@sanity/base/arrow-right'
 import styles from './BooleanFieldDiff.css'
 
-export const BooleanFieldDiff: DiffComponent<BooleanDiff> = ({diff}) => {
+export const BooleanFieldDiff: DiffComponent<BooleanDiff> = ({diff, schemaType}) => {
   const {fromValue, toValue} = diff
-
+  const inputRefFrom = useRef<any>(fromValue)
+  const {title, options} = schemaType
+  const Input = options?.layout === 'checkbox' ? CheckboxInput : SwitchInput
   return (
-    <DiffAnnotation as="div" className={styles.root} diff={diff}>
-      {fromValue !== undefined && fromValue !== null && (
-        <input type="checkbox" checked={fromValue} readOnly />
-      )}
-      {diff.action === 'changed' && <span>&rarr;</span>}
+    <DiffAnnotationTooltip as="div" className={styles.root} diff={diff}>
+      <div className={styles.input}>
+        <Input checked={fromValue} ref={inputRefFrom} />
+      </div>
       {toValue !== undefined && toValue !== null && (
-        <input type="checkbox" checked={toValue} readOnly />
+        <>
+          <div className={styles.arrow}>
+            <ArrowIcon />
+          </div>
+          <div className={styles.input}>
+            <Input checked={toValue} label={title} />
+          </div>
+        </>
       )}
-    </DiffAnnotation>
+    </DiffAnnotationTooltip>
   )
 }

packages/@sanity/field/src/diff/types.ts

@@ -119,6 +119,9 @@ export interface NumberSchemaType extends BaseSchemaType {
 
 export interface BooleanSchemaType extends BaseSchemaType {
   jsonType: 'boolean'
+  options?: {
+    layout: 'checkbox' | 'switch'
+  }
 }
 
 export interface ArraySchemaType<V = unknown> extends BaseSchemaType {