From 97aae6beebe977f4068e38bd4263f94fee0aa7aa Mon Sep 17 00:00:00 2001
From: Jordan Lawrence <jordanl17@me.com>
Date: Mon, 6 May 2024 17:14:02 +0100
Subject: [PATCH 1/3] fix(studio): adding tooltip to read-only bool inputs

---
 dev/test-studio/schema/standard/booleans.ts   | 20 +++++++-----
 .../src/core/form/inputs/BooleanInput.tsx     | 31 +++++++++++++------
 .../sanity/src/core/i18n/bundles/studio.ts    |  2 ++
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/dev/test-studio/schema/standard/booleans.ts b/dev/test-studio/schema/standard/booleans.ts
index f74300b7d3a..c3ac640080a 100644
--- a/dev/test-studio/schema/standard/booleans.ts
+++ b/dev/test-studio/schema/standard/booleans.ts
@@ -20,11 +20,23 @@ export default defineType({
       title: 'Title',
     },
     {
-      name: 'switchTest',
+      name: 'switch_doesnt_exist',
       type: 'boolean',
       title: `I'm a switch`,
       description: 'Try toggling me! This is the new switch design',
     },
+    {
+      name: 'switchTest',
+      type: 'boolean',
+      title: `true & Read only`,
+      readOnly: true,
+    },
+    {
+      name: 'switch',
+      type: 'boolean',
+      title: `false & Read only`,
+      readOnly: true,
+    },
     {
       name: 'switchIndeterminate2',
       type: 'boolean',
@@ -42,12 +54,6 @@ export default defineType({
         layout: 'checkbox',
       },
     },
-    {
-      name: 'switch',
-      type: 'boolean',
-      description: 'Should be either true or false',
-      title: 'Check me?',
-    },
     {
       name: 'checkbox',
       type: 'boolean',
diff --git a/packages/sanity/src/core/form/inputs/BooleanInput.tsx b/packages/sanity/src/core/form/inputs/BooleanInput.tsx
index 22f86548165..7bff16a5893 100644
--- a/packages/sanity/src/core/form/inputs/BooleanInput.tsx
+++ b/packages/sanity/src/core/form/inputs/BooleanInput.tsx
@@ -1,6 +1,9 @@
 import {Box, Card, type CardTone, Checkbox, Flex, Switch} from '@sanity/ui'
+import {useMemo} from 'react'
 import {styled} from 'styled-components'
 
+import {Tooltip} from '../../../ui-components'
+import {useTranslation} from '../../i18n/hooks/useTranslation'
 import {FormFieldHeaderText} from '../components/formField/FormFieldHeaderText'
 import {FormFieldStatus} from '../components/formField/FormFieldStatus'
 import {type BooleanInputProps} from '../types'
@@ -23,6 +26,7 @@ const ZeroLineHeightBox = styled(Box)`
  * @beta
  */
 export function BooleanInput(props: BooleanInputProps) {
+  const {t} = useTranslation()
   const {id, value, schemaType, readOnly, elementProps, validation} = props
   const layout = schemaType.options?.layout || 'switch'
 
@@ -33,19 +37,26 @@ export function BooleanInput(props: BooleanInputProps) {
 
   const tone: CardTone | undefined = readOnly ? 'transparent' : undefined
 
+  const input = useMemo(
+    () => (
+      <ZeroLineHeightBox padding={3}>
+        <LayoutSpecificInput
+          label={schemaType.title}
+          {...elementProps}
+          checked={checked}
+          readOnly={readOnly}
+          indeterminate={indeterminate}
+          style={{margin: -4}}
+        />
+      </ZeroLineHeightBox>
+    ),
+    [LayoutSpecificInput, checked, elementProps, indeterminate, readOnly, schemaType.title],
+  )
+
   return (
     <Root border data-testid="boolean-input" radius={2} tone={tone}>
       <Flex>
-        <ZeroLineHeightBox padding={3}>
-          <LayoutSpecificInput
-            label={schemaType.title}
-            {...elementProps}
-            checked={checked}
-            disabled={readOnly}
-            indeterminate={indeterminate}
-            style={{margin: -4}}
-          />
-        </ZeroLineHeightBox>
+        {readOnly ? <Tooltip content={t('inputs.boolean.disabled')}>{input}</Tooltip> : input}
         <Box flex={1} paddingY={2}>
           <FormFieldHeaderText
             deprecated={schemaType.deprecated}
diff --git a/packages/sanity/src/core/i18n/bundles/studio.ts b/packages/sanity/src/core/i18n/bundles/studio.ts
index 36be5a77e6a..aa5d013d67a 100644
--- a/packages/sanity/src/core/i18n/bundles/studio.ts
+++ b/packages/sanity/src/core/i18n/bundles/studio.ts
@@ -506,6 +506,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.array.read-only-label': 'This field is read-only',
   /** Label for when the array input is resolving the initial value for the item */
   'inputs.array.resolving-initial-value': 'Resolving initial value…',
+  /** Tooltip content when boolean input is disabled */
+  'inputs.boolean.disabled': 'Disabled',
   /** Placeholder value for datetime input */
   'inputs.datetime.placeholder': 'e.g. {{example}}',
   /** Acessibility label for button to open file options menu */

From a35d86c2c99fc7820260be9807079206af31d491 Mon Sep 17 00:00:00 2001
From: Jordan Lawrence <jordanl17@me.com>
Date: Mon, 6 May 2024 18:54:09 +0100
Subject: [PATCH 2/3] fix(studio): testing for tooltip on boolean read-only
 inputs

---
 .../src/core/form/inputs/BooleanInput.test.tsx      | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/sanity/src/core/form/inputs/BooleanInput.test.tsx b/packages/sanity/src/core/form/inputs/BooleanInput.test.tsx
index 6c7fe3ab473..1742f78d744 100644
--- a/packages/sanity/src/core/form/inputs/BooleanInput.test.tsx
+++ b/packages/sanity/src/core/form/inputs/BooleanInput.test.tsx
@@ -1,5 +1,6 @@
 import {describe, expect, it} from '@jest/globals'
 import {defineField} from '@sanity/types'
+import {fireEvent, screen, waitFor} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import {renderBooleanInput} from '../../../../test/form/renderBooleanInput'
@@ -171,6 +172,18 @@ describe('readOnly property', () => {
     expect(input).not.toHaveFocus()
   })
 
+  it('renders a tooltip on the switch', async () => {
+    const {container} = await renderBooleanInput({
+      fieldDefinition: defs.booleanReadOnly,
+      render: (inputProps) => <BooleanInput {...inputProps} readOnly />,
+    })
+
+    const input = container.querySelector('input[id="booleanReadOnly"]')
+    fireEvent.mouseEnter(input!)
+
+    await waitFor(() => screen.getByText('Disabled'))
+  })
+
   it('does not make field read-only with callback', async () => {
     const {onChange, result} = await renderBooleanInput({
       fieldDefinition: defs.readOnlyCallback,

From f5d317976181d0110e564211cdde6bd4356d6073 Mon Sep 17 00:00:00 2001
From: Jordan Lawrence <jordanl17@me.com>
Date: Tue, 7 May 2024 10:35:26 +0100
Subject: [PATCH 3/3] fix(studio): removing memoisation as it was useless

---
 .../src/core/form/inputs/BooleanInput.tsx     | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/BooleanInput.tsx b/packages/sanity/src/core/form/inputs/BooleanInput.tsx
index 7bff16a5893..3442c6d42d3 100644
--- a/packages/sanity/src/core/form/inputs/BooleanInput.tsx
+++ b/packages/sanity/src/core/form/inputs/BooleanInput.tsx
@@ -1,5 +1,4 @@
 import {Box, Card, type CardTone, Checkbox, Flex, Switch} from '@sanity/ui'
-import {useMemo} from 'react'
 import {styled} from 'styled-components'
 
 import {Tooltip} from '../../../ui-components'
@@ -37,20 +36,17 @@ export function BooleanInput(props: BooleanInputProps) {
 
   const tone: CardTone | undefined = readOnly ? 'transparent' : undefined
 
-  const input = useMemo(
-    () => (
-      <ZeroLineHeightBox padding={3}>
-        <LayoutSpecificInput
-          label={schemaType.title}
-          {...elementProps}
-          checked={checked}
-          readOnly={readOnly}
-          indeterminate={indeterminate}
-          style={{margin: -4}}
-        />
-      </ZeroLineHeightBox>
-    ),
-    [LayoutSpecificInput, checked, elementProps, indeterminate, readOnly, schemaType.title],
+  const input = (
+    <ZeroLineHeightBox padding={3}>
+      <LayoutSpecificInput
+        label={schemaType.title}
+        {...elementProps}
+        checked={checked}
+        readOnly={readOnly}
+        indeterminate={indeterminate}
+        style={{margin: -4}}
+      />
+    </ZeroLineHeightBox>
   )
 
   return (